import { AnimatePresence, motion } from "framer-motion";
import { Download, ZoomIn, ZoomOut } from "lucide-react";
import React, { useState } from "react";
import PrimaryButton_v2 from "../PrimaryButton_v2";
import logo from "../../assets/logo/logo.png";
import { Societe } from "@/types/societeType";
import { getSociete } from "@/store/features/gateways/selectors";
import { useAppSelector } from "@/store/hooks";

// ============================================
// TYPES
// ============================================

export type DocumentType = "devis" | "facture" | "commande" | "bl" | "avoir";

export interface LigneDocument {
  id?: string;
  article_code: string;
  designation: string;
  quantite: number;
  prix_unitaire_ht: number;
  remise_pourcentage?: number;
  taux_taxe1: number;
  montant_ligne_ht: number;
  articles?: any;
  isManual?: boolean;
}

export interface Note {
  publique: string;
  prive: string;
}

export interface BaseDocument {
  numero: string;
  date: string;
  date_livraison?: string;
  reference?: string;
  client_code: string;
  client_intitule: string;
  client_adresse?: string;
  client_code_postal?: string;
  client_ville?: string;
  statut?: number;
}

// ============================================
// CONFIGURATION PAR TYPE DE DOCUMENT
// ============================================

const DOCUMENT_CONFIG: Record<
  DocumentType,
  {
    title: string;
    dateLabel: string;
    validityLabel?: string;
    color: string;
  }
> = {
  devis: {
    title: "DEVIS",
    dateLabel: "Date",
    validityLabel: "Validité",
    color: "#2A6F4F",
  },
  facture: {
    title: "FACTURE",
    dateLabel: "Date d'émission",
    validityLabel: "Date d'échéance",
    color: "#007E45",
  },
  commande: {
    title: "BON DE COMMANDE",
    dateLabel: "Date de commande",
    validityLabel: "Date de livraison souhaitée",
    color: "#1E40AF",
  },
  bl: {
    title: "BON DE LIVRAISON",
    dateLabel: "Date de livraison",
    color: "#7C3AED",
  },
  avoir: {
    title: "AVOIR",
    dateLabel: "Date d'avoir",
    color: "#DC2626",
  },
};

// ============================================
// COMPOSANT PDFContent
// ============================================

interface PDFContentProps {
  documentType: DocumentType;
  document: BaseDocument;
  data: LigneDocument[];
  zoom?: number;
  page?: number;
  total_ht: number;
  total_taxes_calcule: number;
  total_ttc_calcule: number;
  totalPages?: number;
  notes: Note;
  isEdit: boolean;
}

