/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useMemo, useState } from "react";
import { motion, AnimatePresence } from 'framer-motion';
import {
    X, Save, Building2, MapPin, User, Phone, Mail, Globe, CreditCard, Hash, Loader2, Truck, Banknote
} from "lucide-react";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { useNavigate } from "react-router-dom";
import { toast } from "@/components/ui/use-toast";
import { Fournisseur, FournisseurRequest, FournisseurUpdateRequest } from "@/types/fournisseurType";
import { fournisseurStatus } from "@/store/features/fournisseur/selectors";
import { addFournisseur, updateFournisseur } from "@/store/features/fournisseur/thunk";
import { selectfournisseur } from "@/store/features/fournisseur/slice";
import { cn } from "@/lib/utils";
import { Progress } from "@/components/ui/Progress";
import { Section } from "../ui/Section";
import { InputField, InputType, validators } from "../ui/InputValidator";
import z from "zod";
import { useForm, Controller, type SubmitHandler } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

// ============================================
// HELPERS ZOD
// ============================================

const createZodValidator = (inputType: InputType, message?: string) => {
    return z.string().refine(
        (val) => !val || validators[inputType](val).isValid,
        (val) => ({ message: message || validators[inputType](val).message })
    );
};

const optionalZodValidator = (inputType: InputType, message?: string) => {
    return z.string().refine(
        (val) => !val || val.trim() === "" || validators[inputType](val).isValid,
        (val) => ({ message: message || validators[inputType](val).message })
    ).optional().or(z.literal(""));
};

// ============================================
// SCHÉMA DE VALIDATION DU FORMULAIRE
// ============================================

const fournisseurSchema = z.object({
    numero: z.string().min(1, "Le code fournisseur est requis"),
    compte_collectif: z.string().optional(),
    intitule: z.string().min(1, "L'intitulé est requis"),
    type: z.number().default(1),
    est_fournisseur: z.boolean().default(true),
    est_actif: z.boolean().default(true),
    en_sommeil: z.boolean().default(false),
    forme_juridique: z.string().optional(),
    code_naf: z.string().optional(),
    email: optionalZodValidator("email", "Format email invalide"),
    telephone: optionalZodValidator("phone", "Format téléphone invalide"),
    portable: optionalZodValidator("phone", "Format téléphone invalide"),
    telecopie: z.string().optional(),
    site_web: optionalZodValidator("url", "Format URL invalide"),
    adresse: z.string().optional(),
    complement: z.string().optional(),
    code_postal: optionalZodValidator("postal_code", "Code postal invalide"),
    ville: z.string().optional(),
    region: z.string().optional(),
    pays: z.string().default("France"),
    siret: z.string().optional(),
    siren: z.string().optional(),
    tva_intra: z.string().optional(),
    conditions_reglement_code: z.string().optional(),
    conditions_reglement_libelle: z.string().optional(),
    mode_reglement_code: z.string().optional(),
    mode_reglement_libelle: z.string().optional(),
    iban_principal: optionalZodValidator("iban", "IBAN invalide"),
    bic_principal: optionalZodValidator("bic", "BIC invalide"),
    categorie_tarifaire: z.any().nullable().optional(),
    categorie_comptable: z.any().nullable().optional(),
    encours_autorise: z.number().default(0),
    compte_general: z.string().optional(),
});

type FournisseurFormData = z.infer<typeof fournisseurSchema>;

// ============================================
// COMPOSANT PRINCIPAL
// ============================================

