import { useState } from "react";

const feedData = [
  { time: "20:23", status: "Tool OK", actor: "·", tool: "Navigate", details: "[agent-web-interface] bss-portal-pre-prod.vonnue.dev", result: null },
  { time: "20:24", status: "Tool OK", actor: "·", tool: "Inspect", details: "[agent-web-interface] eid:40397c…", result: null },
  { time: "20:24", status: "Tool OK", actor: "·", tool: "Inspect", details: "[agent-web-interface] eid:6e5706…", result: null },
  { time: "20:24", status: "Tool OK", actor: "·", tool: "Click", details: "[agent-web-interface] eid:40397c…", result: null },
  { time: "20:24", status: "Tool OK", actor: "·", tool: "Type", details: '[agent-web-interface] "17" → 4e903…', result: null },
  { time: "20:24", status: "Tool OK", actor: "·", tool: "Press", details: "[agent-web-interface] Tab", result: null },
  { time: "20:25", status: "Tool OK", actor: "·", tool: "Type", details: '[agent-web-interface] "10" → 12092…', result: null },
  { time: "20:25", status: "Tool OK", actor: "·", tool: "Press", details: "[agent-web-interface] Tab", result: null },
  { time: "20:25", status: "Tool OK", actor: "·", tool: "Type", details: '[agent-web-interface] "2025" → 79d01…', result: null },
  { time: "20:25", status: "Tool OK", actor: "·", tool: "Screenshot", details: "[agent-web-interface]", result: null },
  { time: "20:26", status: "Tool OK", actor: "·", tool: "Navigate", details: "[agent-web-interface] bss-portal-pre-prod.vonnue.dev", result: null, active: true },
  { time: "20:26", status: "Tool OK", actor: "·", tool: "Screenshot", details: "[agent-web-interface]", result: null },
  { time: "20:26", status: "Tool OK", actor: "·", tool: "Find", details: "[agent-web-interface] button", result: "1 found" },
  { time: "20:26", status: "Tool OK", actor: "·", tool: "Find", details: "[agent-web-interface] main", result: "1 found" },
  { time: "20:26", status: "Tool OK", actor: "·", tool: "Navigate", details: "[agent-web-interface] bss-portal-pre-prod.vonnue.dev", result: null },
  { time: "20:28", status: "Tool OK", actor: "·", tool: "Screenshot", details: "[agent-web-interface]", result: null },
  { time: "20:28", status: "Tool OK", actor: "·", tool: "Find", details: "[agent-web-interface] button", result: "1 found" },
  { time: "20:29", status: "Tool OK", actor: "·", tool: "Navigate", details: "[agent-web-interface] bss-portal-pre-prod.vonnue.dev", result: null },
  { time: "20:29", status: "Tool OK", actor: "·", tool: "Find", details: "[agent-web-interface] button", result: "1 found" },
  { time: "20:29", status: "Tool OK", actor: "·", tool: "Find", details: "[agent-web-interface] main", result: "1 found" },
];

const tasks = [
  "Analyze existing subscription test coverage (21 TC-IDs)",
  "Quick browser inspection of subscription pages for untested features",
  "Identify coverage gaps and prioritize new test cases",
  "Write coverage-plan-subscription.md with new TC-IDs",
  "Explore site and generate detailed test case specs (TC-SUB-022 to TC-SUB-036)",
  "Write test code for new TC-IDs (TC-SUB-022 to TC-SUB-036)",
  "Fix all 8 test failures (timing, strict mode, assertions)",
  "Re-run all subscription tests after fixes",
  "Coverage check – verify all new TC-IDs implemented",
];

const toolColors = {
  Navigate: { bg: "rgba(56,189,248,0.12)", text: "#38bdf8", dot: "#38bdf8" },
  Inspect:  { bg: "rgba(167,139,250,0.12)", text: "#a78bfa", dot: "#a78bfa" },
  Click:    { bg: "rgba(251,191,36,0.12)", text: "#fbbf24", dot: "#fbbf24" },
  Type:     { bg: "rgba(52,211,153,0.12)", text: "#34d399", dot: "#34d399" },
  Press:    { bg: "rgba(251,146,60,0.12)", text: "#fb923c", dot: "#fb923c" },
  Screenshot:{ bg: "rgba(236,72,153,0.12)", text: "#ec4899", dot: "#ec4899" },
  Find:     { bg: "rgba(99,102,241,0.12)", text: "#818cf8", dot: "#818cf8" },
};

