import type { FC } from "hono/jsx";

export interface PrRedesignProps {
  pr?: {
    number?: number;
    title?: string;
    state?: string;
    baseBranch?: string;
    headBranch?: string;
    body?: string;
  };
  checks?: Array<{
    name: string;
    detail: string;
    state: string;
    dot?: string;
    stateColor?: string;
  }>;
  aiReview?: any;
  owner?: string;
  repo?: string;
  user?: any;
}

const defaultPr = {
  number: 218,
  title: "Unify auto-repair loop with PR sandbox lifecycle",
  state: "open",
  baseBranch: "main",
  headBranch: "feat/repair-sandbox-loop",
  body: "",
};

const defaultChecks = [
  { name: "gate: security", detail: "15-pattern secret scan + AI security review", dot: "#1e7f5c", state: "Passed", stateColor: "#1e7f5c" },
  { name: "gate: tests", detail: "bun test · 412 passed", dot: "#1e7f5c", state: "Passed", stateColor: "#1e7f5c" },
  { name: "gate: types", detail: "tsc --noEmit", dot: "#1e7f5c", state: "Passed", stateColor: "#1e7f5c" },
  { name: "review: claude", detail: "trio review · 2 pass, 1 flag", dot: "#b45309", state: "Needs human", stateColor: "#b45309" },
  { name: "sandbox: boot", detail: "pr-218.preview.gluecron.com", dot: "#1e7f5c", state: "Live", stateColor: "#1e7f5c" },
];

const trioData = [
  {
    icon: "S",
    iconLabel: "shield",
    name: "Security",
    verdict: "Pass",
    verdictBg: "rgba(30,127,92,0.10)",
    verdictColor: "#1e7f5c",
    verdictBorder: "rgba(30,127,92,0.30)",
    body: "Repair patches are applied inside the sandbox with no host filesystem access. Telemetry writes are parameterized. No new secrets surface.",
  },
  {
    icon: "P",
    iconLabel: "performance",
    name: "Performance",
    verdict: "Flag",
    verdictBg: "rgba(180,83,9,0.10)",
    verdictColor: "#b45309",
    verdictBorder: "rgba(180,83,9,0.28)",
    body: "Retry backoff in repairLoop() has no upper bound — a persistently red gate could hold a sandbox container for hours. Suggest capping at 5 attempts.",
  },
  {
    icon: "St",
    iconLabel: "style",
    name: "Style",
    verdict: "Pass",
    verdictBg: "rgba(30,127,92,0.10)",
    verdictColor: "#1e7f5c",
    verdictBorder: "rgba(30,127,92,0.30)",
    body: "Naming and module layout match the existing lib/ conventions. JSDoc on new public functions is complete.",
  },
];

const changedFiles = [
  { mark: "M", color: "#b45309", path: "src/lib/auto-repair.ts", add: 184, del: 62 },
  { mark: "M", color: "#b45309", path: "src/lib/pr-sandbox.ts", add: 97, del: 18 },
  { mark: "M", color: "#b45309", path: "src/lib/ai-ci-healer.ts", add: 41, del: 12 },
  { mark: "A", color: "#1e7f5c", path: "drizzle/0107_auto_repair_mode.sql", add: 14, del: 0 },
  { mark: "M", color: "#b45309", path: "src/hooks/post-receive.ts", add: 22, del: 6 },
];

