"use client";

/**
 * Dialogue pour créer/modifier un utilisateur - COOP-CA AMIFOND
 *
 * Formulaire de création et modification d'utilisateurs avec validation
 */

import { useEffect } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { Loader2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";

import { CreateUserRequest, UpdateUserRequest } from "@/types/users";
import { UserType } from "@/types/auth";
import { useCreateUser, useUpdateUser, useUser } from "@/hooks/users/use-users-queries";

// Schéma de validation pour le formulaire utilisateur
const userFormSchema = z.object({
  email: z.string().email("Adresse email invalide").min(1, "Email requis"),
  first_name: z.string().min(1, "Prénom requis").max(50, "Prénom trop long"),
  last_name: z.string().min(1, "Nom requis").max(50, "Nom trop long"),
  phone_number: z
    .string()
    .min(1, "Numéro de téléphone requis")
    .regex(/^\+?237[6-9]\d{8}$|^\+?\d{8,15}$/, "Format de téléphone invalide"),
  user_type: z.enum(
    [
      "client",
      "super_admin",
      "ca_member",
      "manager",
      "account_manager",
      "cashier",
      "it_staff",
      "other_staff",
      "agency_agent",
      "community_leader",
    ] as const,
    {
      errorMap: () => ({ message: "Type d'utilisateur requis" }),
    },
  ),
  department: z.string().optional(),
  is_active: z.boolean().default(true),
  is_staff: z.boolean().default(false),
  password: z.string().optional(),
  employee_id: z.string().optional(),
});

type UserFormData = z.infer<typeof userFormSchema>;

interface UserDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  mode: "create" | "edit";
  userId?: number;
}

// Options pour les types d'utilisateurs
const USER_TYPE_OPTIONS: { value: UserType; label: string; description?: string }[] = [
  { value: "client", label: "Client", description: "Membre de la coopérative" },
  { value: "other_staff", label: "Employé", description: "Personnel général" },
  { value: "account_manager", label: "Gestionnaire de comptes", description: "Responsable comptabilité" },
  { value: "cashier", label: "Caissier", description: "Gestion des transactions" },
  { value: "manager", label: "Manager", description: "Responsable opérationnel" },
  { value: "agency_agent", label: "Agent d'agence", description: "Personnel d'agence" },
  { value: "community_leader", label: "Chef de communauté", description: "Leader communautaire" },
  { value: "it_staff", label: "Personnel IT", description: "Support technique" },
  { value: "ca_member", label: "Membre CA", description: "Conseil d'administration" },
  { value: "super_admin", label: "Super Admin", description: "Accès complet" },
];

// Départements disponibles
const DEPARTMENTS = [
  "Administration",
  "Comptabilité",
  "Crédit",
  "Caisse",
  "IT",
  "Audit",
  "Ressources Humaines",
  "Marketing",
  "Agence Nord",
  "Agence Sud",
  "Autre",
];

