import { useState, useEffect, useMemo, useRef } from "react";
import { useQuery, useMutation, useMutationState, useQueryClient, keepPreviousData } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Pagination, usePagination } from "@/components/ui/pagination";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { AlertTriangle, Plus, Eye, Edit, Trash2, CheckCircle, CheckCircle2, Package, Clock, AlertCircle, Filter, Download, FileText, PackageX, RotateCcw, X, Loader2 } from "lucide-react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { format } from "date-fns";
import { fr } from "date-fns/locale";
import { useToast } from "@/hooks/use-toast";
import { useAuthUnified } from "@/hooks/useAuthUnified";
import { useStore } from "@/contexts/StoreContext";
import { apiRequest } from "@/lib/queryClient";
import type { DlcProductWithRelations, InsertDlcProduct } from "@shared/schema";

const dlcFormSchema = z.object({
  productName: z.string().min(1, "Le nom du produit est obligatoire"),
  gencode: z.string().optional(),
  dlcDate: z.string().min(1, "La date d'expiration est obligatoire"),
  dateType: z.enum(["dlc", "ddm", "dluo"], { required_error: "Le type de date est obligatoire" }),
  supplierId: z.number().min(1, "Le fournisseur est obligatoire"),
  status: z.enum(["en_cours", "expires_soon", "expires", "valides"]).default("en_cours"),
  notes: z.string().optional(),
});

type DlcFormData = z.infer<typeof dlcFormSchema>;

// Référence stable tant que la liste n'est pas chargée (évite de recalculer
// les listes d'impression à chaque rendu)
const NO_PRODUCTS: DlcProductWithRelations[] = [];

// Préfixe des actions faites depuis une ligne du tableau : sert à savoir
// quelles lignes ont une action en cours
const DLC_ROW_ACTION_KEY = "dlc-row-action";