export const PrRedesign: FC<PrRedesignProps> = (props) => {
  const pr = { ...defaultPr, ...(props.pr || {}) };
  const checks = props.checks && props.checks.length > 0 ? props.checks : defaultChecks;
  const owner = props.owner || "ccantynz";
  const repo = props.repo || "gluecron";
  const user = props.user || { name: "ccantynz", initials: "C" };

  const isOpen = pr.state === "open" || pr.state === "Open";

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: css }} />
      <div class="pr-root">
        {/* Top nav */}
        <header class="pr-header">
          <nav class="pr-nav">
            <a href="/" class="pr-logo">
              <span class="pr-logo-mark" />
              gluecron
            </a>
            <div class="pr-search-wrap">
              <span class="pr-search-icon" aria-hidden="true" />
              <input type="search" placeholder="Search (press /)" aria-label="Search" class="pr-search-input" />
            </div>
            <div class="pr-nav-right">
              <a href="/explore" class="pr-nav-link">Explore</a>
              <a href="/notifications" title="Inbox" class="pr-nav-icon-btn" aria-label="Inbox">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
                  <path d="M13.73 21a2 2 0 0 1-3.46 0" />
                </svg>
                <span class="pr-notif-badge">3</span>
              </a>
              <a href="/new" class="pr-new-btn">+ New</a>
              <button type="button" class="pr-user-btn">
                <span class="pr-user-avatar">{user.initials || "C"}</span>
                <span>{user.name || "ccantynz"}</span>
                <span class="pr-user-caret" aria-hidden="true">&#9662;</span>
              </button>
            </div>
          </nav>
        </header>

        {/* Main */}
        <main class="pr-main">
          {/* Breadcrumb */}
          <div class="pr-breadcrumb">
            <strong class="pr-breadcrumb-accent">Pull request</strong>
            {" · "}
            {owner}/{repo}
          </div>

          {/* Title row */}
          <div class="pr-title-row">
            <h1 class="pr-title">
              {pr.title}
              <span class="pr-title-number"> #{pr.number}</span>
            </h1>
            <div class="pr-title-actions">
              <span class={`pr-state-badge${isOpen ? " pr-state-open" : " pr-state-closed"}`}>
                {isOpen ? "○ Open" : "● Closed"}
              </span>
              <a href="#" class="pr-edit-btn">Edit</a>
            </div>
          </div>

          {/* Meta row */}
          <div class="pr-meta-row">
            <span class="pr-branches">
              <code class="pr-branch-chip">{pr.headBranch}</code>
              <span class="pr-branch-arrow">&#8594;</span>
              <code class="pr-branch-chip">{pr.baseBranch}</code>
            </span>
            <span class="pr-meta-dot">·</span>
            <span>
              <strong class="pr-meta-strong">claude[agent]</strong> wants to merge 6 commits
            </span>
            <span class="pr-meta-dot">·</span>
            <span>opened 38 min ago</span>
            <span class="pr-presence" aria-label="Live session participants">
              <span class="pr-presence-pill pr-presence-human" title="ccantynz">
                <span class="pr-presence-av pr-presence-av-human">CC</span>
                ccantynz
              </span>
              <span class="pr-presence-pill pr-presence-agent" title="claude[agent]">
                <span class="pr-presence-av pr-presence-av-agent">A</span>
                claude[agent]
              </span>
            </span>
          </div>

          {/* Tabs */}
          <div class="pr-tabs" role="tablist">
            <a href="#overview" class="pr-tab pr-tab-active" role="tab">
              Overview
              <span class="pr-tab-badge">8</span>
            </a>
            <a href="#files" class="pr-tab" role="tab">
              Files changed
              <span class="pr-tab-badge">11</span>
            </a>
            <a href="#activity" class="pr-tab" role="tab">
              Activity
              <span class="pr-tab-badge">6</span>
            </a>
            <a href="#checks" class="pr-tab" role="tab">
              Checks
              <span class="pr-tab-badge">5</span>
            </a>
          </div>

          {/* Two-column grid */}
          <div class="pr-grid">
            {/* Main column */}
            <div class="pr-main-col">

              {/* PR Description card */}
              <div class="pr-card">
                <div class="pr-card-header">
                  <span class="pr-av pr-av-agent">CL</span>
                  <strong class="pr-card-author">claude[agent]</strong>
                  <span class="pr-card-meta"> commented 38 min ago</span>
                  <span class="pr-agent-badge">Agent</span>
                </div>
                <div class="pr-card-body pr-description">
                  <p>
                    Closes{" "}
                    <a href="#" class="pr-link">#204</a>
                    {". "}
                    When a gate fails on a PR branch, the auto-repair engine now attaches to the existing PR sandbox instead of spinning a detached loop:
                  </p>
                  <ul class="pr-desc-list">
                    <li>
                      <code class="pr-code">src/lib/auto-repair.ts</code> — repair attempts run inside the sandbox container
                    </li>
                    <li>
                      <code class="pr-code">src/lib/pr-sandbox.ts</code> — sandbox lifecycle exposes a repair session handle
                    </li>
                    <li>
                      <code class="pr-code">drizzle/0107_auto_repair_mode.sql</code> — per-repo repair mode column
                    </li>
                  </ul>
                  <p>
                    Each repair attempt is recorded in{" "}
                    <code class="pr-code">flywheel_telemetry</code>
                    {" "}with the failing gate, patch diff, and outcome.
                  </p>
                </div>
              </div>

              {/* Merge Impact panel */}
              <div class="pr-card pr-impact-card" id="pr-impact-card">
                <div class="pr-impact-header" id="pr-impact-toggle" role="button" tabindex={0} aria-expanded="false" aria-controls="pr-impact-body">
                  <span class="pr-impact-risk-badge">62</span>
                  <strong class="pr-impact-title">Merge Impact</strong>
                  <span class="pr-impact-summary">
                    Medium risk — repair loop touches gate execution path shared by 3 subsystems
                  </span>
                  <button type="button" class="pr-impact-caret" id="pr-impact-caret" aria-label="Toggle impact panel">&#9660;</button>
                </div>
                <div class="pr-impact-body" id="pr-impact-body" style="display:none">
                  <div class="pr-impact-section">
                    <h4 class="pr-impact-section-title">Affected test files (3)</h4>
                    <ul class="pr-impact-list">
                      <li>src/__tests__/auto-repair.test.ts</li>
                      <li>src/__tests__/pr-sandbox.test.ts</li>
                      <li>src/__tests__/gates-runner.test.ts</li>
                    </ul>
                  </div>
                  <div class="pr-impact-section">
                    <h4 class="pr-impact-section-title">Affected source files (4)</h4>
                    <ul class="pr-impact-list">
                      <li>src/lib/ai-ci-healer.ts</li>
                      <li>src/lib/autopilot.ts</li>
                      <li>src/hooks/post-receive.ts</li>
                      <li>src/routes/gates.tsx</li>
                    </ul>
                  </div>
                </div>
              </div>

              {/* AI Trio Review */}
              <div class="pr-trio-card">
                <div class="pr-trio-header">
                  <span class="pr-trio-dot" aria-hidden="true" />
                  <strong class="pr-trio-title">AI Trio Review</strong>
                  <span class="pr-trio-sub">Three independent reviewers ran in parallel.</span>
                </div>
                <div class="pr-trio-grid">
                  {trioData.map((t) => (
                    <div class="pr-trio-item" key={t.name}>
                      <div class="pr-trio-item-header">
                        <span class="pr-trio-item-icon" aria-hidden="true">{t.icon}</span>
                        <strong class="pr-trio-item-name">{t.name}</strong>
                        <span
                          class="pr-trio-verdict"
                          style={`background:${t.verdictBg};color:${t.verdictColor};border:1px solid ${t.verdictBorder}`}
                        >
                          {t.verdict}
                        </span>
                      </div>
                      <p class="pr-trio-item-body">{t.body}</p>
                    </div>
                  ))}
                </div>
                <div class="pr-trio-disagree" role="note">
                  <span class="pr-trio-warn-icon" aria-hidden="true">!</span>
                  <div>
                    <strong>Reviewers disagree — review carefully.</strong>{" "}
                    Performance flags the retry backoff as unbounded; Security and Style pass. Human review requested before auto-merge.
                  </div>
                </div>
              </div>

              {/* Checks */}
              <div class="pr-card pr-checks-card">
                <div class="pr-checks-title">Checks — run #1842 · 42s</div>
                <div class="pr-checks-list">
                  {checks.map((c) => (
                    <div class="pr-check-row" key={c.name}>
                      <span
                        class="pr-check-dot"
                        style={`background:${c.dot || "#c4c6cf"}`}
                        aria-hidden="true"
                      />
                      <span class="pr-check-name">{c.name}</span>
                      <span class="pr-check-detail">{c.detail}</span>
                      <span
                        class="pr-check-state"
                        style={`color:${c.stateColor || "#6b7080"}`}
                      >
                        {c.state}
                      </span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Merge box */}
              <div class="pr-merge-box">
                <span class="pr-merge-icon" aria-hidden="true">&#10003;</span>
                <div class="pr-merge-content">
                  <div class="pr-merge-title">Ready to merge once you approve</div>
                  <div class="pr-merge-desc">
                    Gates green · 2 of 3 AI reviewers pass · branch protection requires 1 human approval.
                    Auto-merge will complete within ~30s of approval.
                  </div>
                  <div class="pr-merge-actions">
                    <button type="button" class="pr-btn-approve">Approve &amp; enable auto-merge</button>
                    <button type="button" class="pr-btn-review">Review files changed</button>
                    <button type="button" class="pr-btn-sandbox">Open sandbox</button>
                  </div>
                </div>
              </div>
            </div>

            {/* Sidebar */}
            <aside class="pr-sidebar">
              {/* Reviewers */}
              <div class="pr-sidebar-card">
                <h3 class="pr-sidebar-title">Reviewers</h3>
                <div class="pr-reviewers">
                  <div class="pr-reviewer-row">
                    <span class="pr-av pr-av-agent">CL</span>
                    <span>claude[agent]</span>
                    <span class="pr-reviewer-status pr-reviewer-approved">&#10003;</span>
                  </div>
                  <div class="pr-reviewer-row">
                    <span class="pr-av pr-av-human">CC</span>
                    <span>ccantynz</span>
                    <span class="pr-reviewer-status pr-reviewer-pending">&#9679;</span>
                  </div>
                </div>
              </div>

              {/* Labels */}
              <div class="pr-sidebar-card">
                <h3 class="pr-sidebar-title">Labels</h3>
                <div class="pr-labels">
                  <span class="pr-label pr-label-indigo">ai-build</span>
                  <span class="pr-label pr-label-green">auto-repair</span>
                  <span class="pr-label pr-label-amber">flywheel</span>
                </div>
              </div>

              {/* Branch preview */}
              <div class="pr-sidebar-card">
                <h3 class="pr-sidebar-title">Branch preview</h3>
                <a href="#" class="pr-preview-link">pr-218.preview.gluecron.com</a>
                <div class="pr-preview-meta">Sandbox booted 36 min ago · isolated · auto-expires on merge</div>
              </div>

              {/* Files changed */}
              <div class="pr-sidebar-card">
                <h3 class="pr-sidebar-title">Files changed</h3>
                <div class="pr-files-list">
                  {changedFiles.map((f) => (
                    <div class="pr-file-row" key={f.path}>
                      <span class="pr-file-mark" style={`color:${f.color}`}>{f.mark}</span>
                      <span class="pr-file-path">{f.path}</span>
                      <span class="pr-file-add">+{f.add}</span>
                      <span class="pr-file-del">-{f.del}</span>
                    </div>
                  ))}
                </div>
              </div>
            </aside>
          </div>
        </main>

        {/* Footer */}
        <footer class="pr-footer">
          <div class="pr-footer-inner">
            <span>&#169; 2026 gluecron</span>
            <span class="pr-footer-sha">
              <span class="pr-footer-dot" aria-hidden="true" />
              82321e8 · main
            </span>
          </div>
        </footer>

        <script dangerouslySetInnerHTML={{ __html: inlineJs }} />
      </div>
    </>
  );
};