export function ModalFournisseur({
    open,
    onClose,
    title,
    editing
}: {
    open: boolean;
    onClose: () => void;
    title?: string;
    editing?: Fournisseur | null;
}) {
    const navigate = useNavigate();
    const dispatch = useAppDispatch();
    const statusFournisseur = useAppSelector(fournisseurStatus);
    const [completion, setCompletion] = useState(0);

    const isEditing = !!editing;
    
    const {
        control,
        handleSubmit,
        watch,
        reset,
        formState: { errors, isSubmitting }
    } = useForm<FournisseurFormData>({
        resolver: zodResolver(fournisseurSchema),
        mode: "onChange",  // ✅ Changé de "onBlur" à "onChange" pour validation en temps réel
        defaultValues: {
            numero: "",
            compte_collectif: "",
            intitule: "",
            type: 1,
            est_fournisseur: true,
            est_actif: true,
            en_sommeil: false,
            adresse: "",
            complement: "",
            code_postal: "",
            ville: "",
            region: "",
            pays: "France",
            telephone: "",
            portable: "",
            telecopie: "",
            email: "",
            site_web: "",
            siret: "",
            siren: "",
            tva_intra: "",
            code_naf: "",
            forme_juridique: "",
            categorie_tarifaire: null,
            categorie_comptable: null,
            conditions_reglement_code: "",
            conditions_reglement_libelle: "",
            mode_reglement_code: "",
            mode_reglement_libelle: "",
            iban_principal: "",
            bic_principal: "",
            encours_autorise: 0,
            compte_general: "",
        }
    });

    const formValues = watch();

    const normalizeNullToEmptyString = <T extends Record<string, any>>(obj: T): T => {
        return Object.fromEntries(
            Object.entries(obj).map(([key, value]) => [
            key,
            value === null ? "" : value,
            ])
        ) as T;
        };


    useEffect(() => {
        if (!open) return;
        if (editing) {
            reset({
                ...normalizeNullToEmptyString(editing),
                encours_autorise: editing.encours_autorise ?? 0,
                est_actif: editing.est_actif ?? true,
                est_fournisseur: editing.est_fournisseur ?? false,
            });
        } else {
            reset({
                numero: "",
                compte_collectif: "",
                intitule: "",
                type: 1,
                est_fournisseur: true,
                est_actif: true,
                en_sommeil: false,
                adresse: "",
                complement: "",
                code_postal: "",
                ville: "",
                region: "",
                pays: "France",
                telephone: "",
                portable: "",
                telecopie: "",
                email: "",
                site_web: "",
                siret: "",
                siren: "",
                tva_intra: "",
                code_naf: "",
                forme_juridique: "",
                categorie_tarifaire: null,
                categorie_comptable: null,
                conditions_reglement_code: "",
                conditions_reglement_libelle: "",
                mode_reglement_code: "",
                mode_reglement_libelle: "",
                iban_principal: "",
                bic_principal: "",
                encours_autorise: 0,
                compte_general: "",
            });
        }
    }, [open, editing, reset]);

    useEffect(() => {
        const requiredFields: (keyof FournisseurFormData)[] = ['numero', 'intitule', 'email', 'telephone'];
        const filled = requiredFields.filter(f => !!formValues[f]);
        setCompletion(Math.round((filled.length / requiredFields.length) * 100));
    }, [formValues]);

    const canSave = useMemo(() => {
        return !!formValues.intitule && !!formValues.numero;
    }, [formValues.intitule, formValues.numero]);

    // ✅ Submit handler
    const onSave: SubmitHandler<FournisseurFormData> = async (data) => {
        
        try {
            if (isEditing) {
                const payload: FournisseurUpdateRequest = {
                    intitule: data.intitule,
                    adresse: data.adresse,
                    code_postal: data.code_postal,
                    ville: data.ville,
                    email: data.email,
                    telephone: data.telephone,
                    pays: data.pays,
                    siret: data.siret?.replace(/\D/g, "") ?? "",
                    tva_intra: data.tva_intra,
                    est_actif: data.est_actif,
                    date_creation: (() => {
                        const d = new Date();
                        d.setDate(d.getDate() + 1);
                        return d.toISOString().split("T")[0];
                    })(),
                };

                const rep = await dispatch(updateFournisseur({
                    numero: data.numero,
                    data: payload
                })).unwrap() as any;
                
                
                const dataResponse = rep as Fournisseur;
                
                toast({
                    title: "Fournisseur mis à jour !",
                    description: `Le fournisseur ${dataResponse.numero} a été mis à jour avec succès.`,
                    className: "bg-green-500 text-white border-green-600"
                });

                setTimeout(() => {
                    dispatch(selectfournisseur(dataResponse));
                    navigate(`/home/fournisseurs/${dataResponse.numero}`);
                }, 1500);

            } else {
                const payloadCreate: FournisseurRequest = {
                    num: data.numero,
                    compte_collectif: data.compte_collectif,
                    intitule: data.intitule,
                    adresse: data.adresse,
                    code_postal: data.code_postal,
                    ville: data.ville,
                    email: data.email,
                    telephone: data.telephone,
                    pays: data.pays,
                    siret: data.siret?.replace(/\D/g, "") ?? "",
                    tva_intra: data.tva_intra,
                    date_creation: (() => {
                        const d = new Date();
                        d.setDate(d.getDate() + 1);
                        return d.toISOString().split("T")[0];
                    })(),
                };

                const rep = await dispatch(addFournisseur(payloadCreate)).unwrap() as any;
                const dataResponse = rep.data as Fournisseur;

                toast({
                    title: "Fournisseur créé !",
                    description: `Un nouveau fournisseur a été créé avec succès.`,
                    className: "bg-green-500 text-white border-green-600"
                });

                setTimeout(() => {
                    dispatch(selectfournisseur(dataResponse));
                    navigate(`/home/fournisseurs/${dataResponse.numero}`);
                }, 1500);
            }

            onClose();
        } catch (e) {
            console.error("Erreur onSave:", e);  // ✅ Debug
            toast({
                title: "Erreur",
                description: "Une erreur est survenue.",
                variant: "destructive"
            });
        }
    };

    // ✅ Debug: Afficher les erreurs de validation
    const onError = (errors: any) => {
        console.log("Erreurs de validation:", errors);
    };

    if (!open) return null;

    return (
        <AnimatePresence>
            {open && (
                <>
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        onClick={onClose}
                        className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50"
                    />
                    <motion.div
                        initial={{ x: "100%" }}
                        animate={{ x: 0 }}
                        exit={{ x: "100%" }}
                        transition={{ type: "spring", damping: 25, stiffness: 200 }}
                        className="fixed inset-y-0 right-0 w-full max-w-xl bg-white dark:bg-gray-950 shadow-2xl z-50 flex flex-col border-l border-gray-200 dark:border-gray-800"
                    >
                        {/* Header */}
                        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md">
                            <div className="flex items-center gap-3">
                                <div className="w-10 h-10 rounded-xl bg-blue-600 text-white flex items-center justify-center">
                                    <Truck className="w-5 h-5" />
                                </div>
                                <div>
                                    <h2 className="text-lg font-bold text-gray-900 dark:text-white">
                                        {title || (isEditing ? "Modifier le fournisseur" : "Nouveau fournisseur")}
                                    </h2>
                                    <p className="text-xs text-gray-500">{completion}% complété</p>
                                </div>
                            </div>
                            <button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors">
                                <X className="w-5 h-5 text-gray-500" />
                            </button>
                        </div>
                        <Progress value={completion} className="h-1 rounded-none" />

                        {/* ✅ FORM englobe tout maintenant */}
                        <form 
                            onSubmit={handleSubmit(onSave, onError)} 
                            className="flex-1 flex flex-col overflow-hidden"
                        >
                            {/* Body scrollable */}
                            <div className="flex-1 overflow-y-auto bg-gray-50/50 dark:bg-black/20">
                                {/* Statut */}
                                <div className="p-4 border-b border-gray-100 dark:border-gray-800">
                                    <div className="flex gap-4">
                                        <Controller
                                            name="est_actif"
                                            control={control}
                                            render={({ field }) => (
                                                <label className="flex items-center gap-2 cursor-pointer">
                                                    <input
                                                        type="checkbox"
                                                        checked={field.value !== false}
                                                        onChange={(e) => field.onChange(e.target.checked)}
                                                        className="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-600"
                                                    />
                                                    <span className="text-sm text-gray-700 dark:text-gray-300">Actif</span>
                                                </label>
                                            )}
                                        />
                                        <Controller
                                            name="en_sommeil"
                                            control={control}
                                            render={({ field }) => (
                                                <label className="flex items-center gap-2 cursor-pointer">
                                                    <input
                                                        type="checkbox"
                                                        checked={field.value || false}
                                                        onChange={(e) => field.onChange(e.target.checked)}
                                                        className="w-4 h-4 text-orange-500 rounded border-gray-300 focus:ring-orange-500"
                                                    />
                                                    <span className="text-sm text-gray-700 dark:text-gray-300">En sommeil</span>
                                                </label>
                                            )}
                                        />
                                    </div>
                                </div>

                                {/* Sections */}
                                <Section title="Identification" icon={Hash} defaultOpen={true}>
                                    <div className="grid grid-cols-2 gap-4">
                                        <Controller
                                            name="numero"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Code fournisseur"
                                                    inputType="text"
                                                    required
                                                    disabled={isEditing}
                                                    placeholder="Ex: FOU001"
                                                    error={errors.numero?.message}
                                                    className={cn(isEditing && "bg-gray-100 dark:bg-gray-800 cursor-not-allowed")}
                                                />
                                            )}
                                        />
                                        <Controller
                                            name="compte_collectif"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Compte collectif"
                                                    inputType="text"
                                                    placeholder="401000"
                                                    error={errors.compte_collectif?.message}
                                                />
                                            )}
                                        />
                                    </div>
                                    <Controller
                                        name="intitule"
                                        control={control}
                                        render={({ field }) => (
                                            <InputField
                                                {...field}
                                                label="Intitulé / Raison sociale"
                                                inputType="text"
                                                required
                                                placeholder="Nom du fournisseur"
                                                error={errors.intitule?.message}
                                            />
                                        )}
                                    />
                                    <div className="grid grid-cols-2 gap-4">
                                        <Controller
                                            name="forme_juridique"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Forme juridique"
                                                    as="select"
                                                    options={[
                                                        { value: "", label: "Sélectionner..." },
                                                        { value: "SARL", label: "SARL" },
                                                        { value: "SAS", label: "SAS" },
                                                        { value: "SA", label: "SA" },
                                                        { value: "EURL", label: "EURL" },
                                                        { value: "EI", label: "EI" },
                                                    ]}
                                                />
                                            )}
                                        />
                                        <Controller
                                            name="code_naf"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Code NAF"
                                                    inputType="text"
                                                    placeholder="Ex: 4651Z"
                                                />
                                            )}
                                        />
                                    </div>
                                </Section>

                                <Section title="Contact" icon={User} defaultOpen={true}>
                                    <div className="grid grid-cols-2 gap-4">
                                        <Controller
                                            name="email"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Email"
                                                    inputType="email"
                                                    placeholder="contact@fournisseur.com"
                                                    error={errors.email?.message}
                                                    leftIcon={<Mail className="w-4 h-4" />}
                                                />
                                            )}
                                        />
                                        <Controller
                                            name="telephone"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Téléphone"
                                                    inputType="phone"
                                                    placeholder="01 23 45 67 89"
                                                    error={errors.telephone?.message}
                                                    leftIcon={<Phone className="w-4 h-4" />}
                                                />
                                            )}
                                        />
                                    </div>
                                    <div className="grid grid-cols-2 gap-4">
                                        <Controller
                                            name="portable"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Portable"
                                                    inputType="phone"
                                                    placeholder="06 12 34 56 78"
                                                    error={errors.portable?.message}
                                                />
                                            )}
                                        />
                                        <Controller
                                            name="telecopie"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Fax"
                                                    inputType="text"
                                                />
                                            )}
                                        />
                                    </div>
                                    <Controller
                                        name="site_web"
                                        control={control}
                                        render={({ field }) => (
                                            <InputField
                                                {...field}
                                                label="Site web"
                                                inputType="url"
                                                placeholder="https://..."
                                                error={errors.site_web?.message}
                                                leftIcon={<Globe className="w-4 h-4" />}
                                            />
                                        )}
                                    />
                                </Section>

                                <Section title="Adresse" icon={MapPin} defaultOpen={true}>
                                    <Controller
                                        name="adresse"
                                        control={control}
                                        render={({ field }) => (
                                            <InputField
                                                {...field}
                                                label="Adresse"
                                                inputType="text"
                                                placeholder="Numéro et nom de rue"
                                            />
                                        )}
                                    />
                                    <Controller
                                        name="complement"
                                        control={control}
                                        render={({ field }) => (
                                            <InputField
                                                {...field}
                                                label="Complément"
                                                inputType="text"
                                                placeholder="Bâtiment, étage..."
                                            />
                                        )}
                                    />
                                    <div className="grid grid-cols-3 gap-4">
                                        <Controller
                                            name="code_postal"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Code postal"
                                                    inputType="postal_code"
                                                    error={errors.code_postal?.message}
                                                />
                                            )}
                                        />
                                        <Controller
                                            name="ville"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Ville"
                                                    inputType="text"
                                                    containerClassName="col-span-2"
                                                />
                                            )}
                                        />
                                    </div>
                                    <div className="grid grid-cols-2 gap-4">
                                        <Controller
                                            name="region"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Région"
                                                    inputType="text"
                                                />
                                            )}
                                        />
                                        <Controller
                                            name="pays"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Pays"
                                                    inputType="text"
                                                />
                                            )}
                                        />
                                    </div>
                                </Section>

                                <Section title="Informations légales" icon={Building2} defaultOpen={false}>
                                    <div className="grid grid-cols-2 gap-4">
                                        <Controller
                                            name="siret"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="SIRET"
                                                    inputType="siret"
                                                    placeholder="14 chiffres"
                                                    error={errors.siret?.message}
                                                />
                                            )}
                                        />
                                        <Controller
                                            name="siren"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="SIREN"
                                                    inputType="siren"
                                                    placeholder="9 chiffres"
                                                    error={errors.siren?.message}
                                                />
                                            )}
                                        />
                                    </div>
                                    <Controller
                                        name="tva_intra"
                                        control={control}
                                        render={({ field }) => (
                                            <InputField
                                                {...field}
                                                label="TVA Intracommunautaire"
                                                inputType="tva_intra"
                                                placeholder="FR12345678901"
                                                error={errors.tva_intra?.message}
                                            />
                                        )}
                                    />
                                </Section>

                                <Section title="Conditions de paiement" icon={CreditCard} defaultOpen={false}>
                                    <div className="grid grid-cols-2 gap-4">
                                        <Controller
                                            name="conditions_reglement_code"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Conditions de règlement"
                                                    as="select"
                                                    options={[
                                                        { value: "", label: "Sélectionner..." },
                                                        { value: "30", label: "30 jours" },
                                                        { value: "45", label: "45 jours" },
                                                        { value: "60", label: "60 jours" },
                                                        { value: "90", label: "90 jours" },
                                                    ]}
                                                />
                                            )}
                                        />
                                        <Controller
                                            name="mode_reglement_code"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Mode de règlement"
                                                    as="select"
                                                    options={[
                                                        { value: "", label: "Sélectionner..." },
                                                        { value: "virement", label: "Virement" },
                                                        { value: "cheque", label: "Chèque" },
                                                        { value: "prelevement", label: "Prélèvement" },
                                                        { value: "lcr", label: "LCR" },
                                                    ]}
                                                />
                                            )}
                                        />
                                    </div>
                                </Section>

                                <Section title="Coordonnées bancaires" icon={Banknote} defaultOpen={false}>
                                    <Controller
                                        name="iban_principal"
                                        control={control}
                                        render={({ field }) => (
                                            <InputField
                                                {...field}
                                                label="IBAN"
                                                inputType="iban"
                                                placeholder="FR76 XXXX XXXX XXXX XXXX XXXX XXX"
                                                error={errors.iban_principal?.message}
                                                className="font-mono"
                                            />
                                        )}
                                    />
                                    <Controller
                                        name="bic_principal"
                                        control={control}
                                        render={({ field }) => (
                                            <InputField
                                                {...field}
                                                label="BIC"
                                                inputType="bic"
                                                placeholder="BNPAFRPP"
                                                error={errors.bic_principal?.message}
                                                className="font-mono"
                                            />
                                        )}
                                    />
                                </Section>

                                <Section title="Comptabilité" icon={CreditCard} defaultOpen={false}>
                                    <div className="grid grid-cols-2 gap-4">
                                        <Controller
                                            name="compte_general"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    label="Compte général"
                                                    inputType="text"
                                                    placeholder="401000"
                                                />
                                            )}
                                        />
                                        <Controller
                                            name="encours_autorise"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    value={field.value?.toString() || ""}
                                                    onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
                                                    label="Encours autorisé (€)"
                                                    inputType="number"
                                                />
                                            )}
                                        />
                                    </div>
                                    <div className="grid grid-cols-2 gap-4">
                                        <Controller
                                            name="categorie_tarifaire"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    value={field.value?.toString() || ""}
                                                    onChange={(e) => field.onChange(e.target.value ? parseInt(e.target.value) : null)}
                                                    label="Catégorie tarifaire"
                                                    inputType="text"
                                                />
                                            )}
                                        />
                                        <Controller
                                            name="categorie_comptable"
                                            control={control}
                                            render={({ field }) => (
                                                <InputField
                                                    {...field}
                                                    value={field.value?.toString() || ""}
                                                    onChange={(e) => field.onChange(e.target.value ? parseInt(e.target.value) : null)}
                                                    label="Catégorie comptable"
                                                    inputType="text"
                                                />
                                            )}
                                        />
                                    </div>
                                </Section>
                            </div>

                            {/* ✅ Footer DANS le form */}
                            <div className="p-4 border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 flex justify-end gap-3">
                                <button
                                    type="button"
                                    onClick={onClose}
                                    className="px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors"
                                >
                                    Annuler
                                </button>
                                <button
                                    type="submit"  // ✅ type="submit" au lieu de onClick
                                    disabled={!canSave || statusFournisseur === "loading" || isSubmitting}
                                    className="inline-flex items-center gap-2 px-6 py-2.5 bg-[#00D639] text-white text-sm font-medium rounded-xl hover:bg-[#00b830] shadow-lg shadow-green-900/20" style={{background:'#007E45'}}
                                >
                                    {(statusFournisseur === "loading" || isSubmitting) ? (
                                        <Loader2 className="w-4 h-4 animate-spin" />
                                    ) : (
                                        <Save className="w-4 h-4" />
                                    )}
                                    {isEditing ? "Mettre à jour" : "Créer le fournisseur"}
                                </button>
                            </div>
                        </form>
                    </motion.div>
                </>
            )}
        </AnimatePresence>
    );
}

