"use client";

import React, { useCallback, useMemo, useRef, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ArrowLeft, Save, Plus, Copy, Trash2, Upload, Download, ChevronDown, ChevronUp, FileText, FileX, Loader2 } from "lucide-react";
import { usePageTitle } from "@/hooks/usePageTitle";
import { api } from '@/lib/fetcher';

// ---------------- Types ----------------
type Organization = {
  id: string;
  structure_api: string;
};

type InvoiceRow = {
  id: string;
  selected: boolean;
  org_id: string;
  organization_name: string;
  numero: string;
  periode: string;
  date: string;
  due_date: string;
  payment_date: string;
  sepa_day: string;
  montant_ht: string | number;
  montant_ttc: string | number;
  statut: string;
  notes: string;
  pdf_s3_key?: string | null;
  pdf_uploading?: boolean;
};

// ---------------- Utils ----------------
function uid() {
  return Math.random().toString(36).substring(2, 11);
}

function incrementInvoiceNumber(numero: string): string {
  if (!numero) return numero;
  
  // Chercher un nombre à la fin du numéro (après un tiret ou directement)
  const match = numero.match(/^(.+?)(\d+)$/);
  
  if (match) {
    const prefix = match[1];
    const number = parseInt(match[2], 10);
    const incrementedNumber = number + 1;
    // Garder le même nombre de chiffres avec padding
    const paddedNumber = incrementedNumber.toString().padStart(match[2].length, '0');
    return prefix + paddedNumber;
  }
  
  // Si pas de nombre trouvé, ajouter -1 à la fin
  return numero + "-1";
}

function calculateDueDate(invoiceDate: string): string {
  if (!invoiceDate) return "";
  
  const date = new Date(invoiceDate);
  date.setDate(date.getDate() + 7); // J+7
  return date.toISOString().split('T')[0];
}

function calculateTTC(montantHT: string | number): string {
  if (!montantHT || montantHT === "") return "";
  
  const ht = typeof montantHT === 'string' ? parseFloat(montantHT) : montantHT;
  if (isNaN(ht)) return "";
  
  const ttc = ht * 1.20; // +20%
  return ttc.toFixed(2);
}

function emptyRow(rest: Partial<InvoiceRow> = {}): InvoiceRow {
  const today = new Date().toISOString().split('T')[0];
  const dueDate = rest.date ? calculateDueDate(rest.date) : calculateDueDate(today);
  
  return {
    org_id: "",
    organization_name: "",
    numero: "",
    periode: "",
    date: today,
    due_date: dueDate,
    payment_date: "",
    sepa_day: "",
    montant_ht: "",
    montant_ttc: "",
    statut: "en_cours",
    notes: "",
    pdf_s3_key: null,
    pdf_uploading: false,
    ...rest,
    id: uid(),
    selected: false,
  };
}

function validateRow(r: InvoiceRow) {
  const errors: Record<string, string> = {};
  if (!r.org_id) errors.org_id = "Requis";
  if (!r.numero) errors.numero = "Requis";
  if (!r.montant_ttc || Number(r.montant_ttc) <= 0) errors.montant_ttc = "> 0";
  if (!r.date) errors.date = "Requis";
  
  // Validation des dates
  if (r.due_date && r.date && r.due_date < r.date) {
    errors.due_date = "Échéance < Date";
  }
  if (r.payment_date && r.date && r.payment_date < r.date) {
    errors.payment_date = "Paiement < Date";
  }
  
  return errors;
}

function detectDelimiter(text: string): string {
  const comma = (text.match(/,/g) || []).length;
  const semicolon = (text.match(/;/g) || []).length;
  const tab = (text.match(/\t/g) || []).length;
  if (tab > 0) return '\t';
  return semicolon > comma ? ';' : ',';
}

