const { Icon } = window.SamsonAILabDesignSystem_8f27a2;

/* A live slice of product surface, used where the source document calls for a blurred or
   cropped product screenshot. No screenshots were supplied, and the system forbids
   decorative stock imagery — so real surface is rendered instead.
   Product stack: page background-dimmed, panel background-bright, wells background-deep. */
const PEEK_RUNS = [
  { id: "run_a91f2c", task: "summarize-document", status: "success", duration: "4.2s", when: "2m ago", env: "prod" },
  { id: "run_a91f2b", task: "transcode-upload", status: "running", duration: "1m 12s", when: "3m ago", env: "prod" },
  { id: "run_a91f2a", task: "publish-with-approval", status: "waiting", duration: "2h 04m", when: "2h ago", env: "prod" },
  { id: "run_a91f29", task: "send-campaign", status: "success", duration: "38s", when: "3h ago", env: "prod" },
  { id: "run_a91f28", task: "score-batch", status: "failed", duration: "12.8s", when: "5h ago", env: "staging" },
  { id: "run_a91f27", task: "crawl-listing", status: "success", duration: "9.1s", when: "6h ago", env: "prod" },
];

const STATUS = {
  success: { color: "var(--color-success)", label: "Completed" },
  running: { color: "var(--color-pending)", label: "Executing" },
  waiting: { color: "var(--color-cat-purple)", label: "Waiting" },
  failed: { color: "var(--color-error)", label: "Failed" },
};

function RunPeek({ rows = PEEK_RUNS, header = true, style }) {
  return (
    <div style={{ background: "var(--color-background-dimmed)", border: "1px solid var(--color-grid-bright)", borderRadius: "var(--radius-md)", overflow: "hidden", ...style }}>
      {header ? (
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: "var(--color-background-bright)", borderBottom: "1px solid var(--color-grid-bright)" }}>
          <Icon name="history" size={16} color="var(--color-cat-indigo)" />
          <span style={{ fontSize: "var(--text-sm)", color: "var(--color-text-bright)" }}>Runs</span>
          <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: "var(--text-xxs)", color: "var(--color-text-faint)" }}>LAST 24H</span>
        </div>
      ) : null}
      <div>
        {rows.map((r) => (
          <div key={r.id} style={{ display: "grid", gridTemplateColumns: "16px minmax(0,1fr) 84px 72px 60px", alignItems: "center", gap: 12, padding: "9px 14px", borderBottom: "1px solid var(--color-grid-hairline)", fontSize: "var(--text-2sm)" }}>
            <span style={{ width: 7, height: 7, borderRadius: "var(--radius-full)", background: STATUS[r.status].color }} />
            <span style={{ fontFamily: "var(--font-mono)", color: "var(--color-text-bright)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.task}</span>
            <span style={{ color: "var(--color-text-dimmed)" }}>{STATUS[r.status].label}</span>
            <span style={{ fontFamily: "var(--font-mono)", color: "var(--color-text-dimmed)" }}>{r.duration}</span>
            <span style={{ fontFamily: "var(--font-mono)", color: "var(--color-text-faint)", textAlign: "right" }}>{r.when}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { RunPeek });