ente_nazionale_frontend/components/associations/associate-form-dialog.tsx

"use client";

import { useEffect, useState } from "react";
import { Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
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 { Associate } from "@/lib/models";

const ROLE_OPTIONS: { value: Associate["role"]; label: string }[] = [
  { value: "PRESIDENT", label: "Presidente" },
  { value: "VICE_PRESIDENT", label: "Vicepresidente" },
  { value: "SECRETARY", label: "Segretario" },
  { value: "ASSOCIATE", label: "Socio" },
];

const EMPTY_ASSOCIATE: Associate = {
  name: "",
  surname: "",
  birthDate: "",
  address: "",
  fiscalCode: "",
  italianCitizen: true,
  role: "ASSOCIATE",
  residencePermitNumber: "",
};

export function AssociateFormDialog({
  open,
  onOpenChange,
  initialValue,
  onSubmit,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  initialValue?: Associate;
  onSubmit: (associate: Associate) => Promise<void> | void;
}) {
  const [value, setValue] = useState<Associate>(initialValue ?? EMPTY_ASSOCIATE);
  const [saving, setSaving] = useState(false);

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

  const update = <K extends keyof Associate>(key: K, fieldValue: Associate[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 associate:", error);
      alert("Impossibile salvare il socio");
    } finally {
      setSaving(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>{initialValue ? "Modifica socio" : "Aggiungi socio"}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-5">
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="as-name">Nome *</Label>
              <Input id="as-name" value={value.name} onChange={(e) => update("name", e.target.value)} required />
            </div>
            <div className="space-y-2">
              <Label htmlFor="as-surname">Cognome *</Label>
              <Input
                id="as-surname"
                value={value.surname}
                onChange={(e) => update("surname", e.target.value)}
                required
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="as-birthdate">Data di nascita *</Label>
              <Input
                id="as-birthdate"
                type="date"
                value={value.birthDate}
                onChange={(e) => update("birthDate", e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="as-role">Ruolo *</Label>
              <Select value={value.role} onValueChange={(v) => update("role", v as Associate["role"])}>
                <SelectTrigger id="as-role" className="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {ROLE_OPTIONS.map((role) => (
                    <SelectItem key={role.value} value={role.value}>
                      {role.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2 sm:col-span-2">
              <Label htmlFor="as-address">Indirizzo *</Label>
              <Input
                id="as-address"
                value={value.address}
                onChange={(e) => update("address", e.target.value)}
                required
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="as-fiscalcode">Codice fiscale *</Label>
              <Input
                id="as-fiscalcode"
                value={value.fiscalCode}
                onChange={(e) => update("fiscalCode", e.target.value.toUpperCase())}
                required
              />
            </div>

            {!value.italianCitizen && (
              <div className="space-y-2">
                <Label htmlFor="as-permit">Permesso di soggiorno</Label>
                <Input
                  id="as-permit"
                  value={value.residencePermitNumber ?? ""}
                  onChange={(e) => update("residencePermitNumber", e.target.value)}
                />
              </div>
            )}

            <div className="flex items-center gap-2 sm:col-span-2">
              <Checkbox
                id="as-citizen"
                checked={value.italianCitizen}
                onCheckedChange={(checked) => update("italianCitizen", checked === true)}
              />
              <Label htmlFor="as-citizen" className="font-normal">
                Cittadinanza italiana
              </Label>
            </div>
          </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>
  );
}