const mono = "'Berkeley Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace";

function BeforePanel() {
  return (
    <div style={{
      fontFamily: mono,
      fontSize: 12,
      background: "#0d1117",
      color: "#8b949e",
      border: "1px solid #21262d",
      borderRadius: 6,
      overflow: "hidden",
      flex: 1,
    }}>
      {/* Header */}
      <div style={{ background: "#161b22", borderBottom: "1px solid #21262d", padding: "6px 12px", display: "flex", gap: 16, color: "#8b949e", fontSize: 11 }}>
        <span style={{ color: "#58a6ff" }}>ATHENA FLOW</span>
        <span>S: S592d (1/1)</span>
        <span>Workflow: e2e-test-builder</span>
        <span>Harness: Claude Code</span>
        <span>Context</span>
        <span style={{ background: "#238636", padding: "1px 8px", borderRadius: 2 }}></span>
        <span>135k/200k</span>
      </div>

      {/* Tasks */}
      <div style={{ padding: "8px 12px", borderBottom: "1px solid #21262d" }}>
        <div style={{ color: "#8b949e", marginBottom: 4 }}>◇ IDLE  9/9 tasks done</div>
        {tasks.map((t, i) => (
          <div key={i} style={{ color: "#484f58", paddingLeft: 8, lineHeight: "1.6" }}>
            <span style={{ color: "#484f58" }}>✓ </span>{t}
          </div>
        ))}
      </div>

      {/* Feed header */}
      <div style={{ display: "grid", gridTemplateColumns: "50px 70px 50px 90px 1fr 80px", padding: "4px 12px", color: "#484f58", fontSize: 10, borderBottom: "1px solid #21262d" }}>
        <span>TIME</span><span>EVENT</span><span>ACTOR</span><span>TOOL</span><span>DETAILS</span><span style={{ textAlign: "right" }}>RESULT</span>
      </div>

      {/* Feed rows */}
      <div style={{ maxHeight: 280, overflow: "hidden" }}>
        {feedData.map((row, i) => (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: "50px 70px 50px 90px 1fr 80px",
            padding: "2px 12px",
            background: row.active ? "rgba(31,111,235,0.15)" : "transparent",
            color: row.active ? "#c9d1d9" : "#484f58",
          }}>
            <span>{row.time}</span>
            <span style={{ color: row.active ? "#58a6ff" : "#484f58" }}>{row.status}</span>
            <span>{row.actor}</span>
            <span>{row.tool}</span>
            <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{row.details}</span>
            <span style={{ textAlign: "right" }}>{row.result || ""}</span>
          </div>
        ))}
      </div>

      {/* Input */}
      <div style={{ borderTop: "1px solid #21262d", padding: "6px 12px", color: "#484f58" }}>
        <span>input&gt; </span>
        <span>Run complete – type a follow-up</span>
        <span style={{ float: "right" }}>[IDLE]</span>
      </div>
    </div>
  );
}

