"use client";

import { useCallback, useMemo, useState } from "react";
import { Check, Copy, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";

const CHARS = {
  upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  lower: "abcdefghijklmnopqrstuvwxyz",
  digits: "0123456789",
  symbols: "!@#$%^&*()_+-=[]{}|;:,.<>?",
};
const WORDS = ["atlas", "blau", "delta", "fokus", "hafen", "kabel", "licht", "matrix", "pixel", "quelle", "radio", "sonne", "turbo", "vektor", "wolke", "zebra"];

function securePick(max: number) {
  const arr = new Uint32Array(1);
  crypto.getRandomValues(arr);
  return arr[0] % max;
}

function generateSecure(length: number, charset: string) {
  return Array.from({ length }, () => charset[securePick(charset.length)]).join("");
}

function generatePassphrase(words = 4) {
  return Array.from({ length: words }, () => WORDS[securePick(WORDS.length)]).join("-");
}

export function PasswordGenerator() {
  const [length, setLength] = useState(20);
  const [mode, setMode] = useState<"password" | "passphrase">("password");
  const [useUpper, setUseUpper] = useState(true);
  const [useLower, setUseLower] = useState(true);
  const [useDigits, setUseDigits] = useState(true);
  const [useSymbols, setUseSymbols] = useState(true);
  const [password, setPassword] = useState("");
  const [copied, setCopied] = useState(false);

  const charset = useMemo(() => {
    let value = "";
    if (useUpper) value += CHARS.upper;
    if (useLower) value += CHARS.lower;
    if (useDigits) value += CHARS.digits;
    if (useSymbols) value += CHARS.symbols;
    return value || CHARS.lower;
  }, [useUpper, useLower, useDigits, useSymbols]);

  const entropy = mode === "passphrase" ? Math.log2(WORDS.length ** 4) : Math.log2(charset.length ** length);
  const strength = entropy < 50 ? "schwach" : entropy < 80 ? "solide" : entropy < 110 ? "stark" : "sehr stark";

  const generate = useCallback(() => {
    setPassword(mode === "passphrase" ? generatePassphrase(4) : generateSecure(length, charset));
    setCopied(false);
  }, [charset, length, mode]);

  const copy = async () => {
    if (!password) return;
    await navigator.clipboard.writeText(password);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap gap-2">
        <button onClick={() => setMode("password")} className={tab(mode === "password")}>Passwort</button>
        <button onClick={() => setMode("passphrase")} className={tab(mode === "passphrase")}>Passphrase</button>
      </div>

      {mode === "password" && (
        <>
          <div className="space-y-2">
            <Label>Länge: {length} Zeichen</Label>
            <Slider min={8} max={96} value={length} onChange={setLength} label="Passwortlänge" />
          </div>
          <div className="grid gap-3 sm:grid-cols-2">
            {[
              ["Großbuchstaben", useUpper, setUseUpper],
              ["Kleinbuchstaben", useLower, setUseLower],
              ["Zahlen", useDigits, setUseDigits],
              ["Sonderzeichen", useSymbols, setUseSymbols],
            ].map(([label, val, set]) => (
              <label key={String(label)} className="flex items-center gap-2 text-sm text-gray-700">
                <input type="checkbox" checked={Boolean(val)} onChange={(e) => (set as (v: boolean) => void)(e.target.checked)} />
                {String(label)}
              </label>
            ))}
          </div>
        </>
      )}

      <Button onClick={generate}>
        <RefreshCw className="mr-2 h-4 w-4" /> {mode === "password" ? "Passwort generieren" : "Passphrase generieren"}
      </Button>

      {password && (
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <div className="flex-1 rounded-md border bg-gray-50 px-4 py-3 font-mono text-base break-all select-all">{password}</div>
            <Button onClick={copy} variant="outline" size="icon" aria-label="Kopieren">
              {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
            </Button>
          </div>
          <div className="rounded-lg border bg-gray-50 p-4 text-sm leading-6 text-gray-700">
            <strong>Entropie-Schätzung:</strong> ca. {Math.round(entropy)} Bit, {strength}. Die Zufallswerte werden
            mit der Web Crypto API des Browsers erzeugt. Die tatsächliche Sicherheit hängt zusätzlich
            von Länge, Zeichenauswahl, Speicherung, Wiederverwendung und deinem Passwortmanager ab.
          </div>
          {length < 14 && mode === "password" && (
            <p className="text-sm font-medium text-amber-700">Für wichtige Konten sind längere Passwörter sinnvoll.</p>
          )}
        </div>
      )}
    </div>
  );
}

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"}`;
}