// Primate App Kit — Review Logs (list/table view)
const { useState: useStateRL } = React;

const COLS = "44px minmax(220px,1.6fr) 200px 210px 140px 168px";

const RUNS = [
  { id: 1,   pr: "#142", status: "completed", name: "Use neutral backgrounds and move install CTA above the fold", repo: "jeremybell232/taskflow", branch: "more-style-fixes", when: "about 15 hours ago" },
  { id: 3,   pr: "#141", status: "completed", name: "Reduce re-renders on the payment step during checkout", repo: "jeremybell232/taskflow", branch: "more-style-fixes", when: "about 15 hours ago" },
  { id: 55,  pr: "#138", status: "failed", name: "Add empty-state illustrations to the review list view", repo: "jeremybell232/taskflow", branch: "more-style-fixes", when: "about 15 hours ago" },
  { id: 60,  pr: "#136", status: "completed", name: "Tighten spacing in the sidebar navigation groups", repo: "jeremybell232/notably", branch: "layout-pass", when: "about 15 hours ago" },
  { id: 100, pr: "#131", status: "completed", name: "Fix contrast on the lobby join button to meet WCAG AA", repo: "jeremybell232/notably", branch: "a11y-fixes", when: "about 20 hours ago" },
  { id: 303, pr: "#129", status: "completed", name: "Move installation steps below the indexing screen", repo: "jeremybell232/pagemint", branch: "onboarding-trim", when: "about 20 hours ago" },
  { id: 33,  pr: "#126", status: "completed", name: "Replace neon hover yellow with a softer brand gold", repo: "jeremybell232/pagemint", branch: "more-style-fixes", when: "about 20 hours ago" },
  { id: 22,  pr: "#124", status: "failed", name: "Add diff-aware planning summary to the report panel", repo: "jeremybell232/pagemint", branch: "report-v2", when: "about 20 hours ago" },
  { id: 11,  pr: "#121", status: "completed", name: "Share a single border between selected repository rows", repo: "jeremybell232/loopmail", branch: "repo-table", when: "about 20 hours ago" },
  { id: 65,  pr: "#119", status: "completed", name: "Persist playback position across page reloads", repo: "jeremybell232/loopmail", branch: "media-frame", when: "about 20 hours ago" },
];

function SearchBar({ placeholder, style = {} }) {
  const [h, setH] = useStateRL(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ display: "flex", alignItems: "center", gap: 8, padding: "0 14px", borderRadius: "var(--r-md)", background: "var(--bg-elevated)", border: `1px solid ${h ? "var(--border-hover)" : "var(--border-subtle)"}`, transition: "border-color .14s ease", ...style }}>
      <Icon name="search" size={16} color="var(--fg-placeholder)" />
      <input placeholder={placeholder} style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--fg)", font: "var(--t-body-sm)" }} />
    </div>
  );
}

function FilterPill({ label, value }) {
  const [h, setH] = useStateRL(false);
  return (
    <button onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "inline-flex", alignItems: "center", gap: 8, height: 36, padding: "0 14px", borderRadius: "var(--r-md)", border: `1px solid ${h ? "var(--border-hover)" : "var(--border-subtle)"}`, background: "var(--bg-elevated)", color: "var(--fg-secondary)", font: "var(--t-body-sm)", cursor: "pointer", transition: "border-color .14s ease" }}>
      <span style={{ color: "var(--fg-faint)" }}>{label}:</span><span style={{ color: "var(--fg)" }}>{value}</span>
      <Icon name="chevron-down" size={15} color="var(--fg-faint)" />
    </button>
  );
}

function IconBtn({ icon, disabled }) {
  const [h, setH] = useStateRL(false);
  return (
    <button disabled={disabled} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--r-sm)", border: `1px solid ${h && !disabled ? "var(--border-hover)" : "var(--border-subtle)"}`, background: h && !disabled ? "var(--bg-elevated-2)" : "var(--bg-elevated)", color: disabled ? "var(--fg-faint)" : "var(--fg-secondary)", cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.5 : 1, transition: "background .14s ease, border-color .14s ease" }}>
      <Icon name={icon} size={16} />
    </button>
  );
}

