"use client";

import { useState, useEffect, useMemo } from "react";
import { X, Search, Filter, CheckCircle2, XCircle, Calendar } from "lucide-react";
import { supabase } from "@/lib/supabaseClient";
import { toast } from "sonner";

type Payslip = {
  id: string;
  contract_id: string | null;
  period_month: string | null;
  period_start: string | null;
  period_end: string | null;
  pay_date: string | null;
  net_amount: number | null;
  net_after_withholding: number | null;
  processed: boolean | null;
  organization_id: string | null;
  cddu_contracts?: {
    id: string;
    contract_number: string | null;
    employee_name: string | null;
    employee_id: string | null;
    employee_matricule: string | null;
    salaries?: {
      nom: string | null;
      prenom: string | null;
    };
  } | null;
};

type PayslipsSelectionModalProps = {
  organizationId: string;
  organizationName: string;
  onClose: () => void;
  onConfirm: (payslipIds: string[], totalNet: number, customAmounts?: Record<string, number>) => void;
};

function formatDate(dateString: string | null | undefined): string {
  if (!dateString) return "—";
  try {
    const date = new Date(dateString);
    return date.toLocaleDateString("fr-FR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    });
  } catch {
    return "—";
  }
}

function formatMonthYear(dateString: string | null | undefined): string {
  if (!dateString) return "—";
  try {
    const date = new Date(dateString);
    return date.toLocaleDateString("fr-FR", {
      month: "long",
      year: "numeric",
    });
  } catch {
    return "—";
  }
}

function formatAmount(amount: string | number | null | undefined): string {
  if (!amount) return "0,00 €";
  try {
    const num = typeof amount === "string" ? parseFloat(amount) : amount;
    return new Intl.NumberFormat("fr-FR", {
      style: "currency",
      currency: "EUR",
    }).format(num);
  } catch {
    return "0,00 €";
  }
}

export default function PayslipsSelectionModal({
  organizationId,
  organizationName,
  onClose,
  onConfirm,
}: PayslipsSelectionModalProps) {
  const [payslips, setPayslips] = useState<Payslip[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [customAmounts, setCustomAmounts] = useState<Record<string, number>>({});
  
  // Filtres
  const [searchQuery, setSearchQuery] = useState("");
  const [periodFilter, setPeriodFilter] = useState<string | null>(null);
  const [processedFilter, setProcessedFilter] = useState<string | null>(null);
  const [showFilters, setShowFilters] = useState(false);

  // Charger les paies de l'organisation
  useEffect(() => {
    async function loadPayslips() {
      setLoading(true);
      try {
        console.log("[PayslipsSelectionModal] Loading payslips for organization:", organizationId);
        
        // Utiliser l'API route côté serveur au lieu d'une requête client-side
        // Cela évite les problèmes de RLS avec la clé anon
        const res = await fetch(`/api/staff/payslips/available?org_id=${organizationId}`);
        
        if (!res.ok) {
          const error = await res.json();
          console.error("[PayslipsSelectionModal] API error:", error);
          toast.error(error.error || "Erreur lors du chargement des paies");
          return;
        }
        
        const result = await res.json();
        
        console.log("[PayslipsSelectionModal] API result:", {
          success: result.success,
          total: result.total,
          stats: result.stats
        });
        
        if (result.payslips && result.payslips.length > 0) {
          console.log("[PayslipsSelectionModal] First payslip sample:", result.payslips[0]);
        }
        
        setPayslips(result.payslips || []);
      } catch (err) {
        console.error("[PayslipsSelectionModal] Error:", err);
        toast.error("Erreur lors du chargement");
      } finally {
        setLoading(false);
      }
    }

    loadPayslips();
  }, [organizationId]);

  // Périodes disponibles (pour le filtre)
  const availablePeriods = useMemo(() => {
    const periods = new Set<string>();
    payslips.forEach(p => {
      if (p.period_month) {
        periods.add(formatMonthYear(p.period_month));
      }
    });
    return Array.from(periods).sort().reverse();
  }, [payslips]);

  // Paies filtrées
  const filteredPayslips = useMemo(() => {
    console.log("[PayslipsSelectionModal] Filtering payslips:", {
      total: payslips.length,
      searchQuery,
      periodFilter,
      processedFilter
    });
    
    return payslips.filter(p => {
      // Filtre de recherche (nom employé, matricule, contrat)
      if (searchQuery) {
        const query = searchQuery.toLowerCase().trim();
        
        // Essayer différentes sources pour le nom
        const prenom = p.cddu_contracts?.salaries?.prenom || "";
        const nom = p.cddu_contracts?.salaries?.nom || "";
        const employeeName = `${prenom} ${nom}`.toLowerCase().trim();
        const employeeNameAlt = p.cddu_contracts?.employee_name?.toLowerCase() || "";
        const contractNumber = p.cddu_contracts?.contract_number?.toLowerCase() || "";
        const matricule = p.cddu_contracts?.employee_matricule?.toLowerCase() || "";
        
        // Log pour debug (seulement pour les 3 premières paies)
        if (payslips.indexOf(p) < 3) {
          console.log("[PayslipsSelectionModal] Checking payslip:", {
            id: p.id,
            employeeName,
            employeeNameAlt,
            contractNumber,
            matricule,
            query
          });
        }
        
        // Vérifier si la query apparaît dans l'un des champs
        const matches = 
          employeeName.includes(query) ||
          employeeNameAlt.includes(query) ||
          contractNumber.includes(query) ||
          matricule.includes(query);
        
        if (!matches) {
          return false;
        }
      }
      
      // Filtre par période
      if (periodFilter && p.period_month) {
        if (formatMonthYear(p.period_month) !== periodFilter) {
          return false;
        }
      }
      
      // Filtre par statut processed
      if (processedFilter !== null) {
        const isProcessed = p.processed === true;
        if (processedFilter === "processed" && !isProcessed) return false;
        if (processedFilter === "not_processed" && isProcessed) return false;
      }
      
      return true;
    });
  }, [payslips, searchQuery, periodFilter, processedFilter]);
  
  // Log du résultat du filtrage
  useEffect(() => {
    console.log("[PayslipsSelectionModal] Filtered results:", {
      total: payslips.length,
      filtered: filteredPayslips.length,
      searchQuery,
      periodFilter,
      processedFilter
    });
  }, [filteredPayslips, payslips.length, searchQuery, periodFilter, processedFilter]);

  // Calcul du total sélectionné
  const selectedTotal = useMemo(() => {
    return filteredPayslips
      .filter(p => selectedIds.has(p.id))
      .reduce((sum, p) => {
        // Utiliser le montant personnalisé s'il existe, sinon le montant de la paie
        const customAmount = customAmounts[p.id];
        const defaultAmount = p.net_after_withholding || p.net_amount || 0;
        return sum + (customAmount !== undefined ? customAmount : defaultAmount);
      }, 0);
  }, [filteredPayslips, selectedIds, customAmounts]);

  // Sélection/désélection
  const toggleSelection = (id: string) => {
    const newSet = new Set(selectedIds);
    if (newSet.has(id)) {
      newSet.delete(id);
      // Supprimer le montant personnalisé si on désélectionne
      const newCustomAmounts = { ...customAmounts };
      delete newCustomAmounts[id];
      setCustomAmounts(newCustomAmounts);
    } else {
      newSet.add(id);
    }
    setSelectedIds(newSet);
  };

  const selectAll = () => {
    const allIds = new Set(filteredPayslips.map(p => p.id));
    setSelectedIds(allIds);
  };

  const deselectAll = () => {
    setSelectedIds(new Set());
    setCustomAmounts({});
  };
  
  // Mettre à jour le montant personnalisé
  const updateCustomAmount = (id: string, value: string) => {
    const numValue = parseFloat(value);
    if (!isNaN(numValue) && numValue > 0) {
      setCustomAmounts(prev => ({ ...prev, [id]: numValue }));
    } else if (value === "") {
      // Si on efface le champ, supprimer l'override
      const newCustomAmounts = { ...customAmounts };
      delete newCustomAmounts[id];
      setCustomAmounts(newCustomAmounts);
    }
  };

  const handleConfirm = () => {
    if (selectedIds.size === 0) {
      toast.error("Veuillez sélectionner au moins une paie");
      return;
    }
    onConfirm(Array.from(selectedIds), selectedTotal, customAmounts);
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={onClose}>
      <div className="bg-white rounded-2xl shadow-2xl max-w-6xl w-full max-h-[90vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
        {/* Header */}
        <div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between bg-gradient-to-r from-indigo-50 to-slate-50">
          <div>
            <h3 className="text-2xl font-bold text-slate-800">
              Sélection des paies
            </h3>
            <p className="text-sm text-slate-600 mt-1">
              {organizationName}
            </p>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
          >
            <X className="w-6 h-6 text-slate-600" />
          </button>
        </div>

        {/* Barre de recherche et filtres */}
        <div className="px-6 py-4 border-b border-slate-200 space-y-3">
          <div className="flex items-center gap-3">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
              <input
                type="text"
                placeholder="Rechercher par nom ou n° de contrat..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-10 pr-4 py-2 border rounded-lg"
              />
            </div>
            <button
              onClick={() => setShowFilters(!showFilters)}
              className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-colors ${
                showFilters ? "bg-indigo-100 text-indigo-700" : "bg-slate-100 text-slate-700 hover:bg-slate-200"
              }`}
            >
              <Filter className="w-5 h-5" />
              Filtres
            </button>
          </div>

          {showFilters && (
            <div className="flex items-center gap-3">
              <select
                value={periodFilter || ""}
                onChange={(e) => setPeriodFilter(e.target.value || null)}
                className="px-3 py-2 border rounded-lg text-sm"
              >
                <option value="">Toutes les périodes</option>
                {availablePeriods.map(period => (
                  <option key={period} value={period}>{period}</option>
                ))}
              </select>

              <select
                value={processedFilter || ""}
                onChange={(e) => setProcessedFilter(e.target.value || null)}
                className="px-3 py-2 border rounded-lg text-sm"
              >
                <option value="">Tous les statuts</option>
                <option value="processed">Paies traitées</option>
                <option value="not_processed">Paies non traitées</option>
              </select>

              {(periodFilter || processedFilter) && (
                <button
                  onClick={() => {
                    setPeriodFilter(null);
                    setProcessedFilter(null);
                  }}
                  className="px-3 py-2 text-sm text-slate-600 hover:text-slate-800 underline"
                >
                  Réinitialiser
                </button>
              )}
            </div>
          )}
        </div>

        {/* Barre d'actions */}
        <div className="px-6 py-3 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <button
              onClick={selectAll}
              className="px-3 py-1.5 text-sm bg-white border rounded-lg hover:bg-slate-50 transition-colors"
            >
              Tout sélectionner ({filteredPayslips.length})
            </button>
            <button
              onClick={deselectAll}
              className="px-3 py-1.5 text-sm bg-white border rounded-lg hover:bg-slate-50 transition-colors"
            >
              Tout désélectionner
            </button>
          </div>
          <div className="text-sm text-slate-600">
            <span className="font-semibold text-indigo-600">{selectedIds.size}</span> paie(s) sélectionnée(s)
            {selectedIds.size > 0 && (
              <span className="ml-2">
                • Total: <span className="font-semibold text-slate-800">{formatAmount(selectedTotal)}</span>
              </span>
            )}
          </div>
        </div>

        {/* Liste des paies */}
        <div className="flex-1 overflow-y-auto px-6 py-4">
          {loading ? (
            <div className="flex items-center justify-center py-12">
              <div className="text-slate-600">Chargement des paies...</div>
            </div>
          ) : payslips.length === 0 ? (
            <div className="flex items-center justify-center py-12">
              <div className="text-center">
                <p className="text-slate-600 font-medium">Aucune paie trouvée pour cette organisation</p>
                <p className="text-sm text-slate-500 mt-2">
                  Organisation: <span className="font-mono">{organizationName}</span>
                </p>
                <p className="text-xs text-slate-400 mt-2">
                  ID: <span className="font-mono">{organizationId}</span>
                </p>
                <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg text-left">
                  <p className="text-sm text-slate-700">
                    <strong>Vérifications :</strong>
                  </p>
                  <ul className="text-xs text-slate-600 mt-2 space-y-1 list-disc list-inside">
                    <li>Vérifiez que des paies existent dans la table <code className="bg-slate-100 px-1 rounded">payslips</code></li>
                    <li>Vérifiez que <code className="bg-slate-100 px-1 rounded">organization_id</code> correspond bien à cette organisation</li>
                    <li>Vérifiez les permissions RLS sur la table <code className="bg-slate-100 px-1 rounded">payslips</code></li>
                  </ul>
                </div>
              </div>
            </div>
          ) : filteredPayslips.length === 0 ? (
            <div className="flex items-center justify-center py-12">
              <div className="text-center">
                <p className="text-slate-600">Aucune paie disponible</p>
                <p className="text-sm text-slate-500 mt-1">
                  {searchQuery || periodFilter || processedFilter
                    ? "Essayez de modifier les filtres"
                    : "Toutes les paies sont déjà incluses dans des virements"}
                </p>
                <p className="text-xs text-slate-400 mt-2">
                  ({payslips.length} paie(s) au total, {filteredPayslips.length} après filtres)
                </p>
              </div>
            </div>
          ) : (
            <table className="w-full">
              <thead className="bg-slate-50 sticky top-0 z-10">
                <tr className="border-b">
                  <th className="text-left px-3 py-2 w-12">
                    <input
                      type="checkbox"
                      checked={filteredPayslips.length > 0 && filteredPayslips.every(p => selectedIds.has(p.id))}
                      onChange={(e) => e.target.checked ? selectAll() : deselectAll()}
                      className="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500"
                    />
                  </th>
                  <th className="text-left px-3 py-2">Employé</th>
                  <th className="text-left px-3 py-2">N° Contrat</th>
                  <th className="text-left px-3 py-2">Période</th>
                  <th className="text-left px-3 py-2">Date de paie</th>
                  <th className="text-right px-3 py-2">Net à payer</th>
                  <th className="text-right px-3 py-2">Montant personnalisé</th>
                  <th className="text-center px-3 py-2">Statut</th>
                </tr>
              </thead>
              <tbody>
                {filteredPayslips.map((payslip) => {
                  const isSelected = selectedIds.has(payslip.id);
                  const employeeName = payslip.cddu_contracts?.salaries
                    ? `${payslip.cddu_contracts.salaries.prenom || ""} ${payslip.cddu_contracts.salaries.nom || ""}`.trim()
                    : payslip.cddu_contracts?.employee_name || "—";
                  
                  const defaultAmount = payslip.net_after_withholding || payslip.net_amount || 0;
                  const customAmount = customAmounts[payslip.id];
                  const displayAmount = customAmount !== undefined ? customAmount : defaultAmount;

                  return (
                    <tr
                      key={payslip.id}
                      className={`border-b transition-colors ${
                        isSelected ? "bg-indigo-50 hover:bg-indigo-100" : "hover:bg-slate-50"
                      }`}
                    >
                      <td className="px-3 py-3">
                        <input
                          type="checkbox"
                          checked={isSelected}
                          onChange={() => toggleSelection(payslip.id)}
                          onClick={(e) => e.stopPropagation()}
                          className="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500"
                        />
                      </td>
                      <td className="px-3 py-3">
                        <div className="font-medium text-sm">{employeeName}</div>
                      </td>
                      <td className="px-3 py-3">
                        <div className="font-mono text-sm">{payslip.cddu_contracts?.contract_number || "—"}</div>
                      </td>
                      <td className="px-3 py-3">
                        <div className="text-sm">{formatMonthYear(payslip.period_month)}</div>
                        <div className="text-xs text-slate-500">
                          {formatDate(payslip.period_start)} - {formatDate(payslip.period_end)}
                        </div>
                      </td>
                      <td className="px-3 py-3">
                        <div className="text-sm">{formatDate(payslip.pay_date)}</div>
                      </td>
                      <td className="px-3 py-3 text-right">
                        <div className="font-semibold text-sm text-slate-500">
                          {formatAmount(defaultAmount)}
                        </div>
                      </td>
                      <td className="px-3 py-3 text-right">
                        {isSelected ? (
                          <input
                            type="number"
                            step="0.01"
                            min="0"
                            placeholder={defaultAmount.toFixed(2)}
                            value={customAmount !== undefined ? customAmount : ""}
                            onChange={(e) => updateCustomAmount(payslip.id, e.target.value)}
                            onClick={(e) => e.stopPropagation()}
                            className="w-28 px-2 py-1 text-sm text-right border rounded focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                          />
                        ) : (
                          <span className="text-sm text-slate-400">—</span>
                        )}
                      </td>
                      <td className="px-3 py-3 text-center">
                        {payslip.processed ? (
                          <CheckCircle2 className="w-5 h-5 text-green-600 inline-block" />
                        ) : (
                          <XCircle className="w-5 h-5 text-slate-400 inline-block" />
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>

        {/* Footer avec actions */}
        <div className="px-6 py-4 border-t border-slate-200 bg-slate-50 flex items-center justify-between">
          <div className="text-sm text-slate-600">
            {selectedIds.size > 0 ? (
              <>
                <span className="font-semibold text-indigo-600">{selectedIds.size}</span> paie(s) sélectionnée(s)
                <span className="mx-2">•</span>
                Total: <span className="font-semibold text-slate-800">{formatAmount(selectedTotal)}</span>
              </>
            ) : (
              <span>Aucune paie sélectionnée</span>
            )}
          </div>
          <div className="flex items-center gap-3">
            <button
              onClick={onClose}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
            >
              Annuler
            </button>
            <button
              onClick={handleConfirm}
              disabled={selectedIds.size === 0}
              className="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
            >
              Confirmer la sélection
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
