LogiFlow/client/src/components/modals/ReconciliationModal.tsx

import React, { useState, useEffect } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useToast } from "@/hooks/use-toast";
import { apiRequest } from "@/lib/queryClient";
import { safeFormat } from "@/lib/dateUtils";
import { FileText, Settings, Check, X, MessageSquare } from "lucide-react";
import ReconciliationComments from "@/components/ReconciliationComments";

interface ReconciliationModalProps {
  isOpen: boolean;
  onClose: () => void;
  delivery: any;
  onSave?: () => void;
}

export default function ReconciliationModal({
  isOpen,
  onClose,
  delivery,
  onSave
}: ReconciliationModalProps) {
  const { toast } = useToast();
  const queryClient = useQueryClient();

  const [formData, setFormData] = useState({
    blNumber: "",
    blAmount: "",
    invoiceReference: "",
    invoiceAmount: "",
    reconciled: false,
  });

  // Initialiser le formulaire avec les données de la livraison
  useEffect(() => {
    if (delivery) {
      setFormData({
        blNumber: delivery.blNumber || "",
        blAmount: delivery.blAmount || "",
        invoiceReference: delivery.invoiceReference || "",
        invoiceAmount: delivery.invoiceAmount || "",
        reconciled: delivery.reconciled || false,
      });
    }
  }, [delivery]);

  const updateDeliveryMutation = useMutation({
    mutationFn: async (data: any) => {
      console.log('Sending update for delivery:', delivery?.id, 'with data:', data);
      const response = await apiRequest(`/api/deliveries/${delivery?.id}`, "PUT", data);
      console.log('Update response:', response);
      return response;
    },
    onSuccess: () => {
      toast({
        title: "Succès",
        description: "Données de rapprochement mises à jour avec succès",
      });
      queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
      if (onSave) onSave();
      onClose();
    },
    onError: (error: any) => {
      console.error('Update error:', error);
      toast({
        title: "Erreur",
        description: `Impossible de mettre à jour les données: ${error?.message || 'Erreur inconnue'}`,
        variant: "destructive",
      });
    }
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    updateDeliveryMutation.mutate({
      blNumber: formData.blNumber.trim() || null,
      blAmount: formData.blAmount ? formData.blAmount.toString() : null,
      invoiceReference: formData.invoiceReference.trim() || null,
      invoiceAmount: formData.invoiceAmount ? formData.invoiceAmount.toString() : null,
    });
  };


  const isAutomaticMode = delivery?.supplier?.automaticReconciliation;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            {isAutomaticMode ? (
              <Settings className="w-5 h-5 text-blue-600" />
            ) : (
              <FileText className="w-5 h-5 text-gray-600" />
            )}
            <span>
              Rapprochement {isAutomaticMode ? 'Automatique' : 'Manuel'}
            </span>
            <Badge variant={isAutomaticMode ? "default" : "secondary"}>
              {isAutomaticMode ? "AUTO" : "MANUEL"}
            </Badge>
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-6">
          {/* Informations de la livraison */}
          <div className="bg-gray-50 p-4 rounded-lg">
            <h3 className="font-medium text-gray-900 mb-3">Informations de la livraison</h3>
            <div className="grid grid-cols-2 gap-4 text-sm">
              <div>
                <span className="text-gray-600">Fournisseur :</span>
                <div className="font-medium">{delivery?.supplier?.name}</div>
              </div>
              <div>
                <span className="text-gray-600">Date prévue :</span>
                <div className="font-medium">
                  {safeFormat(delivery?.scheduledDate, 'dd/MM/yyyy')}
                </div>
              </div>
              <div>
                <span className="text-gray-600">Magasin :</span>
                <div className="font-medium">{delivery?.group?.name}</div>
              </div>
              <div>
                <span className="text-gray-600">Statut :</span>
                <Badge variant={delivery?.reconciled ? "default" : "secondary"}>
                  {delivery?.reconciled ? "Rapproché" : "En attente"}
                </Badge>
              </div>
            </div>
          </div>

          <Separator />

          {/* Onglets pour les données de rapprochement et les commentaires */}
          <Tabs defaultValue="reconciliation" className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="reconciliation" className="flex items-center space-x-2">
                <FileText className="w-4 h-4" />
                <span>Données de rapprochement</span>
              </TabsTrigger>
              <TabsTrigger value="comments" className="flex items-center space-x-2">
                <MessageSquare className="w-4 h-4" />
                <span>Commentaires</span>
              </TabsTrigger>
            </TabsList>

            <TabsContent value="reconciliation" className="space-y-4">
              {/* Formulaire de rapprochement */}
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  {/* Données BL */}
                  <div className="space-y-4">
                    <h4 className="font-medium text-gray-900">Bon de Livraison (BL)</h4>
                    
                    <div>
                      <Label htmlFor="blNumber">N° BL</Label>
                      <Input
                        id="blNumber"
                        value={formData.blNumber}
                        onChange={(e) => setFormData(prev => ({ ...prev, blNumber: e.target.value }))}
                        placeholder="Ex: BL-2025-001 (optionnel)"
                      />
                    </div>

                    <div>
                      <Label htmlFor="blAmount">Montant BL (€)</Label>
                      <Input
                        id="blAmount"
                        type="number"
                        step="0.01"
                        value={formData.blAmount}
                        onChange={(e) => setFormData(prev => ({ ...prev, blAmount: e.target.value }))}
                        placeholder="0.00"
                      />
                    </div>
                  </div>

                  {/* Données Facture */}
                  <div className="space-y-4">
                    <h4 className="font-medium text-gray-900">Facture</h4>
                    
                    <div>
                      <Label htmlFor="invoiceReference">Référence Facture</Label>
                      <Input
                        id="invoiceReference"
                        value={formData.invoiceReference}
                        onChange={(e) => setFormData(prev => ({ ...prev, invoiceReference: e.target.value }))}
                        placeholder="Ex: FAC-2025-001"
                      />
                    </div>

                    <div>
                      <Label htmlFor="invoiceAmount">Montant Facture (€)</Label>
                      <Input
                        id="invoiceAmount"
                        type="number"
                        step="0.01"
                        value={formData.invoiceAmount}
                        onChange={(e) => setFormData(prev => ({ ...prev, invoiceAmount: e.target.value }))}
                        placeholder="0.00"
                      />
                    </div>
                  </div>
                </div>

                {/* Actions */}
                <div className="flex justify-end pt-4">
                  <div className="flex space-x-2">
                    <Button
                      type="button"
                      variant="outline"
                      onClick={onClose}
                      disabled={updateDeliveryMutation.isPending}
                    >
                      <X className="w-4 h-4 mr-2" />
                      Annuler
                    </Button>
                    
                    <Button
                      type="submit"
                      variant="outline"
                      disabled={updateDeliveryMutation.isPending}
                    >
                      {updateDeliveryMutation.isPending ? "Enregistrement..." : "Enregistrer"}
                    </Button>
                  </div>
                </div>
              </form>

              {/* Note d'aide */}
              <div className="text-xs text-gray-500 bg-blue-50 p-3 rounded">
                <strong>Note :</strong> Tous les champs sont optionnels. 
                Les données BL et facture sont recommandées pour un suivi précis mais pas obligatoires.
              </div>
            </TabsContent>

            <TabsContent value="comments" className="space-y-4">
              {delivery?.id && (
                <ReconciliationComments 
                  deliveryId={delivery.id}
                  className="min-h-[400px]"
                />
              )}
            </TabsContent>
          </Tabs>
        </div>
      </DialogContent>
    </Dialog>
  );
}