import type { FC } from "hono/jsx";
import { html } from "hono/html";
import type { GitCommit, GitTreeEntry, GitDiffFile } from "../git/repository";
import type { Repository } from "../db/schema";
import { parseDiff, pairLines } from "../lib/diff";
import type { DiffLine, ParsedFile, SplitRow } from "../lib/diff";

/**
 * Describes the most recent push to a repo, used by RepoHeader to render
 * the Push Watch discoverability indicator.
 *
 * - ageMs < 5 min  \u2192 pulsing red "\u25cf Live" badge
 * - ageMs < 24 hr  \u2192 dimmer "\u25cb Watch" link
 * - otherwise      \u2192 nothing shown
 */
export interface RecentPush {
  sha: string;
  ageMs: number;
}

export const RepoHeader: FC<{
  owner: string;
  repo: string;
  starCount?: number;
  starred?: boolean;
  forkCount?: number;
  currentUser?: string | null;
  forkedFrom?: string | null;
  archived?: boolean;
  isTemplate?: boolean;
  /** Most recent push info for Push Watch discoverability indicator. */
  recentPush?: RecentPush | null;
  /** 0-100 health score badge rendered after the repo name. Optional — omit to hide. */
  healthScore?: number;
}> = ({
  owner,
  repo,
  starCount,
  starred,
  forkCount,
  currentUser,
  forkedFrom,
  archived,
  isTemplate,
  recentPush,
  healthScore,
}) => {
  const FIVE_MIN = 5 * 60 * 1000;
  const TWENTY_FOUR_HR = 24 * 60 * 60 * 1000;
  const isLive = recentPush != null && recentPush.ageMs < FIVE_MIN;
  const isRecent = recentPush != null && recentPush.ageMs < TWENTY_FOUR_HR;

  const healthColor =
    healthScore === undefined ? null :
    healthScore >= 80 ? "#34d399" :
    healthScore >= 50 ? "#facc15" :
    "#f87171";

  return (
    <div class="repo-header">
      <div>
        <div class="repo-header-title">
          <a href={`/${owner}`} class="owner">
            {owner}
          </a>
          <span class="separator">/</span>
          <a href={`/${owner}/${repo}`} class="name">
            {repo}
          </a>
          {archived && (
            <span
              class="repo-header-pill repo-header-pill-archived"
              title="Read-only: pushes and new issues/PRs disabled"
            >
              Archived
            </span>
          )}
          {isTemplate && (
            <span
              class="repo-header-pill repo-header-pill-template"
              title="This repository can be used as a template"
            >
              Template
            </span>
          )}
          {healthScore !== undefined && healthColor && (
            <a
              href={`/${owner}/${repo}/health`}
              title={`Repository health score: ${healthScore}/100 — click for breakdown`}
              style={`display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:700;text-decoration:none;color:${healthColor};background:${healthColor}22;border:1px solid ${healthColor}44;`}
            >
              &#x2665; Health {healthScore}
            </a>
          )}
          {isLive && recentPush && (
            <a
              href={`/${owner}/${repo}/push/${recentPush.sha}`}
              class="repo-header-live-badge repo-header-live-badge--live"
              title="Push in progress \u2014 watch live gate + deploy status"
              aria-label="Live push \u2014 click to watch status"
            >
              <span class="repo-header-live-dot" aria-hidden="true">{"\u25cf"}</span>
              Live
            </a>
          )}
          {!isLive && isRecent && recentPush && (
            <a
              href={`/${owner}/${repo}/push/${recentPush.sha}`}
              class="repo-header-live-badge repo-header-live-badge--recent"
              title="Watch the most recent push's gate + deploy results"
              aria-label="Watch most recent push"
            >
              <span aria-hidden="true">{"\u25cb"}</span>
              Watch
            </a>
          )}
        </div>
        {forkedFrom && (
          <div class="repo-header-fork">
            forked from <a href={`/${forkedFrom}`}>{forkedFrom}</a>
          </div>
        )}
      </div>
      <div class="repo-header-actions">
        {currentUser && currentUser !== owner && (
          <form method="post" action={`/${owner}/${repo}/fork`} style="display:inline">
            <button type="submit" class="star-btn">
              {"\u2442"} Fork {forkCount !== undefined && forkCount > 0 ? forkCount : ""}
            </button>
          </form>
        )}
        {starCount !== undefined && (
          currentUser ? (
            <form method="post" action={`/${owner}/${repo}/star`} style="display:inline">
              <button
                type="submit"
                class={`star-btn${starred ? " starred" : ""}`}
              >
                {starred ? "\u2605" : "\u2606"} {starCount}
              </button>
            </form>
          ) : (
            <span class="star-btn">
              {"\u2606"} {starCount}
            </span>
          )
        )}
      </div>
    </div>
  );
};

