// components/staff/contracts/SalaireParDateEditor.tsx
"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Edit2, Save, X } from "lucide-react";
import { toast } from "sonner";

interface SalaireItem {
  numero: number;
  montant: number;
}

interface SalaireParJour {
  date: string;
  items?: SalaireItem[];
  montant?: number;
}

interface SalairesParDate {
  representations?: SalaireParJour[];
  repetitions?: SalaireParJour[];
  jours_travail?: SalaireParJour[];
  total_calcule: number;
}

interface SalaireParDateEditorProps {
  salairesParDate: SalairesParDate;
  contractId: string;
  onUpdate?: (newSalaires: SalairesParDate) => void;
}

export function SalaireParDateEditor({ salairesParDate, contractId, onUpdate }: SalaireParDateEditorProps) {
  const [isEditing, setIsEditing] = useState(false);
  const [editedData, setEditedData] = useState<SalairesParDate>(salairesParDate);
  const [isSaving, setIsSaving] = useState(false);

  // Calculer le total
  const calculateTotal = (data: SalairesParDate): number => {
    let total = 0;

    // Représentations
    data.representations?.forEach(rep => {
      rep.items?.forEach(item => {
        total += item.montant;
      });
    });

    // Répétitions
    data.repetitions?.forEach(rep => {
      rep.items?.forEach(item => {
        total += item.montant;
      });
    });

    // Jours travaillés
    data.jours_travail?.forEach(jour => {
      if (jour.montant) {
        total += jour.montant;
      }
    });

    return total;
  };

  // Mettre à jour le montant d'un item de représentation
  const updateRepresentationItem = (repIdx: number, itemIdx: number, newMontant: string) => {
    const newData = { ...editedData };
    if (newData.representations && newData.representations[repIdx]?.items) {
      newData.representations[repIdx].items[itemIdx].montant = parseFloat(newMontant) || 0;
      newData.total_calcule = calculateTotal(newData);
      setEditedData(newData);
    }
  };

  // Mettre à jour le montant d'un item de répétition
  const updateRepetitionItem = (repIdx: number, itemIdx: number, newMontant: string) => {
    const newData = { ...editedData };
    if (newData.repetitions && newData.repetitions[repIdx]?.items) {
      newData.repetitions[repIdx].items[itemIdx].montant = parseFloat(newMontant) || 0;
      newData.total_calcule = calculateTotal(newData);
      setEditedData(newData);
    }
  };

  // Mettre à jour le montant d'un jour travaillé
  const updateJourTravail = (jourIdx: number, newMontant: string) => {
    const newData = { ...editedData };
    if (newData.jours_travail && newData.jours_travail[jourIdx]) {
      newData.jours_travail[jourIdx].montant = parseFloat(newMontant) || 0;
      newData.total_calcule = calculateTotal(newData);
      setEditedData(newData);
    }
  };

  // Sauvegarder les modifications
  const handleSave = async () => {
    setIsSaving(true);
    try {
      const response = await fetch(`/api/staff/contrats/${contractId}/salaires-par-date`, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ salaires_par_date: editedData }),
      });

      if (!response.ok) {
        throw new Error("Erreur lors de la mise à jour");
      }

      toast.success("Salaires par date mis à jour");
      setIsEditing(false);
      
      if (onUpdate) {
        onUpdate(editedData);
      }
    } catch (error) {
      console.error("Error saving salaires par date:", error);
      toast.error("Impossible de sauvegarder les modifications");
    } finally {
      setIsSaving(false);
    }
  };

  // Annuler les modifications
  const handleCancel = () => {
    setEditedData(salairesParDate);
    setIsEditing(false);
  };

  const currentData = isEditing ? editedData : salairesParDate;

  return (
    <div className="mt-3 p-4 bg-slate-50 rounded-lg border border-slate-200">
      <div className="flex items-center justify-between mb-3">
        <div className="text-xs font-semibold text-slate-700">Détail des salaires par date</div>
        {!isEditing ? (
          <Button
            type="button"
            variant="outline"
            size="sm"
            onClick={() => setIsEditing(true)}
            className="h-7 px-2 text-xs"
          >
            <Edit2 className="h-3 w-3 mr-1" />
            Modifier
          </Button>
        ) : (
          <div className="flex gap-2">
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={handleCancel}
              disabled={isSaving}
              className="h-7 px-2 text-xs"
            >
              <X className="h-3 w-3 mr-1" />
              Annuler
            </Button>
            <Button
              type="button"
              variant="default"
              size="sm"
              onClick={handleSave}
              disabled={isSaving}
              className="h-7 px-2 text-xs"
            >
              <Save className="h-3 w-3 mr-1" />
              {isSaving ? "Sauvegarde..." : "Enregistrer"}
            </Button>
          </div>
        )}
      </div>

      <div className="space-y-4">
        {/* Représentations */}
        {currentData.representations && currentData.representations.length > 0 && (
          <div>
            <div className="text-xs font-semibold text-indigo-700 uppercase tracking-wide mb-2">Représentations</div>
            <div className="overflow-hidden rounded-md border border-slate-200">
              <table className="w-full text-xs">
                <thead className="bg-slate-100">
                  <tr>
                    <th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Date</th>
                    <th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Type</th>
                    <th className="text-right px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Montant</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-slate-100">
                  {currentData.representations.map((rep, repIdx) => (
                    rep.items && rep.items.map((item, itemIdx) => (
                      <tr key={`${repIdx}-${itemIdx}`} className="hover:bg-slate-50">
                        <td className="px-3 py-2 font-medium text-slate-700">{rep.date}</td>
                        <td className="px-3 py-2 text-slate-600">R{item.numero}</td>
                        <td className="px-3 py-2 text-right">
                          {isEditing ? (
                            <Input
                              type="number"
                              step="0.01"
                              value={item.montant}
                              onChange={(e) => updateRepresentationItem(repIdx, itemIdx, e.target.value)}
                              className="h-7 text-right text-xs w-24 ml-auto"
                            />
                          ) : (
                            <span className="font-semibold text-slate-900">{item.montant.toFixed(2)} €</span>
                          )}
                        </td>
                      </tr>
                    ))
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Répétitions */}
        {currentData.repetitions && currentData.repetitions.length > 0 && (
          <div>
            <div className="text-xs font-semibold text-purple-700 uppercase tracking-wide mb-2">Répétitions</div>
            <div className="overflow-hidden rounded-md border border-slate-200">
              <table className="w-full text-xs">
                <thead className="bg-slate-100">
                  <tr>
                    <th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Date</th>
                    <th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Type</th>
                    <th className="text-right px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Montant</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-slate-100">
                  {currentData.repetitions.map((rep, repIdx) => (
                    rep.items && rep.items.map((item, itemIdx) => (
                      <tr key={`${repIdx}-${itemIdx}`} className="hover:bg-slate-50">
                        <td className="px-3 py-2 font-medium text-slate-700">{rep.date}</td>
                        <td className="px-3 py-2 text-slate-600">S{item.numero}</td>
                        <td className="px-3 py-2 text-right">
                          {isEditing ? (
                            <Input
                              type="number"
                              step="0.01"
                              value={item.montant}
                              onChange={(e) => updateRepetitionItem(repIdx, itemIdx, e.target.value)}
                              className="h-7 text-right text-xs w-24 ml-auto"
                            />
                          ) : (
                            <span className="font-semibold text-slate-900">{item.montant.toFixed(2)} €</span>
                          )}
                        </td>
                      </tr>
                    ))
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Jours travaillés */}
        {currentData.jours_travail && currentData.jours_travail.length > 0 && (
          <div>
            <div className="text-xs font-semibold text-green-700 uppercase tracking-wide mb-2">Jours travaillés</div>
            <div className="overflow-hidden rounded-md border border-slate-200">
              <table className="w-full text-xs">
                <thead className="bg-slate-100">
                  <tr>
                    <th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Date</th>
                    <th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Type</th>
                    <th className="text-right px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Montant</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-slate-100">
                  {currentData.jours_travail.map((jour, jourIdx) => (
                    <tr key={jourIdx} className="hover:bg-slate-50">
                      <td className="px-3 py-2 font-medium text-slate-700">{jour.date}</td>
                      <td className="px-3 py-2 text-slate-600">Jour</td>
                      <td className="px-3 py-2 text-right">
                        {isEditing ? (
                          <Input
                            type="number"
                            step="0.01"
                            value={jour.montant || 0}
                            onChange={(e) => updateJourTravail(jourIdx, e.target.value)}
                            className="h-7 text-right text-xs w-24 ml-auto"
                          />
                        ) : (
                          <span className="font-semibold text-slate-900">{(jour.montant || 0).toFixed(2)} €</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Total */}
        <div className="pt-3 border-t border-slate-200">
          <div className="flex justify-between items-center">
            <span className="text-xs font-semibold text-slate-700">Total</span>
            <span className="text-sm font-bold text-indigo-900">{currentData.total_calcule.toFixed(2)} €</span>
          </div>
        </div>
      </div>
    </div>
  );
}