export default PrRedesign;

const inlineJs = `
(function() {
  var toggle = document.getElementById('pr-impact-toggle');
  var body = document.getElementById('pr-impact-body');
  var caret = document.getElementById('pr-impact-caret');
  if (toggle && body && caret) {
    toggle.addEventListener('click', function() {
      var isOpen = body.style.display !== 'none';
      body.style.display = isOpen ? 'none' : 'block';
      caret.innerHTML = isOpen ? '&#9660;' : '&#9650;';
      toggle.setAttribute('aria-expanded', String(!isOpen));
    });
    toggle.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        toggle.click();
      }
    });
  }

  // Tab switching
  var tabs = document.querySelectorAll('.pr-tab');
  tabs.forEach(function(tab) {
    tab.addEventListener('click', function(e) {
      tabs.forEach(function(t) { t.classList.remove('pr-tab-active'); });
      tab.classList.add('pr-tab-active');
    });
  });

  // Merge buttons feedback
  var approveBtn = document.querySelector('.pr-btn-approve');
  if (approveBtn) {
    approveBtn.addEventListener('click', function() {
      approveBtn.textContent = 'Approved — auto-merge queued';
      approveBtn.style.background = '#1e7f5c';
      approveBtn.disabled = true;
    });
  }

  var sandboxBtn = document.querySelector('.pr-btn-sandbox');
  if (sandboxBtn) {
    sandboxBtn.addEventListener('click', function() {
      window.open('https://pr-218.preview.gluecron.com', '_blank');
    });
  }
})();
`;

