// Recordings / History — raw + cleaned transcripts stored locally.
function RecordingsScreen() {
  const { Button } = window.ROKKORDesignSystem_4e99ef;
  const { PageHead } = window.RokkorScreens;
  const I = window.RokkorIcons;
  const [page, setPage] = React.useState(1);

  const rows = [
    ["Refactor the transcription coordinator so the VAD frames emit on their own channel — right now the audio-level events and the state machine are fighting over the same lock.", "6/19/2026, 9:14:02 AM", "14.8s", "Elite · context-aware", "Visual Studio Code"],
    ["Can you review the PR when you get a chance? I pulled the grammar adapter into its own crate so we can benchmark it in isolation.", "6/19/2026, 8:47:31 AM", "9.2s", "Parakeet V3 · standard", "Slack"],
    ["Add exponential backoff around the model download and surface the SHA-256 mismatch as a clear error instead of panicking.", "6/19/2026, 8:32:08 AM", "8.7s", "Elite · context-aware", "Visual Studio Code"],
    ["Note to self: the p95 latency regression only shows up on the cold-cache path, so the benchmark needs a warmup pass before it records numbers.", "6/19/2026, 8:05:44 AM", "11.1s", "Parakeet V3 · standard", "Obsidian"],
    ["Draft to the design team — the new onboarding tested really well, but let's cut the third screen; people were dropping off before they reached the privacy promise.", "6/18/2026, 5:21:19 PM", "13.6s", "Elite · formal", "Gmail"],
    ["The Wayland paste path needs a fallback for compositors that don't implement the virtual-keyboard protocol — X11 is already fine.", "6/18/2026, 3:09:55 PM", "10.4s", "Elite · context-aware", "Visual Studio Code"],
  ];

  const Tool = ({ icon: Ic, children }) => (
    <Button variant="outline" size="sm" icon={<Ic size={15} />}>{children}</Button>
  );
  const IconBtn = ({ icon: Ic }) => (
    <button style={{ width: 34, height: 34, display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid var(--border)", background: "var(--card)", borderRadius: "var(--radius-md)", color: "var(--ink-500)", cursor: "pointer" }}><Ic size={16} /></button>
  );

  return (
    <div style={{ maxWidth: "var(--content-max)" }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }}>
        <PageHead title="Recordings / History" subtitle="All your voice input — raw + cleaned versions stored locally." />
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 30 }}>
          <Tool icon={I.Refresh}>Refresh</Tool>
          <Tool icon={I.Download}>Export</Tool>
          <Tool icon={I.Trash}>Delete range…</Tool>
          <Tool icon={I.Search}>Search history</Tool>
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 4 }}>
        {rows.map((r, i) => (
          <div key={i} style={{ background: "var(--card)", border: "1px solid var(--border)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-card)", padding: "18px 20px", display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{ color: "var(--ink-400)", flex: "none" }}><I.Chevron size={16} /></span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ font: "400 16px/1.3 var(--font-sans)", color: "var(--ink-900)" }}>{r[0]}</div>
              <div style={{ font: "12px/1.4 var(--font-mono)", color: "var(--gold-ink)", marginTop: 5 }}>{r[1]} &nbsp;•&nbsp; {r[2]} &nbsp;•&nbsp; {r[3]} &nbsp;•&nbsp; {r[4]}</div>
            </div>
            <div style={{ display: "flex", gap: 8, flex: "none" }}>
              <IconBtn icon={I.Copy} />
              <IconBtn icon={I.Trash} />
            </div>
          </div>
        ))}
      </div>

      {/* Pagination */}
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10, marginTop: 28 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <PagBtn onClick={() => setPage(Math.max(1, page - 1))}><I.ChevronLeft size={15} /></PagBtn>
          {[1, 2, 3].map((n) => (
            <PagBtn key={n} active={page === n} onClick={() => setPage(n)}>{n}</PagBtn>
          ))}
          <span style={{ font: "500 14px/1 var(--font-sans)", color: "var(--ink-400)", padding: "0 4px" }}>…</span>
          <PagBtn onClick={() => setPage(Math.min(138, page + 1))}><I.Chevron size={15} /></PagBtn>
        </div>
        <div style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-500)" }}>Page {page} of 138</div>
      </div>
    </div>
  );
}

function PagBtn({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      minWidth: 38, height: 38, padding: "0 10px", display: "flex", alignItems: "center", justifyContent: "center",
      borderRadius: "var(--radius-pill)", cursor: "pointer",
      border: `1px solid ${active ? "var(--oxblood-600)" : "var(--border)"}`,
      background: active ? "var(--oxblood-600)" : "var(--card)",
      color: active ? "var(--paper-50)" : "var(--ink-700, var(--ink-800))",
      font: "600 14px/1 var(--font-sans)",
    }}>{children}</button>
  );
}

window.RokkorScreens = Object.assign(window.RokkorScreens || {}, { RecordingsScreen });