'use client';

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

import { createUtilisateur, 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 CreateUtilisateurDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  roleGere: 'UTI-F' | 'UTI-S';
  onUtilisateurCreated: (utilisateur: Utilisateur) => void;
};

export function CreateUtilisateurDialog({
  open,
  onOpenChange,
  roleGere,
  onUtilisateurCreated,
}: CreateUtilisateurDialogProps) {
  const [name, setName] = useState('');
  const [prenom, setPrenom] = useState('');
  const [email, setEmail] = useState('');
  const [telephone, setTelephone] = useState('');
  const [password, setPassword] = useState('');
  const [profil, setProfil] = useState({
    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 =
    roleGere === 'UTI-F'
      ? 'Administrateur Fonctionnel'
      : 'Simple Utilisateur';

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

    if (!name.trim() || !email.trim() || !password.trim()) {
      toast({
        variant: 'destructive',
        title: 'Erreur',
        description: 'Tous les champs sont requis.',
      });
      return;
    }

    try {
      setIsSubmitting(true);

      const payload = {
        nom: name.trim(),
        prenom: prenom.trim() || null,
        email: email.trim(),
        telephone: telephone.trim() || null,
        password: password.trim(),
        role_ccfn: roleGere,
        ...(roleGere === 'UTI-S' ? { profil } : {}),
      };

      const nouvelUtilisateur = await createUtilisateur(payload);

      onUtilisateurCreated(nouvelUtilisateur);

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

      // Réinitialiser le formulaire
      setName('');
      setPrenom('');
      setEmail('');
      setTelephone('');
      setPassword('');
      setProfil({
        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,
      });
    } catch (err) {
      console.error('Erreur lors de la création de l\'utilisateur:', err);
      toast({
        variant: 'destructive',
        title: 'Erreur',
        description:
          'Impossible de créer l\'utilisateur. Vérifiez vos autorisations.',
      });
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>Créer un {roleLabel}</DialogTitle>
          <DialogDescription>
            {roleGere === 'UTI-F'
              ? "Seul l'UTI-G peut créer des administrateurs fonctionnels."
              : "Seul l'UTI-F peut créer des simples utilisateurs."}
          </DialogDescription>
        </DialogHeader>

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

              <div>
                <Label htmlFor="prenom">Prénom</Label>
                <Input
                  id="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="email">Adresse e-mail</Label>
                <Input
                  id="email"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="jean.dupont@exemple.fr"
                  disabled={isSubmitting}
                  required
                />
              </div>

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

            <div>
              <Label htmlFor="password">Mot de passe</Label>
              <Input
                id="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••"
                disabled={isSubmitting}
                required
              />
              <p className="mt-1 text-xs text-muted-foreground">
                Minimum 8 caractères
              </p>
            </div>

            {roleGere === '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} />
              </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" />
                  Création...
                </>
              ) : (
                "Créer l'utilisateur"
              )}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}