import React, { useState } from 'react';
import { Helmet } from 'react-helmet';
import { useNavigate } from 'react-router-dom';
import {
  ArrowLeft, Mail, Phone, MapPin, Building2, Globe, CreditCard,
  User, Package, Truck, FileText, History, Plus, Edit, Trash2,
  Star, MoreVertical, Calendar, Briefcase, Banknote, Hash
} from 'lucide-react';
import { motion } from 'framer-motion';
import { useAppSelector } from '@/store/hooks';
import { getfournisseurSelected } from '@/store/features/fournisseur/selectors';
import { Fournisseur } from '@/types/fournisseurType';
import Tabs from '@/components/Tabs';
import StatusBadge from '@/components/StatusBadget';
import Timeline from '@/components/Timeline';
import PrimaryButton_v2 from '@/components/PrimaryButton_v2';
import { toast } from '@/components/ui/use-toast';
import ToggleSwitch from '@/components/ui/ToggleSwitch';
import { ModalFournisseur } from '@/components/modal/ModalFournisseur';
import StatusBadgetLettre from '@/components/StatusBadgetLettre';
import { Contacts } from '@/types/clientType';
import ModalContact from '@/components/modal/ModalContact';

// Composants réutilisables
const InfoCard = ({ icon: Icon, label, value }: { icon: any; label: string; value?: string | number | null }) => {
  if (!value) return null;
  return (
    <div className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-900 rounded-xl">
      <Icon className="w-5 h-5 text-gray-400 flex-shrink-0" />
      <div className="min-w-0">
        <p className="text-xs text-gray-500 dark:text-gray-400 uppercase">{label}</p>
        <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{value}</p>
      </div>
    </div>
  );
};

const InfoRow = ({ label, value }: { label: string; value?: string | number | null }) => {
  if (!value) return null;
  return (
    <div>
      <p className="text-xs text-gray-500 uppercase">{label}</p>
      <p className="font-medium text-gray-900 dark:text-white mt-1">{value}</p>
    </div>
  );
};

const SectionCard = ({ icon: Icon, title, children }: { icon: any; title: string; children: React.ReactNode }) => (
  <div className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-6">
    <h3 className="text-lg font-bold mb-4 flex items-center gap-2 text-gray-900 dark:text-white">
      <Icon className="w-5 h-5 text-[#007E45]" /> {title}
    </h3>
    {children}
  </div>
);