// /* eslint-disable @typescript-eslint/no-unused-vars */
// /* eslint-disable @typescript-eslint/no-explicit-any */
// import React, { useEffect, useMemo, useState } from "react";
// import { motion, AnimatePresence } from 'framer-motion';
// import {
//     X, Save, Building2, MapPin, User, Phone, Mail, Globe, CreditCard, Hash, Loader2, Truck, Banknote
// } from "lucide-react";
// import { useAppDispatch, useAppSelector } from "@/store/hooks";
// import { useNavigate } from "react-router-dom";
// import { toast } from "@/components/ui/use-toast";
// import { Fournisseur, FournisseurRequest, FournisseurUpdateRequest } from "@/types/fournisseurType";
// import { fournisseurStatus } from "@/store/features/fournisseur/selectors";
// import { addFournisseur, updateFournisseur } from "@/store/features/fournisseur/thunk";
// import { selectfournisseur } from "@/store/features/fournisseur/slice";
// import { cn } from "@/lib/utils";
// import { Progress } from "@/components/ui/Progress";
// import { Section } from "../ui/Section";
// import { InputField, InputType, validators } from "../ui/InputValidator";
// import z from "zod";
// import { useForm, Controller, type SubmitHandler } from "react-hook-form";
// import { zodResolver } from "@hookform/resolvers/zod";

// // ============================================
// // HELPERS ZOD
// // ============================================

// const createZodValidator = (inputType: InputType, message?: string) => {
//     return z.string().refine(
//         (val) => !val || validators[inputType](val).isValid,
//         (val) => ({ message: message || validators[inputType](val).message })
//     );
// };

// const optionalZodValidator = (inputType: InputType, message?: string) => {
//     return z.string().refine(
//         (val) => !val || val.trim() === "" || validators[inputType](val).isValid,
//         (val) => ({ message: message || validators[inputType](val).message })
//     ).optional().or(z.literal(""));
// };

// // ============================================
// // SCHÉMA DE VALIDATION DU FORMULAIRE
// // ============================================

