/* MedBridge patient view — AI summary (the main screen) */

const { useState: useSS, useEffect: useSE } = React;

/* snapshot cards (2x2) */
function SnapCards({ p, go }) {
  const cards = p.snapshot || [];
  if (!cards.length) return null;
  return (
    <div className="snap-grid">
      {cards.map((c, i) => (
        <div className="snap" key={i} onClick={() => go(c.to)}>
          <div className="sn-lab"><Icon name={c.ic} size={13} />{c.lab}</div>
          <div className="sn-val">{c.val}</div>
          <div className="sn-sub">{c.sub}</div>
        </div>
      ))}
    </div>
  );
}

/* answer panel that appears when a chip / question is asked */
function AnswerPanel({ q, a, loading, onClose }) {
  return (
    <div className="sum-panel" style={{ marginTop: 14, background: "linear-gradient(180deg,#F6F8FA,#fff 55%)", borderColor: "var(--border)" }}>
      <div className="sum-head" style={{ borderColor: "var(--hairline)" }}>
        <span className="sum-spark" style={{ background: "linear-gradient(140deg,#5B6B76,#3a4751)" }}><Icon name="info" size={16} /></span>
        <div className="grow">
          <div className="sum-title" style={{ color: "var(--text-2)" }}>{q}</div>
          <div className="sum-meta">MedBridge AI · grounded in connected records</div>
        </div>
        <button className="sum-act ghost" onClick={onClose}><Icon name="x" size={13} />Close</button>
      </div>
      <div className="sum-body" style={{ paddingTop: 14 }}>
        {loading ? (
          <div className="row gap8 muted" style={{ fontSize: 13 }}>
            <span className="ai-dots"><span></span><span></span><span></span></span>Searching connected records…
          </div>
        ) : (
          <p style={{ fontSize: 13.5, lineHeight: 1.65, margin: 0 }}>{a}</p>
        )}
      </div>
    </div>
  );
}

function AISummaryView({ p, format, go, initialAsk }) {
  const S = p.summary;
  const [accepted, setAccepted] = useSS(false);
  const [edit, setEdit] = useSS(false);
  const [ask, setAsk] = useSS(null); // {q, a, loading}

  useSE(() => { if (initialAsk && initialAsk.q) runQuestion(initialAsk.q); /* eslint-disable-next-line */ }, []);

  function runQuestion(q) {
    const canned = S.answers[q];
    setAsk({ q, a: canned || "", loading: true });
    (async () => {
      let out = canned || "";
      try {
        if (!canned && window.claude && window.claude.complete) {
          out = await window.claude.complete(
            `You are MedBridge, a clinical AI assistant viewing a de-identified patient record. Patient context: ${S.headline}. Answer this clinician question in 2-3 plain sentences, grounded only in that record, no markdown: "${q}"`
          );
        }
      } catch (e) { /* keep canned/empty */ }
      if (!out) out = "I don't have enough in the connected records to answer that confidently. Open the relevant chart section to verify.";
      setAsk({ q, a: out, loading: false });
    })();
  }

  const nSrc = p.connected ? p.connected.length : 0;

  return (
    <div>
      {/* ---- the AI summary panel ---- */}
      <div className="sum-panel">
        <div className="sum-head">
          <span className="sum-spark"><Icon name="activity" size={16} /></span>
          <div className="grow">
            <div className="sum-title">MedBridge AI — Patient Summary across all sources</div>
            <div className="sum-meta">Assembled live from {nSrc} of 4 connected system{nSrc !== 1 ? "s" : ""} · {format === "bullets" ? "chronological, most recent first" : "narrative"}</div>
          </div>
          <span className="badge badge-purple">claude</span>
        </div>

        <div className="sum-body">
          <div className="sum-lede">{S.headline}</div>

          {format === "bullets" ? (
            S.groups.map((g, gi) => (
              <div className="sum-group" key={gi}>
                <div className={`sum-glabel ${g.tone ? "tone-" + g.tone : ""}`}><span className="gl-tab" />{g.label}</div>
                {g.items.map((it, ii) => (
                  <div className={`sum-item ${g.tone === "crit" ? "crit" : ""}`} key={ii}>
                    <span className="si-mark"><Icon name={g.tone === "crit" ? "alert" : "check"} size={14} /></span>
                    <span className="grow">{it.t}</span>
                    {it.src && <SourcePill id={it.src} />}
                  </div>
                ))}
              </div>
            ))
          ) : (
            <div className="sum-prose">
              {S.prose.map((para, i) => (
                <p key={i} className={para.crit ? "crit-line" : ""}>{para.crit ? <b>{para.t}</b> : para.t}</p>
              ))}
            </div>
          )}

          {edit && (
            <div style={{ marginTop: 14, padding: "10px 13px", borderRadius: 10, background: "var(--mb-warn-bg,#FBF1E0)", border: "1px solid #ECD9AE", fontSize: 12.5, color: "#7A5A12", display: "flex", gap: 9, alignItems: "center" }}>
              <Icon name="edit" size={15} /> Edit mode would let a clinician revise the AI draft before it enters the note. Stubbed in this prototype.
            </div>
          )}

          {/* follow-up chips */}
          <div className="sum-chips">
            {S.chips.map((c, i) => (
              <button className="sum-chip" key={i} onClick={() => runQuestion(c)}>{c}<Icon name="send" size={12} className="ch-ar" /></button>
            ))}
          </div>
        </div>

        {/* action bar — keeps AI assistive, not authoritative */}
        <div className="sum-actions">
          <button className={`sum-act ${accepted ? "accepted" : "primary"}`} onClick={() => setAccepted((v) => !v)}>
            <Icon name="check" size={14} />{accepted ? "Summary accepted" : "Accept summary"}
          </button>
          <button className={`sum-act ghost`} onClick={() => setEdit((v) => !v)}><Icon name="edit" size={13} />Edit</button>
          <button className="sum-act flag"><Icon name="flag" size={13} />Flag incorrect</button>
          <button className="sum-act ghost" onClick={() => runQuestion(S.chips[0])}><Icon name="file" size={13} />View source</button>
          <span className="sum-disclaim"><Icon name="info" size={12} />AI-assisted · verify before clinical decisions</span>
        </div>
      </div>

      {/* answer panel */}
      {ask && <AnswerPanel q={ask.q} a={ask.a} loading={ask.loading} onClose={() => setAsk(null)} />}

      {/* ---- active alert ---- */}
      {p.alert && (
        <div className="alert-bar">
          <span className="ab-ic"><Icon name="alert" size={19} /></span>
          <div className="ab-txt">
            <b>{p.alert.lead}</b> {p.alert.body}
            <div><button className="ab-act" onClick={() => go(p.alert.to)}><Icon name="chevR" size={13} />Review now</button></div>
          </div>
        </div>
      )}

      {/* ---- snapshot cards ---- */}
      <SnapCards p={p} go={go} />

      {/* ---- recent history preview ---- */}
      {p.timeline && p.timeline.length > 0 && (
        <>
          <SectionHead>Recent history · assembled from all sources</SectionHead>
          <TimelineView p={p} data={p.timeline.slice(0, 5)} />
          {p.timeline.length > 5 && (
            <div style={{ display: "flex", justifyContent: "center" }}>
              <button className="sum-act ghost" onClick={() => go("timeline")}><Icon name="chevD" size={14} />View full timeline ({p.timeline.length} events)</button>
            </div>
          )}
        </>
      )}
    </div>
  );
}

Object.assign(window, { AISummaryView, SnapCards });