/* Visitenkarten-Scanner: Routing, Ansichten, API-Aufrufe. */
(() => {
  "use strict";

  const FIELD_LABELS = {
    first_name: "Vorname",
    last_name: "Nachname",
    job_title: "Position",
    company: "Firma",
    department: "Abteilung",
    email: "E-Mail",
    phone: "Telefon",
    mobile: "Mobil",
    fax: "Fax",
    website: "Web",
    street: "Straße",
    postal_code: "PLZ",
    city: "Ort",
    country: "Land",
    occasion: "Anlass",
    place: "Scan-Ort",
  };
  const FIELD_ORDER = Object.keys(FIELD_LABELS);

  const state = {
    route: "scan",
    cardId: null,
    query: "",
    filter: "alle",
    cards: [],
    stats: { total: 0, offen: 0, erinnerungen: 0, laeuft: 0 },
    editing: false,
  };

  const $ = (id) => document.getElementById(id);
  const screens = {
    scan: $("screen-scan"),
    karten: $("screen-cards"),
    karte: $("screen-detail"),
    erinnerungen: $("screen-reminders"),
    mehr: $("screen-mehr"),
  };

  const esc = (value) =>
    String(value ?? "").replace(/[&<>"']/g, (c) => ({
      "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
    })[c]);

  const store = {
    get(key) {
      try { return localStorage.getItem(key) || ""; } catch (_) { return ""; }
    },
    set(key, value) {
      try { localStorage.setItem(key, value); } catch (_) { /* privater Modus */ }
    },
  };

  // ------------------------------------------------------------------ Helfer

  function toast(message) {
    const node = $("toast");
    node.textContent = message;
    node.hidden = false;
    clearTimeout(toast.timer);
    toast.timer = setTimeout(() => { node.hidden = true; }, 3200);
  }

  function busy(on, text) {
    $("busy-text").textContent = text || "Karten werden freigestellt";
    $("busy-overlay").hidden = !on;
  }

  async function api(path, options = {}) {
    const response = await fetch(path, { credentials: "same-origin", ...options });
    if (response.status === 401) {
      $("login-overlay").hidden = false;
      throw new Error("Nicht angemeldet");
    }
    if (!response.ok) {
      let detail = `Fehler ${response.status}`;
      try { detail = (await response.json()).detail || detail; } catch (_) {}
      throw new Error(detail);
    }
    return response.status === 204 ? null : response.json();
  }

  const formatDate = (iso) => {
    if (!iso) return "–";
    const date = new Date(iso);
    return Number.isNaN(date.getTime())
      ? "–"
      : date.toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" });
  };

  const formatDateTime = (iso) => {
    if (!iso) return "–";
    const date = new Date(iso);
    return Number.isNaN(date.getTime())
      ? "–"
      : date.toLocaleString("de-DE", {
          day: "2-digit", month: "2-digit", year: "numeric",
          hour: "2-digit", minute: "2-digit",
        });
  };

  const displayName = (card) =>
    [card.first_name, card.last_name].filter(Boolean).join(" ") ||
    card.company ||
    "Ohne Namen";

  const NAV_APPS = {
    apple: {
      label: "Apple Karten",
      url: (query) => `https://maps.apple.com/?q=${encodeURIComponent(query)}`,
    },
    google: {
      label: "Google Maps",
      url: (query) =>
        `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`,
    },
    osm: {
      label: "OpenStreetMap",
      url: (query) =>
        `https://www.openstreetmap.org/search?query=${encodeURIComponent(query)}`,
    },
  };

  const navApp = () => (NAV_APPS[store.get("navApp")] ? store.get("navApp") : "apple");

  const address = (card) =>
    [card.street, [card.postal_code, card.city].filter(Boolean).join(" "), card.country]
      .filter(Boolean)
      .join(", ");

  const link = (href, text) =>
    `<a href="${esc(href)}" rel="noopener">${esc(text)}</a>`;

  const subtitle = (card) =>
    [card.job_title, card.company].filter(Boolean).join(" · ") || "Keine Firma erkannt";

  /** Position des Browsers als Rückfallebene. Die EXIF-Daten des Fotos sind
   *  genauer, deshalb blockiert das hier nichts und scheitert leise. */
  function browserPosition() {
    return new Promise((resolve) => {
      if (!navigator.geolocation) return resolve({ error: "Gerät liefert keinen Standort" });
      navigator.geolocation.getCurrentPosition(
        (position) => resolve({ coords: position.coords }),
        (error) =>
          resolve({
            error:
              error.code === error.PERMISSION_DENIED
                ? "Standortfreigabe fehlt"
                : "Standort nicht ermittelbar",
          }),
        { enableHighAccuracy: false, timeout: 8000, maximumAge: 300000 }
      );
    });
  }

  /** Zustand einer Karte als Pillen. Ob sie schon exportiert wurde, steht
   *  bewusst nicht dabei - dafür gibt es den Filter. */
  function cardTags(card) {
    const tags = [];
    if (card.occasion) tags.push(["pill-solid", card.occasion]);
    else if (card.place) tags.push(["", card.place]);
    if (card.extract_status === "offen") tags.push(["", "wird gelesen"]);
    if (card.extract_status === "fehler") tags.push(["", "Lesefehler"]);
    return tags
      .map(([extra, text]) => `<span class="pill ${extra}">${esc(text)}</span>`)
      .join("");
  }

  function cardRow(card) {
    return `
      <button class="row" data-card="${esc(card.id)}">
        <span class="row-head">
          <span class="row-title">${esc(displayName(card))}</span>
          <span class="row-meta">${esc(formatDate(card.captured_at || card.created_at))}</span>
        </span>
        <span class="row-sub">${esc(subtitle(card))}</span>
        <span class="row-tags">${cardTags(card)}</span>
      </button>`;
  }

  // ----------------------------------------------------------------- Routing

  function go(route, cardId) {
    location.hash = cardId ? `#/${route}/${cardId}` : `#/${route}`;
  }

  function applyRoute() {
    const parts = location.hash.replace(/^#\/?/, "").split("/");
    const route = screens[parts[0]] ? parts[0] : "scan";
    state.route = route;
    state.cardId = route === "karte" ? parts[1] : null;

    Object.entries(screens).forEach(([name, node]) => { node.hidden = name !== route; });
    document.querySelectorAll(".tab").forEach((tab) => {
      const active =
        tab.dataset.route === route || (route === "karte" && tab.dataset.route === "karten");
      tab.setAttribute("aria-selected", active ? "true" : "false");
    });
    window.scrollTo(0, 0);

    if (route === "scan") loadRecent();
    if (route === "karten") loadCards();
    if (route === "karte") loadCard(state.cardId);
    if (route === "erinnerungen") loadReminders();
    if (route === "mehr") renderSettings(state.session || {});
  }

  // ------------------------------------------------------------------- Scan

  async function runScan(file) {
    if (!file) return;
    busy(true, "Karten werden freigestellt");
    const body = new FormData();
    body.append("file", file);
    body.append("occasion", $("occasion-input").value.trim());
    const position = await browserPosition();
    if (position.coords) {
      body.append("lat", position.coords.latitude);
      body.append("lon", position.coords.longitude);
    }
    try {
      const result = await api("/api/scan", { method: "POST", body });
      renderScanResult(result);
      await refreshStats();
      loadRecent();
      const ohneOrt = result.cards.every((card) => !card.place);
      toast(
        `${result.count} Karte${result.count === 1 ? "" : "n"} erfasst` +
          (ohneOrt && position.error ? ` · ohne Ort (${position.error})` : ", wird gelesen")
      );
    } catch (error) {
      toast(error.message);
    } finally {
      busy(false);
    }
  }

  function renderScanResult(result) {
    $("scan-result").innerHTML = `
      <div class="section-label"><span class="label">Ergebnis</span></div>
      <div class="strip">
        <span class="label">${result.count} Karte${result.count === 1 ? "" : "n"} gefunden</span>
        <span class="pill">wird gelesen</span>
      </div>
      ${result.fallback
        ? `<p class="hint" style="margin-top:10px">Kein Kartenrechteck erkannt – das ganze Foto
           wurde als eine Karte behandelt. Für einen Stapel hilft ein dunkler, einfarbiger
           Untergrund mit Abstand zwischen den Karten.</p>`
        : ""}
      <div class="rows" style="margin-top:12px">
        ${result.cards.map(cardRow).join("")}
      </div>`;
  }

  async function loadRecent() {
    try {
      const data = await api("/api/cards?filter=alle");
      state.stats = data.stats;
      updateCounters();
      const recent = data.cards.slice(0, 3);
      $("recent-list").innerHTML = recent.length
        ? `<div class="rows">${recent.map(cardRow).join("")}</div>
           ${data.cards.length > 3
             ? `<button class="btn btn-quiet" data-goto="karten" style="margin-top:12px">
                  Alle ${data.stats.total} Karten <span class="arrow">→</span>
                </button>`
             : ""}`
        : `<div class="empty">
             <p class="label">Noch nichts erfasst</p>
             <p class="hint" style="margin:8px 0 0">Mach oben ein Foto – der Rest passiert von allein.</p>
           </div>`;
      schedulePoll();
    } catch (error) {
      toast(error.message);
    }
  }

  // ------------------------------------------------------------- Kartenliste

  async function loadCards() {
    const params = new URLSearchParams({ q: state.query, filter: state.filter });
    try {
      const data = await api(`/api/cards?${params}`);
      state.cards = data.cards;
      state.stats = data.stats;
      updateCounters();
      renderCards();
      schedulePoll();
    } catch (error) {
      toast(error.message);
    }
  }

  /** Das Auslesen läuft auf dem Server weiter, nachdem der Scan geantwortet
   *  hat. Solange noch etwas offen ist, holen wir den Stand nach. */
  function schedulePoll() {
    clearTimeout(schedulePoll.timer);
    if (!state.stats.laeuft) return;
    schedulePoll.timer = setTimeout(() => {
      if (state.route === "karten") loadCards();
      else if (state.route === "karte") loadCard(state.cardId);
      else if (state.route === "scan") loadRecent();
      else refreshStats();
    }, 3000);
  }

  function renderCards() {
    const list = $("cards-list");
    if (!state.cards.length) {
      list.innerHTML = `<div class="empty">
        <p class="label">Nichts gefunden</p>
        <p class="hint" style="margin:8px 0 0">
          ${state.query || state.filter !== "alle"
            ? "Andere Suche oder anderer Filter."
            : "Noch keine Karten erfasst."}
        </p></div>`;
      return;
    }

    list.innerHTML = `
      <div class="strip">
        <span class="label">${state.cards.length} Karte${state.cards.length === 1 ? "" : "n"}</span>
        ${state.stats.laeuft ? `<span class="pill">${state.stats.laeuft} werden gelesen</span>` : ""}
      </div>
      <div class="rows">${state.cards.map(cardRow).join("")}</div>`;
  }

  // ----------------------------------------------------------- Kartendetail

  async function loadCard(cardId) {
    try {
      const card = await api(`/api/cards/${cardId}`);
      renderCard(card);
      if (card.extract_status === "offen") {
        state.stats = { ...state.stats, laeuft: Math.max(1, state.stats.laeuft) };
        schedulePoll();
      }
    } catch (error) {
      screens.karte.innerHTML = `<div class="empty"><p class="label">${esc(error.message)}</p></div>`;
    }
  }

  /** E-Mail, Web, Nummern und Adresse sind Handlungen, keine Zeichenketten. */
  function fieldCell(card, field) {
    const value = card[field];
    if (field === "email") return link(`mailto:${value}`, value);
    if (field === "website") {
      return link(/^https?:\/\//i.test(value) ? value : `https://${value}`, value);
    }
    if (["phone", "mobile", "fax"].includes(field)) {
      return link(`tel:${value.replace(/[^\d+]/g, "")}`, value);
    }
    return esc(value);
  }

  // Straße, PLZ, Ort und Land stehen in der Tabelle als eine Adresszeile.
  const DISPLAY_ORDER = [
    "first_name", "last_name", "job_title", "company", "department",
    "email", "phone", "mobile", "fax", "website", "address", "occasion", "place",
  ];

  function dataTable(card) {
    const postal = address(card);
    const rows = DISPLAY_ORDER.map((field) => {
      if (field === "address") {
        if (!postal) return "";
        return `<tr><th>Adresse</th><td>${link(NAV_APPS[navApp()].url(postal), postal)}</td></tr>`;
      }
      if (!card[field]) return "";
      return `<tr><th>${FIELD_LABELS[field]}</th><td>${fieldCell(card, field)}</td></tr>`;
    }).filter(Boolean);

    return rows.length
      ? `<table class="data">${rows.join("")}</table>`
      : `<p class="hint">Keine Felder erkannt. Über „Bearbeiten“ nachtragen.</p>`;
  }

  function editForm(card) {
    return `<div class="stack-tight">${FIELD_ORDER.map(
      (field) => `
      <label class="field">
        <span class="label">${FIELD_LABELS[field]}</span>
        <input data-field="${field}" value="${esc(card[field] || "")}">
      </label>`
    ).join("")}</div>`;
  }

  function duplicateBlock(card) {
    if (!card.duplicates || !card.duplicates.length) return "";
    return `
      <div class="section-label"><span class="label">Schon einmal erfasst?</span></div>
      <div class="rows">
        ${card.duplicates
          .map(
            (other) => `
          <button class="row" data-card="${esc(other.id)}">
            <span class="row-head">
              <span class="row-title">${esc(displayName(other))}</span>
              <span class="row-meta">${esc(formatDate(other.captured_at || other.created_at))}</span>
            </span>
            <span class="row-sub">${esc(other.reason)}${other.occasion ? " · " + esc(other.occasion) : ""}</span>
          </button>`
          )
          .join("")}
      </div>`;
  }

  const GEO_SOURCE = { exif: "aus dem Foto", browser: "vom Gerät" };

  const QUICK_DATES = [
    ["In 3 Tagen", 3],
    ["In 1 Woche", 7],
    ["In 2 Wochen", 14],
    ["In 1 Monat", 30],
  ];

  function localInputValue(date) {
    const pad = (n) => String(n).padStart(2, "0");
    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}` +
      `T${pad(date.getHours())}:${pad(date.getMinutes())}`;
  }

  function renderCard(card) {
    const reminders = card.reminders.length
      ? `<div class="rows">${card.reminders
          .map(
            (reminder) => `
          <div class="row" style="cursor:default">
            <span class="row-head">
              <span class="row-title" style="font-size:15px">${esc(reminder.text)}</span>
              <button class="badge" data-delete-reminder="${esc(reminder.id)}">Löschen</button>
            </span>
            <span class="row-sub">
              ${esc(formatDateTime(reminder.due_at))}
              ${reminder.sent_at ? " · verschickt" : ""}
              ${reminder.send_error ? " · Versand fehlgeschlagen" : ""}
            </span>
          </div>`
          )
          .join("")}</div>`
      : `<p class="hint">Keine Erinnerung gesetzt.</p>`;

    screens.karte.innerHTML = `
      <button class="chip" data-back>← Karten</button>

      <div class="block-invert">
        <p class="label">${esc(card.occasion || (card.source === "stapel" ? "Aus Stapelscan" : "Einzelscan"))}</p>
        <h1 class="display d-lg" style="margin-top:8px">${esc(displayName(card))}</h1>
        <p class="muted" style="margin:6px 0 0">${esc(subtitle(card))}</p>
        <div class="figures">
          <span class="figure">
            <span class="label">Erfasst</span>
            <span class="display d-md">${esc(formatDate(card.captured_at || card.created_at))}</span>
          </span>
          <span class="figure">
            <span class="label">Ort${card.geo_source ? " · " + GEO_SOURCE[card.geo_source] : ""}</span>
            <span class="display d-md">${esc(card.place || "Unbekannt")}</span>
          </span>
        </div>
      </div>

      ${card.image_url
        ? `<img class="card-image" src="${esc(card.image_url)}" alt="Vorderseite">
           <button class="btn btn-quiet" data-edit-image="front">
             Bild bearbeiten <span class="arrow">✎</span>
           </button>`
        : ""}
      ${card.back_image_url
        ? `<img class="card-image" src="${esc(card.back_image_url)}" alt="Rückseite">
           <button class="btn btn-quiet" data-edit-image="back">
             Rückseite bearbeiten <span class="arrow">✎</span>
           </button>`
        : `<label class="btn btn-quiet" for="input-back">
             Rückseite hinzufügen <span class="arrow">+</span>
             <input id="input-back" type="file" accept="image/*" capture="environment" hidden>
           </label>`}

      <a class="btn btn-primary" href="/vcf/${esc(card.id)}" download>
        In Kontakte speichern <span class="arrow">→</span>
      </a>
      <button class="btn" data-share="${esc(card.id)}">
        Als vCard teilen <span class="arrow">↗</span>
      </button>

      ${card.extract_status === "offen"
        ? `<p class="hint">Die Karte wird gerade ausgelesen – die Felder erscheinen gleich.</p>`
        : ""}
      ${card.extract_status === "fehler"
        ? `<p class="hint">Lesefehler: ${esc(card.extract_error || "unbekannt")}</p>`
        : ""}

      ${duplicateBlock(card)}

      <div class="section-label"><span class="label">Daten</span></div>
      <button class="chip" data-toggle-edit style="margin-bottom:10px">
        ${state.editing ? "Fertig" : "Bearbeiten"}
      </button>
      ${state.editing ? editForm(card) : dataTable(card)}

      <div class="section-label"><span class="label">Notiz</span></div>
      <label class="field">
        <textarea data-field="notes" placeholder="Worum ging es im Gespräch?">${esc(card.notes || "")}</textarea>
      </label>

      <div class="section-label"><span class="label">Erinnerung</span></div>
      ${reminders}
      <form class="stack-tight" id="reminder-form" style="margin-top:14px">
        <label class="field">
          <span class="label">Text</span>
          <input name="text" placeholder="Angebot nachfassen" required>
        </label>
        <div class="chips" style="margin-top:12px">
          ${QUICK_DATES.map(
            ([text, days]) => `<button class="chip" type="button" data-quick="${days}">${text}</button>`
          ).join("")}
        </div>
        <label class="field" style="margin-top:12px">
          <span class="label">Termin</span>
          <input name="due" type="datetime-local" required>
        </label>
        <button class="btn" type="submit">Erinnerung anlegen <span class="arrow">→</span></button>
      </form>

      <div class="section-label"><span class="label">Karte entfernen</span></div>
      <button class="btn btn-quiet" data-delete-card="${esc(card.id)}">
        Endgültig löschen <span class="arrow">×</span>
      </button>`;

    screens.karte.querySelectorAll("[data-field]").forEach((input) => {
      input.addEventListener("change", async () => {
        try {
          await api(`/api/cards/${card.id}`, {
            method: "PATCH",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ [input.dataset.field]: input.value }),
          });
          toast("Gespeichert");
        } catch (error) {
          toast(error.message);
        }
      });
    });

    const backInput = $("input-back");
    if (backInput) {
      backInput.addEventListener("change", async (event) => {
        const file = event.target.files[0];
        event.target.value = "";
        if (!file) return;
        busy(true, "Rückseite wird gelesen");
        try {
          const body = new FormData();
          body.append("file", file);
          await api(`/api/cards/${card.id}/back`, { method: "POST", body });
          toast("Rückseite hinzugefügt");
          loadCard(card.id);
        } catch (error) {
          toast(error.message);
        } finally {
          busy(false);
        }
      });
    }

    const form = $("reminder-form");
    form.querySelectorAll("[data-quick]").forEach((button) => {
      button.addEventListener("click", () => {
        const date = new Date();
        date.setDate(date.getDate() + Number(button.dataset.quick));
        date.setHours(9, 0, 0, 0);
        form.elements.due.value = localInputValue(date);
      });
    });

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const due = form.elements.due.value;
      if (!due) return;
      try {
        await api(`/api/cards/${card.id}/reminders`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            text: form.elements.text.value,
            due_at: new Date(due).toISOString(),
          }),
        });
        toast("Erinnerung angelegt");
        loadCard(card.id);
        refreshStats();
      } catch (error) {
        toast(error.message);
      }
    });
  }

  /** Teilen über das System-Teilenblatt. Damit landet die vCard per AirDrop,
   *  Mail oder Nachricht beim Gegenüber, ohne Umweg über den Download. */
  async function shareCard(cardId) {
    try {
      const response = await fetch(`/vcf/${cardId}`, { credentials: "same-origin" });
      if (!response.ok) throw new Error("vCard konnte nicht geladen werden");
      const disposition = response.headers.get("content-disposition") || "";
      const match = disposition.match(/filename="([^"]+)"/);
      const blob = await response.blob();
      const file = new File([blob], match ? match[1] : "kontakt.vcf", {
        type: "text/vcard",
      });
      if (navigator.canShare && navigator.canShare({ files: [file] })) {
        await navigator.share({ files: [file] });
        return;
      }
      // Kein Teilenblatt (Desktop, ältere Browser): dann eben herunterladen.
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = file.name;
      link.click();
      URL.revokeObjectURL(url);
    } catch (error) {
      if (error.name !== "AbortError") toast(error.message);
    }
  }

  // ----------------------------------------------------------- Einstellungen

  function renderSettings(session) {
    const current = navApp();
    screens.mehr.innerHTML = `
      <div class="section-label"><span class="label">Navigation</span></div>
      <p class="hint">Womit Adressen geöffnet werden.</p>
      <div class="chips" id="nav-app-chips">
        ${Object.entries(NAV_APPS)
          .map(
            ([key, app]) =>
              `<button class="chip" data-nav-app="${key}" aria-pressed="${key === current}">
                 ${app.label}
               </button>`
          )
          .join("")}
      </div>

      <div class="section-label"><span class="label">Status</span></div>
      <table class="data">
        <tr><th>Auslesen</th><td>${session.extraction_available ? "aktiv" : "kein API-Schlüssel"}</td></tr>
        <tr><th>Erinnerungsmails</th><td>${session.mail_configured ? "aktiv" : "kein SMTP"}</td></tr>
        <tr><th>Anmeldung</th><td>${session.auth_required ? "mit Passwort" : "offen"}</td></tr>
      </table>

      ${session.auth_required
        ? `<div class="section-label"><span class="label">Zugang</span></div>
           <button class="btn btn-quiet" id="logout-button">
             Abmelden <span class="arrow">→</span>
           </button>`
        : `<div class="section-label"><span class="label">Zugang</span></div>
           <p class="hint">Ohne Passwort erreichbar – APP_PASSWORD in der .env setzen.</p>`}`;

    const logout = $("logout-button");
    if (logout) {
      logout.addEventListener("click", async () => {
        await api("/api/logout", { method: "POST" }).catch(() => {});
        location.reload();
      });
    }
  }

  // ------------------------------------------------------------ Erinnerungen

  async function loadReminders() {
    try {
      const data = await api("/api/reminders");
      const list = $("reminders-list");
      if (!data.reminders.length) {
        list.innerHTML = `<div class="empty"><p class="label">Keine Erinnerungen</p>
          <p class="hint" style="margin:8px 0 0">Erinnerungen legst du auf einer Karte an.</p></div>`;
        return;
      }
      list.innerHTML = `
        ${data.mail_configured ? "" : `<p class="hint">Kein SMTP konfiguriert – es wird nichts verschickt.</p>`}
        <div class="rows">${data.reminders
          .map(
            (reminder) => `
          <button class="row" data-card="${esc(reminder.card_id)}">
            <span class="row-head">
              <span class="row-title" style="font-size:15px">${esc(reminder.text)}</span>
              <span class="row-meta">${reminder.sent_at ? "verschickt" : "offen"}</span>
            </span>
            <span class="row-sub">${esc(formatDateTime(reminder.due_at))}
              · ${esc(reminder.full_name || reminder.company || "Kontakt")}</span>
          </button>`
          )
          .join("")}</div>`;
    } catch (error) {
      toast(error.message);
    }
  }

  // -------------------------------------------------------------- Zähler

  function badge(id, value) {
    const node = $(id);
    node.textContent = value;
    node.hidden = !value;
  }

  function updateCounters() {
    badge("tab-count-cards", state.stats.total);
    badge("tab-count-reminders", state.stats.erinnerungen);
  }

  async function refreshStats() {
    try {
      const data = await api("/api/cards?filter=alle");
      state.stats = data.stats;
      updateCounters();
      schedulePoll();
    } catch (_) { /* Zähler sind nicht kritisch */ }
  }

  // ------------------------------------------------------- Bildbearbeitung

  /** Zwei Zuschnitte hintereinander: der zweite bezieht sich auf das Ergebnis
   *  des ersten, der Server rechnet aber immer vom Original. Also verrechnen. */
  function composeCrop(previous, next) {
    if (!previous) return next;
    return {
      x: previous.x + next.x * previous.w,
      y: previous.y + next.y * previous.h,
      w: next.w * previous.w,
      h: next.h * previous.h,
    };
  }

  /** Drehen, ausrichten, zuschneiden. Jede Korrektur wird auf dem Server vom
   *  unbearbeiteten Original gerechnet - deshalb hält der Editor den ganzen
   *  Parametersatz und schickt ihn jedes Mal komplett mit. */
  function openEditor(cardId, side) {
    const overlay = $("editor-overlay");
    const source = `/api/cards/${cardId}/image${side === "back" ? "?side=back" : ""}`;
    const params = { rotate: 0, angle: 0, crop: null };
    let box = null;
    let drag = null;

    overlay.innerHTML = `
      <div class="editor-panel">
        <p class="label" style="margin-bottom:12px">
          ${side === "back" ? "Rückseite" : "Vorderseite"} bearbeiten
        </p>
        <div class="editor-stage" id="editor-stage"><img id="editor-image" alt=""></div>
        <div class="editor-row">
          <button class="chip" data-rotate="-90" type="button">↺ 90°</button>
          <button class="chip" data-rotate="90" type="button">↻ 90°</button>
          <button class="chip" id="editor-crop" type="button" disabled>Zuschneiden</button>
        </div>
        <div class="slider-row">
          <span class="label">Ausrichten</span>
          <input type="range" id="editor-angle" min="-20" max="20" step="0.5" value="0">
          <output id="editor-angle-out">0°</output>
        </div>
        <p class="hint" style="margin-top:12px">
          Zum Zuschneiden über dem Bild einen Rahmen aufziehen, Ecken zum Feinjustieren anfassen.
        </p>
        <div class="editor-row">
          <button class="chip" id="editor-reset" type="button">Zurücksetzen</button>
          <button class="chip" id="editor-done" type="button" aria-pressed="true">Fertig</button>
        </div>
      </div>`;
    overlay.hidden = false;

    const stage = $("editor-stage");
    const image = $("editor-image");
    const cropButton = $("editor-crop");

    const reload = () => {
      image.src = `${source}${source.includes("?") ? "&" : "?"}t=${Date.now()}`;
    };
    reload();

    function drawBox() {
      const existing = stage.querySelector(".crop-box");
      if (existing) existing.remove();
      cropButton.disabled = !box;
      if (!box) return;
      const node = document.createElement("div");
      node.className = "crop-box";
      node.style.left = `${box.x * 100}%`;
      node.style.top = `${box.y * 100}%`;
      node.style.width = `${box.w * 100}%`;
      node.style.height = `${box.h * 100}%`;
      node.innerHTML = ["nw", "ne", "se", "sw"]
        .map((corner) => `<span class="crop-handle" data-corner="${corner}"></span>`)
        .join("");
      stage.appendChild(node);
    }

    function relative(event) {
      const bounds = stage.getBoundingClientRect();
      return {
        x: Math.min(1, Math.max(0, (event.clientX - bounds.left) / bounds.width)),
        y: Math.min(1, Math.max(0, (event.clientY - bounds.top) / bounds.height)),
      };
    }

    stage.addEventListener("pointerdown", (event) => {
      const handle = event.target.closest(".crop-handle");
      const point = relative(event);
      stage.setPointerCapture(event.pointerId);
      if (handle) {
        drag = { corner: handle.dataset.corner };
      } else {
        drag = { corner: null, origin: point };
        box = { x: point.x, y: point.y, w: 0, h: 0 };
      }
      event.preventDefault();
    });

    stage.addEventListener("pointermove", (event) => {
      if (!drag || !box) return;
      const point = relative(event);
      if (drag.corner) {
        const right = box.x + box.w;
        const bottom = box.y + box.h;
        if (drag.corner.includes("w")) { box.w = right - point.x; box.x = point.x; }
        else { box.w = point.x - box.x; }
        if (drag.corner.includes("n")) { box.h = bottom - point.y; box.y = point.y; }
        else { box.h = point.y - box.y; }
        if (box.w < 0) { box.x += box.w; box.w = -box.w; }
        if (box.h < 0) { box.y += box.h; box.h = -box.h; }
      } else {
        box.x = Math.min(drag.origin.x, point.x);
        box.y = Math.min(drag.origin.y, point.y);
        box.w = Math.abs(point.x - drag.origin.x);
        box.h = Math.abs(point.y - drag.origin.y);
      }
      drawBox();
    });

    const endDrag = () => {
      drag = null;
      if (box && (box.w < 0.03 || box.h < 0.03)) box = null;
      drawBox();
    };
    stage.addEventListener("pointerup", endDrag);
    stage.addEventListener("pointercancel", endDrag);

    async function apply(extra = {}) {
      try {
        await api(`/api/cards/${cardId}/edit`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ side, ...params, ...extra }),
        });
        reload();
      } catch (error) {
        toast(error.message);
      }
    }

    overlay.querySelectorAll("[data-rotate]").forEach((button) => {
      button.addEventListener("click", () => {
        params.rotate = (params.rotate + Number(button.dataset.rotate) + 360) % 360;
        // Der Zuschnitt bezog sich auf die alte Lage und gilt nicht mehr.
        params.crop = null;
        box = null;
        drawBox();
        apply();
      });
    });

    let angleTimer;
    const angleInput = $("editor-angle");
    angleInput.addEventListener("input", () => {
      params.angle = Number(angleInput.value);
      $("editor-angle-out").textContent = `${params.angle}°`;
      clearTimeout(angleTimer);
      angleTimer = setTimeout(apply, 350);
    });

    cropButton.addEventListener("click", () => {
      if (!box) return;
      params.crop = composeCrop(params.crop, box);
      box = null;
      drawBox();
      apply();
    });

    $("editor-reset").addEventListener("click", () => {
      params.rotate = 0;
      params.angle = 0;
      params.crop = null;
      box = null;
      angleInput.value = 0;
      $("editor-angle-out").textContent = "0°";
      drawBox();
      apply({ reset: true });
    });

    $("editor-done").addEventListener("click", () => {
      overlay.hidden = true;
      overlay.innerHTML = "";
      loadCard(cardId);
    });
  }

  // ------------------------------------------------------------- Ereignisse

  document.addEventListener("click", (event) => {
    const shareButton = event.target.closest("[data-share]");
    if (shareButton) return shareCard(shareButton.dataset.share);

    const editImage = event.target.closest("[data-edit-image]");
    if (editImage) return openEditor(state.cardId, editImage.dataset.editImage);

    const cardButton = event.target.closest("[data-card]");
    if (cardButton) return go("karte", cardButton.dataset.card);

    const goto = event.target.closest("[data-goto]");
    if (goto) return go(goto.dataset.goto);

    if (event.target.closest("[data-back]")) {
      state.editing = false;
      return go("karten");
    }

    if (event.target.closest("[data-toggle-edit]")) {
      state.editing = !state.editing;
      return loadCard(state.cardId);
    }

    const tab = event.target.closest(".tab");
    if (tab) return go(tab.dataset.route);

    const navChip = event.target.closest("[data-nav-app]");
    if (navChip) {
      store.set("navApp", navChip.dataset.navApp);
      document.querySelectorAll("[data-nav-app]").forEach((c) =>
        c.setAttribute("aria-pressed", c === navChip ? "true" : "false")
      );
      return toast(`Adressen öffnen in ${NAV_APPS[navChip.dataset.navApp].label}`);
    }

    const chip = event.target.closest("#filter-chips .chip");
    if (chip) {
      state.filter = chip.dataset.filter;
      document.querySelectorAll("#filter-chips .chip").forEach((c) =>
        c.setAttribute("aria-pressed", c === chip ? "true" : "false")
      );
      return loadCards();
    }

    const removeReminder = event.target.closest("[data-delete-reminder]");
    if (removeReminder) {
      event.preventDefault();
      return api(`/api/reminders/${removeReminder.dataset.deleteReminder}`, { method: "DELETE" })
        .then(() => { loadCard(state.cardId); refreshStats(); })
        .catch((error) => toast(error.message));
    }

    const removeCard = event.target.closest("[data-delete-card]");
    if (removeCard) {
      if (!confirm("Karte und Bild endgültig löschen?")) return;
      return api(`/api/cards/${removeCard.dataset.deleteCard}`, { method: "DELETE" })
        .then(() => { toast("Karte gelöscht"); go("karten"); })
        .catch((error) => toast(error.message));
    }
  });

  let searchTimer;
  $("search-input").addEventListener("input", (event) => {
    state.query = event.target.value;
    clearTimeout(searchTimer);
    searchTimer = setTimeout(loadCards, 220);
  });

  $("search-clear").addEventListener("click", () => {
    $("search-input").value = "";
    state.query = "";
    loadCards();
  });

  // Der Anlass gilt für eine ganze Messe, nicht für einen Scan.
  $("occasion-input").value = store.get("occasion");
  $("occasion-input").addEventListener("change", (event) => {
    store.set("occasion", event.target.value.trim());
  });

  ["input-camera", "input-library"].forEach((id) => {
    $(id).addEventListener("change", (event) => {
      const file = event.target.files[0];
      event.target.value = "";
      runScan(file);
    });
  });

  $("login-form").addEventListener("submit", async (event) => {
    event.preventDefault();
    const body = new FormData();
    body.append("password", $("login-password").value);
    try {
      const response = await fetch("/api/login", {
        method: "POST", body, credentials: "same-origin",
      });
      if (!response.ok) throw new Error("Passwort stimmt nicht");
      $("login-overlay").hidden = true;
      $("login-error").hidden = true;
      boot();
    } catch (error) {
      $("login-error").textContent = error.message;
      $("login-error").hidden = false;
    }
  });

  window.addEventListener("hashchange", applyRoute);

  // --------------------------------------------------------------- Start

  async function boot() {
    try {
      const session = await fetch("/api/session", { credentials: "same-origin" }).then((r) => r.json());
      if (session.auth_required && !session.authenticated) {
        $("login-overlay").hidden = false;
        return;
      }
      state.session = session;
      if (!session.extraction_available) {
        toast("Kein API-Schlüssel gesetzt – Karten werden nur zugeschnitten.");
      }
      applyRoute();
    } catch (error) {
      toast("Server nicht erreichbar");
    }
  }

  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/sw.js", { updateViaCache: "none" }).catch(() => {});
  }

  boot();
})();