<!DOCTYPE html>
<html lang="da">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BlaaAi — Find den bedste annonce</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: { sans: ['Space Grotesk', 'sans-serif'] },
          colors: {
            ink: { DEFAULT: '#09090b', 50: '#f4f4f5', 100: '#e4e4e7', 200: '#27272a', 300: '#3f3f46' }
          }
        }
      }
    }
  </script>
  <style>
    body { background: #fafaf9; color: #0c0a09; font-family: 'Space Grotesk', sans-serif; }
    .card-enter { animation: fadeUp .25s ease both; }
    @keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
    .spinner { animation: spin .9s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .score-fill { background: #0c0a09; transition: width .6s cubic-bezier(.4,0,.2,1); }
    @keyframes shimmer { 0%{background-position:-400% 0} 100%{background-position:400% 0} }
    .skeleton { background:linear-gradient(90deg,#f0efed 25%,#e8e5e1 50%,#f0efed 75%);background-size:400% 100%;animation:shimmer 1.6s ease-in-out infinite;border-radius:4px; }
    input, textarea {
      background: #fff;
      border: 1px solid #e7e5e4;
      color: #0c0a09;
      outline: none;
      transition: border-color .15s;
    }
    input:focus, textarea:focus { border-color: #a8a29e; }
    input::placeholder, textarea::placeholder { color: #a8a29e; }
    .btn-primary {
      background: #0c0a09; color: #fafaf9;
      font-weight: 600; letter-spacing: -.01em;
      transition: background .15s, transform .1s;
    }
    .btn-primary:hover:not(:disabled) { background: #292524; }
    .btn-primary:active:not(:disabled) { transform: scale(.98); }
    .btn-primary:disabled { opacity: .4; cursor: default; }
    .card {
      background: #fff;
      border: 1px solid #e7e5e4;
      transition: border-color .15s, box-shadow .15s;
    }
    .card:hover { border-color: #d6d3d1; box-shadow: 0 1px 8px rgba(0,0,0,.05); }
    /* Video modal */
    #video-modal { display:none; position:fixed; inset:0; z-index:50; align-items:center; justify-content:center; }
    #video-modal.open { display:flex; }
    #video-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); }
    #video-box {
      position:relative; z-index:1; width:min(860px,92vw);
      background:#0f172a; border-radius:16px; overflow:hidden;
      box-shadow:0 24px 80px rgba(0,0,0,.6);
      animation: modalIn .2s ease both;
    }
    @keyframes modalIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
    #video-box video { display:block; width:100%; }
    #video-close {
      position:absolute; top:12px; right:12px; z-index:2;
      background:rgba(255,255,255,.1); border:none; color:#fff;
      width:32px; height:32px; border-radius:50%; cursor:pointer;
      font-size:1rem; display:flex; align-items:center; justify-content:center;
      transition:background .15s;
    }
    #video-close:hover { background:rgba(255,255,255,.25); }
    .btn-help {
      display:inline-flex; align-items:center; gap:6px;
      font-size:.75rem; font-weight:500; color:#78716c;
      border:1px solid #e7e5e4; border-radius:8px;
      padding:6px 12px; cursor:pointer; background:transparent;
      transition:color .15s, border-color .15s;
    }
    .btn-help:hover { color:#0c0a09; border-color:#a8a29e; }
    .tag-top  { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
    .tag-good { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
    .tag-mid  { background:#fefce8; color:#a16207; border:1px solid #fde68a; }
    a.annonce-link {
      color: #a8a29e; font-size:.75rem; letter-spacing:.02em;
      text-decoration: none; transition: color .15s;
    }
    a.annonce-link:hover { color: #0c0a09; }
    header { border-bottom: 1px solid #e7e5e4; background: #fafaf9; }
  </style>
</head>
<body style="
  background-color: #fafaf9;
  background-image: url('/static/background.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: clamp(600px, 80vw, 1100px) auto;
  background-attachment: fixed;
">

  <!-- Top bar (always visible) -->
  <header>
    <div class="max-w-2xl mx-auto px-6 py-4 flex items-center justify-between">
      <button onclick="resetForm()" class="flex items-center gap-2 hover:opacity-60 transition-opacity">
        <span style="font-size:1.1rem;line-height:1">◈</span>
        <span class="font-semibold tracking-tight">BlaaAi</span>
      </button>
      <div class="flex items-center gap-3">
        <span id="header-status" class="text-xs" style="color:#a8a29e"></span>
        <button class="btn-help" onclick="openVideoModal()">
          <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8" fill="currentColor" stroke="none"/>
          </svg>
          Video hjælp
        </button>
      </div>
    </div>
  </header>

  <!-- ── VIDEO MODAL ── -->
  <div id="video-modal" role="dialog" aria-modal="true" aria-label="Video hjælp">
    <div id="video-backdrop" onclick="closeVideoModal()"></div>
    <div id="video-box">
      <button id="video-close" onclick="closeVideoModal()" aria-label="Luk video">✕</button>
      <video id="help-video" controls preload="metadata"
        poster=""
        src="/static/blaaai_tutorial.mp4">
      </video>
    </div>
  </div>

  <main class="max-w-2xl mx-auto px-6" style="min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:2rem;padding-bottom:22rem">

    <!-- ── FORM ── -->
    <section id="form-section" class="py-12 relative">
      <p class="text-xs font-medium tracking-widest uppercase mb-5" style="color:#a8a29e">AI-powered annonce analyse</p>
      <h1 class="text-4xl font-bold tracking-tight leading-tight mb-10" style="letter-spacing:-.03em">
        Find den bedste<br>DBA-annonce.
      </h1>

      <div class="space-y-3">
        <input
          id="url-input"
          type="url"
          placeholder="https://www.dba.dk/mobility/search/…"
          class="w-full px-4 py-3 rounded-lg text-sm"
        />

        <div id="prefs-section" class="hidden">
          <textarea
            id="prefs-input"
            rows="2"
            placeholder="Dine præferencer — fx 'ingen franske biler, helst automatgear'"
            class="w-full px-4 py-3 rounded-lg text-sm resize-none"
          ></textarea>
        </div>

        <div class="flex items-center gap-3 pt-1">
          <button
            id="submit-btn"
            onclick="submitSearch()"
            class="btn-primary px-6 py-3 rounded-lg text-sm flex items-center gap-2"
          >
            <span>Analyser</span>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
            </svg>
          </button>
          <button onclick="togglePrefs()" id="prefs-btn"
            class="text-sm px-4 py-3 rounded-lg transition-colors"
            style="color:#78716c;border:1px solid #e7e5e4">
            + Præferencer
          </button>
        </div>
      </div>

      <p class="text-xs mt-8 leading-relaxed" style="color:#a8a29e">
        Paste en DBA søge-URL — AI'en gennemgår alle annoncer og rangerer dem efter pris, stand og kvalitet.<br>
        <span style="color:#d6d3d1">AI kan tage fejl. Brug det som inspiration, ikke som facit.</span>
      </p>
    </section>

    <!-- ── STATUS ── -->
    <section id="status-section" class="hidden pt-8 pb-20">
      <div class="flex items-center gap-3 mb-1">
        <svg class="spinner w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" style="color:#a8a29e">
          <circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"/>
          <path class="opacity-80" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
        </svg>
        <p id="status-text" class="font-medium text-sm">Henter annoncer…</p>
        <span id="status-progress" class="text-xs ml-auto" style="color:#a8a29e"></span>
      </div>
      <p id="status-sub" class="text-xs mb-6 ml-7" style="color:#a8a29e;min-height:1.2em"></p>
      <div id="skeleton-container" class="space-y-2"></div>
    </section>

    <!-- ── RESULTS ── -->
    <section id="results-section" class="hidden pt-8 pb-20">

      <div class="flex items-baseline justify-between mb-8">
        <div>
          <h2 class="text-xl font-bold tracking-tight">Resultater</h2>
          <p id="result-count" class="text-xs mt-1" style="color:#a8a29e"></p>
        </div>
      </div>

      <div id="listings-container" class="space-y-2"></div>

      <!-- Email -->
      <div class="mt-12 pt-8" style="border-top:1px solid #e7e5e4">
        <p class="text-sm font-medium mb-3">Send top-10 på email</p>
        <div class="flex gap-2">
          <input
            id="email-input"
            type="email"
            placeholder="din@email.dk"
            class="flex-1 px-4 py-2.5 rounded-lg text-sm"
          />
          <button
            onclick="sendEmail()"
            id="email-btn"
            class="btn-primary px-5 py-2.5 rounded-lg text-sm"
          >Send</button>
        </div>
        <p id="email-status" class="text-xs mt-2 hidden" style="color:#71717a"></p>
      </div>

    </section>

  </main>

  <script>
    function openVideoModal() {
      document.getElementById('video-modal').classList.add('open');
      document.body.style.overflow = 'hidden';
      const v = document.getElementById('help-video');
      v.currentTime = 0;
      v.play();
    }
    function closeVideoModal() {
      document.getElementById('video-modal').classList.remove('open');
      document.body.style.overflow = '';
      const v = document.getElementById('help-video');
      v.pause();
      v.currentTime = 0;
    }
    document.getElementById('help-video').addEventListener('ended', closeVideoModal);
    document.addEventListener('keydown', e => {
      if (e.key === 'Escape') closeVideoModal();
    });

    const PRELOAD_ID = {{ search_id | tojson if search_id is defined else 'null' }};
    let currentSearchId = null;
    let pollInterval    = null;
    let skeletonsRendered = false;
    let msgInterval     = null;

    const statusMessages = {
      queued:   ["Stiller i kø…",              "Venter på ledig plads"],
      fetching: ["Henter annoncer fra DBA…",   "Indlæser titler, priser og beskrivelser"],
      scoring:  ["AI analyserer annoncerne…",  ""],
      ready:    ["Analyse færdig",              ""],
      error:    ["Noget gik galt",              "Tjek søgelinket og prøv igen"],
    };

    const funMessages = [
      "Vurderer bilers pålidelighed og historik…",
      "Sammenligner kilometertal og prisforhold…",
      "Tjekker om sælger lyder troværdig…",
      "Vurderer forventede vedligeholdelsesomkostninger…",
      "Sammenligner mod aktuelle markedspriser…",
      "Analyserer annoncebeskrivelserne for røde flag…",
      "Overvejer årstal og udstyrsgrad…",
      "Ranker efter kvalitet og pris…",
      "Tjekker km-stand mod forventet for alderen…",
      "Næsten færdig — finpudser rangeringen…",
    ];

    function togglePrefs() {
      const s = document.getElementById("prefs-section");
      const b = document.getElementById("prefs-btn");
      s.classList.toggle("hidden");
      b.textContent = s.classList.contains("hidden") ? "+ Præferencer" : "− Præferencer";
    }

    async function submitSearch() {
      const url   = document.getElementById("url-input").value.trim();
      const prefs = document.getElementById("prefs-input").value.trim();

      if (!url.startsWith("https://www.dba.dk")) {
        alert("Indsæt et gyldigt DBA søgelink");
        return;
      }

      const btn = document.getElementById("submit-btn");
      btn.disabled  = true;
      btn.innerHTML = `<svg class="spinner w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"/><path class="opacity-80" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/></svg><span>Sender…</span>`;

      try {
        const res  = await fetch("/api/searches", {
          method:  "POST",
          headers: {"Content-Type": "application/json"},
          body:    JSON.stringify({url, prefs}),
        });
        const data = await res.json();
        currentSearchId = data.id;

        showStatus();
        startPolling(data.id);
      } catch(e) {
        alert("Fejl: " + e.message);
        btn.disabled  = false;
        btn.innerHTML = `<span>Analyser</span><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>`;
      }
    }

    function showStatus() {
      document.getElementById("form-section").classList.add("hidden");
      document.getElementById("status-section").classList.remove("hidden");
      document.getElementById("results-section").classList.add("hidden");
    }

    function startPolling(id) {
      history.pushState(null, "", `/search/${id}`);
      pollInterval = setInterval(() => poll(id), 2000);
    }

    function startFunMessages() {
      let i = 0;
      const el = document.getElementById("status-sub");
      el.textContent = funMessages[0];
      msgInterval = setInterval(() => {
        i = (i + 1) % funMessages.length;
        el.textContent = funMessages[i];
      }, 3500);
    }

    function renderSkeletons(count) {
      if (skeletonsRendered) return;
      skeletonsRendered = true;
      const container = document.getElementById("skeleton-container");
      container.innerHTML = "";
      for (let i = 0; i < count; i++) {
        const card = document.createElement("div");
        card.className = "card rounded-xl p-5";
        card.style.animationDelay = `${i * 40}ms`;
        card.innerHTML = `
          <div class="flex items-start gap-4">
            <div class="skeleton shrink-0 mt-1" style="width:1rem;height:.75rem;border-radius:3px"></div>
            <div class="flex-1 space-y-2.5">
              <div class="flex gap-2">
                <div class="skeleton" style="height:.8rem;width:7rem;border-radius:3px"></div>
                <div class="skeleton" style="height:.8rem;width:4rem;border-radius:3px"></div>
              </div>
              <div class="skeleton" style="height:.4rem;width:100%;border-radius:9999px"></div>
              <div class="skeleton" style="height:.7rem;width:75%;border-radius:3px"></div>
              <div class="skeleton" style="height:.7rem;width:55%;border-radius:3px"></div>
            </div>
            <div class="shrink-0 ml-2 space-y-2">
              <div class="skeleton" style="height:.9rem;width:5rem;border-radius:3px"></div>
              <div class="skeleton" style="height:.7rem;width:3rem;border-radius:3px;margin-left:auto"></div>
            </div>
          </div>`;
        container.appendChild(card);
      }
    }

    function stopFunMessages() {
      if (msgInterval) { clearInterval(msgInterval); msgInterval = null; }
    }

    async function poll(id) {
      try {
        const res  = await fetch(`/api/searches/${id}`);
        const data = await res.json();

        const total   = data.listing_count || 0;
        const scored  = data.scored_count  || 0;

        // Show skeletons as soon as we know the count
        if (total > 0) renderSkeletons(total);

        // Update status text
        const [main] = statusMessages[data.status] || ["Arbejder…"];
        document.getElementById("status-text").textContent = main;
        document.getElementById("header-status").textContent = data.status === "ready" ? "" : main;

        // Progress counter during scoring
        if (data.status === "scoring" && total > 0) {
          document.getElementById("status-progress").textContent = `${scored}/${total}`;
          if (!msgInterval) startFunMessages();
        } else if (data.status !== "scoring") {
          const [, sub] = statusMessages[data.status] || ["", ""];
          document.getElementById("status-sub").textContent = sub;
        }

        if (data.status === "ready") {
          stopFunMessages();
          clearInterval(pollInterval);
          showResults(data);
        } else if (data.status === "error") {
          stopFunMessages();
          clearInterval(pollInterval);
        }
      } catch(e) {
        console.error("Poll fejl:", e);
      }
    }

    function showResults(data) {
      document.getElementById("status-section").classList.add("hidden");
      document.getElementById("results-section").classList.remove("hidden");
      document.getElementById("header-status").textContent = "";

      const listings = data.listings || [];
      document.getElementById("result-count").textContent =
        `${listings.length} annoncer analyseret · sorteret efter AI-score`;

      const container = document.getElementById("listings-container");
      container.innerHTML = "";

      listings.forEach((item, i) => {
        const score = item.ai_score || 0;
        const pct   = Math.round(score * 10);
        const warn  = item.ai_warnings
          ? `<p class="text-xs mt-2" style="color:#dc2626">↑ ${item.ai_warnings}</p>` : "";
        const tag   = rankTag(score);

        const card = document.createElement("div");
        card.className = "card rounded-xl p-5 card-enter";
        card.style.animationDelay = `${i * 30}ms`;
        card.innerHTML = `
          <div class="flex items-start gap-4">
            <span class="text-xs font-mono pt-0.5 shrink-0" style="color:#d6d3d1;min-width:1.5rem">${i+1}</span>
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-2 mb-2 flex-wrap">
                <span class="font-semibold text-sm tracking-tight">${item.name}</span>
                <span class="text-xs" style="color:#a8a29e">${item.description || ""}</span>
                ${tag}
              </div>
              <div class="flex items-center gap-3 mb-3">
                <div class="flex-1 rounded-full" style="background:#f5f5f4;height:3px">
                  <div class="score-fill rounded-full" style="height:3px;width:${pct}%"></div>
                </div>
                <span class="text-xs font-bold tabular-nums shrink-0">${score.toFixed(1)}<span style="color:#d6d3d1">/10</span></span>
              </div>
              <p class="text-xs leading-relaxed" style="color:#78716c">${item.ai_reason || ""}</p>
              ${warn}
            </div>
            <div class="shrink-0 text-right ml-2">
              <p class="font-semibold text-sm tabular-nums">${Number(item.price_dkk || 0).toLocaleString("da-DK")}<span class="text-xs font-normal ml-0.5" style="color:#a8a29e">kr</span></p>
              <a href="${item.url}" target="_blank" class="annonce-link mt-1.5 block">Se →</a>
            </div>
          </div>`;
        container.appendChild(card);
      });
    }

    function rankTag(score) {
      if (score >= 8.5) return '<span class="tag-top text-xs px-2 py-0.5 rounded font-medium">Topvalg</span>';
      if (score >= 7.5) return '<span class="tag-good text-xs px-2 py-0.5 rounded font-medium">Godt køb</span>';
      if (score >= 6.5) return '<span class="tag-mid text-xs px-2 py-0.5 rounded font-medium">Middel</span>';
      return '';
    }

    async function sendEmail() {
      const email  = document.getElementById("email-input").value.trim();
      const btn    = document.getElementById("email-btn");
      const status = document.getElementById("email-status");

      if (!email) { alert("Indtast en email-adresse"); return; }
      if (!currentSearchId) return;

      btn.disabled  = true;
      btn.textContent = "Sender…";

      try {
        const res  = await fetch(`/api/searches/${currentSearchId}/email`, {
          method:  "POST",
          headers: {"Content-Type": "application/json"},
          body:    JSON.stringify({email}),
        });
        const data = await res.json();
        status.classList.remove("hidden");
        if (res.ok) {
          status.style.color = "#4ade80";
          status.textContent = `Sendt til ${email}`;
        } else {
          status.style.color = "#f87171";
          status.textContent = data.detail || "Fejl ved afsendelse";
          btn.disabled = false; btn.textContent = "Send";
        }
      } catch(e) {
        status.classList.remove("hidden");
        status.style.color = "#f87171";
        status.textContent = "Netværksfejl — prøv igen";
        btn.disabled = false; btn.textContent = "Send";
      }
    }

    function resetForm() {
      if (pollInterval) clearInterval(pollInterval);
      stopFunMessages();
      skeletonsRendered = false;
      currentSearchId = null;
      document.getElementById("form-section").classList.remove("hidden");
      document.getElementById("status-section").classList.add("hidden");
      document.getElementById("results-section").classList.add("hidden");
      document.getElementById("skeleton-container").innerHTML = "";
      document.getElementById("status-progress").textContent = "";
      document.getElementById("listings-container").innerHTML = "";
      document.getElementById("url-input").value       = "";
      document.getElementById("prefs-input").value     = "";
      document.getElementById("email-input").value     = "";
      document.getElementById("header-status").textContent = "";
      document.getElementById("email-status").classList.add("hidden");
      const btn = document.getElementById("submit-btn");
      btn.disabled  = false;
      btn.innerHTML = `<span>Analyser</span><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>`;
      history.pushState(null, "", "/");
    }

    if (PRELOAD_ID) {
      currentSearchId = PRELOAD_ID;
      showStatus();
      poll(PRELOAD_ID).then(() => {
        if (!document.getElementById("status-section").classList.contains("hidden")) {
          startPolling(PRELOAD_ID);
        }
      });
    }
  </script>

</body>
</html>
