"use client";

import { useEffect, useState } from "react";
import { Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import type { User } from "@/lib/models";

const ROLE_OPTIONS: { value: User["role"]; label: string }[] = [
  { value: "CLIENT", label: "Associazione" },
  { value: "MANAGER", label: "Gestore" },
  { value: "ADMIN", label: "Amministratore" },
];

const EMPTY_USER: User = { email: "", password: "", role: "CLIENT" };

export function UserFormDialog({
  open,
  onOpenChange,
  initialValue,
  onSubmit,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  initialValue?: User;
  onSubmit: (user: User) => Promise<void> | void;
}) {
  const [value, setValue] = useState<User>(initialValue ?? EMPTY_USER);
  const [saving, setSaving] = useState(false);
  const isEdit = Boolean(initialValue);

  useEffect(() => {
    if (open) {
      setValue(initialValue ?? EMPTY_USER);
    }
  }, [open, initialValue]);

  const update = <K extends keyof User>(key: K, fieldValue: User[K]) =>
    setValue((prev) => ({ ...prev, [key]: fieldValue }));

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    try {
      await onSubmit(value);
      onOpenChange(false);
    } catch (error) {
      console.error("Failed to save user:", error);
      alert("Impossibile salvare l'account");
    } finally {
      setSaving(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>{isEdit ? "Modifica account" : "Nuovo account di accesso"}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-5">
          <div className="space-y-2">
            <Label htmlFor="u-email">Email *</Label>
            <Input
              id="u-email"
              type="email"
              value={value.email}
              onChange={(e) => update("email", e.target.value)}
              required
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="u-password">
              Password {isEdit ? "" : "*"}
            </Label>
            <Input
              id="u-password"
              type="text"
              value={value.password ?? ""}
              onChange={(e) => update("password", e.target.value)}
              placeholder={isEdit ? "Lascia vuoto per non modificarla" : undefined}
              required={!isEdit}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="u-role">Ruolo *</Label>
            <Select value={value.role} onValueChange={(v) => update("role", v as User["role"])}>
              <SelectTrigger id="u-role" className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {ROLE_OPTIONS.map((role) => (
                  <SelectItem key={role.value} value={role.value}>
                    {role.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Annulla
            </Button>
            <Button type="submit" disabled={saving}>
              {saving && <Loader2 className="size-4 animate-spin" />}
              {saving ? "Salvataggio..." : "Salva"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}