// const fournisseurSchema = z.object({
//     // Identification
//     numero: z.string().min(1, "Le code fournisseur est requis"),
//     compte_collectif: z.string().optional(),
//     intitule: z.string().min(1, "L'intitulé est requis"),
//     type: z.number().default(1),
//     est_fournisseur: z.boolean().default(true),
//     est_actif: z.boolean().default(true),
//     en_sommeil: z.boolean().default(false),
//     forme_juridique: z.string().optional(),
//     code_naf: z.string().optional(),

//     // Contact
//     email: optionalZodValidator("email", "Format email invalide"),
//     telephone: optionalZodValidator("phone", "Format téléphone invalide"),
//     portable: optionalZodValidator("phone", "Format téléphone invalide"),
//     telecopie: z.string().optional(),
//     site_web: optionalZodValidator("url", "Format URL invalide"),

//     // Adresse
//     adresse: z.string().optional(),
//     complement: z.string().optional(),
//     code_postal: optionalZodValidator("postal_code", "Code postal invalide"),
//     ville: z.string().optional(),
//     region: z.string().optional(),
//     pays: z.string().default("France"),

//     // Informations légales
//     siret: optionalZodValidator("siret", "SIRET invalide (14 chiffres)"),
//     siren: optionalZodValidator("siren", "SIREN invalide (9 chiffres)"),
//     tva_intra: optionalZodValidator("tva_intra", "TVA intracommunautaire invalide"),

//     // Conditions de paiement
//     conditions_reglement_code: z.string().optional(),
//     conditions_reglement_libelle: z.string().optional(),
//     mode_reglement_code: z.string().optional(),
//     mode_reglement_libelle: z.string().optional(),

//     // Coordonnées bancaires
//     iban_principal: optionalZodValidator("iban", "IBAN invalide"),
//     bic_principal: optionalZodValidator("bic", "BIC invalide"),

//     // Comptabilité
//     categorie_tarifaire: z.any().nullable().optional(),
//     categorie_comptable: z.any().nullable().optional(),
//     encours_autorise: z.number().default(0),
//     compte_general: z.string().optional(),
// });

// type FournisseurFormData = z.infer<typeof fournisseurSchema>;

// // ============================================
// // COMPOSANT PRINCIPAL
// // ============================================

// export function ModalFournisseur({
//     open,
//     onClose,
//     title,
//     editing
// }: {
//     open: boolean;
//     onClose: () => void;
//     title?: string;
//     editing?: Fournisseur | null;
// }) {
//     const navigate = useNavigate();
//     const dispatch = useAppDispatch();
//     const statusFournisseur = useAppSelector(fournisseurStatus);
//     const [completion, setCompletion] = useState(0);

//     const isEditing = !!editing;

//     // React Hook Form
//     const {
//         control,
//         handleSubmit,
//         watch,
//         reset,
//         setValue,
//         formState: { errors }
//     } = useForm<FournisseurFormData>({
//         resolver: zodResolver(fournisseurSchema),
//         mode: "onBlur",
//         defaultValues: {
//             numero: "",
//             compte_collectif: "",
//             intitule: "",
//             type: 1,
//             est_fournisseur: true,
//             est_actif: true,
//             en_sommeil: false,
//             adresse: "",
//             complement: "",
//             code_postal: "",
//             ville: "",
//             region: "",
//             pays: "France",
//             telephone: "",
//             portable: "",
//             telecopie: "",
//             email: "",
//             site_web: "",
//             siret: "",
//             siren: "",
//             tva_intra: "",
//             code_naf: "",
//             forme_juridique: "",
//             categorie_tarifaire: null,
//             categorie_comptable: null,
//             conditions_reglement_code: "",
//             conditions_reglement_libelle: "",
//             mode_reglement_code: "",
//             mode_reglement_libelle: "",
//             iban_principal: "",
//             bic_principal: "",
//             encours_autorise: 0,
//             compte_general: "",
//         }
//     });

//     // Watch pour les valeurs réactives
//     const formValues = watch();

//     // Reset form quand le modal s'ouvre
//     useEffect(() => {
//         if (!open) return;
//         if (editing) {
//             reset({
//                 ...editing,
//                 encours_autorise: editing.encours_autorise ?? 0,
//             });
//         } else {
//             reset({
//                 numero: "",
//                 compte_collectif: "",
//                 intitule: "",
//                 type: 1,
//                 est_fournisseur: true,
//                 est_actif: true,
//                 en_sommeil: false,
//                 adresse: "",
//                 complement: "",
//                 code_postal: "",
//                 ville: "",
//                 region: "",
//                 pays: "France",
//                 telephone: "",
//                 portable: "",
//                 telecopie: "",
//                 email: "",
//                 site_web: "",
//                 siret: "",
//                 siren: "",
//                 tva_intra: "",
//                 code_naf: "",
//                 forme_juridique: "",
//                 categorie_tarifaire: null,
//                 categorie_comptable: null,
//                 conditions_reglement_code: "",
//                 conditions_reglement_libelle: "",
//                 mode_reglement_code: "",
//                 mode_reglement_libelle: "",
//                 iban_principal: "",
//                 bic_principal: "",
//                 encours_autorise: 0,
//                 compte_general: "",
//             });
//         }
//     }, [open, editing, reset]);

//     // Calcul completion
//     useEffect(() => {
//         const requiredFields: (keyof FournisseurFormData)[] = ['numero', 'intitule', 'email', 'telephone'];
//         const filled = requiredFields.filter(f => !!formValues[f]);
//         setCompletion(Math.round((filled.length / requiredFields.length) * 100));
//     }, [formValues]);

//     const canSave = useMemo(() => {
//         return !!formValues.intitule && !!formValues.numero;
//     }, [formValues.intitule, formValues.numero]);

//     // Submit handler
//     const onSave: SubmitHandler<FournisseurFormData> = async (data) => {
//         try {
//             if (isEditing) {
//                 const payload: FournisseurUpdateRequest = {
//                     intitule: data.intitule,
//                     adresse: data.adresse,
//                     code_postal: data.code_postal,
//                     ville: data.ville,
//                     email: data.email,
//                     telephone: data.telephone,
//                     pays: data.pays,
//                     siret: data.siret,
//                     tva_intra: data.tva_intra,
//                     date_creation: (() => {
//                         const d = new Date();
//                         d.setDate(d.getDate() + 1);
//                         return d.toISOString().split("T")[0];
//                     })(),
//                 };

//                 const rep = await dispatch(updateFournisseur({
//                     numero: data.numero,
//                     data: payload
//                 })).unwrap() as any;

//                 const dataResponse = rep.fournisseur as Fournisseur;
//                 toast({
//                     title: "Fournisseur mis à jour !",
//                     description: `Le fournisseur ${dataResponse.numero} a été mis à jour avec succès.`,
//                     className: "bg-green-500 text-white border-green-600"
//                 });

//                 setTimeout(() => {
//                     dispatch(selectfournisseur(dataResponse));
//                     navigate(`/home/fournisseurs/${dataResponse.numero}`);
//                 }, 1500);

//             } else {
//                 const payloadCreate: FournisseurRequest = {
//                     num: data.numero,
//                     compte_collectif: data.compte_collectif,
//                     intitule: data.intitule,
//                     adresse: data.adresse,
//                     code_postal: data.code_postal,
//                     ville: data.ville,
//                     email: data.email,
//                     telephone: data.telephone,
//                     pays: data.pays,
//                     siret: data.siret,
//                     tva_intra: data.tva_intra,
//                     date_creation: (() => {
//                         const d = new Date();
//                         d.setDate(d.getDate() + 1);
//                         return d.toISOString().split("T")[0];
//                     })(),
//                 };

//                 const rep = await dispatch(addFournisseur(payloadCreate)).unwrap() as any;
//                 const dataResponse = rep.data as Fournisseur;

//                 toast({
//                     title: "Fournisseur créé !",
//                     description: `Un nouveau fournisseur a été créé avec succès.`,
//                     className: "bg-green-500 text-white border-green-600"
//                 });

//                 setTimeout(() => {
//                     dispatch(selectfournisseur(dataResponse));
//                     navigate(`/home/fournisseurs/${dataResponse.numero}`);
//                 }, 1500);
//             }

