/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
import FormModal, { FormSection, FormField } from '@/components/ui/FormModal';
import { AlertTriangle, Calendar, FileText, Plus, Save, Trash2, Truck } from "lucide-react";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import ClientAutocomplete from "../molecules/ClientAutocomplete";
import { useEffect, useMemo, useState } from "react";
import { Client } from "@/types/clientType";
import ArticleAutocomplete from "../molecules/ArticleAutocomplete";
import { Article } from "@/types/articleType";
import { Alert, CircularProgress, Divider } from "@mui/material";
import Button from '@mui/material/Button';
import { useNavigate } from "react-router-dom";
import { toast } from "../ui/use-toast";
import { Commande, CommandeRequest, CommandeResponse, LigneCommande } from '@/types/commandeTypes';
import { commandeStatus } from '@/store/features/commande/selectors';
import { createCommande, getCommande, updateCommande } from '@/store/features/commande/thunk';
import { selectcommande } from '@/store/features/commande/slice';
import { Input } from '../ui/ui';
import { ModalLoading } from './ModalLoading';
import { formatForDateInput } from '@/lib/utils';

interface LigneForm extends LigneCommande {
    article?: Article | null;
    remiseValide?: boolean;
}

export function ModalCommande({
    open,
    onClose,
    title,
    editing
}: {
    open: boolean;
    onClose: () => void;
    title?: string;
    editing?: Commande | null;
}) {
    const navigate = useNavigate();
    const dispatch = useAppDispatch();
    const statusCommande = useAppSelector(commandeStatus);

    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [success, setSuccess] = useState(false);

    // Nouveaux champs
    const [dateCommande, setDateCommande] = useState(() => {
        const d = new Date();
        d.setDate(d.getDate() + 1);
        return d.toISOString().split("T")[0];
    });

    // date livraison
    const [dateLivraison, setDateLivraison] = useState(() => {
        const d = new Date()
        d.setDate(d.getDate() + 8);
        return d.toISOString().split("T")[0];
    });

    const [referenceClient, setReferenceClient] = useState('');
    const [adresseLivraison, setAdresseLivraison] = useState('');

    const [clientSelectionne, setClientSelectionne] = useState<Client | null>(null);
    const [lignes, setLignes] = useState<LigneForm[]>([
        { article_code: '', quantite: 1, remise_pourcentage: 0, article: null, remiseValide: true },
    ]);

    const isEditing = !!editing;

    useEffect(() => {
        if (!open) return;

        if (editing) {
            setClientSelectionne({
                numero: editing.client_code,
                intitule: editing.client_intitule,
                compte_collectif: "",
                adresse: "",
                code_postal: "",
                ville: "",
                email: "",
                telephone: "",
            } as Client);

            const lignesInitiales: LigneForm[] = editing.lignes!.map(ligne => ({
                article_code: ligne.article_code,
                quantite: ligne.quantite,
                prix_unitaire_ht: ligne.prix_unitaire_ht,
                remise_pourcentage: 0,
                article: {
                    reference: ligne.article_code,
                    designation: ligne.designation,
                    prix_vente: ligne.prix_unitaire_ht,
                } as Article,
                remiseValide: true,
            }));

            setLignes(lignesInitiales.length > 0 ? lignesInitiales : [
                { article_code: '', quantite: 1, remise_pourcentage: 0, article: null, remiseValide: true }
            ]);

            if (editing.date) setDateCommande(editing.date);
            if(editing.date_livraison) setDateLivraison(editing.date_livraison);
            setReferenceClient(editing.reference || '');
        } else {
            setClientSelectionne(null);
            setLignes([
                { article_code: '', quantite: 1, remise_pourcentage: 0, article: null, remiseValide: true }
            ]);
            setDateCommande(new Date().toISOString().split('T')[0]);
            setDateLivraison(() => {
                const d = new Date()
                d.setDate(d.getDate() + 8);
                return d.toISOString().split("T")[0];
            });
            setReferenceClient('');
            setAdresseLivraison('');
        }

        setError(null);
        setSuccess(false);
    }, [open, editing]);

    const appliquerBareme = async (index: number, articleRef: string) => {
        if (!clientSelectionne) return;
        try {
            // Logique d'application du barème
        } catch (err) {
            console.error('Erreur application barème:', err);
        }
    };

    const ajouterLigne = () => {
        setLignes([
            ...lignes,
            { article_code: '', quantite: 1, remise_pourcentage: 0, article: null, remiseValide: true },
        ]);
    };

    const supprimerLigne = (index: number) => {
        if (lignes.length > 1) {
            setLignes(lignes.filter((_, i) => i !== index));
        }
    };

    const updateLigne = (index: number, field: keyof LigneForm, value: any) => {
        const nouvelles = [...lignes];

        if (field === 'article' && value) {
            nouvelles[index].article = value;
            nouvelles[index].article_code = value.reference;
            nouvelles[index].prix_unitaire_ht = value.prix_vente;

            if (clientSelectionne) {
                appliquerBareme(index, value.reference);
            }
        } else {
            (nouvelles[index] as any)[field] = value;
        }

        setLignes(nouvelles);
    };

    const calculerTotalLigne = (ligne: LigneForm) => {
        if (!ligne.article) return 0;
        const prix = ligne.prix_unitaire_ht || ligne.article.prix_vente;
        const montantBrut = prix * ligne.quantite;
        const remise = montantBrut * ((ligne.remise_pourcentage || 0) / 100);
        return montantBrut - remise;
    };

    const calculerTotal = () => {
        return lignes.reduce((total, ligne) => total + calculerTotalLigne(ligne), 0);
    };

    const toutesRemisesValides = () => {
        return lignes.every((ligne) => ligne.remiseValide !== false);
    };

    const canSave = useMemo(() => {
        if (!clientSelectionne) return false;
        const lignesValides = lignes.filter((l) => l.article_code);
        if (lignesValides.length === 0) return false;
        if (!toutesRemisesValides()) return false;
        return true;
    }, [clientSelectionne, lignes]);

    const onSave = async () => {
        if (!clientSelectionne) {
            setError('Veuillez sélectionner un client');
            return;
        }

        const lignesValides = lignes.filter((l) => l.article_code);

        if (lignesValides.length === 0) {
            setError('Veuillez ajouter au moins un article');
            return;
        }

        if (!toutesRemisesValides()) {
            setError('Certaines remises ne sont pas autorisées. Veuillez les corriger.');
            return;
        }

        try {
            setLoading(true);
            setError(null);

            if (isEditing) {
                const payloadUpdate = {
                    client_id: clientSelectionne.numero,
                    reference: referenceClient,
                    date_livraison: (() => {
                        const d = new Date(dateLivraison);
                        d.setDate(d.getDate() + 1);
                        return d.toISOString().split("T")[0];
                    })(),
                    date_commande: (() => {
                        const d = new Date(dateCommande);
                        d.setDate(d.getDate() + 1);
                        return d.toISOString().split("T")[0];
                    })(),
                    lignes: lignesValides.map((l) => ({
                        article_code: l.article_code,
                        quantite: l.quantite
                    })),
                };

                const result = await dispatch(updateCommande({
                    numero: editing!.numero,
                    data: payloadUpdate
                })).unwrap() as any;

                const numero = result.commande.numero as any;

                setSuccess(true);
                toast({
                    title: "Commande mise à jour !",
                    description: `La commande a été mise à jour avec succès.`,
                    className: "bg-green-500 text-white border-green-600"
                });

                setTimeout(async () => {
                    const itemCreated = await dispatch(getCommande(numero)).unwrap() as any;
                    const res = itemCreated as Commande;
                    dispatch(selectcommande(res));
                    navigate(`/home/commandes/${numero}`);
                }, 1500);

            } else {
                const payloadCreate: CommandeRequest = {
                    client_id: clientSelectionne.numero,
                    reference: referenceClient,
                    date_livraison: (() => {
                        const d = new Date(dateLivraison);
                        d.setDate(d.getDate() + 1);
                        return d.toISOString().split("T")[0];
                    })(),
                    date_commande: (() => {
                        const d = new Date(dateCommande);
                        d.setDate(d.getDate() + 1);
                        return d.toISOString().split("T")[0];
                    })(),
                    lignes: lignesValides.map((l) => ({
                        article_code: l.article_code,
                        quantite: l.quantite,
                    })),
                };

                console.log("payloadCreate: ",payloadCreate);
                
                const result = await dispatch(createCommande(payloadCreate)).unwrap() as CommandeResponse;

                const data = result.data;

                setSuccess(true);
                toast({
                    title: "Commande créée !",
                    description: `Une nouvelle commande ${data.numero_commande} a été créée avec succès.`,
                    className: "bg-green-500 text-white border-green-600"
                });

                setTimeout(async () => {
                    const itemCreated = await dispatch(getCommande(data.numero_commande)).unwrap() as any;
                    const res = itemCreated as Commande;
                    dispatch(selectcommande(res));
                    navigate(`/home/commandes/${data.numero_commande}`);
                }, 1500);
            }

            onClose();
        } catch (err: any) {
            setError("Cet article n'est pas disponible pour ce client.");
        } finally {
            setLoading(false);
        }
    };

    const totalHT = calculerTotal();
    const totalTVA = totalHT * 0.20;
    const totalTTC = totalHT + totalTVA;
    const remisesNonAutorisees = lignes.filter((l) => l.remiseValide === false).length;
    const lignesValides = lignes.filter((l) => l.article_code).length;

    if (!open) return null;

    return (
        <FormModal
            isOpen={open}
            onClose={onClose}
            title={title || (isEditing ? "Modifier la commande" : "Créer une commande")}
            size="xl"
            onSubmit={onSave}
            loading={statusCommande === "loading" ? true : false}
        >
            {/* Section Client */}
            <FormSection title="Informations client" description="Sélectionnez le client et les coordonnées">
                <FormField label="Client" required fullWidth>
                    <ClientAutocomplete
                        value={clientSelectionne}
                        onChange={setClientSelectionne}
                        required
                    />
                </FormField>

                <div className="col-span-1 md:col-span-2 grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
                    <FormField label="Date de commande" required>
                        <Input 
                            type="date" 
                            value={formatForDateInput(dateCommande)}
                            onChange={(e) => setDateCommande(e.target.value)}
                        />
                    </FormField>
                    <FormField label="Livraison prévue" required>
                        <Input type="date" value={formatForDateInput(dateLivraison)} onChange={(e) => setDateLivraison(e.target.value)} />
                    </FormField>

                     <FormField label="Référence client">
                        <Input 
                        placeholder="Ex: REF-PROJET-123"
                            value={referenceClient}
                            onChange={(e) => setReferenceClient(e.target.value)}
                        />
                    </FormField>

                     <FormField label="Adresse de livraison">
                        <Input 
                            placeholder="Adresse par défaut du client"
                            value={adresseLivraison}
                            onChange={(e) => setAdresseLivraison(e.target.value)}
                        />
                    </FormField>
                </div>
            </FormSection>

            {/* Section Lignes */}
            <FormSection title="Lignes de la commande" description="Ajoutez les produits et services commandés">
                <div className="col-span-2">
                    <div className="overflow-x-auto">
                        <table className="w-full mb-4">
                            <thead className="text-left bg-gray-50 dark:bg-gray-900/50 text-xs uppercase text-gray-500">
                                <tr>
                                    <th className="px-4 py-3 rounded-l-lg" style={{ width: '55%' }}>Article / Description</th>
                                    <th className="px-2 py-3 text-center" style={{ width: '80px' }}>Qté</th>
                                    <th className="px-2 py-3 text-right" style={{ width: '100px' }}>P.U. HT</th>
                                    <th className="px-2 py-3 text-right rounded-r-lg" style={{ width: '100px' }}>Total HT</th>
                                    <th style={{ width: '40px' }}></th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
                                {lignes.map((ligne, index) => (
                                    <tr key={index} className="group hover:bg-gray-50/50 dark:hover:bg-gray-900/20">
                                         <td className="px-4 py-2 align-top">
                                            <ArticleAutocomplete
                                                value={ligne.article!}
                                                onChange={(article) => updateLigne(index, 'article', article)}
                                                required
                                            />
                                        </td>

                                        <td className="px-2 py-2 align-top">
                                            <input
                                                type="number"
                                                value={ligne.quantite}
                                                onChange={(e) => updateLigne(index, 'quantite', parseFloat(e.target.value) || 0)}
                                                min={0}
                                                step={1}
                                                className="w-full text-right px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#941403] focus:border-transparent"
                                            />
                                        </td>

                                        <td className="px-2 py-2 align-top">
                                            <input
                                                type="number"
                                                value={ligne.prix_unitaire_ht || ligne.article?.prix_vente || 0}
                                                onChange={(e) => updateLigne(index, 'prix_unitaire_ht', parseFloat(e.target.value) || 0)}
                                                min={0}
                                                step={0.01}
                                                className="w-full text-right px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#941403] focus:border-transparent"
                                            />
                                        </td>

                                        <td className="px-2 py-3 text-right align-middle">
                                            <span className="font-semibold text-gray-900 dark:text-white">
                                                {calculerTotalLigne(ligne).toFixed(2)} €
                                            </span>
                                        </td>

                                        <td className="px-1 py-3 text-center align-middle">
                                            <button
                                                onClick={() => supprimerLigne(index)}
                                                disabled={lignes.length === 1}
                                                className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors disabled:opacity-30 disabled:cursor-not-allowed opacity-0 group-hover:opacity-100"
                                            >
                                                <Trash2 className="w-4 h-4" />
                                            </button>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>

                    <div className="flex justify-between items-start mt-4">
                        <button
                            onClick={ajouterLigne}
                            className="text-sm text-[#007E45] font-medium hover:underline flex items-center gap-1"
                        >
                            <Plus className="w-4 h-4" /> Ajouter une ligne
                        </button>

                        {/* Récapitulatif */}
                        <div style={{width: "42vh"}}  className="w-72 bg-orange-50 dark:bg-orange-900/20 rounded-xl p-4 space-y-3 border border-orange-100 dark:border-orange-800">
      

                            <Divider className="!my-3" />

                            <div className="flex justify-between text-sm">
                                <span className="text-gray-600 dark:text-gray-400">Total HT</span>
                                <span className="font-medium text-gray-900 dark:text-white">{totalHT.toFixed(2)} €</span>
                            </div>
                            <div className="flex justify-between text-sm">
                                <span className="text-gray-600 dark:text-gray-400">Taux TVA </span>
                                <span className="font-medium text-gray-900 dark:text-white">20%</span>
                            </div>
                            <div className="pt-3 border-t border-orange-200 dark:border-orange-700 flex justify-between">
                                <span className="font-bold text-gray-900 dark:text-white">Total TTC</span>
                                <span className="font-bold text-[#007E45] text-lg">{totalTTC.toFixed(2)} €</span>
                            </div>
                        </div>
                    </div>
                </div>
            </FormSection>

            {/* Alertes */}
            {remisesNonAutorisees > 0 && (
                <Alert severity="warning" icon={<AlertTriangle size={16} />} className="mb-4">
                    {remisesNonAutorisees} remise(s) non autorisée(s) à corriger
                </Alert>
            )}

            {error && (
                <Alert severity="error" className="mb-4">{error}</Alert>
            )}


            {
                loading && (
                    <ModalLoading/>
                )
            }
        </FormModal>
    );
}


// /* eslint-disable @typescript-eslint/no-unused-vars */
// /* eslint-disable @typescript-eslint/no-explicit-any */
// import FormModal, { FormSection, FormField, Input, Select, Textarea } from '@/components/ui/FormModal';
// import { AlertTriangle, Plus, Save, Trash2 } from "lucide-react";
// import { useAppDispatch, useAppSelector } from "@/store/hooks";
// import ClientAutocomplete from "../molecules/ClientAutocomplete";
// import { useEffect, useMemo, useState } from "react";
// import { Client } from "@/types/clientType";
// import ArticleAutocomplete from "../molecules/ArticleAutocomplete";
// import { Article } from "@/types/articleType";
// import { Alert, CircularProgress, Divider, IconButton, TextField, Tooltip } from "@mui/material";
// import Button from '@mui/material/Button';
// import { useNavigate } from "react-router-dom";
// import { toast } from "../ui/use-toast";
// import { Commande, CommandeRequest, CommandeResponse, LigneCommande } from '@/types/commandeTypes';
// import { commandeStatus } from '@/store/features/commande/selectors';
// import { createCommande, getCommande, updateCommande } from '@/store/features/commande/thunk';
// import { selectcommande } from '@/store/features/commande/slice';

// interface LigneForm extends LigneCommande {
//     article?: Article | null;
//     remiseValide?: boolean;
// }

// export function ModalCommande({
//   open,
//   onClose,
//   title,
//   editing
// }: {
//   open: boolean;
//   onClose: () => void;
//   title?: string;
//   editing?: Commande | null;
// }) {
//     const navigate = useNavigate();
//     const dispatch = useAppDispatch();
//     const statusCommande = useAppSelector(commandeStatus);
    
//     const [loading, setLoading] = useState(false);
//     const [error, setError] = useState<string | null>(null);
//     const [success, setSuccess] = useState(false);

//     const [clientSelectionne, setClientSelectionne] = useState<Client | null>(null);
//     const [lignes, setLignes] = useState<LigneForm[]>([
//         { article_code: '', quantite: 1, remise_pourcentage: 0, article: null, remiseValide: true },
//     ]);

//     const isEditing = !!editing;


//     // Initialiser le formulaire avec les données d'édition
//     useEffect(() => {
//         if (!open) return;

//         if (editing) {
//             // Charger les données du devis à modifier
//             setClientSelectionne({
//                 numero: editing.client_code,
//                 intitule: editing.client_intitule,
//                 compte_collectif: "",
//                 adresse: "",
//                 code_postal: "",
//                 ville: "",
//                 email: "",
//                 telephone: "",
//             } as Client);
//             // Charger les lignes du devis
//             const lignesInitiales: LigneForm[] = editing.lignes!.map(ligne => ({
//                 article_code: ligne.article,
//                 quantite: ligne.quantite,
//                 prix_unitaire_ht: ligne.prix_unitaire,
//                 remise_pourcentage: 0,
//                 article: {
//                     reference: ligne.article,
//                     designation: ligne.designation,
//                     prix_vente: ligne.prix_unitaire,
//                 } as Article,
//                 remiseValide: true,
//             }));

//             setLignes(lignesInitiales.length > 0 ? lignesInitiales : [
//                 { article_code: '', quantite: 1, remise_pourcentage: 0, article: null, remiseValide: true }
//             ]);
//         } else {
//             // Réinitialiser pour création
//             setClientSelectionne(null);
//             setLignes([
//                 { article_code: '', quantite: 1, remise_pourcentage: 0, article: null, remiseValide: true }
//             ]);
//         }

//         setError(null);
//         setSuccess(false);
//     }, [open, editing]);

//     const appliquerBareme = async (index: number, articleRef: string) => {
//         if (!clientSelectionne) return;

//         try {
//             // Logique d'application du barème
//         } catch (err) {
//             console.error('Erreur application barème:', err);
//         }
//     };

//     const ajouterLigne = () => {
//         setLignes([
//             ...lignes,
//             { article_code: '', quantite: 1, remise_pourcentage: 0, article: null, remiseValide: true },
//         ]);
//     };

//     const supprimerLigne = (index: number) => {
//         if (lignes.length > 1) {
//             setLignes(lignes.filter((_, i) => i !== index));
//         }
//     };

//     const updateLigne = (index: number, field: keyof LigneForm, value: any) => {
//         const nouvelles = [...lignes];

//         if (field === 'article' && value) {
//             nouvelles[index].article = value;
//             nouvelles[index].article_code = value.reference;
//             nouvelles[index].prix_unitaire_ht = value.prix_vente;

//             if (clientSelectionne) {
//                 appliquerBareme(index, value.reference);
//             }
//         } else {
//             (nouvelles[index] as any)[field] = value;
//         }

//         setLignes(nouvelles);
//     };

//     const calculerTotal = () => {
//         return lignes.reduce((total, ligne) => {
//             if (!ligne.article) return total;
//             const prix = ligne.prix_unitaire_ht || ligne.article.prix_vente;
//             const montantBrut = prix * ligne.quantite;
//             const remise = montantBrut * ((ligne.remise_pourcentage || 0) / 100);

//             return total + (montantBrut - remise);
//         }, 0);
//     };

//     const toutesRemisesValides = () => {
//         return lignes.every((ligne) => ligne.remiseValide !== false);
//     };

//     const canSave = useMemo(() => {
//         if (!clientSelectionne) return false;
//         const lignesValides = lignes.filter((l) => l.article_code);
//         if (lignesValides.length === 0) return false;
//         if (!toutesRemisesValides()) return false;
//         return true;
//     }, [clientSelectionne, lignes]);

//     const onSave = async () => {
//         if (!clientSelectionne) {
//             setError('Veuillez sélectionner un client');
//             return;
//         }

//         const lignesValides = lignes.filter((l) => l.article_code);

//         if (lignesValides.length === 0) {
//             setError('Veuillez ajouter au moins un article');
//             return;
//         }

//         if (!toutesRemisesValides()) {
//             setError('Certaines remises ne sont pas autorisées. Veuillez les corriger.');
//             return;
//         }

//         try {
//             setLoading(true);
//             setError(null);

//             if (isEditing) {
//                 // ✅ MODE MODIFICATION
//                 const payloadUpdate = {
//                     client_id: clientSelectionne.numero,
//                     date_commande: (() => {
//                         const d = new Date();
//                         d.setDate(d.getDate() + 1);
//                         return d.toISOString().split("T")[0];
//                     })(),
//                     lignes: lignesValides.map((l) => ({
//                         article_code: l.article_code,
//                         quantite: l.quantite
//                     })),
//                 };


//                 const result = await dispatch(updateCommande({
//                     numero: editing!.numero,
//                     data: payloadUpdate
//                 })).unwrap() as any;

//                 console.log("result : ",result.commande);
                
                
//                 const numero = result.commande.numero as any

//                 setSuccess(true);
//                 toast({
//                     title: "Commande mis à jour !",
//                     description: `Le devis  a été mis à jour avec succès.`,
//                     className: "bg-green-500 text-white border-green-600"
//                 });

//                 setTimeout(async () => {
//                     const itemCreated = await dispatch(getCommande(numero)).unwrap() as any
//                     const res = itemCreated as Commande
//                     dispatch(selectcommande(res));
//                     navigate(`/home/commandes/${numero}`);
//                 }, 1500);

//             } else {
//                 // ✅ MODE CRÉATION
//                 const payloadCreate: CommandeRequest = {
//                     client_id: clientSelectionne.numero,
//                     date_commande: (() => {
//                         const d = new Date();
//                         d.setDate(d.getDate() + 1);
//                         return d.toISOString().split("T")[0];
//                     })(),
//                     lignes: lignesValides.map((l) => ({
//                         article_code: l.article_code,
//                         quantite: l.quantite,
//                     })),
//                 };

//                 const result = await dispatch(createCommande(payloadCreate)).unwrap() as CommandeResponse
                
//                 const data = result.data

//                 setSuccess(true);
//                 toast({
//                     title: "Commande créé !",
//                     description: `Un nouveau commande ${data.numero_commande} a été créé avec succès.`,
//                     className: "bg-green-500 text-white border-green-600"
//                 });

//                 setTimeout(async () => {
//                     const itemCreated = await dispatch(getCommande(data.numero_commande)).unwrap() as any
//                     const res = itemCreated as Commande
//                     dispatch(selectcommande(res));
//                     navigate(`/home/commandes/${data.numero_commande}`);
//                 }, 1500);
//             }

//             onClose();
//         } catch (err: any) {
//             setError("Cet article n’est pas disponible pour ce client.");
//         } finally {
//             setLoading(false);
//         }
//     };

//     const totalHT = calculerTotal();
//     const totalTTC = totalHT * 1.2;
//     const remisesNonAutorisees = lignes.filter((l) => l.remiseValide === false).length;

//     if (!open) return null;

//     return (
//         <FormModal
//             isOpen={open}
//             onClose={onClose}
//             title={title || (isEditing ? "Modifier le commande" : "Créer un commande")}
//             size="xl"
//         >
//             <FormSection title="Informations client" description="Sélectionnez le client et les coordonnées">
//                 <FormField label="Client" required fullWidth>
//                     <ClientAutocomplete
//                         value={clientSelectionne}
//                         onChange={setClientSelectionne}
//                         required
//                     />
//                 </FormField>
//             </FormSection>

//             <FormSection title="Lignes du devis" description="Ajoutez les produits et services">
//                 <div className="col-span-2">
//                     <table className="w-full mb-4">
//                         <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
//                             {lignes.map((ligne, index) => (
//                                 <tr key={index}>
//                                     <td className="py-2 pr-2">
//                                         <ArticleAutocomplete
//                                             value={ligne.article}
//                                             onChange={(article) => updateLigne(index, 'article', article)}
//                                             required
//                                         />
//                                     </td>

//                                     <td className="py-2 px-1">
//                                         <TextField
//                                             type="number"
//                                             label="Quantité"
//                                             value={ligne.quantite}
//                                             onChange={(e) =>
//                                                 updateLigne(index, 'quantite', parseFloat(e.target.value) || 0)
//                                             }
//                                             inputProps={{ min: 0, step: 1 }}
//                                             fullWidth
//                                             size="small"
//                                         />
//                                     </td>

//                                     <td className="py-2 px-1">
//                                         <TextField
//                                             type="number"
//                                             label="Prix Unit. HT"
//                                             value={ligne.prix_unitaire_ht || ligne.article?.prix_vente || 0}
//                                             onChange={(e) =>
//                                                 updateLigne(index, 'prix_unitaire_ht', parseFloat(e.target.value) || 0)
//                                             }
//                                             inputProps={{ min: 0, step: 0.01 }}
//                                             fullWidth
//                                             size="small"
//                                         />
//                                     </td>
//                                     <td className="py-2 pl-2">
//                                         <IconButton
//                                             onClick={() => supprimerLigne(index)}
//                                             color="error"
//                                             disabled={lignes.length === 1}
//                                             size="small"
//                                         >
//                                             <Trash2 size={18} />
//                                         </IconButton>
//                                     </td>
//                                 </tr>
//                             ))}
//                         </tbody>
//                     </table>
//                     <Button
//                         startIcon={<Plus size={12} />}
//                         onClick={ajouterLigne}
//                         size="small"
//                         sx={{
//                             textTransform: 'capitalize',
//                             color: '#C94635',
//                             fontSize: 12
//                         }}
//                     >
//                         Ajouter une ligne
//                     </Button>
//                 </div>
//             </FormSection>

//             <FormSection title="Récapitulatif" description="Résumé du devis">
//                 <div className="col-span-2">
//                     <div className="flex flex-col gap-3">
//                         <div className="flex justify-between text-sm">
//                             <span className="text-gray-600">Client :</span>
//                             <span className="font-medium">
//                                 {clientSelectionne?.intitule || '-'}
//                             </span>
//                         </div>

//                         <div className="flex justify-between text-sm">
//                             <span className="text-gray-600">Nombre de lignes :</span>
//                             <span className="font-medium">
//                                 {lignes.filter((l) => l.article_code).length}
//                             </span>
//                         </div>

//                         {remisesNonAutorisees > 0 && (
//                             <Alert severity="warning" icon={<AlertTriangle size={16} />}>
//                                 {remisesNonAutorisees} remise(s) à corriger
//                             </Alert>
//                         )}

//                         {error && (
//                             <Alert severity="error">{error}</Alert>
//                         )}

//                         <Divider />

//                         <div className="flex justify-between">
//                             <span className="font-medium">Total HT :</span>
//                             <span className="font-bold">
//                                 {totalHT.toFixed(2)} €
//                             </span>
//                         </div>

//                         <div className="flex justify-between text-sm">
//                             <span className="text-gray-600">TVA (20%) :</span>
//                             <span>{(totalTTC - totalHT).toFixed(2)} €</span>
//                         </div>

//                         <div className="flex justify-between">
//                             <span className="font-medium">Total TTC :</span>
//                             <span className="font-bold text-green-600">
//                                 {totalTTC.toFixed(2)} €
//                             </span>
//                         </div>
//                     </div>
//                 </div>
//             </FormSection>

//             <div className="flex flex-row items-end justify-end">
//                 <Button
//                     variant="contained"
//                     startIcon={statusCommande === "loading" ? <CircularProgress size={18} /> : <Save size={18} />}
//                     onClick={onSave}
//                     disabled={!canSave || statusCommande === "loading"}
//                     sx={{
//                         textTransform: 'capitalize',
//                         backgroundColor: '#941403',
//                         color: '#fff',
//                         '&:hover': {
//                             backgroundColor: '#941403',
//                         }
//                     }}
//                 >
//                     {statusCommande === "loading" 
//                         ? (isEditing ? "Enregistrement..." : "Création...") 
//                         : (isEditing ? "Enregistrer" : "Créer")}
//                 </Button>
//             </div>
//         </FormModal>
//     );
// }
