/* YeYe Expat Centre — Expat dashboard (driven by client type) */
const D = window.YEYE;

function WelcomeBar({ ct }) {
  const { t } = useT();
  return (
    <div className="phead">
      <div className="pt">
        <div className="eyebrow">{ct.region} · {t('ct.' + ct.key)}</div>
        <h1 className="h1">{t('c.welcome')} {(() => {
          const s = window.YEYE_AUTH && window.YEYE_AUTH.getState && window.YEYE_AUTH.getState();
          const first = (s && s.contact && s.contact.firstName) || (s && s.user && s.user.name) || ct.who;
          const cap = first ? first.split(' ')[0] : ct.who.split(' ')[0];
          return cap ? cap.charAt(0).toUpperCase() + cap.slice(1) : '';
        })()} 👋</h1>
        <div className="muted">{t('tag.' + ct.key)}</div>
      </div>
      <div className="flex gap-8 wrap">
        <Btn variant="ghost" icon="download">{t('c.export')}</Btn>
        <Btn variant="primary" icon="plus">{t('c.newRequest')}</Btn>
      </div>
    </div>
  );
}

function ExpatDashboard({ ct, go, openModal }) {
  const { t, dict } = useT();
  const steps = D.stepFlows[ct.steps].map((s) => ({ label: t('step.' + s.k), state: s.state }));
  const apptDate = (a) => `${dict.weekdays[a.dowi]} ${a.d} ${dict.months[a.moi]} · ${a.time}`;

  return (
    <>
      <WelcomeBar ct={ct} />

      {/* Case progress */}
      <Card className="mb-20">
        <div className="card-bd">
          <div className="flex jb ac mb-20 wrap gap-12">
            <div className="flex ac gap-12" style={{ minWidth: 0, flex: '1 1 auto' }}>
              <div className="hd-ic" style={{ width: 38, height: 38, flexShrink: 0 }}><Icon name={ct.icon} size={19} /></div>
              <div className="col gap-2" style={{ minWidth: 0, flex: '1 1 auto' }}>
                <div className="h3">{t('case.' + ct.key)}</div>
                <div className="muted mono" style={{ fontSize: 12 }}>{ct.caseId} · {t('visa.' + ct.key)}</div>
              </div>
            </div>
            <div className="flex ac gap-12" style={{ flexShrink: 0 }}>
              <Badge tone={ct.currTone} dot>{t('cur.' + ct.key)}</Badge>
              <div className="txt-r"><div className="strong tnum" style={{ fontSize: 18 }}>{ct.pct}%</div><div className="dim" style={{ fontSize: 11.5 }}>{t('sec.complete')}</div></div>
            </div>
          </div>
          <Steps steps={steps} />
          <div className="mt-20 flex gap-10 wrap" style={{ paddingTop: 16, borderTop: '1px solid var(--line-2)' }}>
            <Btn variant="ghost" size="sm" icon="clock">{t('d.estDecision')}</Btn>
            <Btn variant="ghost" size="sm" icon="message-square" onClick={() => go('messages')}>{t('d.askTeam')}</Btn>
            <Btn variant="ghost" size="sm" icon="folder-open" onClick={() => go('cases')}>{t('d.viewCase')}</Btn>
          </div>
        </div>
      </Card>

      {/* stat row */}
      <div className="grid g-12 mb-20" style={{ gap: 16 }}>
        <div className="col-3"><Stat icon="file-check-2" value="3 / 5" label={t('stt.docs')} /></div>
        <div className="col-3"><Stat icon="calendar-clock" tone="blue" value="9 Jun" label={t('stt.nextAppt')} /></div>
        <div className="col-3"><Stat icon="receipt" tone="amber" value="€290" label={t('stt.outstanding')} /></div>
        <div className="col-3"><Stat icon="message-square" value="2" label={t('stt.unread')} /></div>
      </div>

      <div className="dash-grid">
        {/* appointments */}
        <div className="col-6">
          <Card>
            <CardHead icon="calendar-days" title={t('sec.appointments')} sub={t('sec.apptSub')}
              action={<Btn variant="quiet" size="sm" iconR="arrow-right" onClick={() => go('appointments')}>{t('c.all')}</Btn>} />
            <div className="card-bd" style={{ paddingTop: 4, paddingBottom: 4 }}>
              <div className="rowlist">
                {D.appts.map((a, i) => (
                  <div className="lrow" key={i}>
                    <div className="l-ic"><Icon name={a.ic} size={18} /></div>
                    <div className="l-bd"><div className="l-t">{t(a.titleK)}</div><div className="l-s">{apptDate(a)} · {t(a.locK)}</div></div>
                    <Badge tone={a.tagc} dot>{t('st.' + a.tag)}</Badge>
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </div>

        {/* document center */}
        <div className="col-6">
          <Card>
            <CardHead icon="folder" title={t('sec.docCenter')} sub={t('sec.docCenterSub')}
              action={<Btn variant="soft" size="sm" icon="upload" onClick={() => openModal('upload')}>{t('c.upload')}</Btn>} />
            <div className="card-bd" style={{ paddingTop: 4, paddingBottom: 4 }}>
              <div className="rowlist">
                {D.docs.map((d, i) => (
                  <div className="lrow" key={i}>
                    <div className="l-ic" style={d.ok ? { background: 'var(--ok-bg)', color: 'var(--ok)' } : { background: 'var(--bad-bg)', color: 'var(--bad)' }}>
                      <Icon name={d.ok ? 'file-check-2' : 'file-warning'} size={18} />
                    </div>
                    <div className="l-bd"><div className="l-t">{t('doc.' + d.tk)}</div><div className="l-s">{d.ok ? t('c.verified') : (d.tk === 'criminal' ? t('doc.criminalSub') : t('doc.missingSub'))}</div></div>
                    {d.ok ? <Badge tone="ok" dot>{t('c.verified')}</Badge> : <Btn variant="soft" size="sm" icon="upload" onClick={() => openModal('upload')}>{t('c.upload')}</Btn>}
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </div>

        {/* messages */}
        <div className="col-7">
          <Card>
            <CardHead icon="message-square" title={t('sec.messages')} action={<Btn variant="quiet" size="sm" iconR="arrow-right" onClick={() => go('messages')}>{t('c.open')}</Btn>} />
            <div className="card-bd" style={{ paddingTop: 4, paddingBottom: 4 }}>
              <div className="rowlist">
                {D.msgs.map((m, i) => (
                  <div className="lrow pointer" key={i} onClick={() => go('messages')}>
                    <Avatar size="md" tone={m.c === 'brand' ? { bg: 'var(--brand-100)', fg: 'var(--brand-700)' } : { bg: 'var(--accent-100)', fg: 'var(--accent-700)' }}>{m.av}</Avatar>
                    <div className="l-bd"><div className="l-t">{t('who.' + m.whoK)}</div><div className="l-s" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t('m.' + m.tk)}</div></div>
                    <div className="txt-r flex col gap-6 ac"><span className="dim" style={{ fontSize: 11.5 }}>{m.t}</span>{m.n > 0 && <span className="nav-badge">{m.n}</span>}</div>
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </div>

        {/* invoices */}
        <div className="col-5">
          <Card>
            <CardHead icon="receipt" title={t('sec.invoices')} action={<Btn variant="quiet" size="sm" iconR="arrow-right" onClick={() => go('invoices')}>{t('c.all')}</Btn>} />
            <div className="card-bd">
              <div className="flex gap-12 mb-16">
                <div className="grow" style={{ background: 'var(--ok-bg)', border: '1px solid var(--ok-line)', borderRadius: 'var(--r-md)', padding: '12px 14px' }}>
                  <div className="dim" style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--ok)' }}>{t('st.paid')}</div><div className="strong tnum" style={{ fontSize: 19 }}>€160.00</div>
                </div>
                <div className="grow" style={{ background: 'var(--warn-bg)', border: '1px solid var(--warn-line)', borderRadius: 'var(--r-md)', padding: '12px 14px' }}>
                  <div className="dim" style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--warn)' }}>{t('st.outstanding')}</div><div className="strong tnum" style={{ fontSize: 19 }}>€290.00</div>
                </div>
              </div>
              <div className="lrow" style={{ borderBottom: 'none', padding: '4px 0' }}>
                <div className="l-bd"><div className="l-t mono" style={{ fontSize: 12.5 }}>YE-2026-0142</div><div className="l-s">{t('c.due')} 14 Jun 2026</div></div>
                <Btn variant="primary" size="sm" onClick={() => go('invoices')}>{t('c.pay')} €290</Btn>
              </div>
            </div>
          </Card>
        </div>

        {/* notifications */}
        <div className="col-12">
          <Card>
            <CardHead icon="bell" title={t('sec.notifications')} sub={t('sec.notifSub')} />
            <div className="card-bd"><div className="grid g-12" style={{ gap: 12 }}>
              {D.notifs.map((n, i) => (
                <div className="col-4" key={i}>
                  <Alert tone={n.ty} icon={n.ic} title={t(n.tk)}>{t('sk.' + n.sk)}</Alert>
                </div>
              ))}
            </div></div>
          </Card>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { ExpatDashboard });