// FRAZIER Finance OS — Home ("finance command center"). Phase 1: MOCK DATA
// ONLY (hardcoded below, clearly labeled) — no fin_calc_* backend exists
// yet. Phase 2 replaces FIN_HOME_MOCK with a real finApi('fin_home_summary')
// call backed by the deterministic calc engine (see the Finance OS plan,
// §6). The layout/behavior built here does not change when that lands —
// only the data source does.
const FIN_HOME_MOCK = {
  greeting: 'Good morning',
  healthy: false,
  healthLine: '3 things need your attention.',
  cash: 418_500_000,
  moneyInMonth: 185_000_000,
  moneyOutMonth: 142_300_000,
  cash3mo: 512_000_000,
  attention: [
    { id: 'ar1', tone: 'warn', title: '3 invoices overdue', amount: 45_000_000 },
    { id: 'pr1', tone: 'warn', title: 'Payroll due in 5 days', amount: 72_000_000 },
    { id: 'cf1', tone: 'crit', title: 'Cash may drop below reserve in January', amount: null },
  ],
};

const FIN_JARVIS_SUGGEST = [
  'Can we hire someone?',
  'How much cash will we have in 3 months?',
  "Who hasn't paid us?",
  'Why did expenses increase?',
];

function FinHomeCard({ label, value, tone }) {
  return (
    <div className={finCls('fin-hcard', tone ? 'is-' + tone : '')}>
      <span className="fin-hcard-l">{label}</span>
      <span className="fin-hcard-v">{finIDR(value)}</span>
    </div>
  );
}

function FinHome({ user, onNavigate }) {
  const d = FIN_HOME_MOCK;
  const [q, setQ] = React.useState('');
  const first = (user && user.name ? user.name.split(' ')[0] : '') || '';

  return (
    <div className="fin-home">
      <section className="fin-home-hero">
        <div className="fin-eyebrow">{d.greeting}{first ? ', ' + first : ''}</div>
        <h1 className={finCls('fin-home-health', d.healthy ? 'is-ok' : 'is-warn')}>
          {d.healthy ? 'Your finances look healthy.' : d.healthLine}
        </h1>
      </section>

      <section className="fin-home-cards" aria-label="Key numbers">
        <FinHomeCard label="CASH" value={d.cash} />
        <FinHomeCard label="MONEY IN THIS MONTH" value={d.moneyInMonth} tone="ok" />
        <FinHomeCard label="MONEY OUT THIS MONTH" value={d.moneyOutMonth} tone="crit" />
        <FinHomeCard label="EXPECTED CASH · NEXT 3 MONTHS" value={d.cash3mo} />
      </section>

      {d.attention.length ? (
        <FinPanel title="What needs your attention?" icon="warn">
          <div className="fin-attn-list">
            {d.attention.map((a) => (
              <button key={a.id} type="button" className={finCls('fin-attn-row', 'is-' + a.tone)}>
                <FinIcon name="warn" size={15} />
                <span className="fin-attn-t">{a.title}</span>
                {a.amount !== null ? <span className="fin-attn-v">{finIDR(a.amount)}</span> : null}
                <FinIcon name="chevr" size={15} className="fin-attn-go" />
              </button>
            ))}
          </div>
        </FinPanel>
      ) : null}

      <FinPanel title="Ask Jarvis" icon="jarvis" sub="Your AI CFO — scoped to five things it knows well.">
        <form className="fin-ask" onSubmit={(e) => { e.preventDefault(); onNavigate('jarvis', q); }}>
          <input className="fin-input fin-ask-input" placeholder="Ask anything about FRAZIER's finances…"
            value={q} onChange={(e) => setQ(e.target.value)} />
          <button type="submit" className="fin-btn is-primary"><FinIcon name="send" size={15} /> Ask</button>
        </form>
        <div className="fin-ask-suggest">
          {FIN_JARVIS_SUGGEST.map((s) => (
            <button key={s} type="button" className="fin-btn is-ghost" onClick={() => onNavigate('jarvis', s)}>{s}</button>
          ))}
        </div>
      </FinPanel>
    </div>
  );
}

Object.assign(window, { FinHome, FIN_HOME_MOCK });