'use client';

import { useState } from 'react';
import { Loader2 } from 'lucide-react';

import { updateUtilisateur, type Utilisateur } from '@/lib/api';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';

import { ProfilUtiSForm } from './profil-uti-s-form';

type EditUtilisateurDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  utilisateur: Utilisateur;
  onUtilisateurUpdated: (utilisateur: Utilisateur) => void;
};

export function EditUtilisateurDialog({
  open,
  onOpenChange,
  utilisateur,
  onUtilisateurUpdated,
}: EditUtilisateurDialogProps) {
  const [name, setName] = useState(utilisateur.nom);
  const [prenom, setPrenom] = useState(utilisateur.prenom ?? '');
  const [email, setEmail] = useState(utilisateur.email);
  const [telephone, setTelephone] = useState(utilisateur.telephone ?? '');
  const [password, setPassword] = useState('');
  const [profil, setProfil] = useState(
    utilisateur.profil ?? {
      peut_deposer: false,
      peut_lire: false,
      peut_detruire: false,
      peut_lire_metadonnees: false,
      peut_controler: false,
      peut_lire_journal: false,
      peut_lister: false,
      peut_compter: false,
    },
  );
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { toast } = useToast();

  const roleLabel =
    utilisateur.role_ccfn === 'UTI-F'
      ? 'Administrateur Fonctionnel'
      : 'Simple Utilisateur';

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    if (!name.trim() || !email.trim()) {
      toast({
        variant: 'destructive',
        title: 'Erreur',
        description: "Le nom et l'email sont requis.",
      });
      return;
    }

    try {
      setIsSubmitting(true);

      const payload: {
        nom?: string;
        prenom?: string | null;
        email?: string;
        telephone?: string | null;
        password?: string;
        profil?: typeof profil;
      } = {};

      // Seulement envoyer les champs modifiés
      if (name.trim() !== utilisateur.nom) {
        payload.nom = name.trim();
      }

      if (prenom.trim() !== (utilisateur.prenom ?? '')) {
        payload.prenom = prenom.trim() || null;
      }

      if (email.trim() !== utilisateur.email) {
        payload.email = email.trim();
      }

      if (telephone.trim() !== (utilisateur.telephone ?? '')) {
        payload.telephone = telephone.trim() || null;
      }

      if (password.trim()) {
        payload.password = password.trim();
      }

      if (utilisateur.role_ccfn === 'UTI-S') {
        payload.profil = profil;
      }

      const updated = await updateUtilisateur(utilisateur.id, payload);

      onUtilisateurUpdated(updated);

      toast({
        title: 'Utilisateur modifié',
        description: `${updated.nom} a été modifié avec succès.`,
      });

      onOpenChange(false);
    } catch (err) {
      console.error('Erreur lors de la modification de l\'utilisateur:', err);
      toast({
        variant: 'destructive',
        title: 'Erreur',
        description:
          'Impossible de modifier l\'utilisateur. Vérifiez vos autorisations.',
      });
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>Modifier {roleLabel}</DialogTitle>
          <DialogDescription>
            Modification des paramètres de l&apos;utilisateur.
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit}>
          <div className="space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <Label htmlFor="edit-name">Nom</Label>
                <Input
                  id="edit-name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="Dupont"
                  disabled={isSubmitting}
                  required
                />
              </div>

              <div>
                <Label htmlFor="edit-prenom">Prénom</Label>
                <Input
                  id="edit-prenom"
                  value={prenom}
                  onChange={(e) => setPrenom(e.target.value)}
                  placeholder="Jean"
                  disabled={isSubmitting}
                />
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <Label htmlFor="edit-email">Adresse e-mail</Label>
                <Input
                  id="edit-email"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="jean.dupont@exemple.fr"
                  disabled={isSubmitting}
                  required
                />
              </div>

              <div>
                <Label htmlFor="edit-telephone">Téléphone</Label>
                <Input
                  id="edit-telephone"
                  type="tel"
                  value={telephone}
                  onChange={(e) => setTelephone(e.target.value)}
                  placeholder="06 12 34 56 78"
                  disabled={isSubmitting}
                />
              </div>
            </div>

            <div>
              <Label htmlFor="edit-password">Nouveau mot de passe</Label>
              <Input
                id="edit-password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Laisser vide pour ne pas modifier"
                disabled={isSubmitting}
              />
              <p className="mt-1 text-xs text-muted-foreground">
                Laisser vide pour conserver le mot de passe actuel
              </p>
            </div>

            {utilisateur.role_ccfn === 'UTI-S' ? (
              <div>
                <Label>Profil des autorisations</Label>
                <p className="mb-3 text-xs text-muted-foreground">
                  Sélectionnez les fonctions autorisées pour cet utilisateur
                  simple.
                </p>
                <ProfilUtiSForm
                  profil={profil}
                  onChange={setProfil}
                  disabled={isSubmitting}
                />
              </div>
            ) : null}
          </div>

          <DialogFooter className="mt-6">
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
              disabled={isSubmitting}
            >
              Annuler
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" />
                  Modification...
                </>
              ) : (
                'Enregistrer les modifications'
              )}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}