function AfterPanel() {
  const contextPct = Math.round((135 / 200) * 100);

  return (
    <div style={{
      fontFamily: mono,
      fontSize: 12,
      background: "#080c10",
      color: "#8b949e",
      border: "1px solid #1e2a38",
      borderRadius: 6,
      overflow: "hidden",
      flex: 1,
    }}>
      {/* Header — improved */}
      <div style={{
        background: "linear-gradient(180deg, #0d1620 0%, #0a1219 100%)",
        borderBottom: "1px solid #1e2a38",
        padding: "5px 12px",
        display: "flex",
        alignItems: "center",
        gap: 14,
        fontSize: 11,
      }}>
        {/* ① Wordmark with weight contrast */}
        <span style={{ color: "#e6edf3", fontWeight: 700, letterSpacing: "0.08em", fontSize: 12 }}>ATHENA FLOW</span>
        <span style={{ color: "#30363d" }}>│</span>
        <span style={{ color: "#484f58" }}>S: <span style={{ color: "#6e7681" }}>S592d</span> (1/1)</span>
        <span style={{ color: "#484f58" }}>Workflow: <span style={{ color: "#6e7681" }}>e2e-test-builder</span></span>
        <span style={{ color: "#484f58" }}>Harness: <span style={{ color: "#6e7681" }}>Claude Code</span></span>
        <span style={{ flex: 1 }} />
        {/* ⑤ Context bar with label */}
        <span style={{ color: "#484f58" }}>Context</span>
        <div style={{ position: "relative", width: 72, height: 10, background: "#1e2a38", borderRadius: 2, overflow: "hidden" }}>
          <div style={{
            position: "absolute", left: 0, top: 0, bottom: 0,
            width: `${contextPct}%`,
            background: contextPct > 80 ? "#f97316" : contextPct > 60 ? "#fbbf24" : "#3fb950",
            borderRadius: 2,
          }} />
        </div>
        <span style={{ color: "#6e7681", minWidth: 76 }}>135k / 200k <span style={{ color: "#484f58" }}>· {contextPct}%</span></span>
      </div>

      {/* Tasks */}
      <div style={{ padding: "7px 12px", borderBottom: "1px solid #1e2a38" }}>
        {/* ② Status pill with dot */}
        <div style={{ marginBottom: 5, display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ display: "inline-block", width: 7, height: 7, borderRadius: "50%", background: "#3fb950", boxShadow: "0 0 6px #3fb950" }} />
          <span style={{ color: "#3fb950", fontWeight: 600 }}>IDLE</span>
          <span style={{ color: "#6e7681" }}>9/9 tasks done</span>
        </div>
        {tasks.map((t, i) => (
          <div key={i} style={{
            paddingLeft: 8,
            lineHeight: "1.65",
            // ③ Last completed slightly brighter
            color: i === tasks.length - 1 ? "#6e7681" : "#2d333b",
          }}>
            <span style={{ color: i === tasks.length - 1 ? "#3fb950" : "#2d333b" }}>✓ </span>{t}
          </div>
        ))}
      </div>

      {/* Feed header */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "50px 70px 50px 100px 1fr 90px",
        padding: "4px 12px",
        color: "#30363d",
        fontSize: 10,
        letterSpacing: "0.06em",
        borderBottom: "1px solid #1e2a38",
      }}>
        <span>TIME</span><span>EVENT</span><span>ACTOR</span><span>TOOL</span><span>DETAILS</span><span style={{ textAlign: "right" }}>RESULT</span>
      </div>

      {/* Feed rows — improved */}
      <div style={{ maxHeight: 280, overflow: "hidden" }}>
        {feedData.map((row, i) => {
          const tc = toolColors[row.tool] || { bg: "transparent", text: "#6e7681", dot: "#6e7681" };
          const isActive = row.active;
          return (
            <div key={i} style={{
              display: "grid",
              gridTemplateColumns: "50px 70px 50px 100px 1fr 90px",
              padding: "2px 12px",
              // ① Active row: strong highlight
              background: isActive
                ? "rgba(31,111,235,0.18)"
                : i % 2 === 0 ? "transparent" : "rgba(255,255,255,0.013)", // ⑨ subtle zebra
              borderLeft: isActive ? "2px solid #388bfd" : "2px solid transparent",
              alignItems: "center",
            }}>
              <span style={{ color: isActive ? "#8b949e" : "#3d444d" }}>{row.time}</span>
              <span style={{ color: isActive ? "#3fb950" : "#3d444d" }}>{row.status}</span>
              <span style={{ color: "#3d444d" }}>{row.actor}</span>
              {/* ⑦ Color-coded tool pill */}
              <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
                <span style={{
                  display: "inline-block", width: 5, height: 5,
                  borderRadius: "50%", background: tc.dot, flexShrink: 0
                }} />
                <span style={{
                  background: tc.bg,
                  color: tc.text,
                  padding: "0px 5px",
                  borderRadius: 3,
                  fontSize: 10,
                  fontWeight: 600,
                  letterSpacing: "0.04em",
                }}>{row.tool}</span>
              </span>
              <span style={{
                overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
                color: isActive ? "#6e7681" : "#3d444d"
              }}>{row.details}</span>
              {/* ② Result badge */}
              <div style={{ textAlign: "right" }}>
                {row.result && (
                  <span style={{
                    background: "rgba(63,185,80,0.1)",
                    color: "#3fb950",
                    padding: "1px 6px",
                    borderRadius: 3,
                    fontSize: 10,
                    border: "1px solid rgba(63,185,80,0.2)",
                  }}>{row.result}</span>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {/* Input — improved ⑥ */}
      <div style={{
        borderTop: "1px solid #1e2a38",
        padding: "6px 12px",
        display: "flex",
        alignItems: "center",
        background: "#080c10",
      }}>
        <span style={{ color: "#388bfd", fontWeight: 700 }}>input</span>
        <span style={{ color: "#30363d" }}>&gt; </span>
        <span style={{ color: "#484f58", marginLeft: 4 }}>Run complete – type a follow-up</span>
        <span style={{
          marginLeft: "auto",
          background: "rgba(63,185,80,0.1)",
          color: "#3fb950",
          padding: "1px 7px",
          borderRadius: 3,
          fontSize: 10,
          border: "1px solid rgba(63,185,80,0.2)",
          letterSpacing: "0.06em",
        }}>IDLE</span>
      </div>
    </div>
  );
}

export default function App() {
  const [view, setView] = useState("split");

  const improvements = [
    { n: "①", label: "Active row contrast", desc: "Left border + brighter bg makes cursor position unmissable" },
    { n: "②", label: "Result badges", desc: "Pill with border replaces orphaned plain text in RESULT column" },
    { n: "③", label: "Last task highlight", desc: "Most recently completed task stays slightly brighter than older ones" },
    { n: "④", label: "Header hierarchy", desc: "Bold wordmark vs dim metadata — instant visual weight difference" },
    { n: "⑤", label: "Context bar + %", desc: "Segmented fill with color thresholds (green→amber→orange) + percentage label" },
    { n: "⑥", label: "Input prompt accent", desc: "Cyan `input` keyword + IDLE as a status badge draws the eye to the prompt" },
    { n: "⑦", label: "Tool color coding", desc: "Navigate/Inspect/Click/Find each get a unique hue — scan-reading the feed is ~3× faster" },
    { n: "⑧", label: "Status dot", desc: "Glowing dot prefix on IDLE/RUNNING/ERROR — state readable at a glance" },
    { n: "⑨", label: "Zebra striping", desc: "1% alternating row bg reduces eye fatigue on dense logs" },
  ];

  return (
    <div style={{
      minHeight: "100vh",
      background: "#020408",
      fontFamily: mono,
      color: "#8b949e",
      padding: 24,
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        {/* Title */}
        <div style={{ marginBottom: 20 }}>
          <div style={{ fontSize: 18, color: "#e6edf3", fontWeight: 700, letterSpacing: "0.04em", marginBottom: 4 }}>
            ATHENA FLOW — TUI Quick Wins
          </div>
          <div style={{ fontSize: 11, color: "#484f58" }}>9 improvements · all implementable in a single session</div>
        </div>

        {/* Toggle */}
        <div style={{ display: "flex", gap: 6, marginBottom: 16 }}>
          {["split", "before", "after"].map(v => (
            <button key={v} onClick={() => setView(v)} style={{
              background: view === v ? "rgba(56,139,253,0.15)" : "transparent",
              border: `1px solid ${view === v ? "#388bfd" : "#21262d"}`,
              color: view === v ? "#388bfd" : "#484f58",
              padding: "3px 12px",
              borderRadius: 4,
              cursor: "pointer",
              fontSize: 11,
              fontFamily: mono,
              letterSpacing: "0.06em",
              textTransform: "uppercase",
            }}>{v}</button>
          ))}
        </div>

        {/* Panels */}
        <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
          {(view === "split" || view === "before") && (
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 10, color: "#484f58", letterSpacing: "0.08em", marginBottom: 6 }}>BEFORE</div>
              <BeforePanel />
            </div>
          )}
          {(view === "split" || view === "after") && (
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 10, color: "#3fb950", letterSpacing: "0.08em", marginBottom: 6 }}>AFTER</div>
              <AfterPanel />
            </div>
          )}
        </div>

        {/* Improvements legend */}
        <div style={{
          marginTop: 20,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 8,
        }}>
          {improvements.map(({ n, label, desc }) => (
            <div key={n} style={{
              background: "#0d1117",
              border: "1px solid #1e2a38",
              borderRadius: 5,
              padding: "8px 10px",
              display: "flex",
              gap: 8,
            }}>
              <span style={{ color: "#388bfd", fontWeight: 700, flexShrink: 0, fontSize: 12 }}>{n}</span>
              <div>
                <div style={{ color: "#c9d1d9", fontSize: 11, marginBottom: 2 }}>{label}</div>
                <div style={{ color: "#484f58", fontSize: 10, lineHeight: 1.5 }}>{desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}