const PDFContent: React.FC<PDFContentProps> = ({
  documentType,
  document,
  data,
  notes,
  total_ht,
  total_taxes_calcule,
  total_ttc_calcule,
  zoom = 100,
  page = 1,
  totalPages = 1,
  isEdit,
}) => {
  const societe = useAppSelector(getSociete) as Societe;
  const config = DOCUMENT_CONFIG[documentType];

  const calculerTotalLigne = (ligne: LigneDocument) => {
    const prix = ligne.prix_unitaire_ht || ligne.articles?.prix_vente || 0;
    const remise = ligne.remise_pourcentage ?? 0;
    const prixRemise = prix * (1 - remise / 100);
    return prixRemise * ligne.quantite;
  };

  return (
    <div
      className="bg-white text-black shadow-lg border border-[#E0E0E0] overflow-hidden mx-auto transition-all duration-200 origin-top"
      style={{
        width: `${zoom}%`,
        minWidth: "50mm",
        aspectRatio: "1 / 1.314",
        transform: `scale(${zoom / 100})`,
        transformOrigin: "top center",
        marginBottom: "2rem",
      }}
    >
      <div className="p-[8%] h-full flex flex-col font-sans relative">
        {/* Header */}
        <div className="flex justify-between items-start mb-12">
          <div>
            <img src={logo} alt="Logo" className="h-20 w-25" />
          </div>

          <div className="flex flex-col gap-2 text-right">
            <h1
              className="text-3xl font-bold uppercase"
              style={{ color: config.color }}
            >
              {config.title}
            </h1>
            <p className="text-xl font-semibold text-gray-700">
              {document.numero ?? "BROUILLON"}
            </p>
            <div className="flex flex-col gap-1 text-sm text-gray-500">
              <p>
                {config.dateLabel} :{" "}
                {new Date(document.date ?? Date.now()).toLocaleDateString()}
              </p>
              {config.validityLabel && document.date_livraison && (
                <p>
                  {config.validityLabel} :{" "}
                  {new Date(document.date_livraison).toLocaleDateString()}
                </p>
              )}
              {document.reference && <p>Réf : {document.reference}</p>}
            </div>
          </div>
        </div>

        {/* Addresses */}
        <div className="flex gap-12 justify-between mb-16">
          <div className="w-1/2">
            <p className="mb-2 text-xs font-bold text-gray-400 uppercase">
              Émetteur
            </p>
            <div className="text-sm font-medium text-gray-800">
              <p>{societe?.raison_sociale}</p>
              <p className="font-normal text-gray-600">{societe?.adresse}</p>
              <p className="font-normal text-gray-600">
                {societe?.code_postal} {societe?.ville}, {societe?.pays}
              </p>
              <p className="font-normal text-gray-600 mt-1">
                {societe?.email_societe}
              </p>
              <p className="font-normal text-gray-600 mt-1">
                Tel : +{societe?.telephone}
              </p>
            </div>
          </div>
          <div className="p-6 w-1/2 bg-gray-50 rounded-xl border border-gray-100">
            <p className="mb-2 text-xs font-bold text-gray-400 uppercase">
              {documentType === "avoir" ? "Client crédité" : "Destinataire"}
            </p>
            <div className="text-sm text-gray-900">
              <p className="mb-1 text-sm font-bold">
                {document.client_intitule || "Client"}
              </p>
              {document.client_adresse && (
                <p className="text-gray-600">{document.client_adresse}</p>
              )}
              {(document.client_code_postal || document.client_ville) && (
                <p className="text-gray-600">
                  {document.client_code_postal} {document.client_ville}
                </p>
              )}
            </div>
          </div>
        </div>

        {/* Table Header */}
        <div className="flex text-sm border-b border-gray-200 pb-2 mb-4">
          <div className="flex-1">
            <p className="font-bold">Désignation</p>
          </div>
          <div className="font-bold w-16 text-right">Qté</div>
          <div className="font-bold w-24 text-right">Prix Unit.HT</div>
          <div className="font-bold w-16 text-right">TVA</div>
          <div className="font-bold w-24 text-right">Montant HT</div>
        </div>

        {/* Lines */}
        <div className="flex-1 space-y-3 mb-6">
          {data.length > 0 ? (
            data.map((line, i) => (
              <div key={line.id || i} className="flex text-xs">
                <div className="flex-1">
                  <p className="font-bold">
                    {line.article_code || "Article libre"}
                  </p>
                  {line.designation && (
                    <p className="text-gray-600 text-[10px]">
                      {line.designation}
                    </p>
                  )}
                </div>
                <div className="w-16 text-right">{line.quantite}</div>
                <div className="w-24 text-right">
                  {line.prix_unitaire_ht.toFixed(2)} €
                </div>
                <div className="w-16 text-right">{line.taux_taxe1}%</div>
                <div className="w-24 font-medium text-right">
                  {isEdit
                    ? calculerTotalLigne(line).toFixed(2)
                    : line.montant_ligne_ht.toFixed(2)}
                  €
                </div>
              </div>
            ))
          ) : (
            <div className="italic text-center text-gray-400 py-8">
              Aucune ligne
            </div>
          )}
        </div>

        {/* Totaux */}
        <div className="flex justify-end mb-8">
          <div className="space-y-2 w-64 text-sm">
            <div className="flex justify-between opacity-70">
              <span>Total HT</span>
              <span className="font-mono">{total_ht.toFixed(2)} €</span>
            </div>
            <div className="flex justify-between opacity-70">
              <span>TVA</span>
              <span className="font-mono">
                {total_taxes_calcule.toFixed(2)} €
              </span>
            </div>
            <div
              className="flex justify-between border-t-2 pt-2 font-bold text-base"
              style={{ borderColor: config.color, color: config.color }}
            >
              <span>
                {documentType === "avoir" ? "Montant à rembourser" : "Net à payer"}
              </span>
              <span className="font-mono">
                {total_ttc_calcule.toFixed(2)} €
              </span>
            </div>
          </div>
        </div>

        {/* Notes */}
        {notes?.publique && (
          <div className="pt-4 border-t border-gray-200">
            <p className="text-xs font-bold text-gray-400 uppercase mb-2">
              Notes & Conditions
            </p>
            <p className="text-xs text-gray-600 whitespace-pre-wrap leading-relaxed">
              {notes.publique}
            </p>
          </div>
        )}

        {/* Footer */}
        <div className="absolute bottom-8 left-0 right-0 text-center text-[10px] text-gray-400">
          <p>
            Page {page} / {totalPages}
          </p>
          {societe && (
            <p className="mt-1">
              {societe.raison_sociale} - SIRET: {societe.siret || "N/A"} - TVA:{" "}
              {societe.numero_tva || "N/A"}
            </p>
          )}
        </div>
      </div>
    </div>
  );
};