//             onClose();
//         } catch (e) {
//             toast({
//                 title: "Erreur",
//                 description: "Une erreur est survenue.",
//                 variant: "destructive"
//             });
//         }
//     };

//     if (!open) return null;

//     return (
//         <AnimatePresence>
//             {open && (
//                 <>
//                     <motion.div
//                         initial={{ opacity: 0 }}
//                         animate={{ opacity: 1 }}
//                         exit={{ opacity: 0 }}
//                         onClick={onClose}
//                         className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50"
//                     />
//                     <motion.div
//                         initial={{ x: "100%" }}
//                         animate={{ x: 0 }}
//                         exit={{ x: "100%" }}
//                         transition={{ type: "spring", damping: 25, stiffness: 200 }}
//                         className="fixed inset-y-0 right-0 w-full max-w-xl bg-white dark:bg-gray-950 shadow-2xl z-50 flex flex-col border-l border-gray-200 dark:border-gray-800"
//                     >
//                         {/* Header */}
//                         <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md">
//                             <div className="flex items-center gap-3">
//                                 <div className="w-10 h-10 rounded-xl bg-blue-600 text-white flex items-center justify-center">
//                                     <Truck className="w-5 h-5" />
//                                 </div>
//                                 <div>
//                                     <h2 className="text-lg font-bold text-gray-900 dark:text-white">
//                                         {title || (isEditing ? "Modifier le fournisseur" : "Nouveau fournisseur")}
//                                     </h2>
//                                     <p className="text-xs text-gray-500">{completion}% complété</p>
//                                 </div>
//                             </div>
//                             <button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors">
//                                 <X className="w-5 h-5 text-gray-500" />
//                             </button>
//                         </div>
//                         <Progress value={completion} className="h-1 rounded-none" />

//                         {/* Body */}
//                         <form onSubmit={handleSubmit(onSave)} className="flex-1 overflow-y-auto bg-gray-50/50 dark:bg-black/20">
//                             {/* Statut */}
//                             <div className="p-4 border-b border-gray-100 dark:border-gray-800">
//                                 <div className="flex gap-4">
//                                     <Controller
//                                         name="est_actif"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <label className="flex items-center gap-2 cursor-pointer">
//                                                 <input
//                                                     type="checkbox"
//                                                     checked={field.value !== false}
//                                                     onChange={(e) => field.onChange(e.target.checked)}
//                                                     className="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-600"
//                                                 />
//                                                 <span className="text-sm text-gray-700 dark:text-gray-300">Actif</span>
//                                             </label>
//                                         )}
//                                     />
//                                     <Controller
//                                         name="en_sommeil"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <label className="flex items-center gap-2 cursor-pointer">
//                                                 <input
//                                                     type="checkbox"
//                                                     checked={field.value || false}
//                                                     onChange={(e) => field.onChange(e.target.checked)}
//                                                     className="w-4 h-4 text-orange-500 rounded border-gray-300 focus:ring-orange-500"
//                                                 />
//                                                 <span className="text-sm text-gray-700 dark:text-gray-300">En sommeil</span>
//                                             </label>
//                                         )}
//                                     />
//                                 </div>
//                             </div>

//                             {/* Sections */}
//                             <Section title="Identification" icon={Hash} defaultOpen={true}>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <Controller
//                                         name="numero"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Code fournisseur"
//                                                 inputType="text"
//                                                 required
//                                                 disabled={isEditing}
//                                                 placeholder="Ex: FOU001"
//                                                 error={errors.numero?.message}
//                                                 className={cn(isEditing && "bg-gray-100 dark:bg-gray-800 cursor-not-allowed")}
//                                             />
//                                         )}
//                                     />
//                                     <Controller
//                                         name="compte_collectif"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Compte collectif"
//                                                 inputType="text"
//                                                 placeholder="401000"
//                                                 error={errors.compte_collectif?.message}
//                                             />
//                                         )}
//                                     />
//                                 </div>
//                                 <Controller
//                                     name="intitule"
//                                     control={control}
//                                     render={({ field }) => (
//                                         <InputField
//                                             {...field}
//                                             label="Intitulé / Raison sociale"
//                                             inputType="text"
//                                             required
//                                             placeholder="Nom du fournisseur"
//                                             error={errors.intitule?.message}
//                                         />
//                                     )}
//                                 />
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <Controller
//                                         name="forme_juridique"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Forme juridique"
//                                                 as="select"
//                                                 options={[
//                                                     { value: "", label: "Sélectionner..." },
//                                                     { value: "SARL", label: "SARL" },
//                                                     { value: "SAS", label: "SAS" },
//                                                     { value: "SA", label: "SA" },
//                                                     { value: "EURL", label: "EURL" },
//                                                     { value: "EI", label: "EI" },
//                                                 ]}
//                                             />
//                                         )}
//                                     />
//                                     <Controller
//                                         name="code_naf"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Code NAF"
//                                                 inputType="text"
//                                                 placeholder="Ex: 4651Z"
//                                             />
//                                         )}
//                                     />
//                                 </div>
//                             </Section>

//                             <Section title="Contact" icon={User} defaultOpen={true}>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <Controller
//                                         name="email"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Email"
//                                                 inputType="email"
//                                                 placeholder="contact@fournisseur.com"
//                                                 error={errors.email?.message}
//                                                 leftIcon={<Mail className="w-4 h-4" />}
//                                             />
//                                         )}
//                                     />
//                                     <Controller
//                                         name="telephone"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Téléphone"
//                                                 inputType="phone"
//                                                 placeholder="01 23 45 67 89"
//                                                 error={errors.telephone?.message}
//                                                 leftIcon={<Phone className="w-4 h-4" />}
//                                             />
//                                         )}
//                                     />
//                                 </div>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <Controller
//                                         name="portable"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Portable"
//                                                 inputType="phone"
//                                                 placeholder="06 12 34 56 78"
//                                                 error={errors.portable?.message}
//                                             />
//                                         )}
//                                     />
//                                     <Controller
//                                         name="telecopie"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Fax"
//                                                 inputType="text"
//                                             />
//                                         )}
//                                     />
//                                 </div>
//                                 <Controller
//                                     name="site_web"
//                                     control={control}
//                                     render={({ field }) => (
//                                         <InputField
//                                             {...field}
//                                             label="Site web"
//                                             inputType="url"
//                                             placeholder="https://..."
//                                             error={errors.site_web?.message}
//                                             leftIcon={<Globe className="w-4 h-4" />}
//                                         />
//                                     )}
//                                 />
//                             </Section>

//                             <Section title="Adresse" icon={MapPin} defaultOpen={true}>
//                                 <Controller
//                                     name="adresse"
//                                     control={control}
//                                     render={({ field }) => (
//                                         <InputField
//                                             {...field}
//                                             label="Adresse"
//                                             inputType="text"
//                                             placeholder="Numéro et nom de rue"
//                                         />
//                                     )}
//                                 />
//                                 <Controller
//                                     name="complement"
//                                     control={control}
//                                     render={({ field }) => (
//                                         <InputField
//                                             {...field}
//                                             label="Complément"
//                                             inputType="text"
//                                             placeholder="Bâtiment, étage..."
//                                         />
//                                     )}
//                                 />
//                                 <div className="grid grid-cols-3 gap-4">
//                                     <Controller
//                                         name="code_postal"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Code postal"
//                                                 inputType="postal_code"
//                                                 error={errors.code_postal?.message}
//                                             />
//                                         )}
//                                     />
//                                     <Controller
//                                         name="ville"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Ville"
//                                                 inputType="text"
//                                                 containerClassName="col-span-2"
//                                             />
//                                         )}
//                                     />
//                                 </div>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <Controller
//                                         name="region"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Région"
//                                                 inputType="text"
//                                             />
//                                         )}
//                                     />
//                                     <Controller
//                                         name="pays"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Pays"
//                                                 inputType="text"
//                                             />
//                                         )}
//                                     />
//                                 </div>
//                             </Section>