function parseCSV(text: string): string[][] {
  const delim = detectDelimiter(text);
  const rows: string[][] = [];
  let row: string[] = [];
  let field = '';
  let inQuotes = false;
  
  for (let i = 0; i < text.length; i++) {
    const c = text[i];
    const next = text[i + 1];
    
    if (c === '"') {
      if (inQuotes && next === '"') {
        field += '"';
        i++;
        continue;
      }
      inQuotes = !inQuotes;
      continue;
    }
    
    if (!inQuotes && (c === '\n' || c === '\r')) {
      if (c === '\r' && next === '\n') i++;
      row.push(field);
      field = '';
      if (row.length > 1 || row[0] !== '') rows.push(row);
      row = [];
      continue;
    }
    
    if (!inQuotes && c === delim) {
      row.push(field);
      field = '';
      continue;
    }
    
    field += c;
  }
  
  row.push(field);
  if (row.length > 1 || row[0] !== '') rows.push(row);
  return rows;
}

function normalizeDate(val: string): string {
  if (!val) return "";
  const s = String(val).trim();
  
  // DD/MM/YYYY
  const m1 = s.match(/^([0-3]?\d)\/([0-1]?\d)\/(\d{4})$/);
  if (m1) {
    const dd = m1[1].padStart(2, '0');
    const mm = m1[2].padStart(2, '0');
    const yyyy = m1[3];
    return `${yyyy}-${mm}-${dd}`;
  }
  
  // YYYY-MM-DD
  const m2 = s.match(/^(\d{4})-(\d{2})-(\d{2})$/);
  if (m2) return s;
  
  return s;
}

const PASTE_ORDER = [
  "org_id",
  "numero",
  "periode",
  "date",
  "due_date",
  "payment_date",
  "sepa_day",
  "montant_ht",
  "montant_ttc",
  "statut",
  "notes",
] as const;

function rowsFromMatrix(parsed: string[][], organizations: Organization[]): InvoiceRow[] {
  if (parsed.length === 0) return [];
  
  return parsed.map((cols) => {
    const base = emptyRow();
    const assigned: Partial<InvoiceRow> = {};
    
    PASTE_ORDER.forEach((key, i) => {
      const val = cols[i];
      if (val == null) return;
      
      switch (key) {
        case 'org_id':
          // Rechercher l'organisation par nom
          const org = organizations.find(o => 
            o.structure_api.toLowerCase().includes(val.toLowerCase())
          );
          if (org) {
            assigned.org_id = org.id;
            assigned.organization_name = org.structure_api;
          } else {
            assigned.org_id = val;
          }
          break;
          
        case 'date':
        case 'due_date':
        case 'payment_date':
        case 'sepa_day':
          (assigned as any)[key] = normalizeDate(val);
          break;
          
        case 'montant_ht':
        case 'montant_ttc':
          (assigned as any)[key] = val === '' ? '' : Number(String(val).replace(',', '.'));
          break;
          
        case 'statut':
          const statutNormalized = val.toLowerCase();
          if (statutNormalized.includes('emit') || statutNormalized.includes('emise')) assigned.statut = 'emise';
          else if (statutNormalized.includes('cours')) assigned.statut = 'en_cours';
          else if (statutNormalized.includes('pay')) assigned.statut = 'payee';
          else if (statutNormalized.includes('annul')) assigned.statut = 'annulee';
          else if (statutNormalized.includes('pret')) assigned.statut = 'prete';
          else if (statutNormalized.includes('brouillon')) assigned.statut = 'brouillon';
          else assigned.statut = val;
          break;
          
        default:
          (assigned as any)[key] = val;
      }
    });
    
    return { ...base, ...assigned } as InvoiceRow;
  });
}

const COLUMN_ORDER = [
  "org_id",
  "numero",
  "periode",
  "date",
  "due_date",
  "payment_date",
  "sepa_day",
  "montant_ht",
  "montant_ttc",
  "statut",
  "notes",
] as const;