export const RepoNav: FC<{
  owner: string;
  repo: string;
  active:
    | "code"
    | "commits"
    | "issues"
    | "pulls"
    | "releases"
    | "actions"
    | "gates"
    | "insights"
    | "explain"
    | "changelog"
    | "semantic"
    | "wiki"
    | "projects"
    | "agents"
    | "discussions"
    | "security"
    | "settings"
    | "debt-map"
    | "migrate"
    | "deployments"
    | "nl-search"
    | "contributors"
    | "pulse"
    | "traffic"
    | "pipeline"
    | "workspace"
    | "archaeology";
  /** Current authenticated user — used for owner-only tab gating. */
  currentUser?: string | null;
  /** Repo owner username — used for owner-only tab gating. */
  repoOwner?: string;
}> = ({ owner, repo, active, currentUser, repoOwner }) => (
  <div class="repo-nav">
    <a href={`/${owner}/${repo}`} class={active === "code" ? "active" : ""}>
      Code
    </a>
    <a
      href={`/${owner}/${repo}/issues`}
      class={active === "issues" ? "active" : ""}
    >
      Issues
    </a>
    <a
      href={`/${owner}/${repo}/discussions`}
      class={active === "discussions" ? "active" : ""}
    >
      Discussions
    </a>
    <a
      href={`/${owner}/${repo}/wiki`}
      class={active === "wiki" ? "active" : ""}
    >
      Wiki
    </a>
    <a
      href={`/${owner}/${repo}/pulls`}
      class={active === "pulls" ? "active" : ""}
    >
      Pull Requests
    </a>
    <a
      href={`/${owner}/${repo}/projects`}
      class={active === "projects" ? "active" : ""}
    >
      Projects
    </a>
    <a
      href={`/${owner}/${repo}/commits`}
      class={active === "commits" ? "active" : ""}
    >
      Commits
    </a>
    <a
      href={`/${owner}/${repo}/actions`}
      class={active === "actions" ? "active" : ""}
    >
      Actions
    </a>
    <a
      href={`/${owner}/${repo}/releases`}
      class={active === "releases" ? "active" : ""}
    >
      Releases
    </a>
    <a
      href={`/${owner}/${repo}/contributors`}
      class={active === "contributors" ? "active" : ""}
    >
      Contributors
    </a>
    <a
      href={`/${owner}/${repo}/pulse`}
      class={active === "pulse" ? "active" : ""}
    >
      Pulse
    </a>
    {currentUser && repoOwner && currentUser === repoOwner && (
      <a
        href={`/${owner}/${repo}/traffic`}
        class={active === "traffic" ? "active" : ""}
      >
        Traffic
      </a>
    )}
    <a
      href={`/${owner}/${repo}/gates`}
      class={active === "gates" ? "active" : ""}
    >
      {"\u25CF"} Gates
    </a>
    <a
      href={`/${owner}/${repo}/security/vulnerabilities`}
      class={active === "security" ? "active" : ""}
    >
      Security
    </a>
    <a
      href={`/${owner}/${repo}/settings`}
      class={active === "settings" ? "active" : ""}
    >
      Settings
    </a>
    <a
      href={`/${owner}/${repo}/cloud-deployments`}
      class={active === "deployments" ? "active" : ""}
    >
      Deployments
    </a>
    <a
      href={`/${owner}/${repo}/pipeline`}
      class={active === "pipeline" ? "active" : ""}
    >
      Pipeline
    </a>
    <a
      href={`/${owner}/${repo}/insights`}
      class={active === "insights" ? "active" : ""}
    >
      Insights
    </a>
    <a
      href={`/${owner}/${repo}/agents`}
      class={active === "agents" ? "active" : ""}
    >
      Agents
    </a>
    <a
      href={`/${owner}/${repo}/explain`}
      class={`repo-nav-ai${active === "explain" ? " active" : ""}`}
      style="margin-left: auto"
    >
      {"\u2728"} Explain
    </a>
    <a href={`/${owner}/${repo}/ask`} class="repo-nav-ai">
      {"\u2728"} Ask AI
    </a>
    <a
      href={`/${owner}/${repo}/workspace`}
      class={`repo-nav-ai${active === "workspace" ? " active" : ""}`}
      title="AI Workspace — spec-to-PR, fix issues with AI, web editor"
    >
      {"✨"} Workspace
    </a>
    <a
      href={`/${owner}/${repo}/spec`}
      class="repo-nav-ai"
      title="Spec to PR — paste a feature spec, AI opens a draft PR"
    >
      {"\u2728"} Spec
    </a>
    <a
      href={`/${owner}/${repo}/ai/tests`}
      class="repo-nav-ai"
      title="AI Tests \u2014 generate failing test stubs from a source file"
    >
      {"\u2728"} Tests
    </a>
    <a
      href={`/${owner}/${repo}/debt-map`}
      class={`repo-nav-ai${active === "debt-map" ? " active" : ""}`}
      title="AI Debt Map \u2014 visual technical debt graph with Claude analysis"
    >
      {"\u2593"} Debt Map
    </a>
    <a
      href={`/${owner}/${repo}/search/nl`}
      class={`repo-nav-ai${active === "nl-search" ? " active" : ""}`}
      title="Natural Language Search \u2014 search by intent, not keywords"
    >
      {"\u2728"} NL Search
    </a>
    <a
      href={`/${owner}/${repo}/archaeology`}
      class={`repo-nav-ai${active === "archaeology" ? " active" : ""}`}
      title="AI Archaeology \u2014 excavate why any file exists using git history, PRs, and issues"
    >
      {"\ud83c\udfdb"} Archaeology
    </a>
  </div>
);

