import { readdir, stat } from 'node:fs/promises';
import type { Dirent } from 'node:fs';
import { join } from 'node:path';

/**
 * Mission Control project detail page — a generated gallery for ONE project.
 *
 * Every project card links here (`/project/<root>/<slug>`), so a project is
 * always openable regardless of whether it has a polished preview/review.html
 * surface. The page recursively scans the project dir for its rendered videos
 * and images and renders them as a playable gallery; media is streamed through
 * the existing `/m/<root>/<rel>` route (Range-aware, root-allowlisted).
 */

const VIDEO_EXTS = new Set(['.mp4', '.mov', '.webm']);
const IMAGE_EXTS = new Set(['.jpg', '.jpeg', '.png', '.gif']);
/** Working/internal dirs that never hold viewable deliverables. */
const SKIP_DIRS = new Set(['history', 'state', '.vclaw-jobs', 'node_modules', 'checkpoints', 'events', 'artifacts']);
const MAX_VIDEOS = 80;
const MAX_IMAGES = 160;
const MAX_DEPTH = 6;
/** Hide sub-KB scratch images (diagnostic frames), keep real stills. */
const MIN_IMAGE_BYTES = 4 * 1024;

interface MediaItem {
  /** Path RELATIVE to the workspace root (so `/m/<root>/<rel>` resolves it). */
  rel: string;
  name: string;
  mtimeMs: number;
  sizeBytes: number;
}

const MAX_HTML = 30;
/** Friendly labels for the common per-project review/preview/status pages. */
const PAGE_LABELS: Record<string, string> = {
  'preview.html': 'Preview', 'review.html': 'Review', 'client-review.html': 'Client Review',
  'edit.html': 'Editor', 'run-status.html': 'Run Status', 'run.html': 'Run', 'index.html': 'Index',
};
function pageLabel(name: string): string {
  return PAGE_LABELS[name] ?? name.replace(/\.html$/i, '').replace(/[-_]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
}

function esc(s: string): string {
  return s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]!));
}

/** Encode each path segment for a `/m/` or `/p/` URL (keeps the slashes). */
function segEncode(rel: string): string {
  return rel.split('/').map(encodeURIComponent).join('/');
}

async function walk(dir: string, rootRel: string, depth: number, vids: MediaItem[], imgs: MediaItem[], htmls: MediaItem[]): Promise<void> {
  if (depth > MAX_DEPTH) return;
  const entries: Dirent[] = await readdir(dir, { withFileTypes: true }).catch(() => []);
  for (const e of entries) {
    if (e.name.startsWith('.')) continue;
    const full = join(dir, e.name);
    const rel = `${rootRel}/${e.name}`;
    if (e.isDirectory()) {
      if (SKIP_DIRS.has(e.name)) continue;
      await walk(full, rel, depth + 1, vids, imgs, htmls);
      continue;
    }
    if (!e.isFile()) continue;
    const dot = e.name.lastIndexOf('.');
    const ext = dot >= 0 ? e.name.slice(dot).toLowerCase() : '';
    if (ext === '.html' && htmls.length < MAX_HTML) {
      const st = await stat(full).catch(() => null);
      if (st) htmls.push({ rel, name: e.name, mtimeMs: st.mtimeMs, sizeBytes: st.size });
    } else if (VIDEO_EXTS.has(ext) && vids.length < MAX_VIDEOS) {
      const st = await stat(full).catch(() => null);
      if (st) vids.push({ rel, name: e.name, mtimeMs: st.mtimeMs, sizeBytes: st.size });
    } else if (IMAGE_EXTS.has(ext) && imgs.length < MAX_IMAGES) {
      const st = await stat(full).catch(() => null);
      if (st && st.size > MIN_IMAGE_BYTES) imgs.push({ rel, name: e.name, mtimeMs: st.mtimeMs, sizeBytes: st.size });
    }
  }
}

