// Home Dashboard screen — 7 course rings + Conductor card

function ConductorHero({ rtl, t }) {
  return (
    <Card hero style={{
      background: 'linear-gradient(135deg, var(--binah-indigo-night) 0%, var(--binah-deep-teal) 100%)',
      color: 'var(--binah-cloud)',
      position: 'relative', overflow: 'hidden', marginBottom: 24,
    }}>
      <div style={{
        position: 'absolute', top: -40, [rtl ? 'left' : 'right']: -40,
        width: 240, height: 240, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(244,162,97,0.30) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />
      <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start', position: 'relative' }}>
        <img src="../../assets/conductor-mark.svg" width="64" height="64" alt="" />
        <div style={{ flex: 1 }}>
          <div className="binah-eyebrow" style={{ color: 'var(--binah-saffron)', marginBottom: 6 }}>
            {t('eyebrow', 'המנצח מציע', 'THE CONDUCTOR SUGGESTS')}
          </div>
          <div style={{
            fontFamily: rtl ? 'var(--font-he)' : 'var(--font-display)',
            fontSize: 22, fontWeight: 600, color: 'var(--binah-cloud)', marginBottom: 6, letterSpacing: '-0.01em',
          }}>
            {t('title', 'סשן מיקוד של 25 דקות — IFRS 16, צד ה-Lessor', '25-min focus session — IFRS 16, Lessor side')}
          </div>
          <div style={{ fontSize: 14, color: 'var(--binah-cloud-2)', lineHeight: 1.55, maxWidth: 520 }}>
            {t('body',
              'זוהה פער חוזר סביב מדידה מחודשת. שני סשנים בדוק ינמיכו את רמת השכחה ויעלו את המוכנות ב-6%.',
              'A recurring gap around re-measurement was detected. Two focused sessions should lower forgetting risk and lift readiness by ~6%.')}
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
            <Button variant="highlight" iconRight="arrow">{t('start', 'התחל עכשיו', 'Start now')}</Button>
            <Button variant="ghost" style={{ color: 'var(--binah-cloud-2)' }}>{t('later', 'מאוחר יותר', 'Remind me later')}</Button>
          </div>
        </div>
      </div>
    </Card>
  );
}

function CourseRing({ name, pct, next, rtl, highlight }) {
  return (
    <Card padding={18} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, minWidth: 0 }}>
      <div style={{
        fontFamily: rtl ? 'var(--font-he)' : 'var(--font-display)',
        fontSize: 13, fontWeight: 600, color: 'var(--fg-1)',
        textAlign: 'center', lineHeight: 1.3, minHeight: 34,
      }}>{name}</div>
      <Ring value={pct} size={92} stroke={8} gradient={highlight} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--fg-3)' }}>
        <span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--binah-saffron)' }} />
        <span style={{ fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)' }}>{next}</span>
      </div>
    </Card>
  );
}

