// Personal dashboard – case status, documents, timeline, advisor chat
function Dashboard({ lang, setRoute, openAI }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);
  const [tab, setTab] = React.useState('overview');

  const CASE = {
    id: 'MGR-87421',
    program: window.MIGRONIS_DATA.citizenship[0], // Grenada
    started: '2026-02-14',
    eta: '2026-09-30',
    progress: 42,
    stage: t('Сбор документов', 'Document collection'),
    advisor: { name: 'Anastasia Volkov', role: t('Старший консультант', 'Senior advisor') },
  };

  return (
    <div style={{ paddingTop: 32, paddingBottom: 80, animation: 'fade-up .4s var(--ease-out)' }}>
      <div className="container-wide">
        {/* Top welcome */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 10 }}>
              {t('– Личный кабинет', '– Dashboard')}
            </div>
            <h1 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', margin: 0 }}>
              {t('Добрый день, ', 'Welcome back, ')}<em>Michael</em>
            </h1>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn btn-ghost" onClick={() => openAI()}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)' }} />
              {t('Спросить AI', 'Ask AI')}
            </button>
            <button className="btn btn-primary">{t('Связаться с менеджером', 'Contact advisor')}</button>
          </div>
        </div>

        {/* Case card */}
        <div className="glass" style={{ padding: 28, borderRadius: 'var(--r-xl)', background: 'var(--bg-elev)', marginBottom: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 32, alignItems: 'center' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>{t('Кейс', 'Case')} · {CASE.id}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 12 }}>
                <window.FlagIcon emoji={CASE.program.flag} size={28} />
                <div>
                  <div className="display" style={{ fontSize: 24, lineHeight: 1.1 }}>{window.cn(CASE.program, lang)}</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 2 }}>{CASE.program.tagline[lang]}</div>
                </div>
              </div>
              <div className="chip" style={{
                background: 'var(--accent-soft)',
                color: 'var(--accent-strong)',
                border: '1px solid var(--accent)',
                fontWeight: 500,
              }}>
                ● {CASE.stage}
              </div>
            </div>

            {[
              { l: t('Прогресс', 'Progress'), v: `${CASE.progress}%`, big: true },
              { l: t('Старт', 'Started'), v: '14 Feb 2026' },
              { l: t('Ожидаемая выдача', 'Expected issuance'), v: '30 Sep 2026' },
            ].map((m, i) => (
              <div key={i}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>{m.l}</div>
                <div className="mono" style={{ fontSize: m.big ? 28 : 15, color: m.big ? 'var(--accent)' : 'var(--fg)' }}>
                  {m.v}
                </div>
                {m.big && (
                  <div style={{ marginTop: 8, height: 4, background: 'var(--surface)', borderRadius: 4, overflow: 'hidden' }}>
                    <div style={{
                      height: '100%', width: `${CASE.progress}%`,
                      background: 'linear-gradient(90deg, var(--accent), var(--accent-strong))',
                    }} />
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 4, marginBottom: 24 }}>
          {[
            ['overview', t('Обзор', 'Overview')],
            ['timeline', t('Этапы', 'Timeline')],
            ['documents', t('Документы', 'Documents')],
            ['payments', t('Платежи', 'Payments')],
            ['messages', t('Сообщения', 'Messages')],
          ].map(([k, lbl]) => (
            <button key={k}
              onClick={() => setTab(k)}
              className={`tab ${tab === k ? 'is-active' : ''}`}>{lbl}</button>
          ))}
        </div>

        {/* Tab content */}
        {tab === 'overview' && <DashOverview CASE={CASE} lang={lang} />}
        {tab === 'timeline' && <DashTimeline lang={lang} />}
        {tab === 'documents' && <DashDocuments lang={lang} />}
        {tab === 'payments' && <DashPayments lang={lang} CASE={CASE} />}
        {tab === 'messages' && <DashMessages lang={lang} advisor={CASE.advisor} openAI={openAI} />}
      </div>
    </div>
  );
}

function DashOverview({ CASE, lang }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
      {/* Next actions */}
      <div style={{ padding: 24, background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)' }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>{t('Ближайшие действия', 'Next actions')}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            { d: '17 May', t: t('Загрузить апостиль на свидетельство о рождении', 'Upload apostilled birth certificate'), ok: false, due: true },
            { d: '20 May', t: t('Подписать обновлённый retainer', 'Sign updated retainer'), ok: false },
            { d: '14 May', t: t('Заполнить форму KYC для супруги', 'Complete KYC form for spouse'), ok: true },
            { d: '08 May', t: t('Pre-DD пройдена успешно', 'Pre-DD completed successfully'), ok: true },
          ].map((a, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 12, background: a.due ? 'var(--accent-soft)' : 'var(--surface)', borderRadius: 'var(--r-md)', border: '1px solid', borderColor: a.due ? 'var(--accent)' : 'var(--border)' }}>
              <span style={{
                width: 24, height: 24, borderRadius: 999, flexShrink: 0,
                background: a.ok ? 'var(--ok)' : a.due ? 'var(--accent)' : 'var(--surface-hi)',
                color: a.ok || a.due ? '#14110A' : 'var(--fg-muted)',
                display: 'grid', placeItems: 'center', fontSize: 12,
              }}>{a.ok ? '✓' : '!'}</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14 }}>{a.t}</div>
              </div>
              <span className="mono" style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{a.d}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Advisor */}
      <div style={{ padding: 24, background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)' }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>{t('Ваш консультант', 'Your advisor')}</div>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <div className="img-ph" style={{ width: 56, height: 56, borderRadius: 999 }} />
          <div>
            <div style={{ fontWeight: 500 }}>{CASE.advisor.name}</div>
            <div style={{ fontSize: 13, color: 'var(--fg-muted)' }}>{CASE.advisor.role}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4, fontSize: 11, color: 'var(--ok)' }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--ok)' }} />
              {t('онлайн', 'online')}
            </div>
          </div>
        </div>
        <div className="hr" style={{ margin: '16px 0' }} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button className="btn btn-line btn-sm">📞 {t('Запланировать звонок', 'Schedule a call')}</button>
          <button className="btn btn-ghost btn-sm">✉ {t('Написать сообщение', 'Send a message')}</button>
        </div>
      </div>
    </div>
  );
}

