// Home — daily dashboard. Fully interactive.

const homeStyles = {
  scroll: { padding: '0 16px 220px', direction: 'rtl', height: '100%', overflow: 'auto' },

  hero: {
    background: 'linear-gradient(135deg, var(--surface-invert), rgba(0,106,96,0.88))',
    color: 'var(--fg-on-invert)',
    border: '1px solid rgba(255,255,255,0.10)',
    borderRadius: 22, padding: '18px 20px 18px',
    margin: '4px 0 22px', position: 'relative', overflow: 'hidden',
    boxShadow: 'var(--shadow-float), var(--shadow-press)',
  },
  heroMotif: {
    position: 'absolute', insetInlineEnd: -28, top: -28,
    width: 160, height: 160, opacity: 0.10, pointerEvents: 'none',
  },
  heroLabel: {
    font: "500 11px 'Estedad', sans-serif",
    letterSpacing: 0, color: 'var(--label-on-invert)', opacity: 0.88,
    marginBottom: 6,
  },
  heroTitle: {
    font: "600 21px/1.4 'Estedad', sans-serif",
    color: 'var(--fg-on-invert)', marginBottom: 14, maxWidth: '85%',
  },
  heroRow: { display: 'flex', gap: 8 },
  heroBtn: {
    flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    padding: '11px 14px', borderRadius: 999,
    background: 'var(--firoozeh)', color: '#fff',
    font: "500 14px 'Estedad', sans-serif", border: 'none', cursor: 'pointer',
    boxShadow: '0 10px 22px rgba(42,157,143,0.24)',
    transition: 'transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out)',
  },
  heroBtnGhost: {
    background: 'rgba(255,255,255,0.10)', color: 'var(--fg-on-invert)',
    border: '1px solid rgba(255,255,255,0.16)',
  },

  sectionHead: {
    display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
    marginBottom: 12, padding: '0 4px',
  },
  sectionTitle: { font: "600 16px 'Estedad', sans-serif", color: 'var(--ink)' },
  sectionAction: {
    font: "500 12px 'Estedad', sans-serif", color: 'var(--firoozeh-deep)',
    background: 'transparent', border: 'none', cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', gap: 4,
  },

  card: {
    background: 'var(--surface-glass)', border: '1px solid var(--c-border-xs)',
    borderRadius: 22, boxShadow: 'var(--shadow-lift), var(--shadow-press)', padding: 20, marginBottom: 20,
    backdropFilter: 'blur(16px) saturate(135%)',
    WebkitBackdropFilter: 'blur(16px) saturate(135%)',
  },
  weekStrip: { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2, marginBottom: 14, paddingBottom: 14, borderBottom: '1px solid var(--c-border-xs)' },
  wDay:  { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, padding: '6px 2px', borderRadius: 10, cursor: 'pointer', transition: 'background 80ms', border: 'none', background: 'transparent' },
  wDayOn: { background: 'var(--firoozeh)' },
  wDayName: { font: "400 10px 'Estedad', sans-serif", color: 'var(--ink-3)' },
  wDayNum: { font: "700 15px/1 'Estedad', sans-serif", color: 'var(--ink)' },
  wDot: { width: 4, height: 4, borderRadius: '50%', marginTop: 1 },

  taskRow: {
    display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 12,
    alignItems: 'center', padding: '9px 0',
    cursor: 'pointer', transition: 'opacity 120ms',
  },
  taskRowDivided: { borderTop: '1px solid var(--c-border-xs)' },

  // Checkable circle
  circle: {
    width: 22, height: 22, borderRadius: 999, flex: 'none',
    border: '2px solid var(--c-border-md)', display: 'grid', placeItems: 'center',
    transition: 'background 120ms, border-color 120ms',
  },
  circleUrgent: { borderColor: 'var(--saffron)' },
  circleDone:   { background: 'var(--moss)', borderColor: 'var(--moss)' },

  taskTitle: { font: "500 14.5px/1.4 'Estedad', sans-serif", color: 'var(--ink)' },
  taskMeta:  { font: "400 12px 'Estedad', sans-serif", color: 'var(--ink-3)', marginTop: 1 },
  taskTime:  { font: "500 12px 'Estedad', sans-serif", color: 'var(--ink-2)', whiteSpace: 'nowrap' },

  emptyTasks: {
    textAlign: 'center', padding: '12px 0 4px',
    font: "400 13.5px 'Estedad', sans-serif", color: 'var(--ink-3)',
  },

  upcomingCard: {
    background: 'var(--firoozeh-soft)', border: '1px solid rgba(42,157,143,0.20)',
    borderRadius: 20, padding: '14px 16px', marginBottom: 18,
    display: 'flex', alignItems: 'center', gap: 12,
    cursor: 'pointer',
    transition: 'transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out)',
  },
  upcomingIcon: {
    width: 38, height: 38, borderRadius: 999,
    background: 'var(--saffron)', color: '#fff',
    display: 'grid', placeItems: 'center', flex: 'none',
  },
  upcomingTitle: { font: "500 14px 'Estedad', sans-serif", color: 'var(--firoozeh-deep)' },
  upcomingSub:   { font: "400 12.5px 'Estedad', sans-serif", color: 'var(--firoozeh-deep)', opacity: 0.75, marginTop: 2 },

  kCard: {
    background: 'var(--surface-glass)', border: '1px solid var(--c-border-xs)',
    borderRadius: 20, padding: 16, marginBottom: 18, cursor: 'pointer',
    boxShadow: 'var(--shadow-lift)',
  },
  kHead: { display: 'flex', alignItems: 'flex-start', gap: 10 },
  kIcon: {
    width: 36, height: 36, borderRadius: 10, flex: 'none',
    background: 'var(--saffron-soft)', color: 'var(--saffron)',
    display: 'grid', placeItems: 'center',
  },
  kTitle: { font: "500 15px/1.4 'Estedad', sans-serif", color: 'var(--ink)' },
  kBody:  {
    font: "400 13.5px/1.6 'Estedad', sans-serif", color: 'var(--ink-2)', marginTop: 4,
    display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical',
    overflow: 'hidden', overflowWrap: 'anywhere',
  },
  kFooter: { display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' },
  kTag: {
    font: "500 11px 'Estedad', sans-serif",
    padding: '3px 8px', borderRadius: 999,
    background: 'var(--paper-2)', color: 'var(--ink-2)',
  },

  activity: {
    background: 'var(--surface-glass)', border: '1px solid var(--c-border-xs)',
    borderRadius: 22, padding: 20, marginBottom: 20,
    boxShadow: 'var(--shadow-lift), var(--shadow-press)',
  },
  activityHead: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 },
  activityTitle: { font: "500 14.5px 'Estedad', sans-serif", color: 'var(--ink)' },
  activityMeta:  { font: "400 12px 'Estedad', sans-serif", color: 'var(--ink-3)' },
  bars: {
    display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8,
    alignItems: 'end', height: 90,
  },
  barCol:  { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 },
  bar:     { width: '100%', background: 'var(--firoozeh)', borderRadius: 6, transition: 'height 240ms' },
  barToday: { background: 'var(--firoozeh-deep)' },
  barLabel: { font: "500 11px 'Estedad', sans-serif", color: 'var(--ink-3)' },
  barNum:   { font: "500 10px 'Estedad', sans-serif", color: 'var(--ink-3)' },

  quickAdd: {
    display: 'flex', alignItems: 'center', gap: 8,
    background: 'var(--paper-2)', borderRadius: 12, padding: '10px 14px',
    marginTop: 12, border: '1px dashed var(--c-border-sm)', cursor: 'pointer',
    font: "400 13.5px 'Estedad', sans-serif", color: 'var(--ink-3)',
  },
};