export function UserDialog({ open, onOpenChange, mode, userId }: UserDialogProps) {
  // Hooks pour les mutations et données
  const createUserMutation = useCreateUser();
  const updateUserMutation = useUpdateUser();
  const { data: existingUser, isLoading: isLoadingUser } = useUser(userId ?? 0);

  // Configuration du formulaire
  const form = useForm<UserFormData>({
    resolver: zodResolver(userFormSchema),
    defaultValues: {
      email: "",
      first_name: "",
      last_name: "",
      phone_number: "",
      user_type: "client",
      department: "",
      is_active: true,
      is_staff: false,
      password: "",
      employee_id: "",
    },
  });

  const { handleSubmit, reset, watch } = form;

  // Charger les données utilisateur existantes en mode édition
  useEffect(() => {
    if (mode === "edit" && existingUser) {
      reset({
        email: existingUser.email,
        first_name: existingUser.first_name,
        last_name: existingUser.last_name,
        phone_number: existingUser.phone_number,
        user_type: existingUser.user_type,
        department: existingUser.department ?? "",
        is_active: existingUser.is_active,
        is_staff: existingUser.is_staff,
        employee_id: existingUser.employee_id ?? "",
      });
    }
  }, [mode, existingUser, reset]);

  // Réinitialiser le formulaire à la fermeture
  useEffect(() => {
    if (!open) {
      reset();
    }
  }, [open, reset]);

  // Soumission du formulaire
  const onSubmit = async (data: UserFormData) => {
    try {
      if (mode === "create") {
        const createData: CreateUserRequest = {
          ...data,
          password: data.password ?? undefined,
        };
        await createUserMutation.mutateAsync(createData);
      } else if (mode === "edit" && userId) {
        const updateData: UpdateUserRequest = {
          first_name: data.first_name,
          last_name: data.last_name,
          phone_number: data.phone_number,
          user_type: data.user_type,
          department: data.department,
          is_active: data.is_active,
          is_staff: data.is_staff,
          employee_id: data.employee_id,
        };
        await updateUserMutation.mutateAsync({ id: userId, data: updateData });
      }
      onOpenChange(false);
    } catch (error) {
      // Les erreurs sont gérées par les hooks de mutation
      console.error("Erreur lors de la soumission:", error);
    }
  };

  const isLoading = createUserMutation.isPending || updateUserMutation.isPending;
  const isStaffType = [
    "super_admin",
    "ca_member",
    "manager",
    "account_manager",
    "cashier",
    "it_staff",
    "other_staff",
    "agency_agent",
  ].includes(watch("user_type"));

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>{mode === "create" ? "Créer un utilisateur" : "Modifier l'utilisateur"}</DialogTitle>
          <DialogDescription>
            {mode === "create"
              ? "Créer un nouveau compte utilisateur dans le système."
              : "Modifier les informations de l'utilisateur."}
          </DialogDescription>
        </DialogHeader>

        {isLoadingUser && mode === "edit" ? (
          <div className="flex items-center justify-center py-8">
            <Loader2 className="h-6 w-6 animate-spin" />
            <span className="ml-2">Chargement des données utilisateur...</span>
          </div>
        ) : (
          <Form {...form}>
            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
              {/* Informations de base */}
              <div className="grid grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="first_name"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Prénom *</FormLabel>
                      <FormControl>
                        <Input placeholder="Jean" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="last_name"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Nom *</FormLabel>
                      <FormControl>
                        <Input placeholder="Dupont" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Adresse email *</FormLabel>
                    <FormControl>
                      <Input type="email" placeholder="jean.dupont@amifond.com" disabled={mode === "edit"} {...field} />
                    </FormControl>
                    <FormDescription>
                      {mode === "edit" ? "L&apos;email ne peut pas être modifié" : "Utilisé pour la connexion"}
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="phone_number"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Numéro de téléphone *</FormLabel>
                    <FormControl>
                      <Input placeholder="+237698765432" {...field} />
                    </FormControl>
                    <FormDescription>Format: +237XXXXXXXXX ou format international</FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Type et département */}
              <div className="grid grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="user_type"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Type d&apos;utilisateur *</FormLabel>
                      <Select onValueChange={field.onChange} value={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Sélectionner un type" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          {USER_TYPE_OPTIONS.map((option) => (
                            <SelectItem key={option.value} value={option.value}>
                              <div className="flex flex-col">
                                <span>{option.label}</span>
                                {option.description && (
                                  <span className="text-muted-foreground text-xs">{option.description}</span>
                                )}
                              </div>
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {isStaffType && (
                  <FormField
                    control={form.control}
                    name="department"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Département</FormLabel>
                        <Select onValueChange={field.onChange} value={field.value}>
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Sélectionner un département" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            {DEPARTMENTS.map((dept) => (
                              <SelectItem key={dept} value={dept}>
                                {dept}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                )}
              </div>

              {/* ID Employé pour le personnel */}
              {isStaffType && (
                <FormField
                  control={form.control}
                  name="employee_id"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>ID Employé</FormLabel>
                      <FormControl>
                        <Input placeholder="EMP001" {...field} />
                      </FormControl>
                      <FormDescription>Identifiant unique de l&apos;employé</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              )}

              {/* Mot de passe en mode création */}
              {mode === "create" && (
                <FormField
                  control={form.control}
                  name="password"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Mot de passe temporaire</FormLabel>
                      <FormControl>
                        <Input type="password" placeholder="Laissez vide pour génération automatique" {...field} />
                      </FormControl>
                      <FormDescription>
                        Si laissé vide, un mot de passe temporaire sera généré et envoyé par email.
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              )}

              {/* Statuts */}
              <div className="space-y-4">
                <FormField
                  control={form.control}
                  name="is_active"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                      <div className="space-y-0.5">
                        <FormLabel>Compte actif</FormLabel>
                        <FormDescription>L&apos;utilisateur peut se connecter et utiliser le système</FormDescription>
                      </div>
                      <FormControl>
                        <Switch checked={field.value} onCheckedChange={field.onChange} />
                      </FormControl>
                    </FormItem>
                  )}
                />

                {isStaffType && (
                  <FormField
                    control={form.control}
                    name="is_staff"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                        <div className="space-y-0.5">
                          <FormLabel>Accès administrateur</FormLabel>
                          <FormDescription>Accès aux fonctionnalités d&apos;administration</FormDescription>
                        </div>
                        <FormControl>
                          <Switch checked={field.value} onCheckedChange={field.onChange} />
                        </FormControl>
                      </FormItem>
                    )}
                  />
                )}
              </div>

              <DialogFooter>
                <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
                  Annuler
                </Button>
                <Button type="submit" disabled={isLoading}>
                  {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                  {mode === "create" ? "Créer l'utilisateur" : "Enregistrer les modifications"}
                </Button>
              </DialogFooter>
            </form>
          </Form>
        )}
      </DialogContent>
    </Dialog>
  );
}