const { Button, Icon, CodeBlock, DiagramNode } = window.SamsonAILabDesignSystem_8f27a2;

function StatusCell({ status }) {
  const s = window.STATUS[status];
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--color-text-dimmed)" }}>
      <span style={{ width: 7, height: 7, borderRadius: "var(--radius-full)", background: s.color, flexShrink: 0 }} />
      {s.label}
    </span>
  );
}

function EnvBadge({ env }) {
  const prod = env === "prod";
  return (
    <span style={{ display: "inline-flex", alignItems: "center", height: 20, padding: "0 6px", borderRadius: "var(--radius-xs)", fontFamily: "var(--font-mono)", fontSize: "var(--text-xxs)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: prod ? "var(--color-text-dimmed)" : "var(--color-cat-orange)", border: "1px solid " + (prod ? "var(--color-grid-bright)" : "var(--color-cat-orange)"), opacity: prod ? 1 : 0.9 }}>{env}</span>
  );
}

const RUN_COLUMNS_FULL = "116px minmax(0,1fr) 124px 84px 80px 92px 64px";
const RUN_COLUMNS_COMPACT = "104px minmax(0,1fr) 78px 74px 60px";

function RunsView({ selected, onSelect, compact = false }) {
  const columns = compact ? RUN_COLUMNS_COMPACT : RUN_COLUMNS_FULL;
  return (
    <div style={{ display: "flex", flexDirection: "column", minHeight: 0, flex: 1 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "14px 20px", borderBottom: "1px solid var(--color-grid-bright)" }}>
        <Button variant="tertiary" size="medium" icon="filter">Status</Button>
        <Button variant="tertiary" size="medium" icon="square-code">Task</Button>
        <Button variant="tertiary" size="medium" icon="layers">Queue</Button>
        <Button variant="tertiary" size="medium" icon="clock">Last 24 hours</Button>
        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xxs)", color: "var(--color-text-faint)" }}>9 OF 1,284</span>
          <Button variant="secondary" size="medium" icon="download">Export</Button>
        </div>
      </div>
      <div className="ds-scroll" style={{ flex: 1, overflowY: "auto", minHeight: 0 }}>
        <div style={{ display: "grid", gridTemplateColumns: columns, gap: 12, padding: "8px 20px", background: "var(--color-background-dimmed)", borderBottom: "1px solid var(--color-grid-bright)", position: "sticky", top: 0, fontFamily: "var(--font-mono)", fontSize: "var(--text-xxs)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--color-text-faint)" }}>
          <span>Status</span><span>Task</span>{compact ? null : <span>Run</span>}<span>Duration</span><span>Started</span>{compact ? null : <span>Version</span>}<span>Env</span>
        </div>
        {window.RUNS.map((r) => {
          const on = r.id === selected;
          return (
            <button
              key={r.id}
              type="button"
              onClick={() => onSelect(r.id)}
              style={{ display: "grid", gridTemplateColumns: columns, gap: 12, alignItems: "center", width: "100%", padding: "10px 20px", cursor: "pointer", textAlign: "left", border: 0, borderBottom: "1px solid var(--color-grid-hairline)", background: on ? "var(--color-surface-selected)" : "transparent", fontSize: "var(--text-2sm)", color: "var(--color-text-dimmed)", transition: "background-color var(--transition-default)" }}
              onMouseEnter={(e) => { if (!on) e.currentTarget.style.background = "var(--color-background-hover)"; }}
              onMouseLeave={(e) => { if (!on) e.currentTarget.style.background = "transparent"; }}
            >
              <StatusCell status={r.status} />
              <span style={{ fontFamily: "var(--font-mono)", color: "var(--color-text-bright)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.task}</span>
              {compact ? null : <span style={{ fontFamily: "var(--font-mono)", color: "var(--color-text-faint)" }}>{r.id}</span>}
              <span style={{ fontFamily: "var(--font-mono)" }}>{r.duration}</span>
              <span style={{ fontFamily: "var(--font-mono)" }}>{r.started}</span>
              {compact ? null : <span style={{ fontFamily: "var(--font-mono)", color: "var(--color-text-faint)" }}>{r.version}</span>}
              <EnvBadge env={r.env} />
            </button>
          );
        })}
      </div>
    </div>
  );
}

function RunDetail({ run, onClose }) {
  const [tab, setTab] = React.useState("overview");
  const failed = run.status === "failed";
  const steps = failed ? window.RUN_STEPS.failed : window.RUN_STEPS.default;
  const logs = failed ? window.LOGS.failed : window.LOGS.default;
  return (
    <aside style={{ width: 460, flexShrink: 0, display: "flex", flexDirection: "column", background: "var(--color-background-bright)", borderLeft: "1px solid var(--color-grid-bright)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "0 16px", height: 56, borderBottom: "1px solid var(--color-grid-bright)" }}>
        <StatusCell status={run.status} />
        <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-sm)", color: "var(--color-text-bright)" }}>{run.id}</span>
        <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
          <Button variant="secondary" size="small" icon="rotate-ccw">Replay</Button>
          {run.status === "executing" ? <Button variant="danger" size="small">Cancel</Button> : null}
        </div>
      </div>
      <div style={{ display: "flex", gap: 2, padding: "8px 12px", borderBottom: "1px solid var(--color-grid-bright)" }}>
        {[["overview", "Overview"], ["logs", "Logs"], ["payload", "Payload"]].map(([id, label]) => (
          <button key={id} type="button" onClick={() => setTab(id)} style={{ height: 28, padding: "0 10px", cursor: "pointer", border: 0, borderRadius: "var(--radius-xs)", background: tab === id ? "var(--color-background-hover)" : "transparent", color: tab === id ? "var(--color-text-bright)" : "var(--color-text-dimmed)", fontSize: "var(--text-sm)" }}>{label}</button>
        ))}
        <button type="button" onClick={onClose} aria-label="Close panel" style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, cursor: "pointer", border: 0, borderRadius: "var(--radius-xs)", background: "transparent", color: "var(--color-text-faint)" }}>
          <Icon name="x" size={16} />
        </button>
      </div>
      <div className="ds-scroll" style={{ flex: 1, overflowY: "auto", padding: 16 }}>
        {tab === "overview" ? (
          <div className="ds-fade">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "10px 16px", marginBottom: 20 }}>
              {[["Task", run.task], ["Queue", run.queue], ["Attempt", String(run.attempt)], ["Version", run.version], ["Duration", run.duration], ["Started", run.started]].map(([k, v]) => (
                <div key={k}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xxs)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--color-text-faint)" }}>{k}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2sm)", color: "var(--color-text-bright)", marginTop: 3 }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xxs)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--color-text-faint)", marginBottom: 10 }}>Timeline</div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {steps.map((s, i) => (
                <div key={s.label} style={{ display: "grid", gridTemplateColumns: "108px minmax(0,1fr) 58px", gap: 10, alignItems: "center", padding: "8px 0", borderTop: i === 0 ? "none" : "1px solid var(--color-grid-hairline)" }}>
                  <DiagramNode type={s.type} label={s.label} dimmed={s.status === "failed"} />
                  <span style={{ fontSize: "var(--text-2sm)", color: s.status === "failed" ? "var(--color-error)" : "var(--color-text-dimmed)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{s.detail}</span>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2sm)", color: "var(--color-text-faint)", textAlign: "right" }}>{s.duration}</span>
                </div>
              ))}
            </div>
          </div>
        ) : null}
        {tab === "logs" ? (
          <div className="ds-fade">
            <CodeBlock onPage lineNumbers padding="12px 14px" code={logs} style={{ border: "1px solid var(--color-grid-bright)", borderRadius: "var(--radius-sm)", fontSize: "var(--text-2sm)" }} />
          </div>
        ) : null}
        {tab === "payload" ? (
          <div className="ds-fade">
            <CodeBlock onPage padding="12px 14px" code={'{\n  "documentId": "doc_7741",\n  "locale": "en-GB",\n  "maxWords": 180\n}'} style={{ border: "1px solid var(--color-grid-bright)", borderRadius: "var(--radius-sm)", fontSize: "var(--text-2sm)" }} />
          </div>
        ) : null}
      </div>
    </aside>
  );
}

Object.assign(window, { RunsView, RunDetail, StatusCell, EnvBadge });
