"use client";

import { useState, useTransition } from "react";
import { TerminType } from "@prisma/client";
import { Plus } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { createTerminAdmin } from "../actions";
import { Textarea } from "@/components/ui/textarea";

export function AdminTerminModal() {
  const [open, setOpen] = useState(false);
  const [isPending, startTransition] = useTransition();

  const handleAction = (formData: FormData) => {
    const data = {
      title: formData.get("title") as string,
      description: formData.get("description") as string,
      type: formData.get("type") as TerminType,
      startDate: new Date(formData.get("startDate") as string).toISOString(),
      endDate: new Date(formData.get("endDate") as string).toISOString(),
      allDay: formData.get("allDay") === "on",
    };

    startTransition(async () => {
      const res = await createTerminAdmin(data);
      if (res.error) {
        toast.error(res.error);
      } else {
        toast.success("Termin wurde direkt angelegt!");
        setOpen(false);
      }
    });
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button className="gap-2 bg-primary">
          <Plus className="h-4 w-4" />
          Termin direkt anlegen
        </Button>
      </DialogTrigger>
      <DialogContent>
        <form action={handleAction}>
          <DialogHeader>
            <DialogTitle>Termin anlegen (Admin)</DialogTitle>
            <DialogDescription>
              Dieser Termin wird sofort freigegeben und ist für alle sichtbar.
            </DialogDescription>
          </DialogHeader>

          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="title">Titel</Label>
              <Input id="title" name="title" required placeholder="z.B. Sommerfest" />
            </div>

            <div className="grid gap-2">
              <Label htmlFor="description">Beschreibung (Optional)</Label>
              <Textarea id="description" name="description" placeholder="Details zum Termin..." />
            </div>

            <div className="grid gap-2">
              <Label htmlFor="type">Kategorie</Label>
              <select
                id="type"
                name="type"
                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                required
              >
                <option value={TerminType.KITA_FEST}>Kita-Fest</option>
                <option value={TerminType.SCHLIESSTAG}>Schließtag</option>
                <option value={TerminType.TEAMTAG}>Teamtag (Kita geschlossen)</option>
                <option value={TerminType.MITMACH_TAG}>Mitmach-Tag</option>
                <option value={TerminType.ELTERNABEND}>Elternabend</option>
                <option value={TerminType.MITGLIEDERVERSAMMLUNG}>Mitgliederversammlung</option>
                <option value={TerminType.ELTERNCAFE}>Elterncafe</option>
                <option value={TerminType.GEBURTSTAG_INTERN}>Geburtstag (Intern)</option>
                <option value={TerminType.GEBURTSTAG_EXTERN}>Raumanfrage (Extern)</option>
                <option value={TerminType.SONSTIGES}>Sonstiges</option>
              </select>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="grid gap-2">
                <Label htmlFor="startDate">Start</Label>
                <Input id="startDate" name="startDate" type="datetime-local" required />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="endDate">Ende</Label>
                <Input id="endDate" name="endDate" type="datetime-local" required />
              </div>
            </div>

            <div className="flex items-center gap-2 mt-2">
              <input type="checkbox" id="allDay" name="allDay" className="rounded border-gray-300" />
              <Label htmlFor="allDay" className="font-normal cursor-pointer">
                Ganztägiger Termin
              </Label>
            </div>
          </div>

          <DialogFooter>
            <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
              Abbrechen
            </Button>
            <Button type="submit" disabled={isPending}>
              {isPending ? "Speichern..." : "Termin erstellen"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}