export const BranchSwitcher: FC<{
  owner: string;
  repo: string;
  currentRef: string;
  branches: string[];
  pathType: "tree" | "blob" | "commits";
  subPath?: string;
}> = ({ owner, repo, currentRef, branches, pathType, subPath }) => {
  if (branches.length <= 1) {
    return <div class="branch-selector">{currentRef}</div>;
  }

  return (
    <div class="branch-dropdown">
      <button class="branch-selector" type="button">
        {currentRef} &#9662;
      </button>
      <div class="branch-dropdown-content">
        {branches.map((branch) => {
          let href: string;
          if (pathType === "commits") {
            href = `/${owner}/${repo}/commits/${branch}`;
          } else if (subPath) {
            href = `/${owner}/${repo}/${pathType}/${branch}/${subPath}`;
          } else {
            href = `/${owner}/${repo}/tree/${branch}`;
          }
          return (
            <a
              href={href}
              class={branch === currentRef ? "active-branch" : ""}
            >
              {branch}
            </a>
          );
        })}
      </div>
    </div>
  );
};

export const Breadcrumb: FC<{
  owner: string;
  repo: string;
  ref: string;
  path: string;
}> = ({ owner, repo, ref, path }) => {
  const parts = path.split("/").filter(Boolean);
  const crumbs: { name: string; href: string }[] = [
    { name: repo, href: `/${owner}/${repo}/tree/${ref}` },
  ];
  let accumulated = "";
  for (const part of parts) {
    accumulated += (accumulated ? "/" : "") + part;
    crumbs.push({
      name: part,
      href: `/${owner}/${repo}/tree/${ref}/${accumulated}`,
    });
  }
  return (
    <div class="breadcrumb">
      {crumbs.map((crumb, i) => (
        <>
          {i > 0 && <span>/</span>}
          {i === crumbs.length - 1 ? (
            <strong>{crumb.name}</strong>
          ) : (
            <a href={crumb.href}>{crumb.name}</a>
          )}
        </>
      ))}
    </div>
  );
};