function SubscriptionCallout({ onBilling }) {
  const [h, setH] = useStateRL(false);
  const vp = useViewport();
  const mobile = vp === "mobile";
  const tablet = vp === "tablet";
  return (
    <div style={{ display: "flex", flexDirection: mobile ? "column" : "row", alignItems: mobile ? "flex-start" : "center", gap: 14, minHeight: 60, boxSizing: "border-box", padding: mobile ? "16px" : tablet ? "16px 18px" : "0 18px", borderRadius: 4, border: "1px solid rgba(254,154,0,0.20)", background: "rgba(254,154,0,0.10)" }}>
      <div style={{ display: "flex", alignItems: mobile ? "flex-start" : "center", gap: 14, flex: 1 }}>
        <Icon name="circle-alert" size={18} color="var(--gold)" style={{ flexShrink: 0, marginTop: mobile ? 1 : 0 }} />
        <span style={{ flex: 1, font: "var(--t-body-sm)", color: "var(--fg)" }}>This workspace needs an active subscription before Primate can run new checks. Subscribe to resume automated QA.</span>
      </div>
      <button onClick={onBilling} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ flexShrink: 0, alignSelf: mobile ? "stretch" : "auto", height: 36, padding: "0 18px", borderRadius: "var(--r-md)", border: "none", background: h ? "var(--gold-bright)" : "var(--gold)", color: "var(--on-gold)", font: "400 14px var(--font-mono)", cursor: "pointer", transition: "background .14s ease", whiteSpace: "nowrap" }}>Open Billing</button>
    </div>
  );
}

function PageSizePill() {
  const [h, setH] = useStateRL(false);
  return (
    <button onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "inline-flex", alignItems: "center", gap: 6, height: 30, padding: "0 10px", borderRadius: "var(--r-sm)", border: `1px solid ${h ? "var(--border-hover)" : "var(--border-subtle)"}`, background: "var(--bg-elevated)", color: "var(--fg)", font: "var(--t-body-sm)", cursor: "pointer", transition: "border-color .14s ease" }}>
      50 <Icon name="chevron-down" size={14} color="var(--fg-faint)" />
    </button>
  );
}