function HomeDashboard({ rtl, t }) {
  const courses = [
    { name: t('c1', 'חשבונאות מתקדמת III', 'Advanced Accounting III'), pct: 100, highlight: false },
    { name: t('c2', 'מיסים II', 'Taxation II'), pct: 75, highlight: true },
    { name: t('c3', 'ביקורת חשבונות', 'Auditing'), pct: 62, highlight: false },
    { name: t('c4', 'חשבונאות ניהולית', 'Managerial Accounting'), pct: 30, highlight: true },
    { name: t('c5', 'מימון תאגידי', 'Corporate Finance'), pct: 85, highlight: false },
    { name: t('c6', 'דיני מיסים', 'Tax Law'), pct: 48, highlight: false },
    { name: t('c7', 'אתיקה מקצועית', 'Professional Ethics'), pct: 92, highlight: false },
  ];
  const next = t('next', 'הסקירה הבאה בעוד שעתיים', 'Next review in 2h');

  return (
    <div style={{ padding: 32, maxWidth: 1240, margin: '0 auto' }}>
      <div style={{ marginBottom: 24 }}>
        <h1 className="binah-h1" style={{
          fontFamily: rtl ? 'var(--font-he)' : 'var(--font-display)',
          margin: 0, fontSize: 34, fontWeight: 700, color: 'var(--fg-1)', letterSpacing: '-0.015em',
        }}>
          {t('hi', 'בוקר טוב, סתיו', 'Good morning, Stav')}
        </h1>
        <p style={{ color: 'var(--fg-3)', margin: '6px 0 0', fontSize: 14,
                    fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)' }}>
          {t('sub', '3 סקירות מחכות היום · מוכנות כוללת 71%', '3 reviews waiting today · overall readiness 71%')}
        </p>
      </div>

      <ConductorHero rtl={rtl} t={t} />

      <div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600,
                     fontFamily: rtl ? 'var(--font-he)' : 'var(--font-display)', color: 'var(--fg-1)' }}>
          {t('readiness', 'מוכנות הקורסים', 'Course readiness')}
        </h2>
        <a style={{ fontSize: 13, color: 'var(--accent)', textDecoration: 'none',
                    fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)' }}>
          {t('all', 'ראה הכל', 'View all')} <Icon name="arrow" size={12} style={{ transform: rtl ? 'scaleX(-1)' : '' }} />
        </a>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 14 }}>
        {courses.map(c => <CourseRing key={c.name} {...c} next={next} rtl={rtl} />)}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16, marginTop: 24 }}>
        <Card>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600,
                         fontFamily: rtl ? 'var(--font-he)' : 'var(--font-display)' }}>
              {t('queue', 'התור של היום', "Today's queue")}
            </h3>
            <Badge variant="accent">3</Badge>
          </div>
          {[
            { t: t('r1', 'סקירה: סעיף 126', 'Review: Section 126'), s: t('r1s', 'מיסים II · 6 דקות', 'Taxation II · 6 min'), v: 'accent' },
            { t: t('r2', 'סגירת חולשה: Contribution Margin', 'Close gap: Contribution Margin'), s: t('r2s', 'חשבונאות ניהולית · 15 דקות', 'Managerial · 15 min'), v: 'highlight' },
            { t: t('r3', 'שאלה פתוחה: ECL', 'Open question: ECL'), s: t('r3s', 'חשבונאות מתקדמת III · שאלה ארוכה', 'Advanced Acc. III · long-form'), v: 'neutral' },
          ].map((r, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 0',
              borderTop: i ? '1px solid var(--divider)' : 'none',
            }}>
              <Badge variant={r.v} dot>{r.s}</Badge>
              <span style={{ fontSize: 14, color: 'var(--fg-1)',
                             fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)', fontWeight: 500 }}>{r.t}</span>
              <Icon name="chevron" size={14} style={{
                marginInlineStart: 'auto', color: 'var(--fg-3)',
                transform: rtl ? 'scaleX(-1)' : '',
              }} />
            </div>
          ))}
        </Card>

        <Card style={{ background: 'linear-gradient(135deg, rgba(159,212,192,0.3) 0%, rgba(15,76,92,0.08) 100%)' }}>
          <div className="binah-eyebrow" style={{ marginBottom: 8 }}>
            {t('streak', 'המשך שקט', 'Quiet streak')}
          </div>
          <div style={{
            fontFamily: 'var(--font-display)', fontVariantNumeric: 'tabular-nums',
            fontWeight: 700, fontSize: 40, color: 'var(--fg-1)', lineHeight: 1, letterSpacing: '-0.02em',
          }}>
            14 <span style={{ fontSize: 16, fontWeight: 500, color: 'var(--fg-3)',
                              fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)' }}>
              {t('days', 'ימים', 'days')}
            </span>
          </div>
          <p style={{ margin: '10px 0 0', color: 'var(--fg-2)', fontSize: 13, lineHeight: 1.5,
                      fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)' }}>
            {t('streakBody',
              'סשן אחד ביום, בלי להעניש. אם תפספס — לא נזכיר לך באגרסיביות.',
              'One session a day, no guilt-tripping. Miss a day — we won’t nag.')}
          </p>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { HomeDashboard });