/** `final/` deliverables first, then newest. */
function order(a: MediaItem, b: MediaItem): number {
  const rank = (m: MediaItem) => (/(^|\/)final\//.test(m.rel) ? 0 : 1);
  return rank(a) - rank(b) || b.mtimeMs - a.mtimeMs;
}

/**
 * Render the project detail gallery HTML. `root` must be an allowlisted
 * workspace root and `slug` a validated project slug (the caller — serve.ts —
 * enforces both before calling). Returns a self-contained HTML document.
 *
 * `opts.mediaUrl` / `opts.pageUrl` make the media/page URL builders injectable.
 * Omitted (the monitor server's case) they default to the server routes
 * `/m/<root>/<rel>` and `/p/<root>/<rel>` — byte-identical to before. A
 * persisted, file://-openable gallery injects absolute `file://` builders
 * instead (see preview-portal/gallery.ts).
 */
export async function renderProjectDetail(
  root: string,
  slug: string,
  opts: { displayName?: string; mediaUrl?: (rel: string) => string; pageUrl?: (rel: string) => string } = {},
): Promise<string> {
  const displayName = opts.displayName ?? slug;
  const projectDir = join(root, 'projects', slug);
  const vids: MediaItem[] = [];
  const imgs: MediaItem[] = [];
  const htmls: MediaItem[] = [];
  await walk(projectDir, `projects/${slug}`, 0, vids, imgs, htmls);
  vids.sort(order);
  imgs.sort(order);
  // Pages: every per-project review/preview/status HTML we generated. Well-known
  // ones first (preview, review, client-review, run-status…), then the rest A→Z.
  const pageRank = (h: MediaItem) => { const i = Object.keys(PAGE_LABELS).indexOf(h.name); return i < 0 ? 99 : i; };
  htmls.sort((a, b) => pageRank(a) - pageRank(b) || a.rel.localeCompare(b.rel));

  const m = opts.mediaUrl ?? ((rel: string) => `/m/${encodeURIComponent(root)}/${segEncode(rel)}`);
  const p = opts.pageUrl ?? ((rel: string) => `/p/${encodeURIComponent(root)}/${segEncode(rel)}`);

  const pageCards = htmls
    .map((h) => `<a class="page" href="${p(h.rel)}"><span class="page-label">${esc(pageLabel(h.name))}</span><span class="page-file">${esc(h.rel.replace(`projects/${slug}/`, ''))}</span></a>`)
    .join('\n');

  const videoCards = vids
    .map(
      (v) => `<figure class="vid">
      <video controls preload="metadata" playsinline src="${m(v.rel)}"></video>
      <figcaption>${esc(v.name)}</figcaption>
    </figure>`,
    )
    .join('\n');

  const imageCards = imgs
    .map(
      (i) => `<a class="img" href="${m(i.rel)}" title="${esc(i.name)}">
      <img loading="lazy" src="${m(i.rel)}" alt="${esc(i.name)}">
    </a>`,
    )
    .join('\n');

  const empty = vids.length === 0 && imgs.length === 0 && htmls.length === 0
    ? `<p class="empty">No pages, videos, or images found in this project yet.</p>`
    : '';

  return `<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>${esc(displayName)} — VideoClaw</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --bg:#EAE4D6; --card:#F6F1E6; --card-2:#FCF8F0; --ink:#221E18; --muted:#6B6253; --faint:#9C9382;
    --line:#DBD2BE; --line-soft:#E8E0CF; --accent:#C2410C; --accent-2:#E0691E;
    --font-display:"Fraunces",Georgia,"Times New Roman",serif;
    --font-body:"Hanken Grotesk",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,Menlo,"Courier New",monospace;
    --shadow:0 1px 1px rgba(40,30,20,.04),0 10px 26px -18px rgba(64,42,22,.34);
    --shadow-h:0 2px 4px rgba(40,30,20,.06),0 20px 44px -20px rgba(96,50,16,.44);
    --leader:repeating-linear-gradient(90deg,var(--accent) 0,var(--accent) 13px,var(--accent-2) 13px,var(--accent-2) 26px);
  }
  * { box-sizing:border-box; }
  body {
    margin:0; color:var(--ink); min-height:100vh;
    font:15px/1.55 var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    background:
      radial-gradient(1100px 520px at 88% -8%, rgba(224,105,30,.08), transparent 58%),
      radial-gradient(840px 520px at -8% 108%, rgba(63,107,40,.06), transparent 52%),
      var(--bg);
    background-attachment:fixed;
  }
  body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  body::after { content:""; position:fixed; top:0; left:0; right:0; height:3px; z-index:60; background:var(--leader); opacity:.92; pointer-events:none; }
  header {
    position:sticky; top:0; z-index:5; padding:16px 26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    background:linear-gradient(180deg,rgba(252,248,240,.96),rgba(246,241,230,.9)); backdrop-filter:saturate(1.1) blur(8px);
    border-bottom:1px solid var(--line);
  }
  header .back { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--muted); text-decoration:none; text-transform:uppercase; transition:color .14s; }
  header .back:hover { color:var(--accent); }
  header h1 { font-family:var(--font-display); font-optical-sizing:auto; font-size:25px; line-height:1.05; margin:0; font-weight:560; letter-spacing:-.3px; }
  header .count { font-family:var(--font-mono); color:var(--muted); font-size:11px; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
  header .spacer { flex:1; }
  .btn { font-family:var(--font-body); background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:#fff; text-decoration:none; padding:8px 14px; border-radius:9px; font-size:13px; font-weight:600; box-shadow:0 2px 5px rgba(150,56,10,.28),inset 0 1px 0 rgba(255,255,255,.25); transition:transform .12s,filter .12s; }
  .btn:hover { filter:brightness(1.06); transform:translateY(-1px); }
  main { position:relative; z-index:1; padding:26px; max-width:1400px; margin:0 auto; }
  h2 { display:flex; align-items:center; gap:11px; font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--ink); margin:34px 0 15px; }
  h2::before { content:""; width:4px; height:15px; border-radius:3px; background:var(--accent); box-shadow:0 0 8px -1px var(--accent); }
  h2::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }
  main > h2:first-of-type { margin-top:8px; }
  .vids { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px; }
  figure.vid { margin:0; background:var(--card); border:1px solid var(--line); border-radius:13px; overflow:hidden; box-shadow:var(--shadow); transition:transform .16s,box-shadow .16s; }
  figure.vid:hover { transform:translateY(-3px); box-shadow:var(--shadow-h); }
  figure.vid video { width:100%; display:block; background:#15110d; aspect-ratio:16/9; object-fit:contain; }
  figure.vid figcaption { padding:10px 13px; font-family:var(--font-mono); font-size:11px; color:var(--muted); word-break:break-all; border-top:1px solid var(--line-soft); }
  .imgs { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
  a.img { display:block; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); transition:transform .16s,box-shadow .16s,border-color .16s; }
  a.img img { width:100%; height:130px; object-fit:cover; display:block; transition:transform .3s ease; }
  a.img:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-h); }
  a.img:hover img { transform:scale(1.05); }
  .empty { font-family:var(--font-display); font-size:17px; color:var(--muted); padding:64px 0; text-align:center; }
  .pages { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
  a.page { position:relative; display:flex; flex-direction:column; gap:3px; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:13px 16px 13px 18px; text-decoration:none; color:var(--ink); overflow:hidden; box-shadow:var(--shadow); transition:transform .16s,box-shadow .16s,border-color .16s; }
  a.page::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--accent-2),var(--accent)); }
  a.page:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-h); }
  a.page .page-label { font-family:var(--font-display); font-optical-sizing:auto; font-weight:560; font-size:16px; letter-spacing:-.1px; }
  a.page .page-file { font-family:var(--font-mono); font-size:10px; color:var(--faint); word-break:break-all; }
  /* lightbox */
  #lb { position:fixed; inset:0; background:rgba(18,13,9,.94); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:100; }
  #lb.open { display:flex; }
  #lb img { max-width:92vw; max-height:86vh; border-radius:10px; box-shadow:0 10px 60px rgba(0,0,0,.6); }
  .lb-btn { position:absolute; background:rgba(247,241,230,.1); color:#F6F1E6; border:1px solid rgba(247,241,230,.16); cursor:pointer; font-size:28px; line-height:1; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .14s; }
  .lb-btn:hover { background:var(--accent); border-color:transparent; }
  .lb-close { top:20px; right:24px; font-size:26px; }
  .lb-prev { left:24px; top:50%; transform:translateY(-50%); }
  .lb-next { right:24px; top:50%; transform:translateY(-50%); }
  .lb-cap { position:absolute; bottom:28px; left:0; right:0; text-align:center; font-family:var(--font-mono); color:#EAE0D2; font-size:12px; word-break:break-all; padding:0 90px; }
  .lb-count { position:absolute; top:24px; left:26px; font-family:var(--font-mono); color:#bdb3a6; font-size:12px; letter-spacing:.05em; }
</style></head><body>
<header>
  <a class="back" href="/">&larr; Mission Control</a>
  <h1>${esc(displayName)}</h1>
  <span class="count">${htmls.length ? `${htmls.length} page${htmls.length === 1 ? '' : 's'} · ` : ''}${vids.length} video${vids.length === 1 ? '' : 's'} · ${imgs.length} image${imgs.length === 1 ? '' : 's'}</span>
</header>
<main>
  ${empty}
  ${htmls.length ? `<h2>Pages</h2><div class="pages">${pageCards}</div>` : ''}
  ${vids.length ? `<h2>Videos</h2><div class="vids">${videoCards}</div>` : ''}
  ${imgs.length ? `<h2>Images</h2><div class="imgs">${imageCards}</div>` : ''}
</main>
<div id="lb">
  <button id="lbClose" class="lb-btn lb-close" aria-label="Close">&times;</button>
  <button id="lbPrev" class="lb-btn lb-prev" aria-label="Previous">&lsaquo;</button>
  <img id="lbImg" alt="">
  <button id="lbNext" class="lb-btn lb-next" aria-label="Next">&rsaquo;</button>
  <div id="lbCap"></div>
  <div id="lbCount"></div>
</div>
<script>
  (function () {
    var imgs = Array.prototype.slice.call(document.querySelectorAll('a.img'));
    if (!imgs.length) return;
    var lb = document.getElementById('lb'), lbImg = document.getElementById('lbImg');
    var lbCap = document.getElementById('lbCap'), lbCount = document.getElementById('lbCount');
    var cur = -1;
    function show(i) {
      cur = (i + imgs.length) % imgs.length;
      var a = imgs[cur];
      lbImg.src = a.getAttribute('href');
      lbCap.textContent = a.getAttribute('title') || '';
      lbCount.textContent = (cur + 1) + ' / ' + imgs.length;
      lb.classList.add('open');
    }
    function close() { lb.classList.remove('open'); lbImg.removeAttribute('src'); cur = -1; }
    imgs.forEach(function (a, i) {
      a.addEventListener('click', function (e) {
        if (e.metaKey || e.ctrlKey || e.shiftKey) return; // let cmd/ctrl-click open in a new tab
        e.preventDefault();
        show(i);
      });
    });
    document.getElementById('lbClose').addEventListener('click', close);
    document.getElementById('lbPrev').addEventListener('click', function (e) { e.stopPropagation(); show(cur - 1); });
    document.getElementById('lbNext').addEventListener('click', function (e) { e.stopPropagation(); show(cur + 1); });
    lb.addEventListener('click', function (e) { if (e.target === lb) close(); });
    document.addEventListener('keydown', function (e) {
      if (!lb.classList.contains('open')) return;
      if (e.key === 'Escape') close();
      else if (e.key === 'ArrowLeft') show(cur - 1);
      else if (e.key === 'ArrowRight') show(cur + 1);
    });
  })();
</script>
</body></html>`;
}