// ============================================
// COMPOSANT PDFPreviewPanel
// ============================================

interface PDFPreviewPanelProps {
  isOpen: boolean;
  onClose: () => void;
  documentType: DocumentType;
  document: BaseDocument;
  data: LigneDocument[];
  notes: Note;
  total_ht: number;
  total_taxes_calcule: number;
  total_ttc_calcule: number;
  variant?: "modal" | "inline";
  isEdit: boolean;
  onDownload?: () => void;
}

const PDFPreviewPanel: React.FC<PDFPreviewPanelProps> = ({
  isOpen,
  onClose,
  documentType,
  document,
  data,
  total_ht,
  total_taxes_calcule,
  total_ttc_calcule,
  notes,
  variant = "modal",
  isEdit,
  onDownload,
}) => {
  const [zoom, setZoom] = useState<number>(100);
  const config = DOCUMENT_CONFIG[documentType];

  if (variant === "inline") {
    if (!isOpen) return null;
    return (
      <div className="h-full flex flex-col bg-[#525659] overflow-hidden border-l border-gray-200 dark:border-gray-800">
        {/* Simple Toolbar */}
        <div className="flex items-center justify-between px-4 py-2 bg-[#323639] border-b border-gray-700 shadow-md z-10">
          <span className="text-xs font-medium tracking-wider text-gray-200 uppercase">
            Aperçu PDF en direct - {config.title}
          </span>
          <div className="flex gap-2 items-center">
            <button
              onClick={() => setZoom((z) => Math.max(50, z - 10))}
              className="p-1 text-gray-300 hover:text-white transition-colors"
              title="Zoom arrière"
            >
              <ZoomOut className="w-4 h-4" />
            </button>
            <span className="text-xs text-gray-400 font-mono w-12 text-center">
              {zoom}%
            </span>
            <button
              onClick={() => setZoom((z) => Math.min(150, z + 10))}
              className="p-1 text-gray-300 hover:text-white transition-colors"
              title="Zoom avant"
            >
              <ZoomIn className="w-4 h-4" />
            </button>
          </div>
        </div>

        <div className="flex-1 overflow-y-auto p-8 custom-scrollbar bg-[#525659] flex justify-center items-start">
          <PDFContent
            documentType={documentType}
            isEdit={isEdit}
            notes={notes}
            document={document}
            data={data}
            zoom={zoom}
            total_ht={total_ht}
            total_taxes_calcule={total_taxes_calcule}
            total_ttc_calcule={total_ttc_calcule}
          />
        </div>
      </div>
    );
  }

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          <motion.div
            className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
            onClick={onClose}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          />
          <motion.div
            className="fixed inset-y-0 right-0 z-50 w-full max-w-4xl bg-[#525659] shadow-2xl"
            initial={{ x: "100%" }}
            animate={{ x: 0 }}
            exit={{ x: "100%" }}
            transition={{ type: "spring", damping: 25, stiffness: 200 }}
          >
            {/* Toolbar */}
            <div className="flex items-center justify-between px-6 py-3 bg-[#323639] border-b border-gray-700 shadow-sm">
              <div className="flex items-center gap-4">
                <h2 className="text-sm font-semibold text-white">
                  Aperçu {config.title}
                </h2>
                <div className="flex gap-2 items-center p-1 bg-gray-700 rounded-lg">
                  <button
                    onClick={() => setZoom(Math.max(50, zoom - 10))}
                    className="p-1.5 hover:bg-gray-600 rounded text-gray-300 hover:text-white transition-colors"
                    title="Zoom arrière"
                  >
                    <ZoomOut className="w-4 h-4" />
                  </button>
                  <span className="w-12 text-sm font-bold text-center text-white font-mono">
                    {zoom}%
                  </span>
                  <button
                    onClick={() => setZoom(Math.min(200, zoom + 10))}
                    className="p-1.5 hover:bg-gray-600 rounded text-gray-300 hover:text-white transition-colors"
                    title="Zoom avant"
                  >
                    <ZoomIn className="w-4 h-4" />
                  </button>
                </div>
              </div>
              <div className="flex gap-2 items-center">
                {onDownload && (
                  <PrimaryButton_v2
                    onClick={onDownload}
                    className="py-1.5 text-sm h-auto px-4 bg-white text-[#2A6F4F] hover:bg-gray-100"
                  >
                    <Download className="mr-2 w-4 h-4" /> Télécharger
                  </PrimaryButton_v2>
                )}
                <button
                  onClick={onClose}
                  className="px-3 py-1.5 text-sm font-medium text-gray-300 hover:text-white transition-colors"
                >
                  Fermer
                </button>
              </div>
            </div>

            <div className="h-[calc(100vh-60px)] overflow-y-auto p-8 custom-scrollbar bg-[#525659] flex justify-center items-start">
              <PDFContent
                documentType={documentType}
                isEdit={isEdit}
                notes={notes}
                document={document}
                data={data}
                zoom={zoom}
                total_ht={total_ht}
                total_taxes_calcule={total_taxes_calcule}
                total_ttc_calcule={total_ttc_calcule}
              />
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
};