const toFa = n => String(n).replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d]);
const _gdk = d => [d.getFullYear(), String(d.getMonth()+1).padStart(2,'0'), String(d.getDate()).padStart(2,'0')].join('-');

// JS getDay() → Persian week index (Sat=0 … Fri=6)
const jsToPersian = d => (d + 1) % 7;

function CheckCircle({ urgent, done }) {
  if (done) {
    return (
      <span style={{ ...homeStyles.circle, ...homeStyles.circleDone }}>
        <svg width="11" height="9" viewBox="0 0 11 9" fill="none">
          <path d="M1 4.5L4 7.5L10 1" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </span>
    );
  }
  return (
    <span style={{ ...homeStyles.circle, ...(urgent ? homeStyles.circleUrgent : {}) }} />
  );
}

function Home({ data, finances, gamify, onGoto, onOpenComposer, onToggle, isDesktop }) {
  const { Icons } = window;
  const asset = window.assetPath || ((name) => `assets/${name}`);
  const [doneAnim, setDoneAnim] = React.useState(null);
  const [installPrompt, setInstallPrompt] = React.useState(null);
  const [installDismissed, setInstallDismissed] = React.useState(false);

  React.useEffect(() => {
    const handler = (e) => { e.preventDefault(); setInstallPrompt(e); };
    window.addEventListener('beforeinstallprompt', handler);
    return () => window.removeEventListener('beforeinstallprompt', handler);
  }, []);

  const handleInstall = async () => {
    if (!installPrompt) return;
    installPrompt.prompt();
    await installPrompt.userChoice;
    setInstallPrompt(null);
  };

  const [selDay, setSelDay] = React.useState(0);

  const strip = React.useMemo(() => {
    const shortFmt = new Intl.DateTimeFormat('fa-IR', { weekday: 'short' });
    const numFmt   = new Intl.DateTimeFormat('fa-IR', { day: 'numeric' });
    return Array.from({ length: 7 }, (_, i) => {
      const d = new Date(Date.now() + i * 86400000);
      const key = _gdk(d);
      const tasks = data.tasks.filter(t =>
        !t.done && t.status !== 'cancelled' && (t.dueDate === key || (i === 0 && !t.dueDate && t.section === 'today'))
      );
      return { key, tasks, name: shortFmt.format(d), dayNum: numFmt.format(d) };
    });
  }, [data.tasks]);

  const dayTasks   = strip[selDay].tasks;
  const shownTasks = dayTasks.slice(0, 3);
  const moreCount  = dayTasks.length - shownTasks.length;
  const selLabel   = selDay === 0 ? 'امروز' : selDay === 1 ? 'فردا' : strip[selDay].name;

  const upcomingAll = data.tasks.filter(t => t.section === 'upcoming' && !t.done && t.status !== 'cancelled').slice(0, 3);
  const upcoming   = upcomingAll[0];
  const latestK    = data.knowledge[0];
  const todayKey = strip[0].key;
  const todayAllTasks = data.tasks.filter(t =>
    t.status !== 'cancelled' && (t.dueDate === todayKey || (!t.dueDate && t.section === 'today'))
  );
  const todayCompleted = todayAllTasks.filter(t => t.done || t.status === 'done').length;
  const todayWins = Math.max(todayCompleted, gamify?.todayDoneCount || 0);
  const todayTarget = Math.max(3, todayAllTasks.length, todayWins);
  const todayPct = Math.min(100, Math.round((todayWins / todayTarget) * 100));
  const nextFocus = gamify?.nextFocusAt || 3;
  const streakText = gamify?.streak > 0
    ? `${toFa(gamify.streak)} روز پشت‌سرهم`
    : 'اولین برد امروز را بزن';

  // Today's log count (by timestamp or date string)
  const todayStart = new Date(); todayStart.setHours(0,0,0,0);
  const todayCount = data.log.filter(l =>
    (l.timestamp && l.timestamp >= todayStart.getTime()) || l.date === 'امروز'
  ).length;

  // Weekly activity bars from log timestamps
  const weekCounts = Array(7).fill(0);
  const weekStart  = Date.now() - 7 * 24 * 60 * 60 * 1000;
  data.log.forEach(entry => {
    if (entry.timestamp && entry.timestamp >= weekStart) {
      weekCounts[jsToPersian(new Date(entry.timestamp).getDay())]++;
    }
  });
  const todayPIdx = jsToPersian(new Date().getDay());
  const DAYS = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'];
  const week  = DAYS.map((day, i) => ({ day, n: weekCounts[i], today: i === todayPIdx }));
  const maxN  = Math.max(...week.map(w => w.n), 1);
  const weekTotal = weekCounts.reduce((a, b) => a + b, 0);

  const handleToggle = (id) => {
    setDoneAnim(id);
    setTimeout(() => { onToggle(id); setDoneAnim(null); }, 300);
  };

  const scrollStyle = { ...homeStyles.scroll, padding: isDesktop ? '0 24px 40px' : '0 16px 220px' };

  return (
    <div className="sb-flow" style={scrollStyle}>

      {/* ── PWA install banner (FTR-008) ──────────────── */}
      {installPrompt && !installDismissed && (
        <div className="sb-animated-card" style={{
          background: 'var(--firoozeh)', color: '#fff',
          borderRadius: 16, padding: '12px 16px', marginBottom: 14,
          display: 'flex', alignItems: 'center', gap: 12, direction: 'rtl',
        }}>
          <img src={asset('mark.svg?v=logi-functional-v2-20260604')} style={{ width: 38, height: 38, opacity: 0.98, flexShrink: 0 }} alt="" />
          <div style={{ flex: 1 }}>
            <div style={{ font: "600 14px 'Estedad', sans-serif" }}>نصب لاگی روی گوشی</div>
            <div style={{ font: "400 12px 'Estedad', sans-serif", opacity: 0.85, marginTop: 2 }}>دسترسی سریع‌تر، بدون مرورگر</div>
          </div>
          <button onClick={handleInstall} style={{ background: '#fff', color: 'var(--firoozeh)', border: 'none', borderRadius: 10, padding: '7px 14px', font: "600 13px 'Estedad', sans-serif", cursor: 'pointer', flexShrink: 0 }}>نصب</button>
          <button onClick={() => setInstallDismissed(true)} style={{ background: 'none', border: 'none', color: 'rgba(255,255,255,0.7)', cursor: 'pointer', padding: 4, flexShrink: 0 }}>
            <Icons.X size={16} />
          </button>
        </div>
      )}

      {/* ── Capture hero ──────────────────────────────── */}
      <div className="sb-animated-card" style={homeStyles.hero}>
        <img src={asset('shamse-pattern.svg')} style={homeStyles.heroMotif} alt="" />
        <div style={homeStyles.heroLabel}>هر چی توی ذهنته — بگو یا بنویس، بقیه‌اش با من.</div>
        <div style={homeStyles.heroRow}>
          <button style={homeStyles.heroBtn} onClick={() => onOpenComposer('listening')}>
            <Icons.Mic size={18} /> ضبط صدا
          </button>
          <button style={{ ...homeStyles.heroBtn, ...homeStyles.heroBtnGhost }} onClick={() => onOpenComposer('typing')}>
            <Icons.Type size={18} /> تایپ کن
          </button>
        </div>
      </div>

      {/* ── Level / XP (gamification) ──────────────────── */}
      {gamify && (
        <div className="sb-gamify-card sb-animated-card" style={{
          display: 'grid', gap: 12, margin: '14px 0 18px',
          background: 'var(--surface-glass)', border: '1px solid var(--c-border-xs)',
          borderRadius: 18, padding: '14px', boxShadow: 'var(--shadow-lift), var(--shadow-press)',
          backdropFilter: 'blur(16px) saturate(135%)',
          WebkitBackdropFilter: 'blur(16px) saturate(135%)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div className="sb-xp-orb" style={{
              width: 44, height: 44, borderRadius: 12, flexShrink: 0,
              background: 'var(--firoozeh-soft)', color: 'var(--firoozeh-deep)',
              display: 'grid', placeItems: 'center', font: "700 17px 'Estedad', sans-serif",
            }}>{toFa(gamify.level)}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6, gap: 10 }}>
                <span style={{ font: "600 14px 'Estedad', sans-serif", color: 'var(--ink)' }}>سطح {toFa(gamify.level)} · {gamify.title}</span>
                <span style={{ font: "500 11px 'Estedad', sans-serif", color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>{toFa(gamify.into)}/{toFa(gamify.need)} XP</span>
              </div>
              <div className="sb-progress-track" style={{ height: 7, borderRadius: 999, background: 'var(--paper-2)', overflow: 'hidden' }}>
                <div className="sb-progress-bar" style={{ height: '100%', width: `${gamify.pct}%`, borderRadius: 999, background: 'var(--firoozeh)', transition: 'width 400ms ease-out' }} />
              </div>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'center' }}>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                <span style={{ font: "600 12.5px 'Estedad', sans-serif", color: 'var(--ink-2)' }}>پیشرفت امروز</span>
                <span style={{ font: "500 11px 'Estedad', sans-serif", color: 'var(--ink-3)' }}>
                  {toFa(todayWins)} از {toFa(todayTarget)}
                </span>
              </div>
              <div className="sb-progress-track" style={{ height: 8, borderRadius: 999, background: 'var(--paper-2)', overflow: 'hidden' }}>
                <div className="sb-progress-bar" style={{ height: '100%', width: `${todayPct}%`, borderRadius: 999, background: 'var(--moss)', transition: 'width 400ms ease-out' }} />
              </div>
              <div style={{ font: "400 11.5px/1.6 'Estedad', sans-serif", color: 'var(--ink-3)', marginTop: 6 }}>
                {todayWins >= todayTarget ? 'امروز را تمیز بستی' : `تا پاداش تمرکز: ${toFa(nextFocus)} کار دیگر`}
              </div>
            </div>
            <div style={{ display: 'grid', gap: 6, justifyItems: 'end' }}>
              <span className="sb-streak-chip" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, font: "600 12px 'Estedad', sans-serif", color: 'var(--saffron)' }}>
                <Icons.Flame size={14} /> {streakText}
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, font: "500 11px 'Estedad', sans-serif", color: 'var(--ink-3)' }}>
                <Icons.Star size={13} /> بهترین: {toFa(gamify.bestStreak || gamify.streak || 0)} روز
              </span>
            </div>
          </div>
        </div>
      )}

      {/* ── Today's tasks ─────────────────────────────── */}
      <div style={homeStyles.sectionHead}>
        <div style={homeStyles.sectionTitle}>{selLabel}</div>
        <button style={homeStyles.sectionAction} onClick={() => onGoto('tasks')}>
          همه کارها <Icons.ChevLeft size={14} />
        </button>
      </div>
      <div className="sb-animated-card" style={homeStyles.card}>
        <div style={homeStyles.weekStrip}>
          {strip.map((day, i) => {
            const isOn = selDay === i;
            return (
              <button key={day.key}
                style={{ ...homeStyles.wDay, ...(isOn ? homeStyles.wDayOn : {}) }}
                onClick={() => setSelDay(i)}
              >
                <span style={{ ...homeStyles.wDayName, color: isOn ? 'rgba(255,255,255,0.75)' : 'var(--ink-3)' }}>
                  {day.name}
                </span>
                <span style={{ ...homeStyles.wDayNum, color: isOn ? '#fff' : 'var(--ink)' }}>
                  {day.dayNum}
                </span>
                {day.tasks.length > 0 && (
                  <span style={{ ...homeStyles.wDot, background: isOn ? 'rgba(255,255,255,0.6)' : 'var(--saffron)' }} />
                )}
              </button>
            );
          })}
        </div>

        {shownTasks.length === 0 ? (
          <div style={homeStyles.emptyTasks}>
            کاری برای این روز ثبت نشده
          </div>
        ) : shownTasks.map((t, i) => (
          <div
            key={t.id}
            style={{
              ...homeStyles.taskRow,
              ...(i > 0 ? homeStyles.taskRowDivided : {}),
              opacity: doneAnim === t.id ? 0.4 : 1,
            }}
            onClick={() => handleToggle(t.id)}
          >
            <CheckCircle urgent={t.priority === 'urgent'} done={doneAnim === t.id} />
            <div>
              <div style={homeStyles.taskTitle}>{t.title}</div>
              {t.sub && <div style={homeStyles.taskMeta}>{t.sub}</div>}
            </div>
            <span style={homeStyles.taskTime}>{t.dueTime ? toFa(t.dueTime) : ''}</span>
          </div>
        ))}

        {moreCount > 0 && (
          <button
            style={{ width: '100%', textAlign: 'center', background: 'none', border: 'none', cursor: 'pointer',
              font: "600 13px 'Estedad', sans-serif", color: 'var(--firoozeh-deep)', padding: '8px 0 2px' }}
            onClick={() => onGoto('tasks')}
          >و {toFa(moreCount)} مورد دیگر ←</button>
        )}

        {/* Quick add hint */}
        <div style={homeStyles.quickAdd} onClick={() => onOpenComposer('typing')}>
          <Icons.Plus size={14} />
          تسک جدید اضافه کن
        </div>
      </div>

      {/* ── Upcoming reminder ─────────────────────────── */}
      {upcomingAll.length > 0 && (
        <>
          <div style={homeStyles.sectionHead}>
            <div style={homeStyles.sectionTitle}>یادآوری‌های بعدی</div>
            {upcomingAll.length > 1 && (
              <button style={homeStyles.sectionAction} onClick={() => onGoto('tasks')}>
                {String(upcomingAll.length).replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d])} مورد <Icons.ChevLeft size={14} />
              </button>
            )}
          </div>
          {upcomingAll.map(up => (
            <div key={up.id} className="sb-animated-card" style={{ ...homeStyles.upcomingCard, marginBottom: 8 }} onClick={() => onGoto('tasks')}>
              <div style={homeStyles.upcomingIcon}><Icons.Bell size={18} /></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={homeStyles.upcomingTitle}>{up.title}</div>
                {up.sub && <div style={homeStyles.upcomingSub}>{up.sub}</div>}
              </div>
              <div style={{ font: "500 12px 'Estedad', sans-serif", color: 'var(--firoozeh-deep)' }}>
                {up.dueTime ? toFa(up.dueTime) : ''}
              </div>
            </div>
          ))}
        </>
      )}

      {/* ── Latest memory ─────────────────────────────── */}
      <div style={homeStyles.sectionHead}>
        <div style={homeStyles.sectionTitle}>تازه‌ترین در حافظه</div>
        <button style={homeStyles.sectionAction} onClick={() => onGoto('knowledge')}>
          همه حافظه <Icons.ChevLeft size={14} />
        </button>
      </div>
      {latestK ? (
        <div className="sb-animated-card" style={homeStyles.kCard} onClick={() => onGoto('knowledge')}>
          <div style={homeStyles.kHead}>
            <div style={homeStyles.kIcon}><Icons.Hash size={18} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={homeStyles.kTitle}>{latestK.title}</div>
              <div style={homeStyles.kBody}>{latestK.body}</div>
              <div style={homeStyles.kFooter}>
                {(latestK.tags || []).map(t => <span key={t} style={homeStyles.kTag}>{t}</span>)}
                <span style={homeStyles.kTag}>{latestK.meta}</span>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div
          className="sb-animated-card"
          style={{ ...homeStyles.kCard, textAlign: 'center', padding: '18px 16px', color: 'var(--ink-3)', font: "400 13.5px 'Estedad', sans-serif" }}
          onClick={() => onGoto('knowledge')}
        >
          هنوز چیزی در حافظه ذخیره نشده — اولین فایل صوتیت رو آپلود کن
        </div>
      )}

      {/* ── Finance insight ───────────────────────────── */}
      {(() => {
        const insights = window._finInsights ? window._finInsights(finances || []) : [];
        if (!insights || insights.length === 0) return null;
        return (
          <>
            <div style={homeStyles.sectionHead}>
              <div style={homeStyles.sectionTitle}>بینش مالی</div>
              <button style={homeStyles.sectionAction} onClick={() => onGoto('finance')}>
                چرتکه <Icons.ChevLeft size={14} />
              </button>
            </div>
            <div className="sb-animated-card" style={{ ...homeStyles.upcomingCard, background: 'var(--surface-glass)', border: '1px solid var(--c-border-xs)', flexDirection: 'column', alignItems: 'stretch', gap: 0, padding: '14px 16px', boxShadow: 'var(--shadow-lift), var(--shadow-press)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)' }} onClick={() => onGoto('finance')}>
              {insights.map((ins, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, ...(i > 0 ? { marginTop: 8, paddingTop: 8, borderTop: '1px solid rgba(25,28,29,0.05)' } : {}) }}>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: ins.color, flexShrink: 0, marginTop: 6 }} />
                  <span style={{ font: "400 13.5px/1.5 'Estedad', sans-serif", color: 'var(--ink-2)' }}>{ins.text}</span>
                </div>
              ))}
            </div>
          </>
        );
      })()}

      {/* ── Weekly activity ───────────────────────────── */}
      <div className="sb-animated-card" style={homeStyles.activity}>
        <div style={homeStyles.activityHead}>
          <div style={homeStyles.activityTitle}>فعالیت هفته</div>
          <div style={homeStyles.activityMeta}>{toFa(weekTotal)} ورودی</div>
        </div>
        <div style={homeStyles.bars}>
          {week.map((w, i) => (
            <div key={i} style={homeStyles.barCol}>
              {w.n > 0 && <span style={homeStyles.barNum}>{toFa(w.n)}</span>}
              {w.n === 0 && <span style={homeStyles.barNum}>&nbsp;</span>}
              <span className="sb-week-bar" style={{
                ...homeStyles.bar,
                ...(w.today ? homeStyles.barToday : {}),
                height: `${(w.n / maxN) * 64}px`,
                minHeight: 6,
              }} />
              <span style={{ ...homeStyles.barLabel, ...(w.today ? { color: 'var(--firoozeh-deep)', fontWeight: 600 } : {}) }}>
                {w.day}
              </span>
            </div>
          ))}
        </div>
      </div>

    </div>
  );
}

window.Home = Home;