// ---------------- Classes ----------------
const thCls = "text-left text-[11px] font-medium uppercase tracking-wide text-muted-foreground px-2 py-1 sticky top-0 bg-slate-50 z-10";
const thStickyLeft = "text-left text-[11px] font-medium uppercase tracking-wide text-muted-foreground px-2 py-1 sticky top-0 bg-slate-50 z-20 border-r-2 border-slate-200 shadow-[2px_0_4px_rgba(0,0,0,0.05)]";
const tdCls = "px-1.5 py-1 align-middle";
const tdStickyLeft = "px-1.5 py-1 align-middle sticky bg-white z-10 border-r-2 border-slate-200 shadow-[2px_0_4px_rgba(0,0,0,0.05)]";
const inputCls = (error?: boolean) =>
  `w-full rounded-md border px-2 py-1 h-8 text-[13px] ${error ? "border-red-500" : ""}`;
const selectCls = "w-full rounded-md border px-2 h-8 text-[13px] bg-white";
const numberCls = (error?: boolean) =>
  `w-full rounded-md border px-2 py-1 h-8 text-right text-[13px] ${error ? "border-red-500" : ""}`;

// ---------------- PDF Upload Component ----------------
function PdfUploadCell({ 
  rowId, 
  pdfKey, 
  isUploading, 
  onUpload, 
  onRemove,
  disabled 
}: { 
  rowId: string;
  pdfKey?: string | null;
  isUploading?: boolean;
  onUpload: (rowId: string, file: File) => void;
  onRemove: (rowId: string) => void;
  disabled?: boolean;
}) {
  const [isDragging, setIsDragging] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (!disabled) setIsDragging(true);
  };

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
    
    if (disabled) return;
    
    const files = Array.from(e.dataTransfer.files);
    const pdfFile = files.find(f => f.type === 'application/pdf');
    
    if (pdfFile) {
      onUpload(rowId, pdfFile);
    } else {
      alert('Veuillez déposer un fichier PDF');
    }
  };

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      onUpload(rowId, file);
    }
    // Reset input
    if (inputRef.current) {
      inputRef.current.value = '';
    }
  };

  if (isUploading) {
    return (
      <div className="flex items-center justify-center h-8 text-blue-600 text-xs">
        <Loader2 className="w-3.5 h-3.5 animate-spin mr-1" />
        Upload...
      </div>
    );
  }

  if (pdfKey) {
    return (
      <div className="flex items-center justify-between gap-1 bg-green-50 border border-green-200 rounded px-2 py-1">
        <div className="flex items-center gap-1 text-green-700 text-xs">
          <FileText className="w-3.5 h-3.5" />
          <span>PDF</span>
        </div>
        <button
          type="button"
          onClick={() => onRemove(rowId)}
          className="p-0.5 hover:bg-red-100 rounded"
          title="Supprimer"
        >
          <FileX className="w-3 h-3 text-red-600" />
        </button>
      </div>
    );
  }

  return (
    <>
      <input
        ref={inputRef}
        type="file"
        accept=".pdf"
        onChange={handleFileSelect}
        className="hidden"
      />
      <div
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={() => !disabled && inputRef.current?.click()}
        className={`
          h-8 flex items-center justify-center border-2 border-dashed rounded cursor-pointer
          transition-colors text-xs
          ${disabled 
            ? 'border-slate-200 bg-slate-50 cursor-not-allowed text-slate-400' 
            : isDragging 
              ? 'border-blue-400 bg-blue-50 text-blue-600' 
              : 'border-slate-300 hover:border-slate-400 text-slate-500 hover:bg-slate-50'
          }
        `}
        title={disabled ? "Remplir org + numéro d'abord" : "Cliquer ou glisser un PDF"}
      >
        <Upload className="w-3.5 h-3.5 mr-1" />
        {disabled ? 'Requis' : 'PDF'}
      </div>
    </>
  );
}

