import React from "react";
import { Plus, Trash2, PenLine, Package, Lock, EyeOff } from "lucide-react";
import { cn } from "@/lib/utils";
import { Tooltip, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
import { Textarea } from "@/components/ui/FormModal";
import ArticleAutocomplete from "@/components/molecules/ArticleAutocomplete";
import StickyTotals from "@/components/document-entry/StickyTotals";
import { DevisListItem } from "@/types/devisType";
import { LigneForm, Note } from "@/pages/sales/QuoteDetailPage";

interface DevisContentProps {
   // Données
   devis: DevisListItem;
   editLignes: LigneForm[];
   note: Note;
   
   // États
   isEditing: boolean;
   isPdfPreviewVisible: boolean;
   activeLineId: string | null;
   description: string | null;
   error: string | null;
   
   // Totaux
   editTotalHT: number;
   editTotalTVA: number;
   editTotalTTC: number;
   
   // Handlers
   onToggleLineMode: (lineId: string) => void;
   onUpdateLigne: (lineId: string, field: keyof LigneForm, value: any) => void;
   onAjouterLigne: () => void;
   onSupprimerLigne: (lineId: string) => void;
   onSetActiveLineId: (lineId: string | null) => void;
   onSetDescription: (value: string | null) => void;
   onSetNote: (note: Note) => void;
   onOpenArticleModal: (lineId: string) => void;
   
   // Fonction de calcul
   calculerTotalLigne: (ligne: LigneForm) => number;
}

const DevisContent: React.FC<DevisContentProps> = ({
   devis,
   editLignes,
   note,
   isEditing,
   isPdfPreviewVisible,
   activeLineId,
   description,
   error,
   editTotalHT,
   editTotalTVA,
   editTotalTTC,
   onToggleLineMode,
   onUpdateLigne,
   onAjouterLigne,
   onSupprimerLigne,
   onSetActiveLineId,
   onSetDescription,
   onSetNote,
   onOpenArticleModal,
   calculerTotalLigne,
}) => {
   const textSizeClass = isPdfPreviewVisible ? "text-xs" : "text-sm";
   // console.log("devis : ",devis);
   
   return (
      <div className={`flex flex-col  p-2 ${isEditing ? "h-full": "h-[60vh]"}`}>
         <div className="flex-1 overflow-y-auto px-4 mx-auto w-full sm:px-6 lg:px-8 scroll-smooth">
            {/* Tableau des lignes */}
            <div className="bg-white rounded-2xl border bg-red border-gray-200 shadow-sm dark:bg-gray-950 dark:border-gray-800">
               <div className="overflow-x-auto mb-2">
                  <table className="w-full">
                     <thead className="text-xs font-semibold tracking-wider text-gray-500 uppercase bg-gray-50 border-b dark:bg-gray-900/50">
                        <tr className={isEditing ? "text-[10px]" : ""}>
                           {isEditing && <th className="px-2 py-3 w-5 text-center">Mode</th>}
                           <th className="px-4 py-3 text-left w-[25%]">Désignation</th>
                           <th className="px-0 py-3 text-left w-[20%]">
                              Description {!isEditing && "détaillée"}
                           </th>
                           <th className="px-4 py-3 text-right w-[8%]">Qté</th>
                           <th className="px-4 py-3 text-right w-[15%]">P.U. HT</th>
                           <th className="px-4 py-3 text-right w-[8%]">Remise</th>
                           <th className="px-4 py-3 text-right w-[8%]">TVA</th>
                           <th className="px-4 py-3 text-right w-[15%]">Total HT</th>
                           {isEditing && <th className="px-2 py-3 w-12"></th>}
                        </tr>
                     </thead>
                     <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
                        {isEditing
                           ? editLignes.map((item) => (
                              <EditableLigneRow
                                 key={item.id}
                                 item={item}
                                 isPdfPreviewVisible={isPdfPreviewVisible}
                                 activeLineId={activeLineId}
                                 description={description}
                                 onToggleLineMode={onToggleLineMode}
                                 onUpdateLigne={onUpdateLigne}
                                 onSupprimerLigne={onSupprimerLigne}
                                 onSetActiveLineId={onSetActiveLineId}
                                 onSetDescription={onSetDescription}
                                 onOpenArticleModal={onOpenArticleModal}
                                 calculerTotalLigne={calculerTotalLigne}
                                 canDelete={editLignes.length > 1}
                              />
                           ))
                           : devis.lignes.map((line, index) => (
                              <ReadOnlyLigneRow
                                 key={index}
                                 line={line}
                                 textSizeClass={textSizeClass}
                              />
                           ))}
                     </tbody>
                  </table>
               </div>

               {/* Bouton ajouter ligne */}
               {isEditing && (
                  <div className="m-6">
                     <button
                        onClick={onAjouterLigne}
                        className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-[#2A6F4F] bg-white border border-[#2A6F4F] rounded-lg hover:bg-green-50 transition-all shadow-sm"
                     >
                        <Plus className="w-4 h-4" /> Ajouter une ligne
                     </button>
                  </div>
               )}

               {/* Message d'erreur */}
               {error && isEditing && (
                  <div className="p-4 m-4 text-sm text-red-800 bg-red-50 rounded-xl border border-red-200">
                     {error}
                  </div>
               )}
            </div>

            {/* Section Notes */}
            <NotesSection
               note={note}
               isEditing={isEditing}
               onSetNote={onSetNote}
            />
         </div>

         {/* StickyTotals fixé en bas */}
         <div className="flex-none mt-5 bg-white dark:bg-gray-950 border-t border-gray-200 dark:border-gray-800 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] z-20">
            <div className="px-4 mx-auto w-full sm:px-6 lg:px-8">
               <StickyTotals
                  total_ht_calcule={isEditing ? editTotalHT : devis.total_ht_calcule}
                  total_taxes_calcule={isEditing ? editTotalTVA : devis.total_taxes_calcule}
                  total_ttc_calcule={isEditing ? editTotalTTC : devis.total_ttc_calcule}
               />
            </div>
         </div>
      </div>
   );
};

// ============================================
// SOUS-COMPOSANTS
// ============================================

interface EditableLigneRowProps {
   item: LigneForm;
   isPdfPreviewVisible: boolean;
   activeLineId: string | null;
   description: string | null;
   canDelete: boolean;
   onToggleLineMode: (lineId: string) => void;
   onUpdateLigne: (lineId: string, field: keyof LigneForm, value: any) => void;
   onSupprimerLigne: (lineId: string) => void;
   onSetActiveLineId: (lineId: string | null) => void;
   onSetDescription: (value: string | null) => void;
   onOpenArticleModal: (lineId: string) => void;
   calculerTotalLigne: (ligne: LigneForm) => number;
}

const EditableLigneRow: React.FC<EditableLigneRowProps> = ({
   item,
   isPdfPreviewVisible,
   activeLineId,
   description,
   canDelete,
   onToggleLineMode,
   onUpdateLigne,
   onSupprimerLigne,
   onSetActiveLineId,
   onSetDescription,
   onOpenArticleModal,
   calculerTotalLigne,
}) => {
   const textSizeClass = isPdfPreviewVisible ? "text-xs" : "text-sm";

   return (
      <tr className="group hover:bg-gray-50/50 dark:hover:bg-gray-900/20">
         {/* Mode Toggle */}
         <td className="px-2 py-3">
            <TooltipProvider>
               <Tooltip>
                  <TooltipTrigger asChild>
                     <button
                        onClick={() => onToggleLineMode(item.id)}
                        className={cn(
                           "p-1.5 rounded-md transition-all duration-200",
                           item.isManual
                              ? "text-amber-600 bg-amber-50 hover:bg-amber-100"
                              : "text-[#007E45] bg-green-50 hover:bg-green-100"
                        )}
                     >
                        {item.isManual ? (
                           <PenLine className="w-4 h-4" />
                        ) : (
                           <Package className="w-4 h-4" />
                        )}
                     </button>
                  </TooltipTrigger>
               </Tooltip>
            </TooltipProvider>
         </td>

         {/* Article / Désignation */}
         <td className="px-4 py-3 min-w-[280px]">
            {item.isManual ? (
               <div className="relative">
                  <input
                     type="text"
                     value={item.designation}
                     onChange={(e) => onUpdateLigne(item.id, "designation", e.target.value)}
                     onFocus={() => onSetActiveLineId(item.id)}
                     onBlur={() => setTimeout(() => onSetActiveLineId(null), 150)}
                     className={cn(
                        `w-full border-0 ${textSizeClass} focus:outline-none bg-white text-gray-900`
                     )}
                     placeholder="Saisir une désignation..."
                  />

                  {/* Menu dropdown */}
                  {activeLineId === item.id && item.designation && (
                     <ArticleCreationDropdown
                        designation={item.designation}
                        onCreateArticle={() => onOpenArticleModal(item.id)}
                     />
                  )}
               </div>
            ) : (
               <div className="flex flex-col gap-1">
                  <ArticleAutocomplete
                     value={item.articles}
                     onChange={(article) => onUpdateLigne(item.id, "articles", article)}
                     required
                     className={textSizeClass}
                  />
               </div>
            )}
         </td>

         {/* Description */}
         <td className="px-1">
            <input
               type="text"
               value={item.isManual ? description! : item.designation || ""}
               onChange={(e) =>
                  item.isManual
                     ? onSetDescription(e.target.value)
                     : onUpdateLigne(item.id, "designation", e.target.value)
               }
               placeholder="Description détaillée..."
               className={cn(
                  `w-full border-0 ${textSizeClass} focus:outline-none bg-white text-gray-900 text-left`
               )}
            />
         </td>

         {/* Quantité */}
         <td className="px-1" style={{ width: "100px" }}>
            <input
               type="number"
               value={item.quantite}
               onChange={(e) =>
                  onUpdateLigne(item.id, "quantite", parseFloat(e.target.value) || 0)
               }
               min={0}
               className={cn(
                  `w-full border-0 ${textSizeClass} focus:outline-none bg-white text-gray-900 text-right`
               )}
            />
         </td>

         {/* Prix Unitaire */}
         <td className="px-1 text-center" style={{ width: "60px" }}>
            <input
               type="number"
               value={item.prix_unitaire_ht || item.articles?.prix_vente || 0}
               onChange={(e) =>
                  onUpdateLigne(item.id, "prix_unitaire_ht", parseFloat(e.target.value) || 0)
               }
               min={0}
               step={0.01}
               className={cn(
                  `w-full border-0 ${textSizeClass} focus:outline-none bg-white text-gray-900 text-right`
               )}
            />
         </td>

         {/* Remise */}
         <td className="px-1 text-center" style={{ width: "60px" }}>
            <input
               type="number"
               value={item.remise_pourcentage || 0}
               onChange={(e) =>
                  onUpdateLigne(item.id, "remise_pourcentage", parseFloat(e.target.value) || 0)
               }
               min={0}
               step={1}
               className={cn(
                  `w-full border-0 ${textSizeClass} focus:outline-none bg-white text-gray-900 text-right`
               )}
            />
         </td>

         {/* TVA */}
         <td className={cn("px-1 text-center text-gray-500 text-right", textSizeClass)}>
            {item.taux_taxe1}%
         </td>

         {/* Total */}
         <td className="px-1 text-right">
            <span className={cn("font-bold font-mono text-gray-900", textSizeClass)}>
               {calculerTotalLigne(item).toFixed(2)} €
            </span>
         </td>

         {/* Delete */}
         <td className="px-1 text-center">
            <button
               onClick={() => onSupprimerLigne(item.id)}
               disabled={!canDelete}
               className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors disabled:opacity-30"
            >
               <Trash2 className="w-4 h-4" />
            </button>
         </td>
      </tr>
   );
};

interface ReadOnlyLigneRowProps {
   line: any;
   textSizeClass: string;
}

const ReadOnlyLigneRow: React.FC<ReadOnlyLigneRowProps> = ({ line, textSizeClass }) => (
   <tr className="group hover:bg-gray-50/50">
      <td className={cn("px-4 py-3 font-bold font-mono", textSizeClass)}>
         {line.article_code}
      </td>
      <td className={cn("px-4 py-3 text-gray-600", textSizeClass)}>
         {line.designation}
      </td>
      <td className={cn("px-4 py-3 text-right", textSizeClass)}>
         {line.quantite}
      </td>
      <td className={cn("px-4 py-3 text-right font-mono", textSizeClass)}>
         {line.prix_unitaire_ht?.toFixed(2)} €
      </td>
      <td className={cn("px-4 py-3 text-right text-gray-500", textSizeClass)}>
         {line.remise_valeur1}%
      </td>
      <td className={cn("px-4 py-3 text-right text-gray-500", textSizeClass)}>
         {line.taux_taxe1}%
      </td>
      <td className={cn("px-4 py-3 text-right font-bold font-mono", textSizeClass)}>
         {line.montant_ligne_ht?.toFixed(2)} €
      </td>
   </tr>
);

interface ArticleCreationDropdownProps {
   designation: string;
   onCreateArticle: () => void;
}

const ArticleCreationDropdown: React.FC<ArticleCreationDropdownProps> = ({
   designation,
   onCreateArticle,
}) => (
   <div className="overflow-hidden mt-1 w-full bg-white rounded-xl border border-gray-200 shadow-lg">
      <button
         type="button"
         onMouseDown={(e) => e.preventDefault()}
         onClick={onCreateArticle}
         className="flex gap-3 items-center px-4 py-3 w-full text-left transition-colors hover:bg-green-50"
      >
         <div className="p-1.5 bg-[#007E45] rounded-lg text-white">
            <Plus className="w-4 h-4" />
         </div>
         <span className="text-sm font-medium text-gray-900">
            Créer l'article "<span className="text-[#007E45]">{designation}</span>"
         </span>
      </button>
      <div className="border-t border-gray-100" />
      <div className="flex flex-row gap-3 justify-center items-center py-2 w-full text-xs text-center text-gray-400">
         <div className="p-1.5 rounded-lg">
            <PenLine className="w-4 h-4" />
         </div>
         <span className="text-xs font-medium">Texte libre accepté</span>
      </div>
   </div>
);

interface NotesSectionProps {
   note: Note;
   isEditing: boolean;
   onSetNote: (note: Note) => void;
}

const NotesSection: React.FC<NotesSectionProps> = ({ note, isEditing, onSetNote }) => (
   <div className="grid grid-cols-1 gap-6 p-6 mt-8 bg-gray-50 rounded-2xl border border-gray-100 md:grid-cols-2 dark:bg-gray-900/30 dark:border-gray-800">
      {/* Notes publiques */}
      <div className="space-y-3">
         <div className="flex justify-between items-center">
            <label className="flex gap-2 items-center text-sm font-semibold text-gray-900 dark:text-white">
               Notes publiques <Lock className="w-3 h-3 text-gray-400" />
            </label>
            <span className="text-xs text-gray-500">Visible sur le PDF</span>
         </div>
         <Textarea
            rows={4}
            disabled={!isEditing}
            placeholder="Conditions de paiement, délais de livraison..."
            className="bg-white resize-none dark:bg-gray-950"
            value={note.publique}
            onChange={(e) => onSetNote({ ...note, publique: e.target.value })}
         />
      </div>

      {/* Notes privées */}
      <div className="space-y-3">
         <div className="flex justify-between items-center">
            <label className="flex gap-2 items-center text-sm font-semibold text-gray-900 dark:text-white">
               Notes privées <EyeOff className="w-3 h-3 text-gray-400" />
            </label>
            <span className="text-xs text-gray-500">Interne uniquement</span>
         </div>
         <Textarea
            rows={4}
            disabled={!isEditing}
            placeholder="Notes internes, marge de négociation..."
            className="bg-white border-yellow-200 resize-none dark:bg-gray-950 focus:border-yellow-400"
            value={note.prive}
            onChange={(e) => onSetNote({ ...note, prive: e.target.value })}
         />
      </div>
   </div>
);

export default DevisContent;