// Screen: Insights (AI analyst layer)
function Insights({ go, nav }) {
  const { useState } = React;
  const [toast, showToast] = useToast();
  const [q, setQ] = useState('');
  const [thread, setThread] = useState([]);   // {q, a}
  const [thinking, setThinking] = useState(false);

  const ask = (question) => {
    const text = (question || q).trim();
    if (!text || thinking) return;
    setQ('');
    setThinking(true);
    window.setTimeout(() => {
      const a = ASK_ANSWERS[text] ||
        'I looked across all three stores for the last 90 days. The short answer: the pattern you’re asking about concentrates at Burlington and inside your Medicare Part D mix. I’ve queued a full breakdown under Reports → Margin by Payer — the three numbers that matter are GP per fill ($6.10 on Part D vs $11.40 on Regence), refill completion (81% at Burlington vs 89% flagship), and compounding share (31% / 7% / 5% by store).';
      setThread(t => [{ q: text, a }, ...t]);
      setThinking(false);
    }, 700);
  };

  return (
    <div className="content" data-screen-label="Insights">

      {/* Ask bar */}
      <div>
        <SectionHead title="Ask your pharmacy"></SectionHead>
        <div className="card ask" style={{ marginTop: 10 }}>
          <span className="prompt-mark">✳</span>
          <input
            value={q}
            placeholder="Ask anything about the business — payers, margins, stores, formulas…"
            onChange={e => setQ(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') ask(); }}
          ></input>
          <button className="go" onClick={() => ask()}>{thinking ? 'Reading…' : 'Ask'}</button>
        </div>
        <div className="chips" style={{ marginTop: 10 }}>
          {ASK_CHIPS.map(c => (
            <button key={c} className="chip" onClick={() => ask(c)}>{c}</button>
          ))}
        </div>
      </div>

      {thread.length > 0 ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {thread.map((t, i) => (
            <div className="card answer" key={i}>
              <span className="who">Analyst</span>
              <div>
                <div className="q">“{t.q}”</div>
                <p>{t.a}</p>
              </div>
            </div>
          ))}
        </div>
      ) : null}

      {/* Findings */}
      <div>
        <SectionHead title="This week’s findings · reviewed against 90 days of fills"></SectionHead>
        <div className="insight-grid" style={{ marginTop: 10 }}>
          {INSIGHTS.map(card => (
            <div className="card insight-card" key={card.id}>
              <span className={'tag ' + card.tone}>{card.tag}</span>
              <h3>{card.title}</h3>
              <p>{card.body}</p>
              <div className="insight-facts">
                {card.facts.map(([k, v], i) => (
                  <div key={i}>
                    <div className="v">{v}</div>
                    <div className="k">{k}</div>
                  </div>
                ))}
              </div>
              <button className="insight-action" onClick={() => {
                if (card.id === 'i3') go('compounding');
                else if (card.id === 'i4') go('queue');
                else if (card.id === 'i2') go('reports');
                else if (card.id === 'i5') nav.goQueue('rejections');
                else if (card.id === 'i1') showToast('Courier schedule drafted — added to Monday’s ops review.');
              }}>{card.action} →</button>
            </div>
          ))}
        </div>
      </div>
      <Toast msg={toast}></Toast>
    </div>
  );
}

Object.assign(window, { Insights });