"use client";

import { useEffect, useRef, useState } from "react";
import type QRCodeStyling from "qr-code-styling";

const DEFAULT_URL = "https://rakku.de";
const INK = "#101012";

// Runde, verschmelzende Module (dotsOptions/cornersSquareOptions
// "extra-rounded") statt einzelner Quadrate. R-Logo-Maske durchlief mehrere
// Design-Runden mit Till (abgerundete Box → Kontur-Halo → hart geschwellte
// Buchstaben-Silhouette), FINAL bestätigt: ein einfacher weißer Kreis mit
// harter Kante (kein Blur) als Knockout, Durchmesser 26% der QR-Breite, Logo
// darin bei 18% mit spürbarem Weißraum zum Kreisrand — siehe
// rakku-qr-logo-mark.png. Fehlerkorrektur H ist Pflicht, da die Mitte
// verdeckt wird. Eigenständig mit zbarimg gegen zwei echte QR-Codes (kurze +
// eine 91-Zeichen-URL) gegengetestet, nicht nur optisch beurteilt — beide
// dekodierten exakt korrekt.
// qr-code-styling wird dynamisch importiert statt statisch — die Bibliothek
// hat optionale Node-only Abhängigkeiten (canvas/jsdom) fürs
// Server-Rendering, die im Browser-Bundle nichts verloren haben; ein
// dynamischer Import in useEffect läuft garantiert nur im Client.
export function QrCodeGenerator() {
  const [url, setUrl] = useState(DEFAULT_URL);
  const [ready, setReady] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const qrRef = useRef<QRCodeStyling | null>(null);

  useEffect(() => {
    let cancelled = false;
    import("qr-code-styling").then(({ default: QRCodeStyling }) => {
      if (cancelled) return;
      const qr = new QRCodeStyling({
        // Hohe Auflösung fürs Download-Ergebnis (Nutzer-Wunsch: erste Version
        // war zu niedrig aufgelöst) — die Vorschau wird per CSS kleiner
        // dargestellt (verlustfrei, da die QR-Module selbst als SVG-Vektoren
        // gerendert werden), das Logo-PNG bleibt trotzdem knackscharf.
        width: 2000,
        height: 2000,
        type: "svg",
        data: DEFAULT_URL,
        margin: 40,
        qrOptions: { errorCorrectionLevel: "H" },
        image: "/img/rakku-qr-logo-mark.png",
        imageOptions: { imageSize: 0.26, hideBackgroundDots: true, margin: 0, crossOrigin: "anonymous" },
        dotsOptions: { type: "extra-rounded", color: INK },
        cornersSquareOptions: { type: "extra-rounded", color: INK },
        cornersDotOptions: { type: "dot", color: INK },
        backgroundOptions: { color: "#ffffff" },
      });
      qrRef.current = qr;
      if (containerRef.current) qr.append(containerRef.current);
      setReady(true);
    });
    return () => {
      cancelled = true;
    };
    // Nur einmal beim Mount erzeugen — Updates laufen über qr.update() im
    // Effekt unten, ein Neuerzeugen würde den bestehenden Canvas/SVG-Knoten
    // im Container verwaisen lassen.
  }, []);

  useEffect(() => {
    if (!ready || !qrRef.current) return;
    qrRef.current.update({ data: url.trim() || DEFAULT_URL });
  }, [url, ready]);

  function download(extension: "png" | "svg") {
    qrRef.current?.download({ name: "rakku-qr-code", extension });
  }

  return (
    <div className="flex flex-col sm:flex-row gap-8 items-start">
      <div className="flex flex-col gap-4 w-full sm:max-w-sm">
        <label className="flex flex-col gap-1.5 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Ziel-URL</span>
          <input
            type="text"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            placeholder={DEFAULT_URL}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </label>
        <p className="text-xs text-[var(--rk-ink-muted)]">
          Z. B. ein Auftragslink, Portfolio-Link, Google-Bewertungslink oder jede andere URL. Nach dem Erstellen
          unbedingt mit einer echten Handykamera testen, ob der Code noch scannt — nicht nur optisch beurteilen.
        </p>
        <div className="flex gap-2">
          <button
            type="button"
            disabled={!ready}
            onClick={() => download("png")}
            className="border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-40 transition-colors"
          >
            PNG herunterladen
          </button>
          <button
            type="button"
            disabled={!ready}
            onClick={() => download("svg")}
            className="border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-40 transition-colors"
          >
            SVG herunterladen
          </button>
        </div>
      </div>

      <div className="border border-white/10 rounded-2xl p-6 bg-white shrink-0">
        {/* Vorschau bewusst kleiner als die 2000px-Erzeugungsgröße — die
            QR-Module sind SVG (skaliert verlustfrei), daher kostet die
            kleinere Anzeige keine Schärfe im tatsächlichen Download. */}
        <div ref={containerRef} className="w-[380px] h-[380px] max-w-full [&>svg]:w-full [&>svg]:h-full" />
        {!ready && <p className="text-xs text-[var(--rk-ink-muted)] w-[380px] max-w-full text-center">Lädt…</p>}
      </div>
    </div>
  );
}