/* Atlas Ledger — Reports (drill-to-source), Banking, Documents, Compliance */

function ReportsPage() {
  const [drill, setDrill] = React.useState(null); // label of drilled line
  const drillData = {
    'Advertising': [
      { date: '03 May', desc: 'Meta Ads · campaign “Summer”', amt: '18,400', doc: 'meta_invoice_0503.pdf' },
      { date: '12 May', desc: 'Google Ads', amt: '15,200', doc: 'google_ads_may.pdf' },
      { date: '26 May', desc: 'KOL collaboration · @hkfoodie', amt: '8,400', doc: 'kol_receipt.jpg' },
    ],
    'Rent': [{ date: '01 May', desc: 'Office rent · Wan Chai', amt: '28,000', doc: 'office_rent_invoice_may.pdf' }],
  };
  const rows = HBD.pl;
  return (
    <div className="hb-page hb-shell" style={{ paddingTop: 26, paddingBottom: 40 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', flexWrap: 'wrap', gap: 8 }}>
        <span style={{ fontSize: 22, fontWeight: 700 }}>Reports</span>
        <span style={{ fontSize: 13, color: 'var(--hb-muted)', marginLeft: 12 }}>May 2026 · P&L</span>
        <span style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--hb-muted)' }}>Every figure drills down to its source document</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: drill ? '1fr 360px' : '1fr', gap: 20, marginTop: 18, alignItems: 'start' }}>
        {/* P&L */}
        <div style={{ background: '#fff', border: '1px solid var(--hb-line)', borderRadius: 14, padding: '18px 24px' }}>
          {rows.map(([l, v, sub]) => {
            const drillable = !!{ 'Advertising': 1, 'Rent': 1 }[l];
            return (
              <div key={l} onClick={() => drillable && setDrill(drill === l ? null : l)} style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 0',
                borderTop: sub ? '1px solid var(--hb-line)' : '1px solid var(--hb-line-soft)',
                fontWeight: sub ? 600 : 400, cursor: drillable ? 'pointer' : 'default',
                background: drill === l ? 'var(--hb-teal-tint)' : 'transparent',
                margin: drill === l ? '0 -12px' : 0, paddingLeft: drill === l ? 12 : 0, paddingRight: drill === l ? 12 : 0, borderRadius: 8,
              }}>
                <span style={{ fontSize: 14, display: 'flex', alignItems: 'center', gap: 7, whiteSpace: 'nowrap', minWidth: 0 }}>
                  {l}
                  {drillable && <HIcon name="arrowUR" size={13} color="var(--hb-teal)" />}
                </span>
                <span className="hb-num" style={{ fontSize: 14.5, color: v < 0 ? 'var(--hb-muted)' : 'var(--hb-ink)', flexShrink: 0, paddingLeft: 16 }}>{fmtHKD(v)}</span>
              </div>
            );
          })}
          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '11px 0 4px', borderTop: '1px solid var(--hb-ink)', marginTop: 2 }}>
            <span style={{ fontSize: 15, fontWeight: 700 }}>Net profit</span>
            <span className="hb-num" style={{ fontSize: 17, fontWeight: 700 }}>95,000</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--hb-faint)', marginTop: 12 }}>Teal-marked lines are drillable — click one. Balance sheet and cash flow live here too in the full build.</div>
        </div>
        {/* drill panel */}
        {drill && (
          <div className="hb-page" style={{ background: '#fff', border: '1px solid var(--hb-line)', borderRadius: 14, padding: '16px 20px' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span style={{ fontSize: 14.5, fontWeight: 700 }}>{drill} · May</span>
              <button onClick={() => setDrill(null)} style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', padding: 4 }}>
                <HIcon name="x" size={16} color="var(--hb-muted)" />
              </button>
            </div>
            {(drillData[drill] || []).map((e) => (
              <div key={e.doc} style={{ borderTop: '1px solid var(--hb-line-soft)', padding: '10px 0' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                  <span style={{ fontWeight: 600 }}>{e.desc}</span>
                  <span className="hb-num">{e.amt}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
                  <span style={{ fontSize: 11.5, color: 'var(--hb-faint)' }}>{e.date}</span>
                  <a className="hb-link" style={{ fontSize: 11.5, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                    <HIcon name="receipt" size={12} color="var(--hb-teal)" />{e.doc}
                  </a>
                </div>
              </div>
            ))}
            <div style={{ background: 'var(--hb-bg)', borderRadius: 9, padding: '9px 12px', fontSize: 11.5, color: 'var(--hb-muted)', marginTop: 8 }}>
              Journal entry → source document. This chain is what your auditor sees too.
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function BankingPage() {
  return (
    <div className="hb-page hb-shell" style={{ paddingTop: 26, paddingBottom: 40 }}>
      <div style={{ display: 'flex', alignItems: 'baseline' }}>
        <span style={{ fontSize: 22, fontWeight: 700 }}>Banking</span>
        <span className="hb-num" style={{ marginLeft: 'auto', fontSize: 13, color: 'var(--hb-muted)' }}>Total HKD 1,245,300</span>
      </div>
      <div style={{ marginTop: 16, borderTop: '1px solid var(--hb-line)' }}>
        {HBD.accounts.map((a) => (
          <div key={a.tail} className="hb-row hb-acct-row" style={{ height: 60 }}>
            <div style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--hb-teal-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: 14 }}>
              <HIcon name="bank" size={18} color="var(--hb-teal)" />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{a.name} <span className="hb-num" style={{ color: 'var(--hb-faint)', fontWeight: 400 }}>····{a.tail}</span></div>
              <div style={{ fontSize: 12, color: a.ok ? 'var(--hb-green)' : 'var(--hb-amber)', marginTop: 1 }}>{a.note}</div>
            </div>
            {!a.ok && <button className="hb-btn ghost hb-acct-upload" style={{ marginRight: 16, padding: '7px 13px', fontSize: 12.5 }}><HIcon name="upload" size={14} color="var(--hb-teal)" /> Upload statement</button>}
            <span className="hb-num" style={{ fontSize: 17, fontWeight: 600 }}>{a.bal.toLocaleString('en-US')}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 18, fontSize: 12.5, color: 'var(--hb-muted)' }}>Feeds sync nightly. A missing statement is the only thing we'll ever chase you for here.</div>
    </div>
  );
}

function DocumentsPage() {
  return (
    <div className="hb-page hb-shell" style={{ paddingTop: 26, paddingBottom: 40 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', flexWrap: 'wrap', gap: 8 }}>
        <span style={{ fontSize: 22, fontWeight: 700 }}>Documents</span>
        <span style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--hb-muted)' }}>WhatsApp · email forward · Drive sync · drag &amp; drop</span>
      </div>
      <div style={{ marginTop: 16, border: '1.5px dashed var(--hb-line)', borderRadius: 14, background: '#fff', padding: '28px 20px', textAlign: 'center' }}>
        <HIcon name="upload" size={26} color="var(--hb-teal)" />
        <div style={{ fontSize: 14.5, fontWeight: 600, marginTop: 8 }}>Drop receipts or invoices here</div>
        <div style={{ fontSize: 12.5, color: 'var(--hb-muted)', marginTop: 3 }}>or WhatsApp a photo to <b>+852 5555 0123</b> — booked within minutes either way</div>
      </div>
      <div style={{ marginTop: 20 }}>
        <div className="hb-label" style={{ marginBottom: 4 }}>Recent</div>
        {HBD.documents.map((d) => (
          <div key={d.name} className="hb-row" style={{ height: 52 }}>
            <HIcon name="doc" size={17} color="var(--hb-faint)" style={{ marginRight: 12 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.name}</div>
              <div style={{ fontSize: 11.5, color: 'var(--hb-muted)' }}>{d.via} · {d.when}</div>
            </div>
            <span className={'hb-tag ' + (d.st === 'Booked' ? 'green' : 'answer')}>{d.st}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function CompliancePage() {
  const dot = { green: 'var(--hb-green)', amber: '#D9A23E', red: 'var(--hb-red)' };
  return (
    <div className="hb-page hb-shell" style={{ paddingTop: 26, paddingBottom: 40 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
        <span style={{ fontSize: 22, fontWeight: 700 }}>Compliance</span>
        <span className="hb-tag answer">2 due within 30 days</span>
        <span style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--hb-green)', fontWeight: 600 }}>Everything else is clear ✓</span>
      </div>
      <div style={{ marginTop: 16, borderTop: '1px solid var(--hb-line)' }}>
        {HBD.compliance.map((c) => (
          <div key={c.label} className="hb-row" style={{ height: 58 }}>
            <span style={{ width: 10, height: 10, borderRadius: '50%', background: dot[c.status], marginRight: 14, flexShrink: 0 }}></span>
            <span className="hb-num" style={{ width: 70, fontSize: 12.5, color: 'var(--hb-muted)', flexShrink: 0 }}>{c.due}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{c.label}</div>
              <div style={{ fontSize: 12, color: 'var(--hb-muted)', marginTop: 1 }}>{c.note}</div>
            </div>
            {c.status === 'amber' && <a className="hb-link" style={{ fontSize: 13, whiteSpace: 'nowrap' }}>Review →</a>}
          </div>
        ))}
      </div>
      <div style={{ marginTop: 18, background: '#fff', border: '1px solid var(--hb-line)', borderRadius: 12, padding: '13px 18px', fontSize: 12.5, color: 'var(--hb-muted)', lineHeight: 1.7 }}>
        <b style={{ color: 'var(--hb-ink)' }}>How statuses work:</b> green — all good · amber — due within 30 days · red — overdue risk.
        Your company secretary prepares everything; you only confirm and sign.
      </div>
    </div>
  );
}

Object.assign(window, { ReportsPage, BankingPage, DocumentsPage, CompliancePage });