export default function DlcPage() {
  const { user, isLoading: authLoading } = useAuthUnified();
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const { selectedStoreId } = useStore();
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [supplierFilter, setSupplierFilter] = useState<string>("all");
  const [searchTerm, setSearchTerm] = useState("");
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingProduct, setEditingProduct] = useState<DlcProductWithRelations | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [productToDelete, setProductToDelete] = useState<number | null>(null);

  // Debounce search term to reduce API calls
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedSearchTerm(searchTerm);
    }, 500);

    return () => clearTimeout(timer);
  }, [searchTerm]);

  // Fetch stores/groups - optimized cache
  const { data: stores = [] } = useQuery<any[]>({
    queryKey: ["/api/groups"],
    enabled: !authLoading,
    staleTime: 5 * 60 * 1000, // 5 minutes cache
  });

  // Fetch suppliers with DLC enabled only - optimized cache
  const { data: suppliers = [] } = useQuery({
    queryKey: ["/api/suppliers", "dlc"],
    queryFn: () => apiRequest("/api/suppliers?dlc=true"),
    enabled: !authLoading,
    staleTime: 10 * 60 * 1000, // 10 minutes cache
  });

  // Fetch DLC products - optimized with server-side search
  const { data: dlcProducts = NO_PRODUCTS, isLoading: productsLoading, isPlaceholderData } = useQuery({
    queryKey: ["/api/dlc-products", selectedStoreId, statusFilter, supplierFilter, debouncedSearchTerm],
    queryFn: () => {
      const params = new URLSearchParams();
      if (selectedStoreId && user?.role === 'admin') params.append("storeId", selectedStoreId.toString());
      if (statusFilter && statusFilter !== "all") params.append("status", statusFilter);
      if (supplierFilter && supplierFilter !== "all") params.append("supplierId", supplierFilter);
      if (debouncedSearchTerm) params.append("search", debouncedSearchTerm);
      
      return apiRequest(`/api/dlc-products?${params.toString()}`);
    },
    enabled: !authLoading,
    staleTime: 2 * 60 * 1000, // 2 minutes cache for DLC data
    // Changement de filtre ou de recherche : le tableau précédent reste affiché
    // (estompé, avec un indicateur) au lieu de disparaître. Jamais au
    // changement de magasin (produits d'un autre magasin).
    placeholderData: (previousData, previousQuery) =>
      previousQuery?.queryKey[1] === selectedStoreId ? keepPreviousData(previousData) : undefined,
  });

  // Fetch DLC stats - optimized cache
  const { data: stats = { active: 0, expiringSoon: 0, expired: 0 } } = useQuery({
    queryKey: ["/api/dlc-products/stats", selectedStoreId],
    queryFn: () => {
      const params = new URLSearchParams();
      if (selectedStoreId && user?.role === 'admin') params.append("storeId", selectedStoreId.toString());
      return apiRequest(`/api/dlc-products/stats?${params.toString()}`);
    },
    enabled: !authLoading,
    staleTime: 5 * 60 * 1000, // 5 minutes cache for stats
  });

  // Form setup
  const form = useForm<DlcFormData>({
    resolver: zodResolver(dlcFormSchema),
    defaultValues: {
      productName: "",
      gencode: "",
      dateType: "dlc",
      status: "en_cours",
      notes: "",
    },
  });

  // EAN lookup from external API
  const [eanLookupLoading, setEanLookupLoading] = useState(false);
  const eanDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const gencodeValue = form.watch("gencode");

  useEffect(() => {
    if (!gencodeValue || gencodeValue.length < 8) return;

    if (eanDebounceRef.current) clearTimeout(eanDebounceRef.current);

    eanDebounceRef.current = setTimeout(async () => {
      setEanLookupLoading(true);
      try {
        // Étape 1 : récupérer l'article par EAN
        const res = await fetch(`/api/ffnancy/articles?ean=${encodeURIComponent(gencodeValue)}&limit=1`, { credentials: 'include' });
        if (!res.ok) return;
        const data = await res.json();
        const article = data.articles?.[0];
        if (!article) return;

        form.setValue("productName", article.libelle1, { shouldValidate: true });

        // Étape 2 : chercher le fournisseur de la dernière entrée en stock
        let codefouToMatch = article.codefou_principal;
        try {
          const mvtRes = await fetch(
            `/api/ffnancy/mouvements/entrees?artNoId=${article.no_id}&limit=1&dateDebut=2000-01-01`,
            { credentials: 'include' }
          );
          if (mvtRes.ok) {
            const mvtData = await mvtRes.json();
            const lastEntree = mvtData.entrees?.[0];
            if (lastEntree?.codefou) codefouToMatch = lastEntree.codefou;
          }
        } catch { /* fallback sur codefou_principal */ }

        // Matching : codefou exact en priorité, fallback par nom
        if (codefouToMatch) {
          const matched = (suppliers as any[]).find((s: any) =>
            s.codefou && s.codefou.trim().toLowerCase() === codefouToMatch.trim().toLowerCase()
          ) || (suppliers as any[]).find((s: any) =>
            s.name.toLowerCase().trim().includes(article.nom_fou_principal?.toLowerCase().trim() || '') ||
            (article.nom_fou_principal?.toLowerCase().trim() || '').includes(s.name.toLowerCase().trim())
          );
          if (matched) {
            form.setValue("supplierId", matched.id, { shouldValidate: true });
          }
        }
      } catch {
        // Lookup best-effort, on ignore les erreurs
      } finally {
        setEanLookupLoading(false);
      }
    }, 600);

    return () => {
      if (eanDebounceRef.current) clearTimeout(eanDebounceRef.current);
    };
  }, [gencodeValue, suppliers]);

  // Après une modification, la liste et les compteurs changent : seules les
  // requêtes affichées sont rechargées, les autres (autres filtres, tableau de
  // bord) sont seulement marquées périmées
  const invalidateDlcData = () =>
    Promise.all([
      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products"], refetchType: "active" }),
      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products/stats"], refetchType: "active" }),
    ]);

  // Actions en cours, par produit : seuls les boutons de la ligne concernée sont
  // désactivés (et non ceux de toutes les lignes), y compris si plusieurs
  // produits sont traités à la suite
  const pendingRowActions = useMutationState({
    filters: { mutationKey: [DLC_ROW_ACTION_KEY], status: "pending" },
    select: (mutation) => `${String(mutation.options.mutationKey?.[1])}:${String(mutation.state.variables)}`,
  });
  const isRowActionPending = (action: string, productId: number) =>
    pendingRowActions.includes(`${action}:${productId}`);

  // Create mutation - optimized cache invalidation
  const createMutation = useMutation({
    mutationFn: (data: InsertDlcProduct) => apiRequest("/api/dlc-products", "POST", data),
    onSuccess: () => {
      invalidateDlcData();
      toast({ title: "Produit DLC créé avec succès" });
      setIsDialogOpen(false);
      form.reset();
      setEditingProduct(null);
    },
    onError: (error: any) => {
      toast({
        title: "Erreur lors de la création",
        description: error.message || "Une erreur est survenue",
        variant: "destructive",
      });
    },
  });

  // Update mutation - optimized cache invalidation
  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: number; data: Partial<InsertDlcProduct> }) =>
      apiRequest(`/api/dlc-products/${id}`, "PUT", data),
    onSuccess: () => {
      invalidateDlcData();
      toast({ title: "Produit DLC mis à jour avec succès" });
      setIsDialogOpen(false);
      form.reset();
      setEditingProduct(null);
    },
    onError: (error: any) => {
      toast({
        title: "Erreur lors de la mise à jour",
        description: error.message || "Une erreur est survenue",
        variant: "destructive",
      });
    },
  });

  // Validate mutation - optimized cache invalidation
  const validateMutation = useMutation({
    mutationKey: [DLC_ROW_ACTION_KEY, "validate"],
    mutationFn: (id: number) => apiRequest(`/api/dlc-products/${id}/validate`, "POST"),
    onSuccess: () => {
      toast({ title: "Produit validé avec succès" });
      // La ligne reste désactivée jusqu'au rechargement de la liste
      return invalidateDlcData();
    },
    onError: (error: any) => {
      toast({
        title: "Erreur lors de la validation",
        description: error.message || "Une erreur est survenue",
        variant: "destructive",
      });
    },
  });

  // Delete mutation - optimized cache invalidation
  const deleteMutation = useMutation({
    mutationKey: [DLC_ROW_ACTION_KEY, "delete"],
    mutationFn: (id: number) => apiRequest(`/api/dlc-products/${id}`, "DELETE"),
    onSuccess: () => {
      toast({ title: "Produit supprimé avec succès" });
      // La ligne reste désactivée jusqu'au rechargement de la liste
      return invalidateDlcData();
    },
    onError: (error: any) => {
      toast({
        title: "Erreur lors de la suppression",
        description: error.message || "Une erreur est survenue",
        variant: "destructive",
      });
    },
  });

  // Stock épuisé mutation - accessible à tous
  const markStockEpuiseMutation = useMutation({
    mutationKey: [DLC_ROW_ACTION_KEY, "stock-epuise"],
    mutationFn: (id: number) => apiRequest(`/api/dlc-products/${id}/stock-epuise`, "PUT"),
    onSuccess: () => {
      toast({ title: "Produit marqué comme stock épuisé" });
      // La ligne reste désactivée jusqu'au rechargement de la liste
      return invalidateDlcData();
    },
    onError: (error: any) => {
      toast({
        title: "Erreur lors du marquage",
        description: error.message || "Une erreur est survenue",
        variant: "destructive",
      });
    },
  });

  // Restaurer stock mutation - réservé aux admins, directeurs et managers
  const restoreStockMutation = useMutation({
    mutationKey: [DLC_ROW_ACTION_KEY, "restore-stock"],
    mutationFn: (id: number) => apiRequest(`/api/dlc-products/${id}/restore-stock`, "PUT"),
    onSuccess: () => {
      toast({ title: "Stock restauré avec succès" });
      // La ligne reste désactivée jusqu'au rechargement de la liste
      return invalidateDlcData();
    },
    onError: (error: any) => {
      toast({
        title: "Erreur lors de la restauration",
        description: error.message || "Une erreur est survenue",
        variant: "destructive",
      });
    },
  });

  // Marquer comme traité mutation - accessible à tous
  const markProcessedMutation = useMutation({
    mutationKey: [DLC_ROW_ACTION_KEY, "mark-processed"],
    mutationFn: (id: number) => apiRequest(`/api/dlc-products/${id}/mark-processed`, "PUT"),
    onSuccess: () => {
      toast({ title: "Produit marqué comme traité" });
      // La ligne reste désactivée jusqu'au rechargement de la liste
      return invalidateDlcData();
    },
    onError: (error: any) => {
      toast({
        title: "Erreur lors du marquage",
        description: error.message || "Une erreur est survenue",
        variant: "destructive",
      });
    },
  });

  // Annuler traitement mutation - réservé aux admins, directeurs et managers
  const unmarkProcessedMutation = useMutation({
    mutationKey: [DLC_ROW_ACTION_KEY, "unmark-processed"],
    mutationFn: (id: number) => apiRequest(`/api/dlc-products/${id}/unmark-processed`, "PUT"),
    onSuccess: () => {
      toast({ title: "Traitement annulé avec succès" });
      // La ligne reste désactivée jusqu'au rechargement de la liste
      return invalidateDlcData();
    },
    onError: (error: any) => {
      toast({
        title: "Erreur lors de l'annulation",
        description: error.message || "Une erreur est survenue",
        variant: "destructive",
      });
    },
  });

  const onSubmit = (data: DlcFormData) => {
    // Calculer la date d'expiration et le seuil d'alerte (15 jours avant)
    const dlcDate = new Date(data.dlcDate);
    
    // Déterminer le groupId correctement selon le rôle utilisateur
    let groupId;
    
    // FORCE L'UTILISATION DU GROUPE ASSIGNÉ EN PREMIER
    if (user?.userGroups?.[0]?.groupId) {
      // Utilisateur avec groupe assigné : TOUJOURS utiliser ce groupe
      groupId = user.userGroups[0].groupId;
    } else if (user?.role === 'admin' && selectedStoreId) {
      // Admin avec magasin sélectionné ET pas de groupe assigné
      groupId = selectedStoreId;
    } else if (user?.role === 'admin' && stores?.[0]?.id) {
      // Admin sans sélection : premier magasin disponible
      groupId = stores[0].id;
    } else {
      // Fallback d'urgence
      groupId = 1;
    }

    const dlcData: any = {
      ...data,
      name: data.productName, // Copier productName vers name (requis dans la DB)
      expiryDate: dlcDate as any,
      quantity: 1, // Valeur par défaut
      unit: "unité", // Valeur par défaut
      location: "Magasin", // Valeur par défaut
      alertThreshold: 15, // Toujours 15 jours
      groupId,
    };

    if (editingProduct) {
      updateMutation.mutate({ id: editingProduct.id, data: dlcData });
    } else {
      createMutation.mutate(dlcData);
    }
  };

  const handleEdit = (product: DlcProductWithRelations) => {
    setEditingProduct(product);
    form.reset({
      productName: product.productName as string,
      gencode: product.gencode || "",
      dlcDate: product.expiryDate ? format(new Date(product.expiryDate), "yyyy-MM-dd") : "",
      dateType: product.dateType as "dlc" | "ddm" | "dluo",
      supplierId: product.supplierId,
      status: product.status as "en_cours" | "expires_soon" | "expires" | "valides",
      notes: product.notes || "",
    });
    setIsDialogOpen(true);
  };

  const handleDelete = (id: number) => {
    setProductToDelete(id);
    setDeleteDialogOpen(true);
  };

  const confirmDelete = () => {
    if (productToDelete) {
      deleteMutation.mutate(productToDelete);
      setDeleteDialogOpen(false);
      setProductToDelete(null);
    }
  };

  const handleValidate = (id: number) => {
    validateMutation.mutate(id);
  };

  const handleMarkStockEpuise = (id: number) => {
    markStockEpuiseMutation.mutate(id);
  };

  const handleRestoreStock = (id: number) => {
    restoreStockMutation.mutate(id);
  };

  const handleMarkProcessed = (id: number) => {
    markProcessedMutation.mutate(id);
  };

  const handleUnmarkProcessed = (id: number) => {
    unmarkProcessedMutation.mutate(id);
  };

  // Fonction pour déterminer si un produit doit afficher le bouton de validation
  const shouldShowValidateButton = (product: DlcProductWithRelations) => {
    const today = new Date();
    const expiry = new Date(product.expiryDate || new Date());
    const daysUntilExpiry = Math.ceil((expiry.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
    
    // Afficher le bouton SEULEMENT pour les produits EXPIRÉS (pas ceux qui expirent bientôt)
    // ET si le produit n'est pas déjà validé
    return (daysUntilExpiry < 0 && product.status !== "valides");
  };

  // Fonction pour déterminer si un produit doit afficher le bouton "Marquer comme traité"
  const shouldShowMarkProcessedButton = (product: DlcProductWithRelations) => {
    const today = new Date();
    const expiry = new Date(product.expiryDate || new Date());
    const daysUntilExpiry = Math.ceil((expiry.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
    
    // Afficher le bouton si :
    // - Le produit expire bientôt (dans 15 jours ou moins) ET pas encore expiré
    // - Il n'est pas déjà traité 
    // - Il n'est pas validé et pas en stock épuisé
    return (daysUntilExpiry <= 15 && daysUntilExpiry > 0 && 
            !product.processedUntilExpiry && 
            product.status !== "valides" && 
            !product.stockEpuise);
  };

  // Fonction pour déterminer si un produit doit afficher le bouton "Annuler traitement"
  const shouldShowUnmarkProcessedButton = (product: DlcProductWithRelations) => {
    const today = new Date();
    const expiry = new Date(product.expiryDate || new Date());
    const daysUntilExpiry = Math.ceil((expiry.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
    
    // Afficher le bouton si le produit est traité ET pas encore expiré
    return (product.processedUntilExpiry && daysUntilExpiry > 0);
  };

  const getStatusBadge = (status: string, dlcDate: string | null, stockEpuise?: boolean, processedAt?: string | null, processedUntilExpiry?: boolean) => {
    if (!dlcDate) return <Badge variant="outline">Non défini</Badge>;
    
    // LOGIQUE MISE À JOUR :
    // 1. Si stock épuisé, afficher "Stock épuisé" avec style spécifique
    // 2. Si le statut en base est "valides", afficher "Validé" (peu importe la date) 
    // 3. Si traité temporairement ET pas encore expiré, afficher "Traité - Expire dans X jours"
    // 4. Sinon, calculer selon la date d'expiration
    
    if (stockEpuise) {
      return <Badge variant="secondary" className="bg-yellow-100 text-yellow-800 border-yellow-300">Stock épuisé</Badge>;
    }
    
    if (status === "valides") {
      return <Badge variant="outline" className="bg-gray-100 text-gray-800">Validé</Badge>;
    }
    
    // Pour tous les autres statuts, calculer selon la date
    const today = new Date();
    const expiry = new Date(dlcDate);
    const daysUntilExpiry = Math.ceil((expiry.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));

    // Si traité temporairement et pas encore expiré
    if (processedAt && processedUntilExpiry && daysUntilExpiry > 0) {
      return <Badge variant="outline" className="bg-blue-100 text-blue-800 border-blue-300">
        Traité - Expire dans {daysUntilExpiry} jour{daysUntilExpiry !== 1 ? 's' : ''}
      </Badge>;
    }

    if (daysUntilExpiry < 0) {
      return <Badge variant="destructive">Expiré</Badge>;
    } else if (daysUntilExpiry <= 15) {
      return <Badge variant="secondary" className="bg-orange-100 text-orange-800">Expire bientôt</Badge>;
    } else {
      return <Badge variant="default" className="bg-green-100 text-green-800">Actif</Badge>;
    }
  };

  const printExpiringSoon = () => {
    const expiringSoon = expiringSoonProducts;

    const printContent = `
      <html>
        <head>
          <title>Produits expirant bientôt</title>
          <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            table { width: 100%; border-collapse: collapse; }
            th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
            th { background-color: #f2f2f2; }
            h1 { color: #ff6b35; }
          </style>
        </head>
        <body>
          <h1>Produits expirant dans les 15 prochains jours</h1>
          <p>Date d'impression: ${format(new Date(), "dd/MM/yyyy HH:mm")}</p>
          <table>
            <thead>
              <tr>
                <th>Produit</th>
                <th>Code EAN13</th>
                <th>Date d'expiration</th>
                <th>Type</th>
                <th>Fournisseur</th>
                <th>Jours restants</th>
              </tr>
            </thead>
            <tbody>
              ${expiringSoon.map((product: any) => {
                const today = new Date();
                const expiry = new Date(product.dlcDate || new Date());
                const diffDays = Math.ceil((expiry.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
                return `
                  <tr>
                    <td>${product.productName}</td>
                    <td>${product.gencode || '-'}</td>
                    <td>${product.dlcDate ? format(new Date(product.dlcDate), "dd/MM/yyyy") : 'N/A'}</td>
                    <td>${product.dateType.toUpperCase()}</td>
                    <td>${product.supplier?.name || 'N/A'}</td>
                    <td>${diffDays}</td>
                  </tr>
                `;
              }).join('')}
            </tbody>
          </table>
        </body>
      </html>
    `;

    const printWindow = window.open('', '_blank');
    if (printWindow) {
      printWindow.document.write(printContent);
      printWindow.document.close();
      printWindow.print();
    }
  };

  const printExpired = () => {
    const expired = expiredProducts;

    const printContent = `
      <html>
        <head>
          <title>Produits expirés</title>
          <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            table { width: 100%; border-collapse: collapse; }
            th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
            th { background-color: #f2f2f2; }
            h1 { color: #dc2626; }
          </style>
        </head>
        <body>
          <h1>Produits expirés</h1>
          <p>Date d'impression: ${format(new Date(), "dd/MM/yyyy HH:mm")}</p>
          <table>
            <thead>
              <tr>
                <th>Produit</th>
                <th>Code EAN13</th>
                <th>Date d'expiration</th>
                <th>Type</th>
                <th>Fournisseur</th>
                <th>Jours dépassés</th>
              </tr>
            </thead>
            <tbody>
              ${expired.map((product: any) => {
                const today = new Date();
                const expiry = new Date(product.dlcDate || new Date());
                const diffDays = Math.ceil((today.getTime() - expiry.getTime()) / (1000 * 60 * 60 * 24));
                return `
                  <tr>
                    <td>${product.productName}</td>
                    <td>${product.gencode || '-'}</td>
                    <td>${product.dlcDate ? format(new Date(product.dlcDate), "dd/MM/yyyy") : 'N/A'}</td>
                    <td>${product.dateType.toUpperCase()}</td>
                    <td>${product.supplier?.name || 'N/A'}</td>
                    <td>${diffDays}</td>
                  </tr>
                `;
              }).join('')}
            </tbody>
          </table>
        </body>
      </html>
    `;

    const printWindow = window.open('', '_blank');
    if (printWindow) {
      printWindow.document.write(printContent);
      printWindow.document.close();
      printWindow.print();
    }
  };

  // Products are already filtered server-side, no client filtering needed
  const filteredProducts = dlcProducts || NO_PRODUCTS;

  // Memoized calculations for print functions
  const { expiringSoonProducts, expiredProducts } = useMemo(() => {
    const today = new Date();
    const expiringSoon = filteredProducts.filter((product: any) => {
      if (product.status === 'valides') return false;
      const expiryDate = new Date(product.dlcDate || new Date());
      const diffDays = Math.ceil((expiryDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
      return diffDays <= 15 && diffDays > 0;
    });

    const expired = filteredProducts.filter((product: any) => {
      if (product.status === 'valides') return false;
      const expiryDate = new Date(product.dlcDate || new Date());
      return expiryDate <= today;
    });

    return { expiringSoonProducts: expiringSoon, expiredProducts: expired };
  }, [filteredProducts]);

  // Pagination
  const {
    currentPage,
    setCurrentPage,
    itemsPerPage,
    setItemsPerPage,
    totalPages,
    paginatedData: paginatedProducts,
    totalItems
  } = usePagination(filteredProducts, 10);

  // Retour à la première page quand le magasin, un filtre ou la recherche change
  // (le tableau précédent reste affiché pendant le chargement : sa longueur ne
  // change pas forcément)
  useEffect(() => {
    setCurrentPage(1);
  }, [selectedStoreId, statusFilter, supplierFilter, debouncedSearchTerm, setCurrentPage]);

  if (authLoading) {
    return <div className="flex justify-center items-center h-64">Chargement...</div>;
  }

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="bg-white border-b border-gray-200 p-6 shadow-sm -m-6 mb-6">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-2xl font-semibold text-gray-900 flex items-center">
              <Clock className="w-6 h-6 mr-3 text-orange-600" />
              Gestion DLC
            </h2>
            <p className="text-gray-600 mt-1">
              Gestion des dates limites de consommation
            </p>
          </div>
          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
              <Button className="bg-blue-600 hover:bg-blue-700 text-white shadow-md">
                <Plus className="w-4 h-4 mr-2" />
                Nouveau produit DLC
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>
              {editingProduct ? "Modifier le produit DLC" : "Nouveau produit DLC"}
            </DialogTitle>
          </DialogHeader>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={form.control}
                    name="productName"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Nom du produit</FormLabel>
                        <FormControl>
                          <Input {...field} placeholder="Nom du produit" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="supplierId"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Fournisseur</FormLabel>
                        <Select 
                          onValueChange={(value) => field.onChange(parseInt(value))} 
                          value={field.value?.toString()}
                        >
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Sélectionner un fournisseur" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            {suppliers.map((supplier: any) => (
                              <SelectItem key={supplier.id} value={supplier.id.toString()}>
                                {supplier.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>

                <FormField
                  control={form.control}
                  name="gencode"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Code EAN13 (optionnel)</FormLabel>
                      <FormControl>
                        <div className="relative">
                          <Input
                            {...field}
                            value={field.value || ""}
                            placeholder="1234567890123"
                            className={eanLookupLoading ? "pr-8" : ""}
                          />
                          {eanLookupLoading && (
                            <Loader2 className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-blue-500" />
                          )}
                        </div>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={form.control}
                    name="dlcDate"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Date d'expiration</FormLabel>
                        <FormControl>
                          <Input type="date" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="dateType"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Type de date</FormLabel>
                        <Select onValueChange={field.onChange} value={field.value}>
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Sélectionner le type" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectItem value="dlc">DLC (Date Limite de Consommation)</SelectItem>
                            <SelectItem value="ddm">DDM (Date de Durabilité Minimale)</SelectItem>
                            <SelectItem value="dluo">DLUO (Date Limite d'Utilisation Optimale)</SelectItem>
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>

                <FormField
                  control={form.control}
                  name="notes"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Notes (optionnel)</FormLabel>
                      <FormControl>
                        <Textarea {...field} placeholder="Notes ou observations..." />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <div className="flex justify-end space-x-2">
                  <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                    Annuler
                  </Button>
                  <Button type="submit" disabled={createMutation.isPending || updateMutation.isPending}>
                    {editingProduct ? "Mettre à jour" : "Créer"}
                  </Button>
                </div>
            </form>
          </Form>
            </DialogContent>
          </Dialog>
        </div>
      </div>

      {/* Filters */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Filter className="w-5 h-5" />
            Filtres
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="text-sm font-medium">Statut</label>
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Tous les statuts</SelectItem>
                  <SelectItem value="en_cours">Actifs</SelectItem>
                  <SelectItem value="expires_soon">Expire bientôt</SelectItem>
                  <SelectItem value="expires">Expirés</SelectItem>
                  <SelectItem value="valides">Validés</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <label className="text-sm font-medium">Fournisseur</label>
              <Select value={supplierFilter} onValueChange={setSupplierFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="Tous les fournisseurs" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Tous les fournisseurs</SelectItem>
                  {suppliers.map((supplier: any) => (
                    <SelectItem key={supplier.id} value={supplier.id.toString()}>
                      {supplier.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <label className="text-sm font-medium">Recherche</label>
              <Input
                placeholder="Rechercher un produit..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Statistics */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Produits Actifs</CardTitle>
            <Package className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">{stats.active}</div>
            <p className="text-xs text-muted-foreground">Produits en cours</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Expire Bientôt</CardTitle>
            <div className="flex items-center gap-2">
              <Clock className="h-4 w-4 text-orange-600" />
              <Button 
                variant="ghost" 
                size="sm" 
                onClick={printExpiringSoon}
                className="h-6 w-6 p-0 hover:bg-orange-100"
              >
                <FileText className="h-3 w-3 text-orange-600" />
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-orange-600">{stats.expiringSoon}</div>
            <p className="text-xs text-muted-foreground">Dans les 15 prochains jours</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Expirés</CardTitle>
            <div className="flex items-center gap-2">
              <AlertCircle className="h-4 w-4 text-red-600" />
              <Button 
                variant="ghost" 
                size="sm" 
                onClick={printExpired}
                className="h-6 w-6 p-0 hover:bg-red-100"
              >
                <FileText className="h-3 w-3 text-red-600" />
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-red-600">{stats.expired}</div>
            <p className="text-xs text-muted-foreground">Nécessitent une action</p>
          </CardContent>
        </Card>
      </div>

      {/* Products Table Section */}
      <div>
        <Card>
          <CardHeader>
            <div className="flex justify-between items-center">
              <CardTitle>
                Produits DLC ({totalItems})
                {isPlaceholderData && (
                  <span className="inline-flex items-center gap-1 ml-2 text-xs font-normal text-gray-500" role="status">
                    <span className="animate-spin rounded-full h-3 w-3 border-b-2 border-primary" />
                    Mise à jour…
                  </span>
                )}
              </CardTitle>
              <Button variant="outline" size="sm">
                <Download className="w-4 h-4 mr-2" />
                Exporter PDF
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            {productsLoading || (isPlaceholderData && totalItems === 0) ? (
              <div className="flex justify-center items-center h-32">Chargement des produits...</div>
            ) : totalItems === 0 ? (
              <div className="text-center py-8 text-muted-foreground">
                Aucun produit DLC trouvé
              </div>
            ) : (
              <div
                className={isPlaceholderData ? "opacity-60 pointer-events-none transition-opacity" : ""}
                aria-busy={isPlaceholderData}
              >
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Produit</TableHead>
                      <TableHead>Code EAN13</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>Date d'expiration</TableHead>
                      <TableHead>Fournisseur</TableHead>
                      <TableHead>Statut</TableHead>
                      <TableHead>Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {paginatedProducts.map((product) => (
                      <TableRow 
                        key={product.id} 
                        className={
                          product.status === "valides" ? "opacity-60 bg-gray-50 dark:bg-gray-800" : 
                          product.processedUntilExpiry ? "opacity-60 bg-blue-50 dark:bg-blue-900/20" :
                          product.stockEpuise ? "opacity-50 bg-yellow-50 dark:bg-yellow-900/20" : ""
                        }
                      >
                        <TableCell className="font-medium">{product.productName}</TableCell>
                        <TableCell className="text-sm text-muted-foreground">
                          {product.gencode || '-'}
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline" className="uppercase">
                            {product.dateType}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          {product.expiryDate ? format(new Date(product.expiryDate), "dd/MM/yyyy", { locale: fr }) : 'Date non définie'}
                        </TableCell>
                        <TableCell>{product.supplier?.name || 'Non défini'}</TableCell>
                        <TableCell>{getStatusBadge(product.status, product.expiryDate, product.stockEpuise, product.processedAt, product.processedUntilExpiry)}</TableCell>
                        <TableCell>
                          <div className="flex space-x-2">
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => handleEdit(product)}
                            >
                              <Edit className="w-4 h-4" />
                            </Button>
                            {shouldShowValidateButton(product) && (user?.role === 'admin' || user?.role === 'manager' || user?.role === 'directeur') && (
                              <Button
                                variant="default"
                                size="sm"
                                onClick={() => handleValidate(product.id)}
                                disabled={isRowActionPending("validate", product.id)}
                                className="bg-green-600 hover:bg-green-700"
                                data-testid={`button-validate-${product.id}`}
                                title="Valider définitivement ce produit"
                              >
                                <CheckCircle className="w-4 h-4" />
                              </Button>
                            )}

                            {/* Bouton Marquer comme traité - accessible à tous, pour produits expirant bientôt non traités */}
                            {shouldShowMarkProcessedButton(product) && (
                              <TooltipProvider>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <Button
                                      variant="outline"
                                      size="sm"
                                      onClick={() => handleMarkProcessed(product.id)}
                                      disabled={isRowActionPending("mark-processed", product.id)}
                                      className="border-blue-300 text-blue-700 hover:bg-blue-50"
                                      data-testid={`button-mark-processed-${product.id}`}
                                    >
                                      <CheckCircle2 className="w-4 h-4" />
                                    </Button>
                                  </TooltipTrigger>
                                  <TooltipContent>
                                    <p>Marquer comme traité</p>
                                    <p className="text-xs text-muted-foreground">
                                      Indique que vous vous êtes occupé de ce produit (réapparaîtra à expiration)
                                    </p>
                                  </TooltipContent>
                                </Tooltip>
                              </TooltipProvider>
                            )}

                            {/* Bouton Annuler traitement - réservé aux admins, directeurs et managers */}
                            {shouldShowUnmarkProcessedButton(product) && (user?.role === 'admin' || user?.role === 'manager' || user?.role === 'directeur') && (
                              <TooltipProvider>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <Button
                                      variant="outline"
                                      size="sm"
                                      onClick={() => handleUnmarkProcessed(product.id)}
                                      disabled={isRowActionPending("unmark-processed", product.id)}
                                      className="border-orange-300 text-orange-700 hover:bg-orange-50"
                                    >
                                      <X className="w-4 h-4" />
                                    </Button>
                                  </TooltipTrigger>
                                  <TooltipContent>
                                    <p>Annuler le traitement</p>
                                    <p className="text-xs text-muted-foreground">
                                      Retire le marquage "traité" de ce produit
                                    </p>
                                  </TooltipContent>
                                </Tooltip>
                              </TooltipProvider>
                            )}
                            
                            {/* Bouton Stock épuisé - accessible à tous, pour tous les produits non validés et pas déjà en stock épuisé */}
                            {!product.stockEpuise && 
                             product.status !== "valides" && (
                              <TooltipProvider>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <Button
                                      variant="outline"
                                      size="sm"
                                      onClick={() => handleMarkStockEpuise(product.id)}
                                      disabled={isRowActionPending("stock-epuise", product.id)}
                                      className="border-yellow-300 text-yellow-700 hover:bg-yellow-50"
                                    >
                                      <PackageX className="w-4 h-4" />
                                    </Button>
                                  </TooltipTrigger>
                                  <TooltipContent>
                                    <p>Marquer comme stock épuisé</p>
                                    <p className="text-xs text-muted-foreground">
                                      Indique que ce produit n'est plus en stock (différent de périmé)
                                    </p>
                                  </TooltipContent>
                                </Tooltip>
                              </TooltipProvider>
                            )}
                            
                            {/* Bouton Restaurer stock - réservé aux admins, directeurs et managers */}
                            {product.stockEpuise && (user?.role === 'admin' || user?.role === 'manager' || user?.role === 'directeur') && (
                              <TooltipProvider>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <Button
                                      variant="outline"
                                      size="sm"
                                      onClick={() => handleRestoreStock(product.id)}
                                      disabled={isRowActionPending("restore-stock", product.id)}
                                      className="border-blue-300 text-blue-700 hover:bg-blue-50"
                                    >
                                      <RotateCcw className="w-4 h-4" />
                                    </Button>
                                  </TooltipTrigger>
                                  <TooltipContent>
                                    <p>Restaurer le stock</p>
                                    <p className="text-xs text-muted-foreground">
                                      Marquer ce produit comme à nouveau disponible en stock
                                    </p>
                                  </TooltipContent>
                                </Tooltip>
                              </TooltipProvider>
                            )}
                            <Button
                              variant="destructive"
                              size="sm"
                              onClick={() => handleDelete(product.id)}
                              disabled={isRowActionPending("delete", product.id)}
                            >
                              <Trash2 className="w-4 h-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            )}
            
            {/* Pagination */}
            {totalItems > 0 && (
              <Pagination
                currentPage={currentPage}
                totalPages={totalPages}
                totalItems={totalItems}
                itemsPerPage={itemsPerPage}
                onPageChange={setCurrentPage}
                onItemsPerPageChange={setItemsPerPage}
                className="mt-4 border-t border-gray-200 pt-4"
              />
            )}
          </CardContent>
        </Card>
      </div>

      {/* Modal de confirmation de suppression */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Confirmer la suppression</AlertDialogTitle>
            <AlertDialogDescription>
              Êtes-vous sûr de vouloir supprimer ce produit DLC ? Cette action est irréversible.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Annuler</AlertDialogCancel>
            <AlertDialogAction onClick={confirmDelete} className="bg-red-600 hover:bg-red-700">
              Supprimer
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}