---
export const prerender = false;

import { isAuthenticated, ADMIN_COOKIE } from '@admin/lib/admin-auth';

interface Env { DB: D1Database }
const runtime = Astro.locals.runtime as { env: Env } | undefined;
const db = runtime?.env?.DB;
if (!db || !await isAuthenticated(Astro.cookies.get(ADMIN_COOKIE)?.value, db)) {
  return Astro.redirect('/admin/login', 302);
}

const { id } = Astro.params;

interface ScraperRun {
  id: number; chain_id: string; city_id: string;
  started_at: string; finished_at: string | null; status: string;
  movies_found: number; showtimes_found: number; error_message: string | null;
}

let run: ScraperRun | null = null;
let dbError: string | null = null;

if (db) {
  try {
    const result = await db.prepare('SELECT * FROM scraper_runs WHERE id = ?').bind(id).first();
    run = result as ScraperRun | null;
  } catch (e) {
    dbError = String(e);
  }
} else {
  dbError = 'D1 database binding not available.';
}

if (!dbError && !run) {
  return new Response('Run not found', { status: 404 });
}

function duration(started: string, finished: string | null): string {
  if (!finished) return '—';
  const ms = new Date(finished).getTime() - new Date(started).getTime();
  if (ms < 0) return '—';
  const s = Math.round(ms / 1000);
  return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`;
}
---
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Run #{id} — CultRoll Admin</title>
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: #0a0a0a; color: #e6e6e6; font-family: system-ui, sans-serif; font-size: 0.9rem; }
    a { color: #b78a3c; text-decoration: none; }
    a:hover { text-decoration: underline; }
    .sidebar { position: fixed; top: 0; left: 0; width: 220px; height: 100vh; background: #111; border-right: 1px solid #222; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; }
    .main { margin-left: 220px; padding: 2rem; max-width: 900px; }
    .logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; letter-spacing: 0.1em; color: #fff; font-size: 0.95rem; margin-bottom: 1.5rem; }
    .nav-section { font-size: 0.7rem; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.75rem 0.5rem 0.25rem; }
    .nav-link { display: block; padding: 0.5rem 0.75rem; border-radius: 6px; color: #aaa; font-size: 0.85rem; }
    .nav-link:hover { background: #1a1a1a; color: #fff; text-decoration: none; }
    .page-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
    .page-header h1 { font-size: 1.3rem; font-weight: 700; color: #fff; }
    .badge { display: inline-block; padding: 0.2em 0.55em; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
    .badge-success { background: #0d2e1e; color: #34d399; }
    .badge-failed { background: #2a1010; color: #f87171; }
    .badge-running { background: #1a200a; color: #facc15; }
    .badge-partial { background: #1a160a; color: #fb923c; }
    .detail-grid { display: grid; grid-template-columns: 180px 1fr; gap: 1px; background: #222; border: 1px solid #222; border-radius: 10px; overflow: hidden; }
    .detail-row { display: contents; }
    .detail-key { background: #161616; padding: 0.75rem 1rem; color: #666; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
    .detail-val { background: #0e0e0e; padding: 0.75rem 1rem; color: #e6e6e6; font-size: 0.88rem; word-break: break-all; }
    .mono { font-family: 'Courier New', monospace; }
    .error-block { background: #2a1010; border: 1px solid #5a2020; border-radius: 8px; padding: 1rem; color: #f87171; font-family: 'Courier New', monospace; font-size: 0.8rem; white-space: pre-wrap; margin-top: 1.5rem; }
    .db-error { background: #2a1010; border: 1px solid #5a2020; border-radius: 8px; padding: 1rem; color: #f87171; margin-bottom: 1.5rem; font-size: 0.85rem; }
  </style>
</head>
<body>
  <nav class="sidebar">
    <div class="logo">
      <svg viewBox="0 0 32 32" width="22" height="22" xmlns="http://www.w3.org/2000/svg">
        <rect width="32" height="32" rx="6" fill="#0a0a0a"/>
        <circle cx="16" cy="16" r="10" fill="none" stroke="#e6e6e6" stroke-width="1.5"/>
        <circle cx="16" cy="16" r="3.5" fill="#e6e6e6"/>
        <circle cx="16" cy="7" r="1.5" fill="#0a0a0a"/>
        <circle cx="16" cy="25" r="1.5" fill="#0a0a0a"/>
        <circle cx="7" cy="16" r="1.5" fill="#0a0a0a"/>
        <circle cx="25" cy="16" r="1.5" fill="#0a0a0a"/>
        <circle cx="9.7" cy="9.7" r="1.5" fill="#0a0a0a"/>
        <circle cx="22.3" cy="22.3" r="1.5" fill="#0a0a0a"/>
        <circle cx="22.3" cy="9.7" r="1.5" fill="#0a0a0a"/>
        <circle cx="9.7" cy="22.3" r="1.5" fill="#0a0a0a"/>
      </svg>
      CULTROLL
    </div>
    <div class="nav-section">Overview</div>
    <a href="/admin" class="nav-link">Dashboard</a>
    <div class="nav-section">Scraper</div>
    <a href="/admin/runs" class="nav-link active">All Runs</a>
    <div class="nav-section">Account</div>
    <a href="/admin/password" class="nav-link">Change Password</a>
    <div class="nav-section">Data</div>
    <a href="/admin/titles" class="nav-link">Titles</a>
    <a href="/admin/cast" class="nav-link">Cast</a>
    <a href="/" class="nav-link" target="_blank">↗ Live Site</a>
  </nav>

  <main class="main">
    <div class="page-header">
      <a href="/admin">← Back</a>
      <h1>Run #{id}</h1>
      {run && <span class={`badge badge-${run.status}`}>{run.status}</span>}
    </div>

    {dbError && <div class="db-error">⚠ DB error: {dbError}</div>}

    {run && (
      <div class="detail-grid">
        <div class="detail-key">Run ID</div>
        <div class="detail-val mono">#{run.id}</div>

        <div class="detail-key">Chain</div>
        <div class="detail-val mono">{run.chain_id}</div>

        <div class="detail-key">City</div>
        <div class="detail-val mono">{run.city_id ?? '—'}</div>

        <div class="detail-key">Status</div>
        <div class="detail-val"><span class={`badge badge-${run.status}`}>{run.status}</span></div>

        <div class="detail-key">Started</div>
        <div class="detail-val mono">{run.started_at}</div>

        <div class="detail-key">Finished</div>
        <div class="detail-val mono">{run.finished_at ?? '—'}</div>

        <div class="detail-key">Duration</div>
        <div class="detail-val">{duration(run.started_at, run.finished_at)}</div>

        <div class="detail-key">Movies Found</div>
        <div class="detail-val">{run.movies_found ?? 0}</div>

        <div class="detail-key">Showtimes Found</div>
        <div class="detail-val">{run.showtimes_found ?? 0}</div>
      </div>
    )}

    {run?.error_message && (
      <div>
        <div style="margin-top:1.5rem;margin-bottom:0.5rem;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#666">Error</div>
        <div class="error-block">{run.error_message}</div>
      </div>
    )}
  </main>
</body>
</html>
