"use client";

import * as React from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { geraetEinrichten, geraeteangaben, geraetVergessen } from "@/lib/kiosk/geraet";

/**
 * Einrichtung des Terminals.
 *
 * Einmal je Tablet: Gerätegeheimnis und Kurzname der Wehr. Beides steht in der
 * `.env` des Servers (`KIOSK_DEVICE_SECRET`) beziehungsweise in den Stammdaten
 * der Wehr.
 *
 * Damit das nicht abgetippt werden muss, nimmt die Seite beides auch aus der
 * Adresse entgegen:
 *
 *   /kiosk/einrichten?wehr=ff-musterhausen&schluessel=…
 *
 * Der Administrator schickt sich diesen Link einmal selbst — etwa als QR-Code
 * vom eigenen Rechner — und ruft ihn am Tablet auf.
 */
export function EinrichtenFormular() {
  const router = useRouter();
  const parameter = useSearchParams();

  const [schluessel, setSchluessel] = React.useState("");
  const [wehr, setWehr] = React.useState("");
  const [bestehend, setBestehend] = React.useState<string | null>(null);

  React.useEffect(() => {
    const vorhanden = geraeteangaben();
    if (vorhanden) setBestehend(vorhanden.organisationSlug);

    const ausAdresse = parameter.get("schluessel");
    const wehrAusAdresse = parameter.get("wehr");
    if (ausAdresse) setSchluessel(ausAdresse);
    if (wehrAusAdresse) setWehr(wehrAusAdresse);
  }, [parameter]);

  return (
    <div className="mx-auto max-w-xl space-y-6 p-6">
      <div>
        <h1 className="text-3xl font-semibold tracking-tight">Terminal einrichten</h1>
        <p className="mt-2 text-lg text-[var(--muted-foreground)]">
          Einmal je Tablet. Danach meldet sich jeder mit Ausweis, QR-Code oder PIN an.
        </p>
      </div>

      {bestehend && (
        <div className="rounded-lg border border-[var(--border)] p-4">
          <p className="text-lg">
            Dieses Tablet ist bereits für <strong>{bestehend}</strong> eingerichtet.
          </p>
          <Button
            variant="outline"
            className="mt-3 h-14 text-lg"
            onClick={() => {
              geraetVergessen();
              setBestehend(null);
            }}
          >
            Einrichtung löschen
          </Button>
        </div>
      )}

      <form
        className="space-y-4"
        onSubmit={(ereignis) => {
          ereignis.preventDefault();
          geraetEinrichten({
            geraeteSchluessel: schluessel.trim(),
            organisationSlug: wehr.trim(),
          });
          router.push("/kiosk");
          router.refresh();
        }}
      >
        <div className="space-y-2">
          <Label htmlFor="wehr" className="text-lg">
            Kurzname der Wehr
          </Label>
          <Input
            id="wehr"
            className="h-16 text-xl"
            value={wehr}
            onChange={(ereignis) => setWehr(ereignis.target.value)}
            placeholder="ff-musterhausen"
            required
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="schluessel" className="text-lg">
            Gerätegeheimnis
          </Label>
          <Input
            id="schluessel"
            type="password"
            className="h-16 text-xl"
            value={schluessel}
            onChange={(ereignis) => setSchluessel(ereignis.target.value)}
            required
          />
          <p className="text-[var(--muted-foreground)]">
            Steht als <code>KIOSK_DEVICE_SECRET</code> in der <code>.env</code> des Servers. Es
            bleibt auf diesem Tablet und geht nur beim Anmelden mit.
          </p>
        </div>

        <Button type="submit" className="h-16 w-full text-lg">
          Terminal einrichten
        </Button>
      </form>
    </div>
  );
}