"use client";

import { useCallback, useState } from "react";
import QRCode from "qrcode";
import { Download, QrCode } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

type Kind = "text" | "wifi" | "vcard" | "email" | "phone";

export function QrCodeGenerator() {
  const [kind, setKind] = useState<Kind>("text");
  const [value, setValue] = useState("https://toolaro.org");
  const [size, setSize] = useState(512);
  const [margin, setMargin] = useState(2);
  const [dark, setDark] = useState("#111827");
  const [light, setLight] = useState("#ffffff");
  const [ecc, setEcc] = useState<"L" | "M" | "Q" | "H">("M");
  const [dataUrl, setDataUrl] = useState<string | null>(null);
  const [svg, setSvg] = useState("");
  const [error, setError] = useState<string | null>(null);

  const content = buildContent(kind, value);
  const generate = useCallback(async () => {
    if (!content.trim()) return setError("Bitte Inhalt eingeben.");
    setError(null);
    try {
      const options = { width: size, margin, errorCorrectionLevel: ecc, color: { dark, light } };
      setDataUrl(await QRCode.toDataURL(content, options));
      setSvg(await QRCode.toString(content, { ...options, type: "svg" }));
    } catch {
      setError("QR-Code konnte nicht generiert werden.");
    }
  }, [content, dark, ecc, light, margin, size]);

  const download = (format: "png" | "svg") => {
    const blob = format === "svg" ? new Blob([svg], { type: "image/svg+xml" }) : null;
    const href = format === "svg" && blob ? URL.createObjectURL(blob) : dataUrl;
    if (!href) return;
    const a = document.createElement("a");
    a.href = href;
    a.download = `toolaro-qr.${format}`;
    a.click();
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap gap-2">
        {(["text", "wifi", "vcard", "email", "phone"] as Kind[]).map((item) => (
          <button key={item} onClick={() => setKind(item)} className={tab(kind === item)}>{labels[item]}</button>
        ))}
      </div>
      <div className="space-y-2">
        <Label htmlFor="qr-input">{labels[kind]} Inhalt</Label>
        <Input id="qr-input" value={value} onChange={(e) => setValue(e.target.value)} onKeyDown={(e) => e.key === "Enter" && generate()} />
        {content.length > 900 && <p className="text-sm text-amber-700">Sehr lange Inhalte können schwerer scanbar sein, besonders im Druck.</p>}
      </div>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <label className="grid gap-2 text-sm font-medium">Fehlerkorrektur<select className="rounded-md border px-3 py-2" value={ecc} onChange={(e) => setEcc(e.target.value as "L" | "M" | "Q" | "H")}><option>L</option><option>M</option><option>Q</option><option>H</option></select></label>
        <label className="grid gap-2 text-sm font-medium">Größe<Input type="number" value={size} onChange={(e) => setSize(Number(e.target.value) || 512)} /></label>
        <label className="grid gap-2 text-sm font-medium">Rand<Input type="number" value={margin} onChange={(e) => setMargin(Number(e.target.value) || 0)} /></label>
        <div className="grid grid-cols-2 gap-2">
          <label className="grid gap-2 text-sm font-medium">Vordergrund<Input type="color" value={dark} onChange={(e) => setDark(e.target.value)} /></label>
          <label className="grid gap-2 text-sm font-medium">Hintergrund<Input type="color" value={light} onChange={(e) => setLight(e.target.value)} /></label>
        </div>
      </div>

      {error && <p className="text-sm text-red-500">{error}</p>}
      <Button onClick={generate}><QrCode className="mr-2 h-4 w-4" /> Live-Vorschau aktualisieren</Button>

      {dataUrl && (
        <div className="grid gap-5 md:grid-cols-[240px_1fr]">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={dataUrl} alt="Generierter QR-Code" className="rounded-lg border bg-white p-3 shadow-sm" width={220} height={220} />
          <div className="space-y-3 text-sm leading-6 text-gray-600">
            <p>Druckhinweis: Vor dem Druck mit mehreren Smartphones testen, ausreichend Kontrast nutzen und den QR-Code nicht zu klein platzieren.</p>
            <div className="flex flex-wrap gap-2">
              <Button onClick={() => download("png")} variant="outline"><Download className="mr-2 h-4 w-4" /> PNG</Button>
              <Button onClick={() => download("svg")} variant="outline"><Download className="mr-2 h-4 w-4" /> SVG</Button>
            </div>
            <p className="rounded-lg border border-blue-100 bg-blue-50 p-3 text-blue-950">Premium: Batch-Erstellung mehrerer QR-Codes und gespeicherte QR-Standards sind im Account-Modell vorbereitet.</p>
          </div>
        </div>
      )}
    </div>
  );
}

const labels: Record<Kind, string> = { text: "Text/URL", wifi: "WLAN", vcard: "vCard", email: "E-Mail", phone: "Telefon" };

function buildContent(kind: Kind, value: string) {
  if (kind === "wifi") return `WIFI:T:WPA;S:${value};P:PASSWORT;;`;
  if (kind === "vcard") return `BEGIN:VCARD\nVERSION:3.0\nFN:${value}\nEND:VCARD`;
  if (kind === "email") return `mailto:${value}`;
  if (kind === "phone") return `tel:${value}`;
  return value;
}

function tab(active: boolean) {
  return `rounded-full px-4 py-1.5 text-sm font-medium transition-colors ${active ? "bg-blue-600 text-white" : "border border-gray-200 text-gray-600 hover:bg-gray-50"}`;
}