const ContactCard = ({ contact, onEdit, onDelete, onSetDefault }: any) => (
  <div className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl p-5 hover:shadow-md transition-shadow">
    <div className="flex justify-between items-start mb-4">
      <div className="flex items-center gap-3">
        <div className="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-600 dark:text-gray-300 font-bold">
          {contact.nom?.[0] || contact.prenom?.[0] || 'C'}
        </div>
        <div>
          <h4 className="font-bold text-gray-900 dark:text-white">
            {contact.prenom} {contact.nom}
          </h4>
          <p className="text-xs text-gray-500">{contact.fonction || 'Pas de fonction définie'}</p>
        </div>
      </div>
      {contact.est_principal && (
        <span className="px-2 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-[10px] font-bold uppercase tracking-wider rounded-full border border-green-200 dark:border-green-800">
          Principal
        </span>
      )}
    </div>

    <div className="space-y-2 mb-4">
      {contact.email && (
        <a href={`mailto:${contact.email}`} className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-[#941403] transition-colors">
          <Mail className="w-4 h-4" /> {contact.email}
        </a>
      )}
      {contact.telephone && (
        <a href={`tel:${contact.telephone}`} className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-[#941403] transition-colors">
          <Phone className="w-4 h-4" /> {contact.telephone}
        </a>
      )}
    </div>

    <div className="pt-4 border-t border-gray-100 dark:border-gray-800 flex justify-end gap-2">
      {!contact.est_principal && (
        <button onClick={() => onSetDefault?.(contact)} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg text-gray-400 hover:text-yellow-500 transition-colors" title="Définir comme principal">
          <Star className="w-4 h-4" />
        </button>
      )}
      <button onClick={() => onEdit?.(contact)} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg text-gray-400 hover:text-blue-500 transition-colors" title="Modifier">
        <Edit className="w-4 h-4" />
      </button>
      <button onClick={() => onDelete?.(contact)} className="p-2 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg text-gray-400 hover:text-red-500 transition-colors" title="Supprimer">
        <Trash2 className="w-4 h-4" />
      </button>
    </div>
  </div>
);

const FournisseurDetailPage = () => {
  const navigate = useNavigate();
  const fournisseur = useAppSelector(getfournisseurSelected) as Fournisseur;
  const [activeTab, setActiveTab] = useState('identification');
  const [isActive, setIsActive] = useState(fournisseur?.est_actif ?? true);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [editing, setEditing] = useState<Fournisseur | null>(null);
  const [editingContact, setEditingContact] = useState<Contacts | null>(null);
  const [isCreateModalContactOpen, setIsCreateModalContactOpen] = useState(false);
  if (!fournisseur) {
    return (
      <div className="flex items-center justify-center h-64">
        <p className="text-gray-500">Fournisseur non trouvé</p>
      </div>
    );
  }

  const tabs = [
    { id: 'identification', label: 'Identification' },
    { id: 'contacts', label: 'Contacts', count: fournisseur.nb_contacts || fournisseur.contacts?.length || 0 },
    { id: 'bancaire', label: 'Coordonnées bancaires' },
    { id: 'commercial', label: 'Pièces d\'achat' },
    { id: 'timeline', label: 'Timeline' },
  ];

  const getBadges = () => {
    const badges = [];
    if (fournisseur.est_fournisseur) badges.push({ label: 'Fournisseur', color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300' });
    if (fournisseur.en_sommeil) badges.push({ label: 'En sommeil', color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/20 dark:text-orange-300' });
    if (!fournisseur.est_actif) badges.push({ label: 'Inactif', color: 'bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-300' });
    return badges;
  };

  const handleToggleActive = (newStatus: boolean) => {
    setIsActive(newStatus);
    toast({
      title: "Statut mis à jour",
      description: `Le fournisseur est maintenant ${newStatus ? 'Actif' : 'Inactif'}`,
      variant: "success"
    });
  };


  const handleEdit = (row: Fournisseur) => {
    setEditing(row);
    setIsCreateModalOpen(true);
  };

  const handleCreateContact = () => {
    setEditingContact(null);
    setIsCreateModalContactOpen(true);
  };
  
  const handleEditContact = (row: Contacts) => {
    setEditingContact(row);
    setIsCreateModalContactOpen(true);
  };

  return (
    <>
      <Helmet>
        <title>{fournisseur.intitule} - Fournisseurs - Dataven</title>
        <meta name="description" content={`Fiche fournisseur ${fournisseur.intitule}`} />
      </Helmet>

      <div className="space-y-6">
        {/* Navigation */}
        <button
          onClick={() => navigate('/home/fournisseurs')}
          className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors w-fit"
        >
          <ArrowLeft className="w-4 h-4" />
          Retour aux fournisseurs
        </button>

        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex flex-row xl:flex-row xl:items-center justify-between gap-4 bg-white dark:bg-gray-950 p-6 rounded-2xl border border-gray-200 dark:border-gray-800 shadow-sm"
        >
          <div className="flex items-start gap-4">
            <div style={{ width: "7vh", height: "7vh" }} className="w-16 h-16 rounded-2xl bg-[#007E45] text-white flex items-center justify-center text-2xl font-bold shadow-lg shadow-red-900/20">
              {fournisseur.intitule?.split(' ').map(n => n[0]).join('').slice(0, 2)}
            </div>
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-1">
                <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{fournisseur.intitule}</h1>
                <StatusBadgetLettre status={isActive ? 'actif' : 'inactif'} />
                <ToggleSwitch isActive={isActive} onChange={handleToggleActive} />
              </div>
              <div className="flex items-center gap-4 text-sm text-gray-500">
                <span className="font-mono">#{fournisseur.numero}</span>
                {fournisseur.ville && (
                  <span className="flex items-center gap-1">
                    <MapPin className="w-3.5 h-3.5" /> {fournisseur.ville}, {fournisseur.pays || 'France'}
                  </span>
                )}
                {fournisseur.forme_juridique && (
                  <span className="flex items-center gap-1">
                    <Building2 className="w-3.5 h-3.5" /> {fournisseur.forme_juridique}
                  </span>
                )}
              </div>
              <div className="flex flex-wrap items-center gap-2 mt-3">
                {getBadges().map((badge, i) => (
                  <span key={i} className={`px-2.5 py-0.5 rounded-lg text-xs font-medium ${badge.color}`}>
                    {badge.label}
                  </span>
                ))}
              </div>
            </div>
          </div>

          <div className="flex flex-wrap gap-2 h-10">
            <PrimaryButton_v2 icon={Edit} onClick={() => handleEdit(fournisseur)}>
              Modifier
            </PrimaryButton_v2>
            <button className="p-2.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400" title="Plus d'actions">
              <MoreVertical className="w-5 h-5" />
            </button>
          </div>
        </motion.div>

        {/* Quick Actions */}
        <div className="flex gap-2 overflow-x-auto pb-2">
          <button onClick={() => navigate('/home/devis')} className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-900 whitespace-nowrap transition-colors">
            <FileText className="w-4 h-4 text-blue-600" /> Devis
          </button>
          <button onClick={() => navigate('/home/commandes')} className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-900 whitespace-nowrap transition-colors">
            <Package className="w-4 h-4 text-blue-600" /> Commander
          </button>
          <button onClick={() => navigate('/home/bons-livraison')} className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-900 whitespace-nowrap transition-colors">
            <Truck className="w-4 h-4 text-orange-600" /> Livraison
          </button>
          <button onClick={() => navigate('/home/factures')} className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-900 whitespace-nowrap transition-colors">
            <CreditCard className="w-4 h-4 text-purple-600" /> Enregistrer facture
          </button>
        </div>

        {/* Tabs */}
        <Tabs tabs={tabs} active={activeTab} onChange={setActiveTab} />

        {/* Content */}
        <div className="mt-6">
          {activeTab === 'identification' && (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Colonne gauche */}
              <div className="space-y-6">
                <SectionCard icon={Building2} title="Identification">
                  <div className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <InfoRow label="Compte Tiers" value={fournisseur.numero} />
                      <InfoRow label="Type" value={fournisseur.type === 1 ? 'Fournisseur' : 'Autre'} />
                    </div>
                    <InfoRow label="SIRET" value={fournisseur.siret} />
                    <InfoRow label="SIREN" value={fournisseur.siren} />
                    <InfoRow label="TVA Intracommunautaire" value={fournisseur.tva_intra} />
                    <InfoRow label="Code NAF" value={fournisseur.code_naf} />
                    <InfoRow label="Forme juridique" value={fournisseur.forme_juridique} />
                  </div>
                </SectionCard>

                <SectionCard icon={Phone} title="Télécommunication">
                  <div className="space-y-4">
                    {fournisseur.telephone && (
                      <div className="flex items-center gap-3">
                        <Phone className="w-4 h-4 text-gray-400" />
                        <span className="text-gray-900 dark:text-white">{fournisseur.telephone}</span>
                      </div>
                    )}
                    {fournisseur.portable && (
                      <div className="flex items-center gap-3">
                        <Phone className="w-4 h-4 text-gray-400" />
                        <span className="text-gray-900 dark:text-white">{fournisseur.portable}</span>
                        <span className="text-xs text-gray-500">(Mobile)</span>
                      </div>
                    )}
                    {fournisseur.telecopie && (
                      <div className="flex items-center gap-3">
                        <FileText className="w-4 h-4 text-gray-400" />
                        <span className="text-gray-900 dark:text-white">{fournisseur.telecopie}</span>
                        <span className="text-xs text-gray-500">(Fax)</span>
                      </div>
                    )}
                    {fournisseur.email && (
                      <div className="flex items-center gap-3">
                        <Mail className="w-4 h-4 text-gray-400" />
                        <a href={`mailto:${fournisseur.email}`} className="text-blue-600 hover:underline">{fournisseur.email}</a>
                      </div>
                    )}
                    {fournisseur.site_web && (
                      <div className="flex items-center gap-3">
                        <Globe className="w-4 h-4 text-gray-400" />
                        <a href={fournisseur.site_web} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">{fournisseur.site_web}</a>
                      </div>
                    )}
                  </div>
                </SectionCard>
              </div>

              {/* Colonne droite */}
              <div className="space-y-6">
                <SectionCard icon={MapPin} title="Adresse">
                  <div className="space-y-4">
                    {fournisseur.adresse_complete ? (
                      <p className="text-gray-900 dark:text-white whitespace-pre-line">{fournisseur.adresse_complete}</p>
                    ) : (
                      <>
                        <InfoRow label="Adresse" value={fournisseur.adresse} />
                        <InfoRow label="Complément" value={fournisseur.complement} />
                        <div className="grid grid-cols-2 gap-4">
                          <InfoRow label="Code postal" value={fournisseur.code_postal} />
                          <InfoRow label="Ville" value={fournisseur.ville} />
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                          <InfoRow label="Région" value={fournisseur.region} />
                          <InfoRow label="Pays" value={fournisseur.pays} />
                        </div>
                      </>
                    )}
                  </div>
                </SectionCard>

                <SectionCard icon={CreditCard} title="Données Financières">
                  <div className="space-y-4">
                    <InfoRow label="Conditions de règlement" value={fournisseur.conditions_reglement_libelle || fournisseur.conditions_reglement_code} />
                    <InfoRow label="Mode de règlement" value={fournisseur.mode_reglement_libelle || fournisseur.mode_reglement_code} />
                    <InfoRow label="Encours autorisé" value={fournisseur.encours_autorise ? `${fournisseur.encours_autorise.toLocaleString('fr-FR')} €` : null} />
                    <InfoRow label="CA annuel" value={fournisseur.ca_annuel ? `${fournisseur.ca_annuel.toLocaleString('fr-FR')} €` : null} />
                    <InfoRow label="Compte général" value={fournisseur.compte_general} />
                    <div className="grid grid-cols-2 gap-4">
                      <InfoRow label="Catégorie tarifaire" value={fournisseur.categorie_tarifaire?.toString()} />
                      <InfoRow label="Catégorie comptable" value={fournisseur.categorie_comptable?.toString()} />
                    </div>
                  </div>
                </SectionCard>

                {(fournisseur.date_creation || fournisseur.date_modification) && (
                  <SectionCard icon={Calendar} title="Historique">
                    <div className="grid grid-cols-2 gap-4">
                      <InfoRow label="Date de création" value={fournisseur.date_creation ? new Date(fournisseur.date_creation).toLocaleDateString('fr-FR') : null} />
                      <InfoRow label="Dernière modification" value={fournisseur.date_modification ? new Date(fournisseur.date_modification).toLocaleDateString('fr-FR') : null} />
                    </div>
                  </SectionCard>
                )}
              </div>
            </div>
          )}

          {activeTab === 'contacts' && (
            <div className="space-y-6">
                <div className="flex justify-between items-center">
                    <h3 className="font-bold text-gray-900 dark:text-white">Liste des contacts ({fournisseur.contacts?.length})</h3>
                    <PrimaryButton_v2 
                      icon={Plus} 
                      onClick={handleCreateContact}
                    >Ajouter un contact</PrimaryButton_v2>
                </div>
                
                {fournisseur.contacts?.length === 0 ? (
                  <div className="text-center py-12 bg-white dark:bg-gray-950 rounded-2xl border border-dashed border-gray-200 dark:border-gray-800">
                    <User className="w-12 h-12 text-gray-300 mx-auto mb-3" />
                    <p className="text-gray-500 font-medium">Aucun contact enregistré</p>
                    <p className="text-sm text-gray-400 mt-1">Cliquez sur "Ajouter un contact" pour commencer</p>
                  </div>
                ) : (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {fournisseur.contacts?.map((contact,index) => (
                      <div key={index} className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl p-5 hover:shadow-md transition-shadow relative group">
                        <div className="flex justify-between items-start mb-4">
                          <div className="flex items-center gap-3">
                            <div className="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-600 dark:text-gray-300 font-bold">
                              {contact.nom[0]}{contact.prenom[0]}
                            </div>
                            <div>
                              <h4 className="font-bold text-gray-900 dark:text-white">{contact.prenom} {contact.nom}</h4>
                              <p className="text-xs text-gray-500">{contact.fonction || 'Pas de poste défini'}</p>
                            </div>
                          </div>
                          {contact.est_defaut && (
                              <span className="px-2 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-[10px] font-bold uppercase tracking-wider rounded-full border border-green-200 dark:border-green-800">
                                Défaut
                              </span>
                          )}
                        </div>
                        
                        <div className="space-y-2 mb-4">
                          <a href={`mailto:${contact.email}`} className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-[#941403] transition-colors">
                            <Mail className="w-4 h-4" />
                            {contact.email}
                          </a>
                          {contact.telephone && (
                            <a href={`tel:${contact.telephone}`} className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-[#941403] transition-colors">
                              <Phone className="w-4 h-4" />
                              {contact.telephone}
                            </a>
                          )}
                          <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <Building2 className="w-4 h-4" />
                            {contact.fonction || 'Non spécifié'}
                          </div>
                        </div>

                        <div className="pt-4 border-t border-gray-100 dark:border-gray-800 flex justify-end gap-2">
                            <button 
                              onClick={() => handleEditContact(contact)}
                              className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg text-gray-400 hover:text-blue-500 transition-colors"
                              title="Modifier"
                            >
                              <Edit className="w-4 h-4" />
                            </button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
          )}

          {activeTab === 'bancaire' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h3 className="font-bold text-gray-900 dark:text-white">Coordonnées bancaires</h3>
                {/* <PrimaryButton_v2 icon={Plus} onClick={() => handleAction('Ajouter RIB')}>
                  Ajouter un RIB
                </PrimaryButton_v2> */}
              </div>

              {/* RIB Principal */}
              {/* {(fournisseur.iban_principal || fournisseur.bic_principal) && (
                <div className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-6">
                  <div className="flex items-center gap-2 mb-4">
                    <Banknote className="w-5 h-5 text-[#941403]" />
                    <h4 className="font-bold text-gray-900 dark:text-white">RIB Principal</h4>
                    <span className="px-2 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-xs font-medium rounded-full">Par défaut</span>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <p className="text-xs text-gray-500 uppercase">IBAN</p>
                      <p className="font-mono font-medium text-gray-900 dark:text-white mt-1">{fournisseur.iban_principal || '-'}</p>
                    </div>
                    <div>
                      <p className="text-xs text-gray-500 uppercase">BIC</p>
                      <p className="font-mono font-medium text-gray-900 dark:text-white mt-1">{fournisseur.bic_principal || '-'}</p>
                    </div>
                  </div>
                </div>
              )} */}

              {/* Autres coordonnées bancaires */}
              {fournisseur.coordonnees_bancaires && fournisseur.coordonnees_bancaires.length > 0 ? (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {fournisseur.coordonnees_bancaires.map((cb, idx) => (
                    <div key={idx} className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl p-4">
                      <div className="flex justify-between items-start mb-3">
                        <p className="font-medium text-gray-900 dark:text-white">{cb.banque || `Compte ${idx + 1}`}</p>
                        <div className="flex gap-1">
                          <button className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"  title="Edit">
                            <Edit className="w-4 h-4 text-gray-400" />
                          </button>
                          <button className="p-1.5 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg"  title="Delete">
                            <Trash2 className="w-4 h-4 text-gray-400 hover:text-red-500" />
                          </button>
                        </div>
                      </div>
                      <div className="space-y-2 text-sm">
                        <p className="text-gray-600 dark:text-gray-400">
                          <span className="text-gray-500">IBAN:</span> <span className="font-mono">{cb.iban}</span>
                        </p>
                        <p className="text-gray-600 dark:text-gray-400">
                          <span className="text-gray-500">BIC:</span> <span className="font-mono">{cb.bic}</span>
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              ) : !fournisseur.iban_principal && (
                <div className="text-center py-12 bg-white dark:bg-gray-950 rounded-2xl border border-dashed border-gray-200 dark:border-gray-800">
                  <CreditCard className="w-12 h-12 text-gray-300 mx-auto mb-3" />
                  <p className="text-gray-500 font-medium">Aucune coordonnée bancaire</p>
                  <p className="text-sm text-gray-400 mt-1">Ajoutez un RIB pour ce fournisseur</p>
                </div>
              )}
            </div>
          )}

          {activeTab === 'commercial' && (
            <div className="space-y-8">
              <div className="text-center py-12 bg-white dark:bg-gray-950 rounded-2xl border border-dashed border-gray-200 dark:border-gray-800">
                <Package className="w-12 h-12 text-gray-300 mx-auto mb-3" />
                <p className="text-gray-500 font-medium">Aucune pièce d'achat</p>
                <p className="text-sm text-gray-400 mt-1">Les commandes, réceptions et factures apparaîtront ici</p>
              </div>
            </div>
          )}

          {activeTab === 'timeline' && (
            <div className="text-center py-12 bg-white dark:bg-gray-950 rounded-2xl border border-dashed border-gray-200 dark:border-gray-800">
              <History className="w-12 h-12 text-gray-300 mx-auto mb-3" />
              <p className="text-gray-500 font-medium">Aucun événement</p>
              <p className="text-sm text-gray-400 mt-1">L'historique des actions apparaîtra ici</p>
            </div>
          )}
        </div>
      </div>

      <ModalFournisseur
        open={isCreateModalOpen}
        onClose={() => setIsCreateModalOpen(false)}
        title={editing ? `Mettre à jour le fournisseur ${editing.numero}` : "Crée un fournisseur"}
        editing={editing}
      />

       <ModalContact
        open={isCreateModalContactOpen}
        onClose={() => setIsCreateModalContactOpen(false)}
        title={editingContact ? `Mettre à jour le contact ${editingContact.nom}` : 'Créer un contact'}
        editing={editingContact}
        entityType= 'fournisseur'
      />

    </>


  );
};

export default FournisseurDetailPage;