function History({ token, darkMode = false }) {
  const [sessions,        setSessions]        = React.useState([]);
  const [loading,         setLoading]         = React.useState(true);
  const [error,           setError]           = React.useState(false);
  const [selected,        setSelected]        = React.useState(null);
  const [sessionLoading,  setSessionLoading]  = React.useState(false);

  function loadHistory() {
    if (!token) { setLoading(false); return; }
    setLoading(true);
    setError(false);
    fetch("https://api.usegreenroom.app/api/history", {
      headers: { Authorization: `Bearer ${token}` },
    })
      .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
      .then(data => { setSessions(Array.isArray(data) ? data.filter(s => s && s.id) : []); setLoading(false); })
      .catch(() => { setError(true); setLoading(false); });
  }

  React.useEffect(() => { loadHistory(); }, [token]);

  function openSession(s) {
    if (selected?.id === s.id) { setSelected(null); return; }
    setSessionLoading(true);
    fetch(`https://api.usegreenroom.app/api/history/${s.id}`, {
      headers: { Authorization: `Bearer ${token}` },
    })
      .then(r => r.json())
      .then(data => { setSelected(data); setSessionLoading(false); })
      .catch(() => { setSelected(s); setSessionLoading(false); });
  }

  function fmt(iso) {
    const d = new Date(iso);
    return isNaN(d.getTime()) ? "—" : d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
  }

  return (
    <div data-screen-label="History" style={{ minHeight: "100vh" }}>
      <header style={{
        padding: "20px 32px", borderBottom: "1px solid var(--border-1)",
        background: darkMode
          ? "linear-gradient(180deg, rgba(44,47,53,.86) 0%, rgba(28,30,35,.92) 100%)"
          : "linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(242,245,248,.94) 100%)",
        backdropFilter: "blur(12px)",
      }}>
        <Eyebrow>History</Eyebrow>
        <h1 style={{ font: "400 32px/1 var(--font-display)", letterSpacing: "-0.02em", margin: "4px 0 0" }}>Past mock interviews</h1>
      </header>

      <main style={{ padding: 32, display: "grid", gridTemplateColumns: selected ? "1fr 1fr" : "1fr", gap: 24, alignItems: "start" }}>
        <Card padding={0}>
          <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--border-1)", display: "flex", alignItems: "center", gap: 10 }}>
            <Eyebrow>Sessions</Eyebrow>
            <Pill tone="neutral" style={{ marginLeft: "auto" }}>{sessions.length} total</Pill>
          </div>

          {loading && (
            <div style={{ padding: 40, textAlign: "center", color: "var(--fg-4)", font: "var(--text-body-sm)" }}>Loading…</div>
          )}

          {!loading && error && (
            <div style={{ padding: 40, textAlign: "center", color: "var(--fg-4)" }}>
              <div style={{ font: "500 14px var(--font-sans)", marginBottom: 4, color: "var(--fg-2)" }}>Couldn't load sessions</div>
              <div style={{ font: "var(--text-body-sm)", marginBottom: 16 }}>The backend may be waking up — this usually takes 30–60 seconds.</div>
              <button onClick={loadHistory} style={{
                padding: "8px 18px", borderRadius: 8, border: "1px solid var(--border-1)",
                background: "transparent", color: "var(--fg-2)", font: "500 13px var(--font-sans)", cursor: "pointer",
              }}>Retry</button>
            </div>
          )}

          {!loading && !error && sessions.length === 0 && (
            <div style={{ padding: 40, textAlign: "center", color: "var(--fg-4)" }}>
              <div style={{ font: "500 14px var(--font-sans)", marginBottom: 4 }}>No interviews yet</div>
              <div style={{ font: "var(--text-body-sm)" }}>Complete a mock interview to see it here</div>
            </div>
          )}

          {sessions.map((s, i) => (
            <div key={s.id} onClick={() => openSession(s)} style={{
              display: "grid", gridTemplateColumns: "72px 1fr 1fr 24px",
              alignItems: "center", gap: 14,
              padding: "14px 18px", cursor: "pointer",
              borderBottom: i < sessions.length - 1 ? "1px solid var(--border-1)" : "none",
              background: selected?.id === s.id ? "var(--bg-brand-soft)" : "transparent",
            }}>
              <span style={{ font: "var(--text-code)", color: "var(--fg-3)" }}>{fmt(s.created_at)}</span>
              <div>
                <div style={{ font: "500 14px var(--font-sans)", color: "var(--fg-1)" }}>{s.role}</div>
                <div style={{ font: "var(--text-body-sm)", color: "var(--fg-3)" }}>{s.company}</div>
              </div>
              <div>
                <div style={{ font: "var(--text-body-sm)", color: "var(--fg-2)" }}>{s.questions_covered} questions</div>
                <div style={{ font: "var(--text-body-sm)", color: "var(--fg-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 180 }}>{s.summary}</div>
              </div>
              {s.score != null && (
                <div style={{
                  font: "700 14px var(--font-mono)",
                  color: s.score >= 8 ? "var(--gr-green-600)" : s.score >= 5 ? "var(--gr-warning)" : "var(--gr-danger)",
                  whiteSpace: "nowrap", flexShrink: 0,
                }}>{s.score}/10</div>
              )}
              <Icon name="chevron-right" size={16} color="var(--fg-4)" />
            </div>
          ))}
        </Card>

        {/* Transcript panel */}
        {(selected || sessionLoading) && (
          <Card padding={0} style={{ position: "sticky", top: 24 }}>
            <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--border-1)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <div>
                <div style={{ font: "500 14px var(--font-sans)" }}>{selected?.role} · {selected?.company}</div>
                <div style={{ font: "var(--text-body-sm)", color: "var(--fg-3)" }}>{selected && fmt(selected.created_at)} · {selected?.questions_covered} questions</div>
              </div>
              <button onClick={() => setSelected(null)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--fg-4)", display: "flex" }}>
                <Icon name="x" size={16} />
              </button>
            </div>
            {sessionLoading && (
              <div style={{ padding: 40, textAlign: "center", color: "var(--fg-4)", display: "flex", alignItems: "center", justifyContent: "center", gap: 10 }}>
                <div style={{ width: 16, height: 16, borderRadius: 999, border: "2px solid var(--gr-green-200)", borderTopColor: "var(--gr-green-500)", animation: "spin 700ms linear infinite" }} />
                Loading transcript…
              </div>
            )}
            {!sessionLoading && selected?.summary && (
              <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border-1)", background: "var(--bg-subtle)" }}>
                <Eyebrow style={{ marginBottom: 4 }}>Performance summary</Eyebrow>
                <div style={{ font: "var(--text-body-sm)", color: "var(--fg-1)", lineHeight: 1.6 }}>{selected.summary}</div>
              </div>
            )}
            <div style={{ maxHeight: 460, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
              {(selected?.transcript || []).map((entry, i) => (
                <div key={i} style={{
                  display: "flex", flexDirection: "column", gap: 2,
                  alignItems: entry.role === "user" ? "flex-end" : "flex-start",
                }}>
                  <span style={{ font: "var(--text-caption)", color: "var(--fg-4)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
                    {entry.role === "user" ? "You" : "Coach Ari"}
                  </span>
                  <div style={{
                    maxWidth: "85%", padding: "8px 12px", borderRadius: 10,
                    font: "var(--text-body-sm)", lineHeight: 1.55,
                    background: entry.role === "user" ? "var(--bg-brand-soft)" : "var(--bg-subtle)",
                    color: entry.role === "user" ? "var(--gr-green-700)" : "var(--fg-1)",
                    border: `1px solid ${entry.role === "user" ? "var(--gr-green-100)" : "var(--border-1)"}`,
                  }}>{entry.content}</div>
                </div>
              ))}
            </div>
          </Card>
        )}
      </main>
    </div>
  );
}
window.History = History;