export default PDFPreviewPanel;

// import { LigneForm, Note } from "@/pages/sales/QuoteDetailPage";
// import { DevisListItem } from "@/types/devisType";
// import { AnimatePresence, motion } from "framer-motion";
// import { Download, ZoomIn, ZoomOut } from "lucide-react";
// import React, { useState } from "react";
// import PrimaryButton_v2 from "../PrimaryButton_v2";
// import logo from "../../assets/logo/logo.png";
// import { Societe } from "@/types/societeType";
// import { getSociete } from "@/store/features/gateways/selectors";
// import { useAppSelector } from "@/store/hooks";

// interface PDFContentProps {
//   devis: DevisListItem;
//   data: LigneForm[];
//   zoom?: number;
//   page?: number;
//   total_ht: number;
//   total_taxes_calcule: number;
//   total_ttc_calcule: number;
//   totalPages?: number;
//   notes: Note;
//   isEdit: boolean;
// }

// const PDFContent: React.FC<PDFContentProps> = ({
//   data,
//   notes,
//   total_ht,
//   total_taxes_calcule,
//   total_ttc_calcule,
//   devis,
//   zoom = 10,
//   page = 1,
//   totalPages = 1,
//   isEdit,
// }) => {
//   const calculerTotalLigne = (ligne: LigneForm) => {
//     const prix = ligne.prix_unitaire_ht || ligne.articles?.prix_vente || 0;
//     const remise = ligne.remise_pourcentage ?? 0;
//     const prixRemise = prix * (1 - remise / 100);
//     return prixRemise * ligne.quantite;
//   };
//   const societe = useAppSelector(getSociete) as Societe;

//   console.log("data : ",data);
//   console.log("deeivs : ",devis);
  
  

//   return (
//     <div
//       className="bg-white text-black shadow-lg border border-[#E0E0E0] overflow-hidden mx-auto transition-all duration-200 origin-top"
//       style={{
//         width: `${zoom}%`,
//         minWidth: "50mm",
//         aspectRatio: "1 / 1.314",
//         transform: `scale(${zoom / 100})`,
//         transformOrigin: "top center",
//         marginBottom: "2rem",
//       }}
//     >
//       <div className="p-[8%] h-full flex flex-col font-sans relative">
//         {/* Header */}
//         <div className="flex justify-between items-start mb-12">
//           <div>
//             <img src={logo} alt="" className="h-20 w-25" />
//           </div>

//           <div className="flex flex-col gap-2 text-right">
//             <h1 className="text-3xl font-bold uppercase">
//               {devis.numero ?? "BROUILLON"}
//             </h1>
//             <div className="flex flex-col gap-1 text-sm text-gray-500">
//               <p>
//                 Date : {new Date(devis.date ?? Date.now()).toLocaleDateString()}
//               </p>
//               <p>
//                 Validité :{" "}
//                 {new Date(
//                   devis.date_livraison ?? Date.now()
//                 ).toLocaleDateString()}
//               </p>
//               <p>Réf : {devis.reference ?? "—"}</p>
//             </div>
//           </div>
//         </div>