const css = `
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; }

.pr-root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: #16181d;
  background: #fcfcfd;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Header */
.pr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  background: rgba(252, 252, 253, 0.88);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(22, 24, 29, 0.07);
}

.pr-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  padding: 0 24px;
}

.pr-logo {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #16181d;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.pr-logo-mark {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #4353c9;
  display: inline-block;
  flex-shrink: 0;
}

.pr-search-wrap {
  flex: 1;
  max-width: 340px;
  margin: 0 4px;
  position: relative;
}

.pr-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 1.5px solid #8a8d99;
  border-radius: 50%;
  pointer-events: none;
  display: block;
}

.pr-search-input {
  width: 100%;
  padding: 6px 12px 6px 30px;
  background: rgba(22, 24, 29, 0.04);
  border: 1px solid rgba(22, 24, 29, 0.12);
  border-radius: 8px;
  color: #16181d;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.pr-search-input:focus {
  border-color: #4353c9;
  background: #fff;
}

.pr-nav-right {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.pr-nav-link {
  color: #6b7080;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.pr-nav-link:hover {
  color: #16181d;
  background: rgba(22, 24, 29, 0.05);
}

.pr-nav-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  color: #6b7080;
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.pr-nav-icon-btn:hover {
  color: #16181d;
  background: rgba(22, 24, 29, 0.05);
}

.pr-notif-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  color: #fff;
  background: #4353c9;
  border-radius: 9999px;
  text-align: center;
}

.pr-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  background: #16181d;
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.25;
  transition: background 0.15s;
}
.pr-new-btn:hover { background: #2a2d38; }

.pr-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #16181d;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pr-user-btn:hover {
  background: rgba(22, 24, 29, 0.05);
  border-color: rgba(22, 24, 29, 0.07);
}

.pr-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #16181d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pr-user-caret { color: #8a8d99; font-size: 10px; }

/* Main */
.pr-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 36px 24px 80px;
  flex: 1;
  width: 100%;
}

/* Breadcrumb */
.pr-breadcrumb {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: #6b7080;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pr-breadcrumb-accent {
  color: #4353c9;
  font-weight: 600;
}

/* Title row */
.pr-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pr-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.18;
  color: #111318;
  margin: 0;
}

.pr-title-number {
  color: #8a8d99;
  font-weight: 400;
}

.pr-title-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.pr-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 9999px;
}

.pr-state-open {
  background: rgba(30, 127, 92, 0.10);
  color: #1e7f5c;
  border: 1px solid rgba(30, 127, 92, 0.30);
}

.pr-state-closed {
  background: rgba(180, 35, 24, 0.08);
  color: #b42318;
  border: 1px solid rgba(180, 35, 24, 0.25);
}

.pr-edit-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(22, 24, 29, 0.12);
  background: #ffffff;
  color: #16181d;
  text-decoration: none;
  transition: background 0.15s;
}
.pr-edit-btn:hover { background: #f5f5f8; }

/* Meta row */
.pr-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #6b7080;
  margin-bottom: 20px;
}

.pr-branches {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pr-branch-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(67, 83, 201, 0.08);
  color: #4353c9;
  border: 1px solid rgba(67, 83, 201, 0.22);
}

.pr-branch-arrow { color: #8a8d99; }

.pr-meta-dot { color: #c4c6cf; }

.pr-meta-strong {
  color: #16181d;
  font-weight: 600;
}

.pr-presence {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
}

.pr-presence-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 3px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
}

.pr-presence-human {
  background: rgba(67, 83, 201, 0.10);
  border: 1px solid rgba(67, 83, 201, 0.25);
  color: #4353c9;
}

.pr-presence-agent {
  background: rgba(95, 143, 160, 0.12);
  border: 1px solid rgba(95, 143, 160, 0.30);
  color: #41707e;
}

.pr-presence-av {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}

.pr-presence-av-human { background: #4353c9; }
.pr-presence-av-agent { background: #5f8fa0; }

/* Tabs */
.pr-tabs {
  display: flex;
  gap: 1px;
  border-bottom: 1px solid rgba(22, 24, 29, 0.07);
  margin-bottom: 24px;
}

.pr-tab {
  position: relative;
  padding: 10px 14px;
  font-size: 13px;
  color: #6b7080;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s, background 0.15s;
}
.pr-tab:hover {
  color: #16181d;
  background: rgba(22, 24, 29, 0.03);
}
.pr-tab-active {
  color: #16181d;
  font-weight: 600;
  border-bottom-color: #4353c9;
}

.pr-tab-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(22, 24, 29, 0.06);
  color: #6b7080;
}

/* Grid */
.pr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.pr-main-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cards */
.pr-card {
  background: #ffffff;
  border: 1px solid rgba(22, 24, 29, 0.07);
  border-radius: 12px;
  overflow: hidden;
}

.pr-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(22, 24, 29, 0.07);
  font-size: 13px;
  color: #6b7080;
}

.pr-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.pr-av-agent { background: #5f8fa0; }
.pr-av-human { background: #4353c9; }

.pr-card-author {
  color: #16181d;
}

.pr-card-meta { color: #6b7080; }

.pr-agent-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(67, 83, 201, 0.10);
  color: #4353c9;
  border: 1px solid rgba(67, 83, 201, 0.30);
}

.pr-card-body {
  padding: 16px;
}

.pr-description {
  font-size: 14.5px;
}

.pr-description p {
  margin: 0 0 10px;
}
.pr-description p:last-child { margin-bottom: 0; }

.pr-desc-list {
  margin: 0 0 10px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pr-link {
  color: #4353c9;
  text-decoration: none;
}
.pr-link:hover { text-decoration: underline; }

.pr-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88em;
  background: rgba(22, 24, 29, 0.04);
  border: 1px solid rgba(22, 24, 29, 0.07);
  padding: 1px 6px;
  border-radius: 5px;
  color: #16181d;
}

/* Merge Impact */
.pr-impact-card { cursor: default; }

.pr-impact-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.pr-impact-header:hover { background: rgba(22, 24, 29, 0.02); }

.pr-impact-risk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  background: rgba(180, 83, 9, 0.10);
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.25);
  padding: 0 8px;
}

.pr-impact-title {
  font-size: 13.5px;
}

.pr-impact-summary {
  font-size: 12.5px;
  color: #6b7080;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-impact-caret {
  background: transparent;
  border: 0;
  color: #8a8d99;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  flex-shrink: 0;
}

.pr-impact-body {
  border-top: 1px solid rgba(22, 24, 29, 0.07);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pr-impact-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7080;
  margin: 0 0 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.pr-impact-list {
  margin: 0;
  padding-left: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #16181d;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* AI Trio Review */
.pr-trio-card {
  background: #ffffff;
  border: 1px solid rgba(67, 83, 201, 0.28);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(67, 83, 201, 0.06);
}

.pr-trio-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(22, 24, 29, 0.07);
  background: linear-gradient(135deg, rgba(67, 83, 201, 0.04), rgba(95, 143, 160, 0.02));
}

.pr-trio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4353c9;
  flex-shrink: 0;
  display: inline-block;
}

.pr-trio-title { font-size: 13.5px; }

.pr-trio-sub {
  font-size: 12.5px;
  color: #6b7080;
}

.pr-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 16px;
}

.pr-trio-item {
  border: 1px solid rgba(22, 24, 29, 0.07);
  border-radius: 9px;
  padding: 12px;
  background: #fcfcfd;
}

.pr-trio-item-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.pr-trio-item-icon {
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #6b7080;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.pr-trio-item-name { font-size: 13px; }

.pr-trio-verdict {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 9999px;
}

.pr-trio-item-body {
  font-size: 12.5px;
  color: #6b7080;
  margin: 0;
  line-height: 1.5;
}

.pr-trio-disagree {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid rgba(180, 83, 9, 0.22);
  background: rgba(180, 83, 9, 0.05);
  font-size: 12.5px;
  color: #16181d;
  align-items: flex-start;
}

.pr-trio-warn-icon {
  color: #b45309;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Checks */
.pr-checks-card {
  padding: 14px 16px;
}

.pr-checks-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7080;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  margin-bottom: 12px;
}

.pr-checks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pr-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.pr-check-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.pr-check-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: #16181d;
  min-width: 130px;
}

.pr-check-detail {
  color: #6b7080;
  font-size: 12px;
  flex: 1;
}

.pr-check-state {
  font-size: 12px;
  font-weight: 600;
  margin-left: auto;
  flex-shrink: 0;
}

/* Merge box */
.pr-merge-box {
  background: #ffffff;
  border: 1px solid rgba(30, 127, 92, 0.30);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pr-merge-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(30, 127, 92, 0.10);
  color: #1e7f5c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.pr-merge-content { flex: 1; }

.pr-merge-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #16181d;
  margin-bottom: 2px;
}

.pr-merge-desc {
  font-size: 13px;
  color: #6b7080;
}

.pr-merge-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.pr-btn-approve {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: #16181d;
  color: #fff;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.pr-btn-approve:hover:not(:disabled) { background: #2a2d38; }
.pr-btn-approve:disabled {
  background: #1e7f5c;
  cursor: default;
}

.pr-btn-review {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(22, 24, 29, 0.16);
  background: #ffffff;
  color: #16181d;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.pr-btn-review:hover { background: #f5f5f8; }

.pr-btn-sandbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(22, 24, 29, 0.07);
  background: transparent;
  color: #6b7080;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.pr-btn-sandbox:hover {
  background: rgba(22, 24, 29, 0.04);
  color: #16181d;
}

/* Sidebar */
.pr-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pr-sidebar-card {
  background: #ffffff;
  border: 1px solid rgba(22, 24, 29, 0.07);
  border-radius: 12px;
  padding: 16px;
}

.pr-sidebar-title {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7080;
  margin: 0 0 12px;
  font-weight: 600;
}

/* Reviewers */
.pr-reviewers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.pr-reviewer-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pr-reviewer-status {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
}
.pr-reviewer-approved { color: #1e7f5c; }
.pr-reviewer-pending { color: #b45309; }

/* Labels */
.pr-labels {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pr-label {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 9999px;
}

.pr-label-indigo {
  background: rgba(67, 83, 201, 0.10);
  color: #4353c9;
  border: 1px solid rgba(67, 83, 201, 0.30);
}

.pr-label-green {
  background: rgba(30, 127, 92, 0.10);
  color: #1e7f5c;
  border: 1px solid rgba(30, 127, 92, 0.28);
}

.pr-label-amber {
  background: rgba(180, 83, 9, 0.10);
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.25);
}

/* Branch preview */
.pr-preview-link {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #4353c9;
  text-decoration: none;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-preview-link:hover { text-decoration: underline; }

.pr-preview-meta {
  font-size: 12px;
  color: #6b7080;
}

/* Files list */
.pr-files-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
}

.pr-file-row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.pr-file-mark {
  font-weight: 700;
  flex-shrink: 0;
}

.pr-file-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #16181d;
  flex: 1;
}

.pr-file-add {
  margin-left: auto;
  color: #1e7f5c;
  flex-shrink: 0;
}

.pr-file-del {
  color: #b42318;
  flex-shrink: 0;
}

/* Footer */
.pr-footer {
  border-top: 1px solid rgba(22, 24, 29, 0.07);
  padding: 28px 24px;
  background: #fcfcfd;
}

.pr-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8a8d99;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}

.pr-footer-sha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: help;
}

.pr-footer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1e7f5c;
  opacity: 0.9;
  display: inline-block;
}

/* Responsive */
@media (max-width: 900px) {
  .pr-grid {
    grid-template-columns: 1fr;
  }
  .pr-trio-grid {
    grid-template-columns: 1fr;
  }
  .pr-presence {
    margin-left: 0;
    margin-top: 6px;
    flex-basis: 100%;
  }
  .pr-meta-row {
    flex-wrap: wrap;
  }
}
`;