import { useEffect, useState } from "react"
import { Eye, EyeOff, Key, Shield } from "lucide-react"

// Einstellungen-Tab des SystemDrawers (Review P2-14: extrahiert). Hält seinen State komplett
// selbst (localStorage-Zugangsdaten) — der Drawer liefert nur `open` (zum Neu-Laden) und
// `showAlert` (gemeinsamer Dialog).
export function SettingsTab({ open, showAlert }: {
  open: boolean
  showAlert: (title: string, message: string) => void
}) {
  const [sudoPasswordInput, setSudoPasswordInput] = useState("")
  const [hfTokenInput, setHfTokenInput] = useState("")
  const [showSudo, setShowSudo] = useState(false)
  const [showHf, setShowHf] = useState(false)

  useEffect(() => {
    if (open) {
      setSudoPasswordInput(localStorage.getItem("mc_sudo_password") || "")
      setHfTokenInput(localStorage.getItem("mc_hf_token") || "")
    }
  }, [open])

  return (
    <div className="space-y-6">
      <div className="space-y-2">
        <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">Zugangsdaten & Schlüssel</h3>
        <p className="text-[10px] text-muted-foreground leading-normal">
          Diese Daten werden ausschließlich lokal in deinem Browser (localStorage) gespeichert und bei Bedarf an das Backend übertragen.
        </p>
      </div>

      {/* Sudo Passwort */}
      <div className="space-y-2">
        <label className="text-xs font-semibold flex items-center gap-1.5">
          <Shield className="h-4 w-4 text-amber-400" />
          Host Sudo-Passwort
        </label>
        <div className="relative">
          <input
            type={showSudo ? "text" : "password"}
            value={sudoPasswordInput}
            onChange={(e) => setSudoPasswordInput(e.target.value)}
            aria-label="Host Sudo-Passwort"
            name="sudo-password"
            autoComplete="off"
            spellCheck={false}
            placeholder="Sudo-Passwort für System-Operationen"
            className="w-full h-10 pl-3 pr-10 text-xs bg-background/40 border border-border/60 rounded-lg outline-none focus:border-primary transition-colors text-foreground"
          />
          <button
            type="button"
            onClick={() => setShowSudo(!showSudo)}
            aria-label={showSudo ? "Passwort verbergen" : "Passwort anzeigen"}
            className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors"
          >
            {showSudo ? <EyeOff className="h-4 w-4" aria-hidden="true" /> : <Eye className="h-4 w-4" aria-hidden="true" />}
          </button>
        </div>
        <p className="text-[9px] text-muted-foreground leading-normal">
          Wird benötigt für systemd-Dienste (Llama Swap logs/restart), OS-Update (apt) und Reboot.
        </p>
      </div>

      {/* HuggingFace Token */}
      <div className="space-y-2">
        <label className="text-xs font-semibold flex items-center gap-1.5">
          <Key className="h-4 w-4 text-violet-400" />
          HuggingFace API Token
        </label>
        <div className="relative">
          <input
            type={showHf ? "text" : "password"}
            value={hfTokenInput}
            onChange={(e) => setHfTokenInput(e.target.value)}
            aria-label="HuggingFace API Token"
            name="hf-token"
            autoComplete="off"
            spellCheck={false}
            placeholder="hf_…"
            className="w-full h-10 pl-3 pr-10 text-xs bg-background/40 border border-border/60 rounded-lg outline-none focus:border-primary transition-colors text-foreground"
          />
          <button
            type="button"
            onClick={() => setShowHf(!showHf)}
            aria-label={showHf ? "Token verbergen" : "Token anzeigen"}
            className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors"
          >
            {showHf ? <EyeOff className="h-4 w-4" aria-hidden="true" /> : <Eye className="h-4 w-4" aria-hidden="true" />}
          </button>
        </div>
        <p className="text-[9px] text-muted-foreground leading-normal">
          Erlaubt das Herunterladen von geschützten oder Gate-restricted Modellen direkt über Mission Control.
        </p>
      </div>

      {/* Buttons */}
      <div className="flex gap-3 pt-2">
        <button
          onClick={() => {
            localStorage.setItem("mc_sudo_password", sudoPasswordInput);
            localStorage.setItem("mc_hf_token", hfTokenInput);
            showAlert("Erfolgreich", "Einstellungen erfolgreich lokal gespeichert.");
          }}
          className="flex-1 h-9 flex items-center justify-center text-xs font-semibold text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg transition-colors shadow shadow-primary/10 cursor-pointer"
        >
          Speichern
        </button>
        <button
          onClick={() => {
            setSudoPasswordInput("");
            setHfTokenInput("");
            localStorage.removeItem("mc_sudo_password");
            localStorage.removeItem("mc_hf_token");
            showAlert("Gelöscht", "Zugangsdaten gelöscht.");
          }}
          className="h-9 px-4 flex items-center justify-center text-xs font-semibold text-muted-foreground border border-border/60 bg-background/20 hover:bg-accent rounded-lg transition-colors cursor-pointer"
        >
          Zurücksetzen
        </button>
      </div>
    </div>
  )
}