// ---------------- Component ----------------
export default function SaisieTableauFacturesPage() {
  usePageTitle("Saisie tableau - Factures");
  const router = useRouter();
  
  const [rows, setRows] = useState<InvoiceRow[]>([emptyRow(), emptyRow(), emptyRow()]);
  const [organizations, setOrganizations] = useState<Organization[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [errors, setErrors] = useState<Record<string, Record<string, string>>>({});
  const [showHelp, setShowHelp] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Charger les organisations
  React.useEffect(() => {
    (async () => {
      try {
        const result = await api<{ organizations: Organization[] }>("/staff/organizations");
        setOrganizations(result.organizations || []);
      } catch (e) {
        console.error("Erreur lors du chargement des organisations:", e);
      }
    })();
  }, []);

  // Validation
  const validateAll = useCallback(() => {
    const newErrors: Record<string, Record<string, string>> = {};
    rows.forEach((r) => {
      const rowErrors = validateRow(r);
      if (Object.keys(rowErrors).length > 0) {
        newErrors[r.id] = rowErrors;
      }
    });
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  }, [rows]);

  // Actions sur les lignes
  const updateRow = useCallback((id: string, field: keyof InvoiceRow, value: any) => {
    setRows((prev) =>
      prev.map((r) => {
        if (r.id !== id) return r;
        const updated = { ...r, [field]: value };
        
        // Si on change l'org, mettre à jour le nom
        if (field === 'org_id') {
          const org = organizations.find(o => o.id === value);
          if (org) {
            updated.organization_name = org.structure_api;
          }
        }
        
        // Si on change la date de facture, calculer automatiquement la date d'échéance (J+7)
        if (field === 'date' && value) {
          updated.due_date = calculateDueDate(value);
        }
        
        // Si on change le montant HT, calculer automatiquement le TTC (+20%)
        if (field === 'montant_ht' && value !== "") {
          updated.montant_ttc = calculateTTC(value);
        }
        
        return updated;
      })
    );
  }, [organizations]);

  const addRow = useCallback(() => {
    setRows((prev) => [...prev, emptyRow()]);
  }, []);

  const duplicateRow = useCallback((id: string) => {
    setRows((prev) => {
      const idx = prev.findIndex((r) => r.id === id);
      if (idx === -1) return prev;
      
      const original = prev[idx];
      const copy = emptyRow({
        ...original,
        numero: incrementInvoiceNumber(original.numero),
        pdf_s3_key: null, // Ne pas dupliquer le PDF
        pdf_uploading: false,
      });
      
      return [...prev.slice(0, idx + 1), copy, ...prev.slice(idx + 1)];
    });
  }, []);

  const deleteRow = useCallback((id: string) => {
    setRows((prev) => prev.filter((r) => r.id !== id));
  }, []);

  const toggleSelect = useCallback((id: string) => {
    setRows((prev) =>
      prev.map((r) => (r.id === id ? { ...r, selected: !r.selected } : r))
    );
  }, []);

  const toggleSelectAll = useCallback(() => {
    const allSelected = rows.every((r) => r.selected);
    setRows((prev) => prev.map((r) => ({ ...r, selected: !allSelected })));
  }, [rows]);

  const deleteSelected = useCallback(() => {
    setRows((prev) => prev.filter((r) => !r.selected));
  }, []);

  // Upload PDF pour une ligne
  const handlePdfUpload = useCallback(async (rowId: string, file: File) => {
    const row = rows.find(r => r.id === rowId);
    if (!row) return;

    if (file.type !== 'application/pdf') {
      alert('Seuls les fichiers PDF sont acceptés.');
      return;
    }

    if (!row.org_id || !row.numero) {
      alert('Veuillez remplir l\'organisation et le numéro de facture avant d\'uploader le PDF.');
      return;
    }

    // Marquer comme en cours d'upload
    setRows(prev => prev.map(r => 
      r.id === rowId ? { ...r, pdf_uploading: true } : r
    ));

    try {
      const formData = new FormData();
      formData.append('pdf', file);
      formData.append('org_id', row.org_id);
      formData.append('invoice_number', row.numero);
      
      const response = await fetch('/api/staff/facturation/upload-pdf', {
        method: 'POST',
        body: formData,
      });
      
      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || 'Upload failed');
      }
      
      const result = await response.json();
      
      // Mettre à jour la ligne avec le s3_key
      setRows(prev => prev.map(r => 
        r.id === rowId 
          ? { ...r, pdf_s3_key: result.s3_key, pdf_uploading: false } 
          : r
      ));
    } catch (error) {
      console.error('Upload error:', error);
      alert(`Erreur d'upload : ${error instanceof Error ? error.message : 'erreur inconnue'}`);
      
      // Retirer l'état d'upload
      setRows(prev => prev.map(r => 
        r.id === rowId ? { ...r, pdf_uploading: false } : r
      ));
    }
  }, [rows]);

  const handleRemovePdf = useCallback((rowId: string) => {
    setRows(prev => prev.map(r => 
      r.id === rowId ? { ...r, pdf_s3_key: null } : r
    ));
  }, []);

  // Import CSV
  const handleFileImport = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (evt) => {
      const text = evt.target?.result as string;
      if (!text) return;

      const parsed = parseCSV(text);
      if (parsed.length === 0) return;

      // Skip header si présent
      const hasHeader = parsed[0].some(cell => 
        cell.toLowerCase().includes('organisation') ||
        cell.toLowerCase().includes('numero') ||
        cell.toLowerCase().includes('montant')
      );
      
      const dataRows = hasHeader ? parsed.slice(1) : parsed;
      const newRows = rowsFromMatrix(dataRows, organizations);
      
      setRows(newRows.length > 0 ? newRows : [emptyRow()]);
    };
    reader.readAsText(file);
    
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  }, [organizations]);

  // Export CSV template
  const exportTemplate = useCallback(() => {
    const headers = [
      "Organisation",
      "Numéro",
      "Période",
      "Date",
      "Date échéance",
      "Date paiement",
      "Date SEPA",
      "Montant HT",
      "Montant TTC",
      "Statut",
      "Notes"
    ];
    
    const example = [
      "NomOrganisation",
      "FAC-2025-001",
      "Janvier 2025",
      "2025-01-15",
      "2025-02-15",
      "",
      "",
      "1000.00",
      "1200.00",
      "emise",
      "Notes facultatives"
    ];
    
    const note = [
      "",
      "Note: Les PDFs doivent être uploadés manuellement via le tableau (colonne PDF)",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      ""
    ];
    
    const csv = [headers.join(';'), example.join(';'), note.join(';')].join('\n');
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'template_factures.csv';
    link.click();
  }, []);

  // Soumission
  const handleSubmit = useCallback(async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!validateAll()) {
      alert("Veuillez corriger les erreurs avant de soumettre.");
      return;
    }

    if (rows.length === 0) {
      alert("Aucune facture à créer.");
      return;
    }

    const confirmed = confirm(
      `Vous allez créer ${rows.length} facture(s). Continuer ?`
    );
    if (!confirmed) return;

    setIsLoading(true);
    
    try {
    const payload = rows.map(r => ({
      org_id: r.org_id,
      numero: r.numero,
      periode: r.periode || null,
      date: r.date || null,
      due_date: r.due_date || null,
      payment_date: r.payment_date || null,
      sepa_day: r.sepa_day || null,
      montant_ht: Number(r.montant_ht) || 0,
      montant_ttc: Number(r.montant_ttc) || 0,
      statut: r.statut,
      notes: r.notes || null,
      pdf_s3_key: r.pdf_s3_key || null,
      invoice_type: 'paie_mensuelle',
      payment_method: 'sepa',
    }));      const result = await api<{ created: number }>("/staff/facturation/bulk-create", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ invoices: payload }),
      });

      alert(`${result.created || rows.length} facture(s) créée(s) avec succès !`);
      router.push("/staff/facturation");
    } catch (error: any) {
      console.error("Erreur lors de la création:", error);
      alert(`Erreur : ${error.message || "erreur inconnue"}`);
    } finally {
      setIsLoading(false);
    }
  }, [rows, validateAll, router]);

  const selectedCount = rows.filter((r) => r.selected).length;

  return (
    <main className="space-y-5">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Link
            href="/staff/facturation"
            className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800"
          >
            <ArrowLeft className="w-4 h-4" />
            Retour
          </Link>
          <div className="text-slate-400">/</div>
          <h1 className="text-xl font-bold text-slate-900">
            Création factures - Saisie tableau
          </h1>
        </div>
        
        <button
          onClick={() => setShowHelp(!showHelp)}
          className="text-sm text-blue-600 hover:text-blue-800"
        >
          {showHelp ? "Masquer" : "Afficher"} l'aide
        </button>
      </div>

      {/* Aide */}
      {showHelp && (
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm space-y-2">
          <h3 className="font-semibold text-blue-900">Comment utiliser la saisie tableau ?</h3>
          <ul className="list-disc list-inside space-y-1 text-blue-800">
            <li>Remplissez les lignes directement dans le tableau</li>
            <li>Utilisez Tab/Shift+Tab pour naviguer entre les colonnes</li>
            <li>Cliquez sur "Ajouter une ligne" pour créer plus de lignes</li>
            <li>Importez un fichier CSV pour pré-remplir plusieurs factures</li>
            <li>Téléchargez le modèle CSV pour voir le format attendu</li>
            <li>Les champs obligatoires : Organisation, Numéro, Montant TTC, Date</li>
            <li>Pour chaque ligne, vous pouvez glisser-déposer un PDF ou cliquer sur la colonne PDF</li>
            <li>Les PDFs doivent être ajoutés après avoir rempli l'organisation et le numéro</li>
          </ul>
          
          <h4 className="font-semibold text-blue-900 mt-3">Automatismes :</h4>
          <ul className="list-disc list-inside space-y-1 text-blue-800">
            <li>Le statut par défaut est "En cours"</li>
            <li>La date d'échéance se calcule automatiquement à J+7 de la date de facture</li>
            <li>Le montant TTC se calcule automatiquement (+20% du HT)</li>
            <li>Lors de la duplication d'une ligne, le numéro de facture s'incrémente automatiquement</li>
            <li>Tous ces champs restent modifiables manuellement</li>
          </ul>
        </div>
      )}

      {/* Actions toolbar */}
      <div className="bg-white border rounded-lg p-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <button
              onClick={addRow}
              className="inline-flex items-center gap-2 px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
            >
              <Plus className="w-4 h-4" />
              Ajouter une ligne
            </button>
            
            <input
              ref={fileInputRef}
              type="file"
              accept=".csv"
              onChange={handleFileImport}
              className="hidden"
            />
            <button
              onClick={() => fileInputRef.current?.click()}
              className="inline-flex items-center gap-2 px-3 py-2 border rounded-lg hover:bg-slate-50 transition-colors text-sm"
            >
              <Upload className="w-4 h-4" />
              Importer CSV
            </button>
            
            <button
              onClick={exportTemplate}
              className="inline-flex items-center gap-2 px-3 py-2 border rounded-lg hover:bg-slate-50 transition-colors text-sm"
            >
              <Download className="w-4 h-4" />
              Modèle CSV
            </button>
          </div>
          
          <div className="flex items-center gap-2">
            {selectedCount > 0 && (
              <>
                <span className="text-sm text-slate-600">
                  {selectedCount} ligne{selectedCount > 1 ? "s" : ""} sélectionnée{selectedCount > 1 ? "s" : ""}
                </span>
                <button
                  onClick={deleteSelected}
                  className="inline-flex items-center gap-2 px-3 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors text-sm"
                >
                  <Trash2 className="w-4 h-4" />
                  Supprimer
                </button>
              </>
            )}
            
            <div className="text-sm text-slate-600">
              {rows.length} ligne{rows.length > 1 ? "s" : ""}
            </div>
          </div>
        </div>
      </div>

      {/* Tableau */}
      <form onSubmit={handleSubmit}>
        <div className="bg-white border rounded-lg overflow-hidden">
          <div className="overflow-x-auto max-h-[600px] overflow-y-auto">
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="border-b bg-slate-50">
                  <th className={thStickyLeft} style={{ width: '40px', left: 0 }}>
                    <input
                      type="checkbox"
                      checked={rows.length > 0 && rows.every((r) => r.selected)}
                      onChange={toggleSelectAll}
                      className="rounded"
                    />
                  </th>
                  <th className={thStickyLeft} style={{ width: '60px', left: '40px' }}>Actions</th>
                  <th className={thStickyLeft} style={{ minWidth: '200px', left: '100px' }}>Organisation *</th>
                  <th className={thCls} style={{ minWidth: '150px' }}>Numéro *</th>
                  <th className={thCls} style={{ minWidth: '120px' }}>Période</th>
                  <th className={thCls} style={{ minWidth: '130px' }}>Date *</th>
                  <th className={thCls} style={{ minWidth: '130px' }}>Échéance</th>
                  <th className={thCls} style={{ minWidth: '130px' }}>Paiement</th>
                  <th className={thCls} style={{ minWidth: '130px' }}>SEPA</th>
                  <th className={thCls} style={{ minWidth: '110px' }}>Montant HT</th>
                  <th className={thCls} style={{ minWidth: '110px' }}>Montant TTC *</th>
                  <th className={thCls} style={{ minWidth: '120px' }}>Statut</th>
                  <th className={thCls} style={{ minWidth: '140px' }}>PDF</th>
                  <th className={thCls} style={{ minWidth: '200px' }}>Notes</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((row, idx) => {
                  const rowErrors = errors[row.id] || {};
                  
                  return (
                    <tr key={row.id} className="border-b hover:bg-slate-50/50">
                      <td className={tdStickyLeft} style={{ left: 0 }}>
                        <input
                          type="checkbox"
                          checked={row.selected}
                          onChange={() => toggleSelect(row.id)}
                          className="rounded"
                        />
                      </td>
                      <td className={tdStickyLeft} style={{ left: '40px' }}>
                        <div className="flex items-center gap-1">
                          <button
                            type="button"
                            onClick={() => duplicateRow(row.id)}
                            className="p-1 hover:bg-slate-100 rounded"
                            title="Dupliquer"
                          >
                            <Copy className="w-3.5 h-3.5 text-slate-600" />
                          </button>
                          <button
                            type="button"
                            onClick={() => deleteRow(row.id)}
                            className="p-1 hover:bg-red-100 rounded"
                            title="Supprimer"
                          >
                            <Trash2 className="w-3.5 h-3.5 text-red-600" />
                          </button>
                        </div>
                      </td>
                      <td className={tdStickyLeft} style={{ left: '100px' }}>
                        <select
                          value={row.org_id}
                          onChange={(e) => updateRow(row.id, "org_id", e.target.value)}
                          className={`${selectCls} ${rowErrors.org_id ? 'border-red-500' : ''}`}
                        >
                          <option value="">-- Sélectionner --</option>
                          {organizations.map((org) => (
                            <option key={org.id} value={org.id}>
                              {org.structure_api}
                            </option>
                          ))}
                        </select>
                      </td>
                      <td className={tdCls}>
                        <input
                          type="text"
                          value={row.numero}
                          onChange={(e) => updateRow(row.id, "numero", e.target.value)}
                          className={inputCls(!!rowErrors.numero)}
                          placeholder="FAC-2025-001"
                        />
                      </td>
                      <td className={tdCls}>
                        <input
                          type="text"
                          value={row.periode}
                          onChange={(e) => updateRow(row.id, "periode", e.target.value)}
                          className={inputCls()}
                          placeholder="Janvier 2025"
                        />
                      </td>
                      <td className={tdCls}>
                        <input
                          type="date"
                          value={row.date}
                          onChange={(e) => updateRow(row.id, "date", e.target.value)}
                          className={inputCls(!!rowErrors.date)}
                        />
                      </td>
                      <td className={tdCls}>
                        <input
                          type="date"
                          value={row.due_date}
                          onChange={(e) => updateRow(row.id, "due_date", e.target.value)}
                          className={inputCls(!!rowErrors.due_date)}
                        />
                      </td>
                      <td className={tdCls}>
                        <input
                          type="date"
                          value={row.payment_date}
                          onChange={(e) => updateRow(row.id, "payment_date", e.target.value)}
                          className={inputCls(!!rowErrors.payment_date)}
                        />
                      </td>
                      <td className={tdCls}>
                        <input
                          type="date"
                          value={row.sepa_day}
                          onChange={(e) => updateRow(row.id, "sepa_day", e.target.value)}
                          className={inputCls()}
                        />
                      </td>
                      <td className={tdCls}>
                        <input
                          type="number"
                          step="0.01"
                          value={row.montant_ht}
                          onChange={(e) => updateRow(row.id, "montant_ht", e.target.value)}
                          className={numberCls()}
                          placeholder="0.00"
                        />
                      </td>
                      <td className={tdCls}>
                        <input
                          type="number"
                          step="0.01"
                          value={row.montant_ttc}
                          onChange={(e) => updateRow(row.id, "montant_ttc", e.target.value)}
                          className={numberCls(!!rowErrors.montant_ttc)}
                          placeholder="0.00"
                        />
                      </td>
                      <td className={tdCls}>
                        <select
                          value={row.statut}
                          onChange={(e) => updateRow(row.id, "statut", e.target.value)}
                          className={selectCls}
                        >
                          <option value="brouillon">Brouillon</option>
                          <option value="en_cours">En cours</option>
                          <option value="prete">Prête</option>
                          <option value="emise">Émise</option>
                          <option value="payee">Payée</option>
                          <option value="annulee">Annulée</option>
                        </select>
                      </td>
                      <td className={tdCls}>
                        <PdfUploadCell
                          rowId={row.id}
                          pdfKey={row.pdf_s3_key}
                          isUploading={row.pdf_uploading}
                          onUpload={handlePdfUpload}
                          onRemove={handleRemovePdf}
                          disabled={!row.org_id || !row.numero}
                        />
                      </td>
                      <td className={tdCls}>
                        <input
                          type="text"
                          value={row.notes}
                          onChange={(e) => updateRow(row.id, "notes", e.target.value)}
                          className={inputCls()}
                          placeholder="Notes..."
                        />
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        {/* Footer actions */}
        <div className="mt-4 flex items-center justify-between">
          <div className="text-sm text-slate-600">
            {Object.keys(errors).length > 0 && (
              <span className="text-red-600">
                {Object.keys(errors).length} ligne{Object.keys(errors).length > 1 ? "s" : ""} avec erreur{Object.keys(errors).length > 1 ? "s" : ""}
              </span>
            )}
          </div>
          
          <div className="flex items-center gap-3">
            <Link
              href="/staff/facturation"
              className="px-4 py-2 text-slate-600 hover:text-slate-800 transition-colors"
            >
              Annuler
            </Link>
            <button
              type="submit"
              disabled={isLoading || rows.length === 0}
              className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
            >
              <Save className="w-4 h-4" />
              {isLoading ? "Création..." : `Créer ${rows.length} facture${rows.length > 1 ? "s" : ""}`}
            </button>
          </div>
        </div>
      </form>
    </main>
  );
}