function ReviewCard({ run, onOpen, first }) {
  const [h, setH] = useStateRL(false);
  return (
    <div onClick={() => onOpen(run)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "flex", flexDirection: "column", gap: 10, padding: 16, borderTop: first ? "none" : "1px solid var(--border)", cursor: "pointer", background: h ? "rgba(255,255,255,0.035)" : "transparent", transition: "background .1s ease" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
        <span style={{ font: "var(--t-caption)", color: "var(--fg-faint)" }}>#{run.id}</span>
        {run.status === "failed"
          ? <Badge tone="danger" icon="circle-alert">Build Failed</Badge>
          : <Badge tone="success" icon="circle-check">Completed</Badge>}
      </div>
      <span style={{ font: "var(--t-body-sm)", fontWeight: 500, color: "var(--fg)" }}>{run.name}</span>
      <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
        <img src="assets/github-mark.svg" width="14" height="14" style={{ opacity: 0.8, flexShrink: 0 }} />
        <span style={{ font: "var(--t-caption)", color: "var(--fg-secondary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{run.repo}</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, font: "var(--t-caption)", color: "var(--fg-faint)" }}>
        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{run.branch} → main</span>
        <span style={{ flexShrink: 0 }}>{run.when}</span>
      </div>
    </div>
  );
}

function ReviewRow({ run, onOpen, last }) {
  const [h, setH] = useStateRL(false);
  return (
    <div onClick={() => onOpen(run)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "grid", gridTemplateColumns: COLS, alignItems: "center", gap: 20, padding: "0 24px", height: 45, borderTop: "1px solid var(--border)", borderBottom: last ? "1px solid var(--border)" : "none", cursor: "pointer", background: h ? "rgba(255,255,255,0.035)" : "transparent", transition: "background .1s ease" }}>
      <span style={{ font: "var(--t-body-sm)", color: "var(--fg-faint)" }}>{run.id}</span>

      <span style={{ display: "inline-flex", alignItems: "center", gap: 6, minWidth: 0 }}>
        <span style={{ font: "var(--t-body-sm)", color: "var(--fg)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textDecoration: h ? "underline" : "none", textUnderlineOffset: 3 }}>{run.name}</span>
        {h && <Icon name="arrow-up-right" size={14} color="var(--fg-secondary)" style={{ flexShrink: 0 }} />}
      </span>

      <span style={{ display: "inline-flex", alignItems: "center", gap: 8, minWidth: 0 }}>
        <img src="assets/github-mark.svg" width="16" height="16" style={{ opacity: 0.8, flexShrink: 0 }} />
        <span style={{ font: "var(--t-body-sm)", color: "var(--fg-secondary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{run.repo}</span>
      </span>

      <span style={{ font: "var(--t-body-sm)", color: "var(--fg-secondary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{run.branch} → main</span>

      <span>{run.status === "failed"
        ? <Badge tone="danger" icon="circle-alert">Build Failed</Badge>
        : <Badge tone="success" icon="circle-check">Completed</Badge>}</span>

      <span style={{ font: "var(--t-body-sm)", color: "var(--fg-faint)" }}>{run.when}</span>
    </div>
  );
}

function ReviewLogs({ onOpen, empty, onBilling }) {
  const vp = useViewport();
  const compact = vp !== "desktop";
  const mobile = vp === "mobile";
  return (
    <div style={{ position: "relative", flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
      <div style={{ position: "relative", zIndex: 1, flex: 1, minHeight: 0, display: "flex", flexDirection: "column", gap: 24 }}>
        {!empty && <SubscriptionCallout onBilling={onBilling} />}
        <h1 style={{ font: `600 ${mobile ? 24 : 30}px/1.2 var(--font-sans)`, letterSpacing: "-0.02em", margin: 0 }}>Review Logs</h1>

        {/* toolbar */}
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <SearchBar placeholder="Search" style={{ flex: 1, height: 36, maxWidth: mobile ? "none" : 460 }} />
          {!mobile && <div style={{ flex: 1 }} />}
          <FilterPill label="Status" value="All" />
        </div>

        {compact ? (
          /* card list */
          <div style={{ display: "flex", flexDirection: "column", borderRadius: "var(--r-md)", border: "1px solid var(--border)", background: "var(--bg-card)", overflow: "hidden" }}>
            {empty ? (
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, padding: "56px 24px" }}>
                <Logo size={40} fill="var(--bg-elevated-2)" />
                <div style={{ font: "var(--t-h2)", color: "var(--fg)" }}>The Jungle is Quiet</div>
                <div style={{ font: "var(--t-body-sm)", color: "var(--fg-faint)", textAlign: "center" }}>Open a PR and Primate will start exploring.</div>
              </div>
            ) : RUNS.map((r, i) => <ReviewCard key={r.id} run={r} onOpen={onOpen} first={i === 0} />)}
            {!empty && <PaginationFooter />}
          </div>
        ) : (
        /* table */
        <div style={{ flex: 1, display: "flex", flexDirection: "column", borderRadius: "var(--r-md)", border: "1px solid var(--border)", background: "var(--bg-card)", overflow: "hidden", minWidth: 0 }}>
          <div style={{ flex: 1, overflowX: "auto", overflowY: "auto", display: "flex", flexDirection: "column" }}>
            <div style={{ minWidth: 1160, flex: 1, display: "flex", flexDirection: "column" }}>
              <div style={{ position: "sticky", top: 0, zIndex: 2, flexShrink: 0, display: "grid", gridTemplateColumns: COLS, gap: 20, padding: "0 24px", height: 48, alignItems: "center", background: "var(--bg-elevated)", borderBottom: "1px solid var(--border)", font: "var(--t-label)", color: "var(--fg-secondary)" }}>
                <span>#</span><span>Name</span><span>Repository</span><span>Branch</span><span>Status</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>Last Updated <Icon name="chevrons-up-down" size={13} color="var(--fg-faint)" /></span>
              </div>
              {empty ? (
                <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, padding: "64px 24px" }}>
                  <Logo size={40} fill="var(--bg-elevated-2)" />
                  <div style={{ font: "var(--t-h2)", color: "var(--fg)" }}>The Jungle is Quiet</div>
                  <div style={{ font: "var(--t-body-sm)", color: "var(--fg-faint)" }}>Open a PR and Primate will start exploring.</div>
                </div>
              ) : RUNS.map((r, i) => <ReviewRow key={r.id} run={r} onOpen={onOpen} last={i === RUNS.length - 1} />)}
            </div>
          </div>

          {/* footer / pagination — pinned to the bottom of the table card */}
          {!empty && <PaginationFooter />}
        </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { ReviewLogs, RUNS });