//                             <Section title="Informations légales" icon={Building2} defaultOpen={false}>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <Controller
//                                         name="siret"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="SIRET"
//                                                 inputType="siret"
//                                                 placeholder="14 chiffres"
//                                                 error={errors.siret?.message}
//                                             />
//                                         )}
//                                     />
//                                     <Controller
//                                         name="siren"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="SIREN"
//                                                 inputType="siren"
//                                                 placeholder="9 chiffres"
//                                                 error={errors.siren?.message}
//                                             />
//                                         )}
//                                     />
//                                 </div>
//                                 <Controller
//                                     name="tva_intra"
//                                     control={control}
//                                     render={({ field }) => (
//                                         <InputField
//                                             {...field}
//                                             label="TVA Intracommunautaire"
//                                             inputType="tva_intra"
//                                             placeholder="FR12345678901"
//                                             error={errors.tva_intra?.message}
//                                         />
//                                     )}
//                                 />
//                             </Section>

//                             <Section title="Conditions de paiement" icon={CreditCard} defaultOpen={false}>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <Controller
//                                         name="conditions_reglement_code"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Conditions de règlement"
//                                                 as="select"
//                                                 options={[
//                                                     { value: "", label: "Sélectionner..." },
//                                                     { value: "30", label: "30 jours" },
//                                                     { value: "45", label: "45 jours" },
//                                                     { value: "60", label: "60 jours" },
//                                                     { value: "90", label: "90 jours" },
//                                                 ]}
//                                             />
//                                         )}
//                                     />
//                                     <Controller
//                                         name="mode_reglement_code"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Mode de règlement"
//                                                 as="select"
//                                                 options={[
//                                                     { value: "", label: "Sélectionner..." },
//                                                     { value: "virement", label: "Virement" },
//                                                     { value: "cheque", label: "Chèque" },
//                                                     { value: "prelevement", label: "Prélèvement" },
//                                                     { value: "lcr", label: "LCR" },
//                                                 ]}
//                                             />
//                                         )}
//                                     />
//                                 </div>
//                             </Section>

//                             <Section title="Coordonnées bancaires" icon={Banknote} defaultOpen={false}>
//                                 <Controller
//                                     name="iban_principal"
//                                     control={control}
//                                     render={({ field }) => (
//                                         <InputField
//                                             {...field}
//                                             label="IBAN"
//                                             inputType="iban"
//                                             placeholder="FR76 XXXX XXXX XXXX XXXX XXXX XXX"
//                                             error={errors.iban_principal?.message}
//                                             className="font-mono"
//                                         />
//                                     )}
//                                 />
//                                 <Controller
//                                     name="bic_principal"
//                                     control={control}
//                                     render={({ field }) => (
//                                         <InputField
//                                             {...field}
//                                             label="BIC"
//                                             inputType="bic"
//                                             placeholder="BNPAFRPP"
//                                             error={errors.bic_principal?.message}
//                                             className="font-mono"
//                                         />
//                                     )}
//                                 />
//                             </Section>

//                             <Section title="Comptabilité" icon={CreditCard} defaultOpen={false}>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <Controller
//                                         name="compte_general"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 label="Compte général"
//                                                 inputType="text"
//                                                 placeholder="401000"
//                                             />
//                                         )}
//                                     />
//                                     <Controller
//                                         name="encours_autorise"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 value={field.value?.toString() || ""}
//                                                 onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
//                                                 label="Encours autorisé (€)"
//                                                 inputType="number"
//                                             />
//                                         )}
//                                     />
//                                 </div>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <Controller
//                                         name="categorie_tarifaire"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 value={field.value?.toString() || ""}
//                                                 onChange={(e) => field.onChange(e.target.value ? parseInt(e.target.value) : null)}
//                                                 label="Catégorie tarifaire"
//                                                 inputType="text"
//                                             />
//                                         )}
//                                     />
//                                     <Controller
//                                         name="categorie_comptable"
//                                         control={control}
//                                         render={({ field }) => (
//                                             <InputField
//                                                 {...field}
//                                                 value={field.value?.toString() || ""}
//                                                 onChange={(e) => field.onChange(e.target.value ? parseInt(e.target.value) : null)}
//                                                 label="Catégorie comptable"
//                                                 inputType="text"
//                                             />
//                                         )}
//                                     />
//                                 </div>
//                             </Section>
//                         </form>

//                         {/* Footer */}
//                         <div className="p-4 border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 flex justify-end gap-3">
//                             <button
//                                 type="button"
//                                 onClick={onClose}
//                                 className="px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors"
//                             >
//                                 Annuler
//                             </button>
//                             <button
//                                 onClick={handleSubmit(onSave)}
//                                 disabled={!canSave || statusFournisseur === "loading"}
//                                 className="inline-flex items-center gap-2 px-6 py-2.5 bg-[#00D639] text-white text-sm font-medium rounded-xl hover:bg-[#7a1002] disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-lg shadow-red-900/20"
//                             >
//                                 {statusFournisseur === "loading" ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
//                                 {isEditing ? "Mettre à jour" : "Créer le fournisseur"}
//                             </button>
//                         </div>
//                     </motion.div>
//                 </>
//             )}
//         </AnimatePresence>
//     );
// }



// /* eslint-disable @typescript-eslint/no-unused-vars */
// /* eslint-disable @typescript-eslint/no-explicit-any */
// import React, { useEffect, useMemo, useState } from "react";
// import { motion, AnimatePresence } from 'framer-motion';
// import {
//     X, Save, Building2, MapPin, User, Phone, Mail, Globe, CreditCard, Hash, Loader2, Truck, Banknote
// } from "lucide-react";
// import { useAppDispatch, useAppSelector } from "@/store/hooks";
// import { useNavigate } from "react-router-dom";
// import { toast } from "@/components/ui/use-toast";
// import { Fournisseur, FournisseurRequest, FournisseurUpdateRequest } from "@/types/fournisseurType";
// import { fournisseurStatus } from "@/store/features/fournisseur/selectors";
// import { addFournisseur, updateFournisseur } from "@/store/features/fournisseur/thunk";
// import { selectfournisseur } from "@/store/features/fournisseur/slice";
// import { cn } from "@/lib/utils";
// import { Progress } from "@/components/ui/Progress";
// import { Section } from "../ui/Section";
// import { inputClass, InputField } from "../ui/InputField";
// // import { inputClass, InputField } from "../ui/InputField";



// export function ModalFournisseur({
//     open,
//     onClose,
//     title,
//     editing
// }: {
//     open: boolean;
//     onClose: () => void;
//     title?: string;
//     editing?: Fournisseur | null;
// }) {
//     const navigate = useNavigate();
//     const dispatch = useAppDispatch();
//     const statusFournisseur = useAppSelector(fournisseurStatus);
//     const [completion, setCompletion] = useState(0);

//     const [form, setForm] = useState<Partial<Fournisseur>>({
//         numero: "",
//         compte_collectif: "",
//         intitule: "",
//         type: 1,
//         est_fournisseur: true,
//         est_actif: true,
//         en_sommeil: false,
//         adresse: "",
//         complement: "",
//         code_postal: "",
//         ville: "",
//         region: "",
//         pays: "France",
//         telephone: "",
//         portable: "",
//         telecopie: "",
//         email: "",
//         site_web: "",
//         siret: "",
//         siren: "",
//         tva_intra: "",
//         code_naf: "",
//         forme_juridique: "",
//         categorie_tarifaire: null,
//         categorie_comptable: null,
//         conditions_reglement_code: "",
//         conditions_reglement_libelle: "",
//         mode_reglement_code: "",
//         mode_reglement_libelle: "",
//         iban_principal: "",
//         bic_principal: "",
//         encours_autorise: 0,
//         compte_general: "",
//     });

//     const isEditing = !!editing;

//     useEffect(() => {
//         if (!open) return;
//         if (editing) {
//             setForm({ ...editing });
//         } else {
//             setForm({
//                 numero: "", compte_collectif: "", intitule: "", type: 1,
//                 est_fournisseur: true, est_actif: true, en_sommeil: false,
//                 adresse: "", complement: "", code_postal: "", ville: "", region: "", pays: "France",
//                 telephone: "", portable: "", telecopie: "", email: "", site_web: "",
//                 siret: "", siren: "", tva_intra: "", code_naf: "", forme_juridique: "",
//                 categorie_tarifaire: null, categorie_comptable: null,
//                 conditions_reglement_code: "", conditions_reglement_libelle: "",
//                 mode_reglement_code: "", mode_reglement_libelle: "",
//                 iban_principal: "", bic_principal: "", encours_autorise: 0, compte_general: "",
//             });
//         }
//     }, [open, editing]);

