import { useState } from "react"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { ExternalLink } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import { api, post } from "@/lib/api"
import { melden } from "@/lib/meldungen"

interface GeheimnisStand {
  hf_token_gesetzt: boolean
  hf_token_aus_env: boolean
  schreibbar: boolean
}

export function Einstellungen({ offen, onSchliessen }: { offen: boolean; onSchliessen: () => void }) {
  const qc = useQueryClient()
  const stand = useQuery({
    queryKey: ["geheimnisse"],
    queryFn: () => api<GeheimnisStand>("/api/maintenance/geheimnisse"),
    enabled: offen,
  })
  const [token, setToken] = useState("")

  async function speichern(wert: string | null) {
    try {
      await post("/api/maintenance/geheimnisse", { schluessel: "hf_token", wert })
      melden("erfolg", wert ? "Hugging-Face-Zugang gespeichert." : "Hugging-Face-Zugang gelöscht.")
      setToken("")
      qc.invalidateQueries({ queryKey: ["geheimnisse"] })
    } catch (f) {
      melden("fehler", (f as Error).message)
    }
  }

  const s = stand.data
  return (
    <Sheet open={offen} onOpenChange={(o) => !o && onSchliessen()}>
      <SheetContent side="right" className="w-full gap-3 overflow-y-auto border-linie bg-panel sm:max-w-lg">
        <SheetHeader>
          <SheetTitle className="schild text-lg">Einstellungen</SheetTitle>
          <SheetDescription className="text-text-2">Was die Box sich merkt.</SheetDescription>
        </SheetHeader>
        <section className="flex flex-col gap-3 border-t border-linie px-4 pt-4">
          <h3 className="schild text-sm text-text-3">Hugging-Face-Zugang</h3>
          <p className="text-sm text-text-2">
            {s?.hf_token_gesetzt ? "Ist hinterlegt." : "Fehlt."} Nötig für gesperrte Modelle und schnellere Downloads.
            {s?.hf_token_aus_env ? " Er kommt aus der Dienst-Einstellung und lässt sich hier nicht löschen." : ""}
          </p>
          <form
            className="flex gap-2"
            onSubmit={(e) => {
              e.preventDefault()
              if (token.trim()) speichern(token.trim())
            }}
          >
            <label htmlFor="hf-token" className="sr-only">Hugging-Face-Zugang</label>
            <input
              id="hf-token"
              type="password"
              autoComplete="off"
              value={token}
              onChange={(e) => setToken(e.target.value)}
              placeholder="hf_…"
              className="h-11 min-w-0 flex-1 rounded-lg border border-linie-stark bg-erhaben px-3 text-[15px] outline-none focus:border-cyan"
            />
            <Button type="submit" disabled={!token.trim() || s?.schreibbar === false}>Speichern</Button>
          </form>
          {s?.hf_token_gesetzt && !s.hf_token_aus_env && (
            <Button variant="ghost" size="sm" className="self-start" onClick={() => speichern(null)}>Zugang löschen</Button>
          )}
        </section>
        <section className="flex flex-col gap-2 border-t border-linie px-4 pt-4">
          <h3 className="schild text-sm text-text-3">Hinweise</h3>
          <p className="text-sm text-text-2">
            Dringende Hinweise gehen zusätzlich per Telegram raus, alles andere bleibt hier. Einfache Probleme wie
            einen abgestürzten Dienst behebt der Wächter selbst und schreibt es in den Verlauf.
          </p>
        </section>
        <section className="flex flex-col gap-2 border-t border-linie px-4 pt-4 pb-4">
          <h3 className="schild text-sm text-text-3">Hermes</h3>
          <a href="/hermes-ui/" target="_blank" rel="noopener" className="flex h-11 items-center gap-2 self-start rounded-lg border border-linie-stark bg-erhaben px-4 text-[15px] hover:border-text-3">
            <ExternalLink className="size-4" aria-hidden /> Hermes-Dashboard öffnen
          </a>
          <p className="text-xs text-text-3">Chat, Sitzungen und Cron-Jobs verwaltet Hermes selbst. Es fragt nach seiner eigenen Anmeldung.</p>
        </section>
      </SheetContent>
    </Sheet>
  )
}