// FRAZIER Finance OS — Jarvis shell. Phase 1: UI only, 5 fixed skills shown
// as cards, no backend wired yet (fin_ai_claude lands in Phase 5 — see the
// Finance OS plan, §7). Submitting a question here just shows the
// "not wired up yet" placeholder so the shape of the page is real before
// the engine exists.

const FIN_JARVIS_SKILLS = [
  { id: 'cash',       icon: '💰', title: 'Cash',        sub: 'How much cash do we have?' },
  { id: 'collections', icon: '📥', title: 'Collections', sub: "Who hasn't paid us?" },
  { id: 'upcoming',   icon: '📅', title: 'Upcoming',    sub: "What's coming in and going out?" },
  { id: 'decision',   icon: '🧮', title: 'Decision',    sub: 'Can we afford something?' },
  { id: 'risk',       icon: '⚠️', title: 'Weekly Risk', sub: 'What needs my attention?' },
];

function FinJarvis({ initialQuestion }) {
  const [q, setQ] = React.useState(initialQuestion || '');
  const [asked, setAsked] = React.useState(initialQuestion || null);
  React.useEffect(() => { if (initialQuestion) setAsked(initialQuestion); }, [initialQuestion]);

  return (
    <div className="fin-jarvis">
      <FinPageHead title="Jarvis" sub="What would you like to understand?" />

      <div className="fin-jarvis-cards">
        {FIN_JARVIS_SKILLS.map((s) => (
          <button key={s.id} type="button" className="fin-jcard" onClick={() => setAsked(s.sub)}>
            <span className="fin-jcard-ico" aria-hidden="true">{s.icon}</span>
            <span className="fin-jcard-t">{s.title}</span>
            <span className="fin-jcard-sub">{s.sub}</span>
          </button>
        ))}
      </div>

      <form className="fin-ask" onSubmit={(e) => { e.preventDefault(); if (q.trim()) setAsked(q.trim()); }}>
        <input className="fin-input fin-ask-input" placeholder="Ask another finance question…"
          value={q} onChange={(e) => setQ(e.target.value)} />
        <button type="submit" className="fin-btn is-primary"><FinIcon name="send" size={15} /> Ask</button>
      </form>

      {asked ? (
        <FinPanel title={asked} icon="jarvis" className="fin-jarvis-answer">
          <p className="fin-jarvis-stub">
            Jarvis's reasoning backend isn't connected yet — this is Phase 1 (shell only). Once the
            calculation engine (Phase 4) and the Claude integration (Phase 5) are built, this panel
            will show ANSWER / WHY / NUMBERS / RISK / RECOMMENDED ACTION, backed by real numbers.
          </p>
        </FinPanel>
      ) : null}
    </div>
  );
}

Object.assign(window, { FinJarvis, FIN_JARVIS_SKILLS });