//     // Calcul completion
//     useEffect(() => {
//         const requiredFields = ['numero', 'intitule', 'email', 'telephone'];
//         const filled = requiredFields.filter(f => !!(form as any)[f]);
//         setCompletion(Math.round((filled.length / requiredFields.length) * 100));
//     }, [form]);

//     const canSave = useMemo(() => {
//         return !!form.intitule && !!form.numero;
//     }, [form.intitule, form.numero]);

//     const updateForm = (field: keyof Fournisseur, value: any) => {
//         setForm(prev => ({ ...prev, [field]: value }));
//     };

//     async function onSave() {
//         try {
//             if (isEditing) {
//                 const payload: FournisseurUpdateRequest = {
//                     intitule: form.intitule!,
//                     adresse: form.adresse,
//                     code_postal: form.code_postal,
//                     ville: form.ville,
//                     email: form.email,
//                     telephone: form.telephone,
//                     pays: form.pays,
//                     siret: form.siret,
//                     tva_intra: form.tva_intra,
//                     date_creation: (() => {
//                         const d = new Date();
//                         d.setDate(d.getDate() + 1);
//                         return d.toISOString().split("T")[0];
//                     })(),
//                 };

//                 const rep = await dispatch(updateFournisseur({
//                     numero: form.numero!,
//                     data: payload
//                 })).unwrap() as any;

//                 const dataResponse = rep.fournisseur as Fournisseur;
//                 toast({
//                     title: "Fournisseur mis à jour !",
//                     description: `Le fournisseur ${dataResponse.numero} a été mis à jour avec succès.`,
//                     className: "bg-green-500 text-white border-green-600"
//                 });

//                 setTimeout(() => {
//                     dispatch(selectfournisseur(dataResponse));
//                     navigate(`/home/fournisseurs/${dataResponse.numero}`);
//                 }, 1500);

//             } else {
//                 const payloadCreate: FournisseurRequest = {
//                     num: form.numero!,
//                     compte_collectif: form.compte_collectif,
//                     intitule: form.intitule!,
//                     adresse: form.adresse,
//                     code_postal: form.code_postal,
//                     ville: form.ville,
//                     email: form.email,
//                     telephone: form.telephone,
//                     pays: form.pays,
//                     siret: form.siret,
//                     tva_intra: form.tva_intra,
//                     date_creation: (() => {
//                         const d = new Date();
//                         d.setDate(d.getDate() + 1);
//                         return d.toISOString().split("T")[0];
//                     })(),
//                 };

//                 const rep = await dispatch(addFournisseur(payloadCreate)).unwrap() as any;
//                 const dataResponse = rep.data as Fournisseur;

//                 toast({
//                     title: "Fournisseur créé !",
//                     description: `Un nouveau fournisseur a été créé avec succès.`,
//                     className: "bg-green-500 text-white border-green-600"
//                 });

//                 setTimeout(() => {
//                     dispatch(selectfournisseur(dataResponse));
//                     navigate(`/home/fournisseurs/${dataResponse.numero}`);
//                 }, 1500);
//             }

//             onClose();
//         } catch (e) {
//             toast({
//                 title: "Erreur",
//                 description: "Une erreur est survenue.",
//                 variant: "destructive"
//             });
//         }
//     }

//     if (!open) return null;

//     return (
//         <AnimatePresence>
//             {open && (
//                 <>
//                     <motion.div
//                         initial={{ opacity: 0 }}
//                         animate={{ opacity: 1 }}
//                         exit={{ opacity: 0 }}
//                         onClick={onClose}
//                         className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50"
//                     />
//                     <motion.div
//                         initial={{ x: "100%" }}
//                         animate={{ x: 0 }}
//                         exit={{ x: "100%" }}
//                         transition={{ type: "spring", damping: 25, stiffness: 200 }}
//                         className="fixed inset-y-0 right-0 w-full max-w-xl bg-white dark:bg-gray-950 shadow-2xl z-50 flex flex-col border-l border-gray-200 dark:border-gray-800"
//                     >
//                         {/* Header */}
//                         <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md">
//                             <div className="flex items-center gap-3">
//                                 <div className="w-10 h-10 rounded-xl bg-blue-600 text-white flex items-center justify-center">
//                                     <Truck className="w-5 h-5" />
//                                 </div>
//                                 <div>
//                                     <h2 className="text-lg font-bold text-gray-900 dark:text-white">
//                                         {title || (isEditing ? "Modifier le fournisseur" : "Nouveau fournisseur")}
//                                     </h2>
//                                     <p className="text-xs text-gray-500">{completion}% complété</p>
//                                 </div>
//                             </div>
//                             <button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors">
//                                 <X className="w-5 h-5 text-gray-500" />
//                             </button>
//                         </div>
//                         <Progress value={completion} className="h-1 rounded-none" />

//                         {/* Body */}
//                         <div className="flex-1 overflow-y-auto bg-gray-50/50 dark:bg-black/20">
//                             {/* Statut */}
//                             <div className="p-4 border-b border-gray-100 dark:border-gray-800">
//                                 <div className="flex gap-4">
//                                     <label className="flex items-center gap-2 cursor-pointer">
//                                         <input
//                                             type="checkbox"
//                                             checked={form.est_actif !== false}
//                                             onChange={(e) => updateForm('est_actif', e.target.checked)}
//                                             className="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-600"
//                                         />
//                                         <span className="text-sm text-gray-700 dark:text-gray-300">Actif</span>
//                                     </label>
//                                     <label className="flex items-center gap-2 cursor-pointer">
//                                         <input
//                                             type="checkbox"
//                                             checked={form.en_sommeil || false}
//                                             onChange={(e) => updateForm('en_sommeil', e.target.checked)}
//                                             className="w-4 h-4 text-orange-500 rounded border-gray-300 focus:ring-orange-500"
//                                         />
//                                         <span className="text-sm text-gray-700 dark:text-gray-300">En sommeil</span>
//                                     </label>
//                                 </div>
//                             </div>

//                             {/* Sections */}
//                             <Section title="Identification" icon={Hash} defaultOpen={true}>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <InputField label="Code fournisseur" required>
//                                         <input
//                                             type="text"
//                                             value={form.numero || ''}
//                                             onChange={(e) => updateForm('numero', e.target.value)}
//                                             disabled={isEditing}
//                                             placeholder="Ex: FOU001"
//                                             className={cn(inputClass(), isEditing && "bg-gray-100 dark:bg-gray-800 cursor-not-allowed")}
//                                         />
//                                     </InputField>
//                                     <InputField label="Compte collectif">
//                                         <input
//                                             type="text"
//                                             value={form.compte_collectif || ''}
//                                             onChange={(e) => updateForm('compte_collectif', e.target.value)}
//                                             placeholder="401000"
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                 </div>
//                                 <InputField label="Intitulé / Raison sociale" required>
//                                     <input
//                                         type="text"
//                                         value={form.intitule || ''}
//                                         onChange={(e) => updateForm('intitule', e.target.value)}
//                                         placeholder="Nom du fournisseur"
//                                         className={inputClass()}
//                                     />
//                                 </InputField>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <InputField label="Forme juridique">
//                                         <select
//                                             value={form.forme_juridique || ''}
//                                             onChange={(e) => updateForm('forme_juridique', e.target.value)}
//                                             className={inputClass()}
//                                         >
//                                             <option value="">Sélectionner...</option>
//                                             <option value="SARL">SARL</option>
//                                             <option value="SAS">SAS</option>
//                                             <option value="SA">SA</option>
//                                             <option value="EURL">EURL</option>
//                                             <option value="EI">EI</option>
//                                         </select>
//                                     </InputField>
//                                     <InputField label="Code NAF">
//                                         <input
//                                             type="text"
//                                             value={form.code_naf || ''}
//                                             onChange={(e) => updateForm('code_naf', e.target.value)}
//                                             placeholder="Ex: 4651Z"
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                 </div>
//                             </Section>