export const FileTable: FC<{
  entries: GitTreeEntry[];
  owner: string;
  repo: string;
  ref: string;
  path: string;
}> = ({ entries, owner, repo, ref, path }) => (
  <table class="file-table">
    <tbody>
      {entries.map((entry) => {
        const fullPath = path ? `${path}/${entry.name}` : entry.name;
        const href =
          entry.type === "tree"
            ? `/${owner}/${repo}/tree/${ref}/${fullPath}`
            : `/${owner}/${repo}/blob/${ref}/${fullPath}`;
        return (
          <tr>
            <td class="file-icon">
              {entry.type === "tree" ? "\u{1F4C1}" : "\u{1F4C4}"}
            </td>
            <td class="file-name">
              <a href={href}>{entry.name}</a>
            </td>
            <td style="text-align: right; color: var(--text-muted); font-size: 13px;">
              {entry.size !== undefined ? formatSize(entry.size) : ""}
            </td>
          </tr>
        );
      })}
    </tbody>
  </table>
);

export const HighlightedCode: FC<{
  highlightedHtml: string;
  lineCount: number;
}> = ({ highlightedHtml, lineCount }) => {
  const lineNums = Array.from({ length: lineCount }, (_, i) => i + 1);
  return (
    <div class="blob-code">
      <table>
        <tbody>
          <tr>
            <td class="line-num" style="vertical-align: top; padding-top: 0; padding-bottom: 0">
              <pre style="margin: 0; line-height: 1.6; font-size: 13px">
                {lineNums.map((n) => (
                  <>
                    <span>{n}</span>
                    {"\n"}
                  </>
                ))}
              </pre>
            </td>
            <td class="line-content" style="vertical-align: top; padding-top: 0; padding-bottom: 0">
              <pre style="margin: 0; line-height: 1.6; font-size: 13px">{html([highlightedHtml] as unknown as TemplateStringsArray)}</pre>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export const PlainCode: FC<{ lines: string[] }> = ({ lines }) => (
  <div class="blob-code">
    <table>
      <tbody>
        {lines.map((line, i) => (
          <tr>
            <td class="line-num">{i + 1}</td>
            <td class="line-content">{line}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

export const CommitList: FC<{
  commits: GitCommit[];
  owner: string;
  repo: string;
  verifications?: Record<string, { verified: boolean; reason: string }>;
}> = ({ commits, owner, repo, verifications }) => (
  <div class="commit-list">
    {commits.map((commit) => {
      const v = verifications?.[commit.sha];
      return (
        <div class="commit-item">
          <div>
            <div class="commit-message">
              <a href={`/${owner}/${repo}/commit/${commit.sha}`}>
                {commit.message}
              </a>
              {v?.verified && (
                <a
                  href="/settings/signing-keys"
                  title="Signed with a registered key — manage your signing keys"
                  style="margin-left:8px;font-size:10px;padding:1px 6px;border-radius:3px;background:var(--green,#2ea043);color:#fff;text-transform:uppercase;letter-spacing:.4px;text-decoration:none"
                >
                  Verified
                </a>
              )}
            </div>
            <div class="commit-meta">
              {commit.author} committed {formatRelativeDate(commit.date)}
            </div>
          </div>
          <a
            href={`/${owner}/${repo}/commit/${commit.sha}`}
            class="commit-sha"
          >
            {commit.sha.slice(0, 7)}
          </a>
        </div>
      );
    })}
  </div>
);

// ---- Diff viewer ----------------------------------------------------------

const _diffScript = `
function diffToggleView(id,mode){
  var v=document.getElementById(id);if(!v)return;
  v.querySelectorAll('.diff-table-inline').forEach(function(t){t.hidden=(mode==='split');});
  v.querySelectorAll('.diff-table-split').forEach(function(t){t.hidden=(mode!=='split');});
  v.querySelectorAll('.diff-view-btn').forEach(function(b){b.classList.remove('active');});
  var btn=v.querySelector('.diff-view-btn-'+mode);if(btn)btn.classList.add('active');
}
function diffToggleFile(id){
  var body=document.getElementById(id);if(!body)return;
  body.hidden=!body.hidden;
  var hdr=body.previousElementSibling;if(hdr)hdr.classList.toggle('collapsed',body.hidden);
}
`;

export const DiffView: FC<{ raw: string; files: GitDiffFile[] }> = ({
  raw,
  files,
}) => {
  const parsed = parseDiff(raw);
  const totalAdd = files.reduce((s, f) => s + f.additions, 0);
  const totalDel = files.reduce((s, f) => s + f.deletions, 0);

  if (parsed.length === 0 && files.length === 0) {
    return (
      <div class="diff-view">
        <p style="color:var(--text-muted);font-size:14px">No changes.</p>
      </div>
    );
  }

  return (
    <div class="diff-view" id="diff-view-main">
      <script dangerouslySetInnerHTML={{ __html: _diffScript }} />

      {/* Toolbar */}
      <div class="diff-toolbar">
        <div class="diff-summary">
          <strong>{files.length}</strong> file{files.length !== 1 ? "s" : ""} changed,{" "}
          <span class="stat-add">+{totalAdd}</span>{" "}
          <span class="stat-del">-{totalDel}</span>
        </div>
        <div class="diff-view-toggle">
          <button class="diff-view-btn diff-view-btn-inline active" onclick="diffToggleView('diff-view-main','inline')" type="button">Inline</button>
          <button class="diff-view-btn diff-view-btn-split" onclick="diffToggleView('diff-view-main','split')" type="button">Split</button>
        </div>
      </div>

      {/* File jump list (shown when > 1 file) */}
      {parsed.length > 1 && (
        <div class="diff-jump-list">
          {parsed.map((f, i) => {
            const isAdd = f.additions > 0 && f.deletions === 0;
            const isDel = f.additions === 0 && f.deletions > 0;
            return (
              <a class="diff-jump-item" href={`#diff-file-${i}`}>
                <span class={isAdd ? "stat-add" : isDel ? "stat-del" : "diff-jump-mod"}>
                  {isAdd ? "+" : isDel ? "−" : "~"}
                </span>{" "}
                {f.path.split("/").pop() || f.path}
              </a>
            );
          })}
        </div>
      )}

      {/* Per-file blocks */}
      {parsed.map((file, idx) => {
        const bodyId = `diff-body-${idx}`;
        const splitRows = pairLines(file.lines);
        return (
          <div class="diff-file" id={`diff-file-${idx}`}>
            <div class="diff-file-header" onclick={`diffToggleFile('${bodyId}')`}>
              <span class="diff-file-path" title={file.path}>{file.path}</span>
              <span class="diff-file-meta">
                {file.isBinary
                  ? <span style="color:var(--text-muted)">binary</span>
                  : <><span class="stat-add">+{file.additions}</span>{" "}<span class="stat-del">-{file.deletions}</span></>
                }
                <span class="diff-file-chevron">▾</span>
              </span>
            </div>
            <div id={bodyId}>
              {file.isBinary ? (
                <div class="diff-binary">Binary file changed</div>
              ) : (
                <>
                  {/* Inline table (default) */}
                  <table class="diff-table diff-table-inline">
                    <tbody>
                      {file.lines.map((line) => {
                        if (line.type === "hunk") {
                          return (
                            <tr class="diff-row diff-row-hunk">
                              <td class="diff-ln diff-ln-old"></td>
                              <td class="diff-ln diff-ln-new"></td>
                              <td class="diff-cell">{line.content}</td>
                            </tr>
                          );
                        }
                        const sigil = line.type === "add" ? "+" : line.type === "del" ? "-" : " ";
                        return (
                          <tr class={`diff-row diff-row-${line.type}${line.wsOnly ? " diff-row-ws" : ""}`}>
                            <td class="diff-ln diff-ln-old">{line.oldLine ?? ""}</td>
                            <td class="diff-ln diff-ln-new">{line.newLine ?? ""}</td>
                            <td class="diff-cell">
                              <span class="diff-sigil">{sigil}</span>
                              {line.content}
                              {line.wsOnly && <span class="diff-ws-badge" title="whitespace-only change">ws</span>}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                  {/* Split table (hidden until toggled) */}
                  <table class="diff-table diff-table-split" hidden>
                    <tbody>
                      {splitRows.map((row) => {
                        const isHunk = row.left?.type === "hunk" || row.right?.type === "hunk";
                        if (isHunk) {
                          const hunk = row.left ?? row.right;
                          return (
                            <tr class="diff-row diff-row-hunk">
                              <td class="diff-ln diff-ln-old"></td>
                              <td class="diff-cell">{hunk?.content ?? ""}</td>
                              <td class="diff-ln diff-ln-new"></td>
                              <td class="diff-cell"></td>
                            </tr>
                          );
                        }
                        const isCtx = row.left?.type === "ctx";
                        const L = row.left;
                        const R = row.right;
                        const leftCls = `diff-cell${L ? (isCtx ? " diff-cell-ctx" : " diff-cell-del") : " diff-cell-empty"}${L?.wsOnly ? " diff-cell-ws" : ""}`;
                        const rightCls = `diff-cell${R ? (isCtx ? " diff-cell-ctx" : " diff-cell-add") : " diff-cell-empty"}${R?.wsOnly ? " diff-cell-ws" : ""}`;
                        return (
                          <tr class="diff-row diff-split-row">
                            <td class="diff-ln diff-ln-old">{L?.oldLine ?? ""}</td>
                            <td class={leftCls}>
                              {L && <span class="diff-sigil">{isCtx ? " " : "-"}</span>}
                              {L?.content ?? ""}
                              {L?.wsOnly && <span class="diff-ws-badge" title="whitespace-only change">ws</span>}
                            </td>
                            <td class="diff-ln diff-ln-new">{R?.newLine ?? ""}</td>
                            <td class={rightCls}>
                              {R && <span class="diff-sigil">{isCtx ? " " : "+"}</span>}
                              {isCtx ? L?.content ?? "" : R?.content ?? ""}
                              {R?.wsOnly && !isCtx && <span class="diff-ws-badge" title="whitespace-only change">ws</span>}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
};

export const RepoCard: FC<{ repo: Repository; ownerName: string }> = ({
  repo,
  ownerName,
}) => (
  <div class="card">
    <h3>
      <a href={`/${ownerName}/${repo.name}`}>{repo.name}</a>
    </h3>
    {repo.description && <p>{repo.description}</p>}
    <div class="card-meta">
      {repo.isPrivate && <span class="badge">Private</span>}
      <span>{"\u2606"} {repo.starCount}</span>
      {repo.pushedAt && (
        <span>Updated {formatRelativeDate(repo.pushedAt.toString())}</span>
      )}
    </div>
  </div>
);

function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

function formatRelativeDate(dateStr: string): string {
  const date = new Date(dateStr);
  const now = new Date();
  const diffMs = now.getTime() - date.getTime();
  const diffMins = Math.floor(diffMs / 60000);
  if (diffMins < 1) return "just now";
  if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? "s" : ""} ago`;
  const diffHours = Math.floor(diffMins / 60);
  if (diffHours < 24)
    return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
  const diffDays = Math.floor(diffHours / 24);
  if (diffDays < 30) return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
  return date.toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });
}

// ---------------------------------------------------------------------------
// CiFailureProfileCard — Phase 2 Human-Agent Canvas
// ---------------------------------------------------------------------------

export interface CiTraceIteration {
  iteration: number;
  modelRoute: string;
  errorDelta: string;
  tokenCost: number;
}

export interface CiFailureProfileProps {
  gateRunId: string;
  failureTarget: string;
  errorDelta: string;
  mitigationHint: string;
  traceLog: CiTraceIteration[];
}

export const CiFailureProfileCard: FC<CiFailureProfileProps> = ({
  gateRunId,
  failureTarget,
  errorDelta,
  mitigationHint,
  traceLog,
}) => (
  <div class="ci-failure-profile-card">
    <style>{`
      .ci-failure-profile-card {
        background: #1a1a2e;
        border: 1px solid #2d2d4a;
        border-radius: 8px;
        padding: 16px;
        margin: 12px 0;
        font-family: monospace;
        color: #e0e0ff;
      }
      .ci-failure-profile-card h3 {
        margin: 0 0 12px;
        color: #ff6b6b;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .ci-failure-profile-card .field-label {
        color: #888;
        font-size: 11px;
        text-transform: uppercase;
        margin-top: 10px;
      }
      .ci-failure-profile-card .field-value {
        color: #e0e0ff;
        font-size: 13px;
        margin: 2px 0 6px;
        white-space: pre-wrap;
        word-break: break-word;
      }
      .ci-failure-profile-card .trace-row {
        display: grid;
        grid-template-columns: 40px 1fr 80px;
        gap: 8px;
        padding: 4px 0;
        border-bottom: 1px solid #2d2d4a;
        font-size: 12px;
      }
      .ci-failure-profile-card .feedback-row {
        margin-top: 14px;
        display: flex;
        gap: 8px;
      }
      .ci-failure-profile-card .btn-feedback {
        padding: 6px 12px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        font-weight: bold;
      }
      .ci-failure-profile-card .btn-helpful {
        background: #1a6b3c;
        color: #7fff9e;
      }
      .ci-failure-profile-card .btn-hallucination {
        background: #6b1a1a;
        color: #ff9e9e;
      }
    `}</style>
    <h3>🔍 CI Failure Profile</h3>
    <div class="field-label">Failure Target</div>
    <div class="field-value">{failureTarget}</div>
    <div class="field-label">Error Delta</div>
    <div class="field-value">{errorDelta}</div>
    <div class="field-label">Mitigation Hint</div>
    <div class="field-value">{mitigationHint}</div>
    {traceLog.length > 0 && (
      <>
        <div class="field-label" style="margin-top:12px">Model Trace</div>
        {traceLog.map((t) => (
          <div class="trace-row" key={t.iteration}>
            <span>#{t.iteration}</span>
            <span>{t.modelRoute}</span>
            <span>{t.tokenCost}¢</span>
          </div>
        ))}
      </>
    )}
    <div class="feedback-row">
      <form method="post" action="/api/flywheel-telemetry/feedback" style="display:inline">
        <input type="hidden" name="gateRunId" value={gateRunId} />
        <input type="hidden" name="verdict" value="helpful" />
        <button type="submit" class="btn-feedback btn-helpful">
          👍 Diagnostic Helpful
        </button>
      </form>
      <form method="post" action="/api/flywheel-telemetry/feedback" style="display:inline">
        <input type="hidden" name="gateRunId" value={gateRunId} />
        <input type="hidden" name="verdict" value="hallucination" />
        <button type="submit" class="btn-feedback btn-hallucination">
          👎 Hallucination Flagged
        </button>
      </form>
    </div>
  </div>
);