/* Atlas Ledger — Home page (layout A: editorial, hairlines) in Harbour skin */

function HomePage({ state, go }) {
  const { answers, signed, confirmed } = state;
  const answeredCount = (answers.q1 ? 1 : 0) + (answers.q2 ? 1 : 0);
  const stepsLeft = (2 - answeredCount) + (signed ? 0 : 1) + (confirmed ? 0 : 1);

  const todos = [
    { n: '01', kind: 'Answer', title: 'What was the HKD 52,000 transfer on 15 May?', meta: 'To WK Logistics · no matching document', done: !!answers.q1 },
    { n: '02', kind: 'Answer', title: 'ATM withdrawal of HKD 8,000 on 6 May — what for?', meta: 'No matching document', done: !!answers.q2 },
    { n: '03', kind: 'Sign', title: 'BIR51 Profits Tax Return', meta: 'Due 30 Jun · prepared by your team', done: signed },
    { n: '04', kind: 'Confirm', title: 'Confirm May accounts', meta: answeredCount < 2 ? 'Unlocks after the 2 answers above' : 'Everything is ready', done: confirmed, locked: answeredCount < 2 },
  ];
  const open = todos.filter((t) => !t.done).length;

  const kpi = [
    { l: 'Revenue · May', v: '380,000', d: '+12% MoM', c: 'var(--hb-green)' },
    { l: 'Profit · May', v: '95,000', d: '25% margin', c: 'var(--hb-muted)' },
    { l: 'Receivables open', v: '150,000', d: '1 invoice over 60 days — chase?', c: 'var(--hb-red)', goto: 'reports' },
  ];

  return (
    <div className="hb-page hb-shell" style={{ paddingTop: 26, paddingBottom: 28, display: 'flex', flexDirection: 'column' }}>
      {/* greeting */}
      <div style={{ display: 'flex', alignItems: 'baseline', flexWrap: 'wrap', gap: 8 }}>
        <div>
          <span style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-.01em' }}>
            {confirmed ? 'May is closed. Nice work.' : 'Good morning, ' + HBD.user + '.'}
          </span>
          <span style={{ fontSize: 13.5, color: 'var(--hb-muted)', marginLeft: 14 }}>
            {confirmed ? 'Reports are filed — see you in July.' : open > 0 ? stepsLeft + ' quick ' + (stepsLeft === 1 ? 'step' : 'steps') + ' to close May (~2 min)' : 'May is ready to confirm.'}
          </span>
        </div>
        <div style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--hb-muted)' }}>{HBD.date} · {HBD.company}</div>
      </div>

      {/* hero: cash position */}
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 40, marginTop: 22, flexWrap: 'wrap' }}>
        <div style={{ flex: 1, minWidth: 260 }}>
          <div className="hb-label">Cash position</div>
          <div className="hb-cash-row" style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 8 }}>
            <span style={{ fontSize: 16, fontWeight: 600, color: 'var(--hb-muted)' }}>HKD</span>
            <span className="hb-num hb-cash-num" style={{ fontSize: 50, fontWeight: 700, lineHeight: 1.05 }}>1,245,300</span>
            <span style={{ background: 'var(--hb-green-tint)', color: 'var(--hb-green)', fontSize: 12, fontWeight: 700, borderRadius: 7, padding: '3px 8px', whiteSpace: 'nowrap' }}>+4.8% this month</span>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--hb-muted)', marginTop: 8 }}>3 bank accounts · HKD 32,150 card balance due 25 Jun</div>
        </div>
        <div className="hb-desktop-only" style={{ width: 360 }}>
          <HBArea data={HBD.cashTrendK} w={360} h={92} />
          <div style={{ fontSize: 11, color: 'var(--hb-faint)', textAlign: 'right', marginTop: 4 }}>Cash · last 8 months</div>
        </div>
      </div>

      {/* accounts */}
      <div style={{ marginTop: 16, borderTop: '1px solid var(--hb-line)' }}>
        {HBD.accounts.map((a) => (
          <div key={a.tail} className="hb-row" style={{ height: 44, cursor: 'pointer', display: 'grid', gridTemplateColumns: '130px 70px 1fr auto', alignItems: 'center', gap: 12 }} onClick={() => go('banking')}>
            <span style={{ fontSize: 13.5, fontWeight: 500, whiteSpace: 'nowrap' }}>{a.name}</span>
            <span className="hb-num" style={{ fontSize: 12, color: 'var(--hb-faint)' }}>····{a.tail}</span>
            <span style={{ fontSize: 12, color: a.ok ? 'var(--hb-green)' : 'var(--hb-amber)', fontWeight: a.ok ? 400 : 600 }} className="hb-desktop-only">{a.note}{a.ok ? '' : ' →'}</span>
            <span className="hb-num" style={{ fontSize: 16, fontWeight: 600, textAlign: 'right' }}>{a.bal.toLocaleString('en-US')}</span>
          </div>
        ))}
      </div>

      {/* KPI band */}
      <div className="hb-kpi-band" style={{ display: 'flex', marginTop: 18, borderTop: '1px solid var(--hb-line)', borderBottom: '1px solid var(--hb-line)', flexWrap: 'wrap' }}>
        {kpi.map((k, i) => (
          <div key={k.l} className="hb-kpi" onClick={() => k.goto && go(k.goto)} style={{ flex: '1 1 180px', padding: '14px 0 14px ' + (i === 0 ? '0' : '26px'), borderLeft: i === 0 ? 'none' : '1px solid var(--hb-line)', cursor: k.goto ? 'pointer' : 'default' }}>
            <div className="hb-label">{k.l}</div>
            <div className="hb-num" style={{ fontSize: 27, fontWeight: 700, marginTop: 6 }}>{k.v}</div>
            <div style={{ fontSize: 12, marginTop: 3, color: k.c }}>{k.d}</div>
          </div>
        ))}
      </div>

      {/* todos */}
      <div style={{ marginTop: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ fontSize: 19, fontWeight: 700 }}>Tasks</span>
          {open > 0 && <span style={{ minWidth: 20, height: 20, background: 'var(--hb-teal)', color: '#fff', borderRadius: 10, fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: '0 6px' }}>{open}</span>}
          <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--hb-muted)' }} className="hb-desktop-only">
            {confirmed ? 'All done for May ✓' : 'Finish them in one go — '}
            {!confirmed && <a className="hb-link" onClick={() => go('tasks')}>start the 2-minute close →</a>}
          </span>
        </div>
        <div style={{ marginTop: 6 }}>
          {todos.map((t, i) => (
            <div key={t.n} className="hb-row" style={{ gap: 18, padding: '12px 0', border: 'none', borderBottom: i === 3 ? 'none' : '1px solid var(--hb-line)', opacity: t.locked && !t.done ? 0.55 : 1 }}>
              <span className="hb-num" style={{ fontSize: 13, color: 'var(--hb-faint)', width: 20 }}>{t.n}</span>
              <span className={'hb-tag ' + t.kind.toLowerCase()}>{t.kind}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 500, textDecoration: t.done ? 'line-through' : 'none', color: t.done ? 'var(--hb-faint)' : 'var(--hb-ink)' }}>{t.title}</div>
                <div style={{ fontSize: 12, color: 'var(--hb-muted)', marginTop: 2 }}>{t.meta}</div>
              </div>
              {t.done
                ? <HIcon name="check" size={17} color="var(--hb-green)" />
                : t.locked
                  ? <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--hb-muted)' }}><HIcon name="lock" size={14} color="var(--hb-faint)" /><span className="hb-desktop-only">Unlocks after the answers</span></span>
                  : <a className="hb-link" style={{ fontSize: 13, whiteSpace: 'nowrap' }} onClick={() => go('tasks')}>{t.kind} →</a>}
            </div>
          ))}
        </div>
      </div>

      {/* ask bar */}
      <div style={{ marginTop: 26, borderTop: '1px solid var(--hb-line)', paddingTop: 14, display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }} onClick={() => go('messages')}>
        <HIcon name="spark" size={18} color="var(--hb-muted)" />
        <span style={{ fontSize: 13.5, color: 'var(--hb-faint)', flex: 1 }}>Ask your accounting team: how much did we spend on ads last month?</span>
        <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--hb-teal)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <HIcon name="send" size={15} color="#fff" />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HomePage });