//         {/* Addresses */}
//         <div className="flex gap-12 justify-between mb-16">
//           <div className="w-1/2">
//             <p className="mb-2 text-xs font-bold text-gray-400 uppercase">
//               Émetteur
//             </p>
//             <div className="text-sm font-medium text-gray-800">
//                <p>{societe?.raison_sociale}</p>
//                 <p className="font-normal text-gray-600">{societe?.adresse}</p>
//                 <p className="font-normal text-gray-600">{societe?.code_postal} {societe?.ville}, {societe?.pays}</p>
//                 <p className="font-normal text-gray-600 mt-1">{societe?.email_societe}</p>
//                 <p className="font-normal text-gray-600 mt-1">Tel : +{societe?.telephone}</p>
//             </div>
//           </div>
//           <div className="p-6 w-1/2 bg-gray-50 rounded-xl border border-gray-100">
//             <p className="mb-2 text-xs font-bold text-gray-400 uppercase">
//               Destinataire
//             </p>
//             <div className="text-sm text-gray-900">
//               <p className="mb-1 text-sm font-bold">
//                 {devis.client_intitule || "Client"}
//               </p>
//               <p className="text-gray-600">10 rue des Clients</p>
//               <p className="text-gray-600">75001 Paris</p>
//             </div>
//           </div>
//         </div>

//         {/* info list */}
//         <div  className="flex text-sm border-b border-gray-200 pb-2">
//             <div className="flex-1">
//                 <p className="font-bold">Désignation</p>
//             </div>
//             <div className="font-bold w-16 text-right">Qté</div>
//             <div className="font-bold w-24 text-right">
//                 Prix Unit.HT
//             </div>
//             {/* <div className="font-bold w-16 text-right">Remise</div> */}
//             <div className="font-bold w-16 text-right">TVA</div>
//             <div className="font-bold w-24 text-right ">
//                 Montant HT
//             </div>
//         </div>

//         {/* Lines */}
//         <div className="flex-1 space-y-4">
//           {data.length > 0 ? (
//             data.map((line, i) => (
//               <div key={i} className="flex text-xs">
//                 <div className="flex-1">
//                   <p className="font-bold">{line.designation}</p>
//                   {line.designation && (
//                     <p className="text-gray-600">{line.designation}</p>
//                   )}
//                 </div>
//                 <div className="w-16 text-right">{line.quantite}</div>
//                 <div className="w-24 text-right">
//                   {line.prix_unitaire_ht.toFixed(2)} €
//                 </div>
//                 {/* <div className="w-16 text-right">{line.remise_pourcentage}%</div> */}
//                 <div className="w-16 text-right">{line.taux_taxe1}%</div>
//                 <div className="w-24 font-medium text-right">
//                   {isEdit
//                     ? calculerTotalLigne(line).toFixed(2)
//                     : line.montant_ligne_ht}
//                   €
//                 </div>
//               </div>
//             ))
//           ) : (
//             <div className="italic text-center text-gray-400">Aucune ligne</div>
//           )}
//         </div>

//         {/* Totaux */}
//         <div className="flex justify-end">
//           <div className="space-y-2 w-64 text-sm">
//             <div className="flex justify-between opacity-70">
//               <span>Total HT</span>
//               <span>{total_ht.toFixed(2)} €</span>
//             </div>
//             <div className="flex justify-between opacity-70">
//               <span>TVA</span>
//               <span>{total_taxes_calcule.toFixed(2)} €</span>
//             </div>
//             <div className="flex justify-between border-t font-bold mt-2 text-md text-[#2A6F4F]">
//               <span>Net à payer</span>
//               <span>{total_ttc_calcule.toFixed(2)} €</span>
//             </div>
//           </div>
//         </div>

//         {/* Notes */}
//         {notes?.publique && (
//           <div className="pt-4 mt-10 border-t">
//             <p className="text-xs font-bold text-gray-400 uppercase">
//               Notes & Conditions
//             </p>
//             <p className="text-xs text-gray-600 whitespace-pre-wrap">
//               {notes.publique}
//             </p>
//           </div>
//         )}

//         <div className="absolute bottom-8 w-full text-center text-[10px] text-gray-400">
//           Page {page} / {totalPages}
//         </div>
//       </div>
//     </div>
//   );
// };

