"use client";

import { useState, useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import { X, Plus, Trash2, ChevronDown, ChevronRight } from "lucide-react";

type Referrer = {
  id: string;
  code: string;
  name: string;
  contact_name: string;
  address: string;
  postal_code: string;
  city: string;
};

type PrestationLine = {
  type_prestation: string;
  quantite: number;
  tarif: number;
  total: number;
};

type ClientPrestations = {
  client: string;
  code: string;
  expanded: boolean;
  lines: PrestationLine[];
};

type ReferredClient = {
  org_id: string;
  code_employeur: string;
  organizations: {
    name: string;
  };
};

type CreateNAAModalProps = {
  onClose: () => void;
  onSuccess: () => void;
};

export default function CreateNAAModal({ onClose, onSuccess }: CreateNAAModalProps) {
  const [isGenerating, setIsGenerating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  // Formulaire
  const [referrerCode, setReferrerCode] = useState("");
  const [periode, setPeriode] = useState("");
  const [callsheetDate, setCallsheetDate] = useState("");
  const [limitDate, setLimitDate] = useState("");
  const [transferReference, setTransferReference] = useState("");
  const [soldeCompte, setSoldeCompte] = useState("0");
  const [deposit, setDeposit] = useState("0");
  
  // Prestations groupées par client
  const [clientsPrestations, setClientsPrestations] = useState<ClientPrestations[]>([]);

  // Récupération des apporteurs
  const { data: referrers = [] } = useQuery<Referrer[]>({
    queryKey: ["referrers"],
    queryFn: async () => {
      const res = await fetch("/api/staff/referrers", {
        credentials: "include"
      });
      if (!res.ok) return [];
      return res.json();
    },
  });

  // Récupération des clients apportés par l'apporteur sélectionné
  const { data: referredClients = [] } = useQuery<ReferredClient[]>({
    queryKey: ["referred-clients", referrerCode],
    queryFn: async () => {
      if (!referrerCode) return [];
      const res = await fetch(`/api/staff/referrers/${referrerCode}/clients`, {
        credentials: "include"
      });
      if (!res.ok) return [];
      return res.json();
    },
    enabled: !!referrerCode,
  });

  const selectedReferrer = referrers.find(r => r.code === referrerCode);
  
  const typesPrestation = [
    "Ouverture de compte",
    "Abonnement",
    "Paies CDDU",
    "Paies RG",
    "Avenants",
    "Autres"
  ];

  // Ajouter un nouveau client avec une prestation vide
  const addClient = () => {
    setClientsPrestations([...clientsPrestations, {
      client: "",
      code: "",
      expanded: true,
      lines: [{
        type_prestation: "",
        quantite: 1,
        tarif: 0,
        total: 0
      }]
    }]);
  };

  // Supprimer un client et toutes ses prestations
  const removeClient = (clientIndex: number) => {
    setClientsPrestations(clientsPrestations.filter((_, i) => i !== clientIndex));
  };

  // Ajouter une ligne de prestation pour un client
  const addLineToClient = (clientIndex: number) => {
    const newClients = [...clientsPrestations];
    newClients[clientIndex].lines.push({
      type_prestation: "",
      quantite: 1,
      tarif: 0,
      total: 0
    });
    setClientsPrestations(newClients);
  };

  // Supprimer une ligne de prestation
  const removeLine = (clientIndex: number, lineIndex: number) => {
    const newClients = [...clientsPrestations];
    newClients[clientIndex].lines = newClients[clientIndex].lines.filter((_, i) => i !== lineIndex);
    setClientsPrestations(newClients);
  };

  // Mettre à jour le client
  const updateClient = (clientIndex: number, clientName: string) => {
    const newClients = [...clientsPrestations];
    const selectedClient = referredClients.find(c => c.organizations.name === clientName);
    newClients[clientIndex].client = clientName;
    newClients[clientIndex].code = selectedClient?.code_employeur || "";
    setClientsPrestations(newClients);
  };

  // Mettre à jour une ligne de prestation
  const updateLine = (clientIndex: number, lineIndex: number, field: keyof PrestationLine, value: any) => {
    const newClients = [...clientsPrestations];
    newClients[clientIndex].lines[lineIndex] = {
      ...newClients[clientIndex].lines[lineIndex],
      [field]: value
    };
    
    // Calculer le total automatiquement
    if (field === "quantite" || field === "tarif") {
      const line = newClients[clientIndex].lines[lineIndex];
      const quantite = field === "quantite" ? parseFloat(value) || 0 : line.quantite;
      const tarif = field === "tarif" ? parseFloat(value) || 0 : line.tarif;
      newClients[clientIndex].lines[lineIndex].total = quantite * tarif;
    }
    
    setClientsPrestations(newClients);
  };

  // Basculer l'état expanded d'un client
  const toggleClientExpanded = (clientIndex: number) => {
    const newClients = [...clientsPrestations];
    newClients[clientIndex].expanded = !newClients[clientIndex].expanded;
    setClientsPrestations(newClients);
  };

  // Calculer le total pour un client
  const getClientTotal = (client: ClientPrestations) => {
    return client.lines.reduce((sum, line) => sum + line.total, 0);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    
    if (!referrerCode || !periode || !callsheetDate) {
      setError("Veuillez remplir tous les champs obligatoires");
      return;
    }

    setIsGenerating(true);

    try {
      // Convertir clientsPrestations en format plat pour l'API
      const prestations = clientsPrestations.flatMap(client =>
        client.lines.map(line => ({
          client: client.client,
          code: client.code,
          type_prestation: line.type_prestation,
          quantite: line.quantite,
          tarif: line.tarif,
          total: line.total
        }))
      );

      const payload = {
        referrer_code: referrerCode,
        periode,
        callsheet_date: callsheetDate,
        limit_date: limitDate || undefined,
        transfer_reference: transferReference || undefined,
        solde_compte_apporteur: parseFloat(soldeCompte) || 0,
        deposit: parseFloat(deposit) || 0,
        prestations
      };

      const res = await fetch("/api/staff/naa/generate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify(payload)
      });

      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || "Erreur lors de la génération de la NAA");
      }

      onSuccess();
    } catch (err: any) {
      setError(err.message);
      setIsGenerating(false);
    }
  };

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
        {/* Header */}
        <div className="px-6 py-4 border-b flex items-center justify-between">
          <h2 className="text-xl font-bold text-slate-800">
            Créer une Note Apporteur d'Affaires
          </h2>
          <button
            onClick={onClose}
            className="text-slate-400 hover:text-slate-600 transition"
          >
            <X className="w-6 h-6" />
          </button>
        </div>

        {/* Body */}
        <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto">
          <div className="p-6 space-y-6">
            {error && (
              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl">
                {error}
              </div>
            )}

            {/* Informations générales */}
            <div>
              <h3 className="font-medium text-slate-800 mb-3">Informations générales</h3>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Apporteur <span className="text-red-500">*</span>
                  </label>
                  <select
                    value={referrerCode}
                    onChange={(e) => setReferrerCode(e.target.value)}
                    className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    required
                  >
                    <option value="">Sélectionner un apporteur</option>
                    {referrers.map(r => (
                      <option key={r.code} value={r.code}>
                        {r.name}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Période <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    value={periode}
                    onChange={(e) => setPeriode(e.target.value)}
                    placeholder="ex: Février 2025"
                    className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    required
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Date de la note <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="date"
                    value={callsheetDate}
                    onChange={(e) => setCallsheetDate(e.target.value)}
                    className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    required
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Date limite de paiement
                  </label>
                  <input
                    type="date"
                    value={limitDate}
                    onChange={(e) => setLimitDate(e.target.value)}
                    className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Référence de virement
                  </label>
                  <input
                    type="text"
                    value={transferReference}
                    onChange={(e) => setTransferReference(e.target.value)}
                    placeholder="ex: DFQM-000001-Janvier 2024"
                    className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Solde compte apporteur
                  </label>
                  <input
                    type="number"
                    step="0.01"
                    value={soldeCompte}
                    onChange={(e) => setSoldeCompte(e.target.value)}
                    className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Acompte
                  </label>
                  <input
                    type="number"
                    step="0.01"
                    value={deposit}
                    onChange={(e) => setDeposit(e.target.value)}
                    className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
                  />
                </div>
              </div>
            </div>

            {/* Prestations groupées par client */}
            <div>
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-medium text-slate-800">Prestations par client</h3>
                <button
                  type="button"
                  onClick={addClient}
                  className="flex items-center gap-1 text-sm text-indigo-600 hover:text-indigo-700 font-medium"
                >
                  <Plus className="w-4 h-4" />
                  Ajouter un client
                </button>
              </div>

              {clientsPrestations.length === 0 ? (
                <div className="text-center py-8 text-slate-500 bg-slate-50 rounded-xl">
                  Aucun client ajouté
                </div>
              ) : (
                <div className="space-y-3">
                  {clientsPrestations.map((clientPresta, clientIndex) => (
                    <div key={clientIndex} className="border rounded-xl bg-white">
                      {/* En-tête client */}
                      <div className="p-4 bg-slate-50 rounded-t-xl border-b flex items-center justify-between">
                        <div className="flex items-center gap-3 flex-1">
                          <button
                            type="button"
                            onClick={() => toggleClientExpanded(clientIndex)}
                            className="text-slate-600 hover:text-slate-800"
                          >
                            {clientPresta.expanded ? (
                              <ChevronDown className="w-5 h-5" />
                            ) : (
                              <ChevronRight className="w-5 h-5" />
                            )}
                          </button>
                          <div className="flex-1 grid grid-cols-3 gap-3">
                            <div className="col-span-2">
                              <select
                                value={clientPresta.client}
                                onChange={(e) => updateClient(clientIndex, e.target.value)}
                                className="w-full px-3 py-2 text-sm font-medium border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                              >
                                <option value="">Sélectionner un client</option>
                                {referredClients.map((client) => (
                                  <option key={client.org_id} value={client.organizations.name}>
                                    {client.organizations.name}
                                  </option>
                                ))}
                              </select>
                            </div>
                            <div>
                              <input
                                type="text"
                                value={clientPresta.code}
                                readOnly
                                placeholder="Code"
                                className="w-full px-3 py-2 text-sm border rounded-lg bg-slate-100 text-slate-600"
                              />
                            </div>
                          </div>
                          <div className="text-right min-w-[120px]">
                            <div className="text-xs text-slate-500">Total client</div>
                            <div className="text-lg font-bold text-slate-800">
                              {getClientTotal(clientPresta).toFixed(2)} €
                            </div>
                          </div>
                        </div>
                        <button
                          type="button"
                          onClick={() => removeClient(clientIndex)}
                          className="ml-3 p-2 text-red-600 hover:bg-red-50 rounded-lg transition"
                          title="Supprimer ce client"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>

                      {/* Lignes de prestations */}
                      {clientPresta.expanded && (
                        <div className="p-4 space-y-2">
                          {clientPresta.lines.map((line, lineIndex) => (
                            <div key={lineIndex} className="flex items-end gap-2 bg-slate-50 p-3 rounded-lg">
                              <div className="flex-1 grid grid-cols-4 gap-2">
                                <div>
                                  <label className="block text-xs font-medium text-slate-600 mb-1">
                                    Type de prestation
                                  </label>
                                  <select
                                    value={line.type_prestation}
                                    onChange={(e) => updateLine(clientIndex, lineIndex, "type_prestation", e.target.value)}
                                    className="w-full px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                  >
                                    <option value="">Type</option>
                                    {typesPrestation.map((type) => (
                                      <option key={type} value={type}>
                                        {type}
                                      </option>
                                    ))}
                                  </select>
                                </div>
                                <div>
                                  <label className="block text-xs font-medium text-slate-600 mb-1">
                                    Quantité
                                  </label>
                                  <input
                                    type="number"
                                    value={line.quantite}
                                    onChange={(e) => updateLine(clientIndex, lineIndex, "quantite", e.target.value)}
                                    className="w-full px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                  />
                                </div>
                                <div>
                                  <label className="block text-xs font-medium text-slate-600 mb-1">
                                    Tarif unitaire (€)
                                  </label>
                                  <input
                                    type="number"
                                    step="0.01"
                                    value={line.tarif}
                                    onChange={(e) => updateLine(clientIndex, lineIndex, "tarif", e.target.value)}
                                    className="w-full px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                  />
                                </div>
                                <div>
                                  <label className="block text-xs font-medium text-slate-600 mb-1">
                                    Total ligne (€)
                                  </label>
                                  <input
                                    type="text"
                                    value={line.total.toFixed(2)}
                                    readOnly
                                    className="w-full px-2 py-1.5 text-sm border rounded-lg bg-slate-100 text-slate-700 font-medium"
                                  />
                                </div>
                              </div>
                              <button
                                type="button"
                                onClick={() => removeLine(clientIndex, lineIndex)}
                                disabled={clientPresta.lines.length === 1}
                                className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition disabled:opacity-30 disabled:cursor-not-allowed"
                                title="Supprimer cette ligne"
                              >
                                <Trash2 className="w-4 h-4" />
                              </button>
                            </div>
                          ))}
                          
                          <button
                            type="button"
                            onClick={() => addLineToClient(clientIndex)}
                            className="w-full py-2 text-sm text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 rounded-lg transition flex items-center justify-center gap-1"
                          >
                            <Plus className="w-4 h-4" />
                            Ajouter une prestation pour ce client
                          </button>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className="text-sm text-slate-500 bg-blue-50 border border-blue-200 rounded-xl p-3">
              <strong>Note :</strong> Les commissions par client seront calculées automatiquement
              en fonction des factures du mois de la période sélectionnée et du taux de commission
              configuré pour chaque client apporté.
            </div>
          </div>

          {/* Footer */}
          <div className="px-6 py-4 border-t flex items-center justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              disabled={isGenerating}
              className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-xl transition disabled:opacity-50"
            >
              Annuler
            </button>
            <button
              type="submit"
              disabled={isGenerating}
              className="px-6 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isGenerating ? "Génération en cours..." : "Générer la NAA"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}