//                             <Section title="Contact" icon={User} defaultOpen={true}>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <InputField label="Email">
//                                         <div className="relative">
//                                             <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
//                                             <input
//                                                 type="email"
//                                                 value={form.email || ''}
//                                                 onChange={(e) => updateForm('email', e.target.value)}
//                                                 placeholder="contact@fournisseur.com"
//                                                 className={cn(inputClass(), "pl-10")}
//                                             />
//                                         </div>
//                                     </InputField>
//                                     <InputField label="Téléphone">
//                                         <div className="relative">
//                                             <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
//                                             <input
//                                                 type="tel"
//                                                 value={form.telephone || ''}
//                                                 onChange={(e) => updateForm('telephone', e.target.value)}
//                                                 placeholder="01 23 45 67 89"
//                                                 className={cn(inputClass(), "pl-10")}
//                                             />
//                                         </div>
//                                     </InputField>
//                                 </div>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <InputField label="Portable">
//                                         <input
//                                             type="tel"
//                                             value={form.portable || ''}
//                                             onChange={(e) => updateForm('portable', e.target.value)}
//                                             placeholder="06 12 34 56 78"
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                     <InputField label="Fax">
//                                         <input
//                                             type="tel"
//                                             value={form.telecopie || ''}
//                                             onChange={(e) => updateForm('telecopie', e.target.value)}
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                 </div>
//                                 <InputField label="Site web">
//                                     <div className="relative">
//                                         <Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
//                                         <input
//                                             type="url"
//                                             value={form.site_web || ''}
//                                             onChange={(e) => updateForm('site_web', e.target.value)}
//                                             placeholder="https://..."
//                                             className={cn(inputClass(), "pl-10")}
//                                         />
//                                     </div>
//                                 </InputField>
//                             </Section>

//                             <Section title="Adresse" icon={MapPin} defaultOpen={true}>
//                                 <InputField label="Adresse">
//                                     <input
//                                         type="text"
//                                         value={form.adresse || ''}
//                                         onChange={(e) => updateForm('adresse', e.target.value)}
//                                         placeholder="Numéro et nom de rue"
//                                         className={inputClass()}
//                                     />
//                                 </InputField>
//                                 <InputField label="Complément">
//                                     <input
//                                         type="text"
//                                         value={form.complement || ''}
//                                         onChange={(e) => updateForm('complement', e.target.value)}
//                                         placeholder="Bâtiment, étage..."
//                                         className={inputClass()}
//                                     />
//                                 </InputField>
//                                 <div className="grid grid-cols-3 gap-4">
//                                     <InputField label="Code postal">
//                                         <input
//                                             type="text"
//                                             value={form.code_postal || ''}
//                                             onChange={(e) => updateForm('code_postal', e.target.value)}
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                     <InputField label="Ville" className="col-span-2">
//                                         <input
//                                             type="text"
//                                             value={form.ville || ''}
//                                             onChange={(e) => updateForm('ville', e.target.value)}
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                 </div>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <InputField label="Région">
//                                         <input
//                                             type="text"
//                                             value={form.region || ''}
//                                             onChange={(e) => updateForm('region', e.target.value)}
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                     <InputField label="Pays">
//                                         <input
//                                             type="text"
//                                             value={form.pays || ''}
//                                             onChange={(e) => updateForm('pays', e.target.value)}
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                 </div>
//                             </Section>

//                             <Section title="Informations légales" icon={Building2} defaultOpen={false}>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <InputField label="SIRET">
//                                         <input
//                                             type="text"
//                                             value={form.siret || ''}
//                                             onChange={(e) => updateForm('siret', e.target.value)}
//                                             placeholder="14 chiffres"
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                     <InputField label="SIREN">
//                                         <input
//                                             type="text"
//                                             value={form.siren || ''}
//                                             onChange={(e) => updateForm('siren', e.target.value)}
//                                             placeholder="9 chiffres"
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                 </div>
//                                 <InputField label="TVA Intracommunautaire">
//                                     <input
//                                         type="text"
//                                         value={form.tva_intra || ''}
//                                         onChange={(e) => updateForm('tva_intra', e.target.value)}
//                                         placeholder="FR12345678901"
//                                         className={inputClass()}
//                                     />
//                                 </InputField>
//                             </Section>

//                             <Section title="Conditions de paiement" icon={CreditCard} defaultOpen={false}>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <InputField label="Conditions de règlement">
//                                         <select
//                                             value={form.conditions_reglement_code || ''}
//                                             onChange={(e) => updateForm('conditions_reglement_code', e.target.value)}
//                                             className={inputClass()}
//                                         >
//                                             <option value="">Sélectionner...</option>
//                                             <option value="30">30 jours</option>
//                                             <option value="45">45 jours</option>
//                                             <option value="60">60 jours</option>
//                                             <option value="90">90 jours</option>
//                                         </select>
//                                     </InputField>
//                                     <InputField label="Mode de règlement">
//                                         <select
//                                             value={form.mode_reglement_code || ''}
//                                             onChange={(e) => updateForm('mode_reglement_code', e.target.value)}
//                                             className={inputClass()}
//                                         >
//                                             <option value="">Sélectionner...</option>
//                                             <option value="virement">Virement</option>
//                                             <option value="cheque">Chèque</option>
//                                             <option value="prelevement">Prélèvement</option>
//                                             <option value="lcr">LCR</option>
//                                         </select>
//                                     </InputField>
//                                 </div>
//                             </Section>

//                             <Section title="Coordonnées bancaires" icon={Banknote} defaultOpen={false}>
//                                 <InputField label="IBAN">
//                                     <input
//                                         type="text"
//                                         value={form.iban_principal || ''}
//                                         onChange={(e) => updateForm('iban_principal', e.target.value)}
//                                         placeholder="FR76 XXXX XXXX XXXX XXXX XXXX XXX"
//                                         className={cn(inputClass(), "font-mono")}
//                                     />
//                                 </InputField>
//                                 <InputField label="BIC">
//                                     <input
//                                         type="text"
//                                         value={form.bic_principal || ''}
//                                         onChange={(e) => updateForm('bic_principal', e.target.value)}
//                                         placeholder="BNPAFRPP"
//                                         className={cn(inputClass(), "font-mono")}
//                                     />
//                                 </InputField>
//                             </Section>

//                             <Section title="Comptabilité" icon={CreditCard} defaultOpen={false}>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <InputField label="Compte général">
//                                         <input
//                                             type="text"
//                                             value={form.compte_general || ''}
//                                             onChange={(e) => updateForm('compte_general', e.target.value)}
//                                             placeholder="401000"
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                     <InputField label="Encours autorisé (€)">
//                                         <input
//                                             type="number"
//                                             value={form.encours_autorise || ''}
//                                             onChange={(e) => updateForm('encours_autorise', parseFloat(e.target.value) || 0)}
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                 </div>
//                                 <div className="grid grid-cols-2 gap-4">
//                                     <InputField label="Catégorie tarifaire">
//                                         <input
//                                             type="text"
//                                             value={form.categorie_tarifaire?.toString() || ''}
//                                             onChange={(e) => updateForm('categorie_tarifaire', e.target.value ? parseInt(e.target.value) : null)}
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                     <InputField label="Catégorie comptable">
//                                         <input
//                                             type="text"
//                                             value={form.categorie_comptable?.toString() || ''}
//                                             onChange={(e) => updateForm('categorie_comptable', e.target.value ? parseInt(e.target.value) : null)}
//                                             className={inputClass()}
//                                         />
//                                     </InputField>
//                                 </div>
//                             </Section>
//                         </div>

//                         {/* Footer */}
//                         <div className="p-4 border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 flex justify-end gap-3">
//                             <button
//                                 type="button"
//                                 onClick={onClose}
//                                 className="px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors"
//                             >
//                                 Annuler
//                             </button>
//                             <button
//                                 onClick={onSave}
//                                 disabled={!canSave || statusFournisseur === "loading"}
//                                 className="inline-flex items-center gap-2 px-6 py-2.5 bg-[#00D639] text-white text-sm font-medium rounded-xl hover:bg-[#7a1002] disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-lg shadow-red-900/20"
//                             >
//                                 {statusFournisseur === "loading" ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
//                                 {isEditing ? "Mettre à jour" : "Créer le fournisseur"}
//                             </button>
//                         </div>
//                     </motion.div>
//                 </>
//             )}
//         </AnimatePresence>
//     );
// }