// interface PDFPreviewPanelProps {
//   isOpen: boolean;
//   onClose: () => void;
//   devis: DevisListItem;
//   title?: string;
//   data: LigneForm[];
//   notes: Note;
//   total_ht: number;
//   total_taxes_calcule: number;
//   total_ttc_calcule: number;
//   variant?: "modal" | "inline";
//   isEdit: boolean;
// }

// const PDFPreviewPanel: React.FC<PDFPreviewPanelProps> = ({
//   isOpen,
//   onClose,
//   devis,
//   data,
//   total_ht,
//   total_taxes_calcule,
//   total_ttc_calcule,
//   notes,
//   variant = "modal",
//   isEdit,
// }) => {
//   const [zoom, setZoom] = useState<number>(100);

//   if (variant === "inline") {
//     if (!isOpen) return null;
//     return (
//       <div className="h-full flex flex-col bg-[#525659] overflow-hidden border-l border-gray-200 dark:border-gray-800">
//         {/* Simple Toolbar */}
//         <div className="flex items-center justify-between px-4 py-2 bg-[#323639] border-b border-gray-700 shadow-md z-10">
//           <span className="text-xs font-medium tracking-wider text-gray-200 uppercase">
//             Aperçu PDF en direct
//           </span>
//           <div className="flex gap-2 items-center">
//             <button
//               onClick={() => setZoom((z) => Math.max(50, z - 10))}
//               className="p-1 text-gray-300 hover:text-white"
//             >
//               <ZoomOut className="w-4 h-4" />
//             </button>
//             <button
//               onClick={() => setZoom((z) => Math.min(150, z + 10))}
//               className="p-1 text-gray-300 hover:text-white"
//             >
//               <ZoomIn className="w-4 h-4" />
//             </button>
//           </div>
//         </div>

//         <div className="flex-1 overflow-y-auto p-8 custom-scrollbar bg-[#525659] flex justify-center items-start">
//           <PDFContent
//             isEdit={isEdit}
//             notes={notes}
//             devis={devis}
//             data={data}
//             zoom={zoom}
//             total_ht={total_ht}
//             total_taxes_calcule={total_taxes_calcule}
//             total_ttc_calcule={total_ttc_calcule}
//           />
//         </div>
//       </div>
//     );
//   }

//   return (
//     <AnimatePresence>
//       {isOpen && (
//         <>
//           <motion.div
//             className="fixed inset-0 z-50 bg-black/50"
//             onClick={onClose}
//           />
//           <motion.div
//             className="fixed inset-y-0 right-0 z-60 w-full max-w-4xl bg-[#525659]"
//             initial={{ x: "100%" }}
//             animate={{ x: 0 }}
//             exit={{ x: "100%" }}
//           >
//             {/* Toolbar */}
//             <div className="flex items-center justify-between px-6 py-3 bg-[#323639] border-b border-gray-700 shadow-sm">
//               <div className="flex gap-2 items-center p-1 bg-gray-700 rounded-lg">
//                 <button
//                   onClick={() => setZoom(Math.max(50, zoom - 10))}
//                   className="p-1.5 hover:bg-gray-600 rounded text-gray-300 hover:text-white"
//                 >
//                   <ZoomOut className="w-4 h-4" />
//                 </button>
//                 <span className="w-12 text-sm font-bold text-center text-white">
//                   {zoom}%
//                 </span>
//                 <button
//                   onClick={() => setZoom(Math.min(200, zoom + 10))}
//                   className="p-1.5 hover:bg-gray-600 rounded text-gray-300 hover:text-white"
//                 >
//                   <ZoomIn className="w-4 h-4" />
//                 </button>
//               </div>
//               <div className="flex gap-2 items-center">
//                 <PrimaryButton_v2 className="py-1.5 text-sm h-auto px-4 bg-white text-[#2A6F4F] hover:bg-gray-100">
//                   <Download className="mr-2 w-4 h-4" /> Télécharger
//                 </PrimaryButton_v2>
//               </div>
//             </div>

//             <PDFContent
//               isEdit={isEdit}
//               notes={notes}
//               devis={devis}
//               data={data}
//               zoom={zoom}
//               total_ht={total_ht}
//               total_taxes_calcule={total_taxes_calcule}
//               total_ttc_calcule={total_ttc_calcule}
//             />
//           </motion.div>
//         </>
//       )}
//     </AnimatePresence>
//   );
// };

// export default PDFPreviewPanel;