function DashTimeline({ lang }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);
  const STAGES = [
    { d: 'Feb 14', t: t('Pre-DD проверка', 'Pre-DD check'), ok: true, sub: t('Пройдена за 3 дня', 'Completed in 3 days') },
    { d: 'Feb 18', t: t('Контракт + retainer', 'Contract + retainer'), ok: true, sub: t('Подписан', 'Signed') },
    { d: 'Mar 02', t: t('Сбор документов', 'Document collection'), ok: false, current: true, sub: t('В процессе · 12 из 18 готово', 'In progress · 12 of 18 ready') },
    { d: 'May 30', t: t('Подача и DD', 'Filing & DD'), ok: false, sub: t('Ожидается', 'Upcoming') },
    { d: 'Aug 15', t: t('Одобрение и инвестиция', 'Approval & investment'), ok: false, sub: t('Ожидается', 'Upcoming') },
    { d: 'Sep 30', t: t('Получение паспорта', 'Passport issuance'), ok: false, sub: t('Целевая дата', 'Target') },
  ];

  return (
    <div style={{ padding: 32, background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)' }}>
      <div style={{ position: 'relative', paddingLeft: 32 }}>
        {/* Spine */}
        <div style={{ position: 'absolute', left: 11, top: 6, bottom: 6, width: 2, background: 'var(--border)' }} />
        {STAGES.map((s, i) => (
          <div key={i} style={{ position: 'relative', paddingBottom: i === STAGES.length - 1 ? 0 : 28 }}>
            <div style={{
              position: 'absolute', left: -32, top: 0,
              width: 24, height: 24, borderRadius: 999,
              background: s.ok ? 'var(--accent)' : s.current ? 'var(--accent-soft)' : 'var(--surface-hi)',
              border: '2px solid', borderColor: s.ok || s.current ? 'var(--accent)' : 'var(--border-strong)',
              display: 'grid', placeItems: 'center',
              color: s.ok ? '#14110A' : 'var(--accent)',
              fontSize: 12,
            }}>{s.ok ? '✓' : s.current ? '●' : ''}</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <div style={{ fontWeight: 500, fontSize: 16 }}>{s.t}</div>
                <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 4 }}>{s.sub}</div>
              </div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{s.d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DashDocuments({ lang }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);
  const DOCS = [
    { name: 'Passport scan',                     status: 'ok',    by: 'Michael K.' },
    { name: 'Birth certificate (apostilled)',    status: 'pending', by: '–' },
    { name: 'Bank statements (12 mo)',           status: 'ok',    by: 'Michael K.' },
    { name: 'Source of funds – sale deed',       status: 'review', by: 'Migronis' },
    { name: 'Police clearance certificate',      status: 'ok',    by: 'Migronis' },
    { name: 'Marriage certificate',              status: 'ok',    by: 'Michael K.' },
    { name: 'Spouse passport scan',              status: 'pending', by: '–' },
    { name: 'Kids – school enrollment letters',  status: 'ok',    by: 'Michael K.' },
    { name: 'Health declaration',                status: 'ok',    by: 'Michael K.' },
    { name: 'Apostilled birth cert. (spouse)',   status: 'rejected', by: 'Migronis' },
    { name: 'Photo – biometric (passport pgm.)', status: 'pending', by: '–' },
    { name: 'Investment commitment letter',      status: 'review', by: 'Migronis' },
  ];
  const STATUS_STYLE = {
    ok:       { c: 'var(--ok)',      l: t('Принят', 'Approved'),    bg: 'rgba(111,178,138,0.12)' },
    pending:  { c: 'var(--accent)',  l: t('Ожидает загрузки', 'Pending upload'), bg: 'var(--accent-soft)' },
    review:   { c: '#7AA7E3',        l: t('На проверке', 'In review'),  bg: 'rgba(122,167,227,0.12)' },
    rejected: { c: 'var(--danger)',  l: t('Отклонён', 'Rejected'),   bg: 'rgba(226,114,91,0.12)' },
  };

  return (
    <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
      <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div className="eyebrow">{t('Документы', 'Documents')}</div>
          <div style={{ fontSize: 14, color: 'var(--fg-muted)', marginTop: 4 }}>
            {DOCS.filter((d) => d.status === 'ok').length} / {DOCS.length} {t('готово', 'ready')}
          </div>
        </div>
        <button className="btn btn-primary btn-sm">+ {t('Загрузить', 'Upload')}</button>
      </div>
      <div>
        {DOCS.map((d, i) => {
          const s = STATUS_STYLE[d.status];
          return (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr auto', gap: 24,
              padding: '14px 24px', alignItems: 'center',
              borderBottom: i < DOCS.length - 1 ? '1px solid var(--border)' : 'none',
              fontSize: 14,
            }}>
              <div style={{ fontSize: 14 }}>{d.name}</div>
              <div className="chip" style={{ background: s.bg, color: s.c, border: 'none', width: 'fit-content' }}>
                {s.l}
              </div>
              <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{d.by}</div>
              <button className="btn btn-ghost btn-sm">{d.status === 'pending' ? t('Загрузить', 'Upload') : t('Открыть', 'Open')}</button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DashPayments({ lang, CASE }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);
  const PAYMENTS = [
    { d: '18 Feb 2026', t: t('Retainer Migronis', 'Migronis retainer'), v: 15000, status: 'paid' },
    { d: '02 Mar 2026', t: t('Due Diligence – Caribbean fee', 'Due Diligence – Caribbean fee'), v: 7500, status: 'paid' },
    { d: '01 May 2026', t: t('Government processing fee', 'Government processing fee'), v: 12000, status: 'paid' },
    { d: '15 Aug 2026', t: t('Investment – Government Fund (escrow)', 'Investment – Government Fund (escrow)'), v: 235000, status: 'scheduled' },
    { d: '20 Sep 2026', t: t('Migronis final fee', 'Migronis final fee'), v: 15000, status: 'scheduled' },
  ];
  const fmt = (n) => '$' + n.toLocaleString('en-US');
  const paid = PAYMENTS.filter((p) => p.status === 'paid').reduce((a, b) => a + b.v, 0);
  const total = PAYMENTS.reduce((a, b) => a + b.v, 0);

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 16 }}>
        {[
          { l: t('Оплачено', 'Paid'), v: fmt(paid), c: 'var(--ok)' },
          { l: t('Запланировано', 'Scheduled'), v: fmt(total - paid), c: 'var(--accent)' },
          { l: t('Итого по программе', 'Program total'), v: fmt(total) },
        ].map((m, i) => (
          <div key={i} style={{ padding: 22, background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)' }}>
            <div className="eyebrow">{m.l}</div>
            <div className="display mono" style={{ fontSize: 28, color: m.c || 'var(--fg)', marginTop: 8 }}>{m.v}</div>
          </div>
        ))}
      </div>
      <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
        {PAYMENTS.map((p, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '120px 1fr auto auto', gap: 24,
            padding: '16px 24px', alignItems: 'center',
            borderBottom: i < PAYMENTS.length - 1 ? '1px solid var(--border)' : 'none',
          }}>
            <div className="mono" style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{p.d}</div>
            <div style={{ fontSize: 14 }}>{p.t}</div>
            <div className="mono" style={{ fontSize: 15 }}>{fmt(p.v)}</div>
            <span className="chip" style={{
              background: p.status === 'paid' ? 'rgba(111,178,138,0.12)' : 'var(--accent-soft)',
              color: p.status === 'paid' ? 'var(--ok)' : 'var(--accent)',
              border: 'none',
            }}>
              {p.status === 'paid' ? t('Оплачено', 'Paid') : t('Запланировано', 'Scheduled')}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function DashMessages({ lang, advisor, openAI }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);
  const MSGS = [
    { from: 'advisor', text: t('Майкл, апостиль на свидетельстве о рождении нужно получить до 17 мая. Прикрепляю инструкцию.', 'Michael, the apostilled birth certificate must arrive by 17 May. Instructions attached.'), time: '10:24' },
    { from: 'me',      text: t('Принято. Сегодня же отправлю в МИД, готовность 5 дней.', 'Got it. Sending to the MFA today, 5 days turnaround.'), time: '10:38' },
    { from: 'advisor', text: t('Отлично. Параллельно загрузите фото в биометрическом формате – это блокирует следующий этап.', 'Great. In parallel, upload the biometric-format photo – it blocks the next stage.'), time: '10:41' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16 }}>
      <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', display: 'flex', flexDirection: 'column', minHeight: 420 }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div className="img-ph" style={{ width: 36, height: 36, borderRadius: 999 }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 500 }}>{advisor.name}</div>
            <div style={{ fontSize: 12, color: 'var(--ok)' }}>● {t('онлайн', 'online')}</div>
          </div>
        </div>
        <div style={{ flex: 1, padding: 20, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {MSGS.map((m, i) => (
            <div key={i} style={{ alignSelf: m.from === 'me' ? 'flex-end' : 'flex-start', maxWidth: '75%' }}>
              <div style={{
                padding: '10px 14px',
                background: m.from === 'me' ? 'var(--accent-soft)' : 'var(--surface)',
                border: '1px solid', borderColor: m.from === 'me' ? 'var(--accent)' : 'var(--border)',
                borderRadius: m.from === 'me' ? '16px 16px 4px 16px' : '16px 16px 16px 4px',
                fontSize: 14,
              }}>{m.text}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-dim)', marginTop: 4, textAlign: m.from === 'me' ? 'right' : 'left' }}>{m.time}</div>
            </div>
          ))}
        </div>
        <div style={{ padding: 16, borderTop: '1px solid var(--border)' }}>
          <div className="field" style={{ height: 48, borderRadius: 999, paddingLeft: 18 }}>
            <input placeholder={t('Сообщение...', 'Message...')} />
            <button className="btn btn-primary btn-sm" style={{ height: 36 }}>↑</button>
          </div>
        </div>
      </div>

      <div style={{ padding: 24, background: 'var(--accent-soft)', border: '1px solid var(--accent)', borderRadius: 'var(--r-lg)' }}>
        <div className="eyebrow" style={{ marginBottom: 12, color: 'var(--accent-strong)' }}>
          {t('AI-помощник 24/7', 'AI helper 24/7')}
        </div>
        <div style={{ fontSize: 14, lineHeight: 1.6, marginBottom: 16 }}>
          {t('Не хотите ждать менеджера? AI ответит мгновенно на типовые вопросы по вашему кейсу.',
              "Don't want to wait for the advisor? AI answers instantly on standard case questions.")}
        </div>
        <button className="btn btn-primary btn-sm" onClick={() => openAI()} style={{ width: '100%' }}>
          {t('Открыть AI-чат', 'Open AI chat')} →
        </button>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;