// app/(app)/staff/gestion-productions/page.tsx
"use client";

import React, { useState, useMemo } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { 
  Loader2, 
  Search, 
  Filter, 
  X, 
  Plus, 
  Edit2, 
  Trash2, 
  Calendar,
  Building2,
  Hash,
  FileText,
  ArrowUpDown,
  ArrowUp,
  ArrowDown,
  Bell
} from "lucide-react";
import { usePageTitle } from "@/hooks/usePageTitle";
import { toast } from "sonner";

// Types
type ProductionType = "Spectacle vivant" | "Production audiovisuelle" | "Production phonographique" | "Administratif";

type Production = {
  id: string;
  name: string;
  reference: string | null;
  declaration_date: string | null;
  org_id: string;
  prod_type: ProductionType | null;
  declared_fts: boolean | null;
  created_at?: string;
  updated_at?: string;
};

type Organization = {
  id: string;
  name: string;
  structure_api: string;
};

// Hook pour vérifier si l'utilisateur est staff
function useStaffCheck() {
  return useQuery({
    queryKey: ["staff-check"],
    queryFn: async () => {
      const res = await fetch("/api/me");
      if (!res.ok) return { isStaff: false };
      const data = await res.json();
      return { isStaff: Boolean(data.is_staff || data.isStaff) };
    },
    staleTime: 30_000,
  });
}

// Hook pour récupérer les organisations
function useOrganizations() {
  return useQuery({
    queryKey: ["organizations"],
    queryFn: async () => {
      const res = await fetch("/api/staff/organizations");
      if (!res.ok) throw new Error("Erreur chargement organisations");
      const data = await res.json();
      return data.organizations as Organization[];
    },
    staleTime: 60_000,
  });
}

// Hook pour récupérer les productions
function useProductions(orgId?: string, searchQuery?: string) {
  return useQuery({
    queryKey: ["staff-productions", orgId, searchQuery],
    queryFn: async () => {
      const params = new URLSearchParams();
      if (orgId) params.set("org_id", orgId);
      if (searchQuery) params.set("q", searchQuery);
      
      const res = await fetch(`/api/staff/productions?${params.toString()}`);
      if (!res.ok) throw new Error("Erreur chargement productions");
      const data = await res.json();
      return data.productions as Production[];
    },
    enabled: true,
    staleTime: 15_000,
  });
}

// Composant Modal pour Créer/Éditer
function ProductionModal({
  isOpen,
  onClose,
  production,
  organizations,
}: {
  isOpen: boolean;
  onClose: () => void;
  production?: Production | null;
  organizations: Organization[];
}) {
  const queryClient = useQueryClient();
  const [name, setName] = useState(production?.name || "");
  const [reference, setReference] = useState(production?.reference || "");
  const [declarationDate, setDeclarationDate] = useState(production?.declaration_date || "");
  const [orgId, setOrgId] = useState(production?.org_id || "");
  const [prodType, setProdType] = useState<ProductionType | "">(production?.prod_type || "");
  const [declaredFts, setDeclaredFts] = useState<boolean>(production?.declared_fts ?? false);
  const [error, setError] = useState("");

  React.useEffect(() => {
    if (isOpen) {
      setName(production?.name || "");
      setReference(production?.reference || "");
      setDeclarationDate(production?.declaration_date || "");
      setOrgId(production?.org_id || "");
      setProdType(production?.prod_type || "");
      setDeclaredFts(production?.declared_fts ?? false);
      setError("");
    }
  }, [isOpen, production]);

  const mutation = useMutation({
    mutationFn: async (data: any) => {
      const url = production
        ? `/api/staff/productions/${production.id}`
        : "/api/staff/productions";
      const method = production ? "PATCH" : "POST";
      
      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });
      
      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || "Erreur lors de l'opération");
      }
      
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["staff-productions"] });
      onClose();
    },
    onError: (err: any) => {
      setError(err.message || "Une erreur est survenue");
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    
    if (!name.trim()) {
      setError("Le nom est requis");
      return;
    }
    
    if (!orgId) {
      setError("L'organisation est requise");
      return;
    }

    mutation.mutate({
      name: name.trim(),
      reference: reference.trim() || null,
      declaration_date: declarationDate || null,
      org_id: orgId,
      prod_type: prodType || null,
      declared_fts: declaredFts,
    });
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
      />
      
      {/* Modal */}
      <div className="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
        {/* Header */}
        <div className="px-6 py-4 border-b bg-gradient-to-r from-indigo-50 to-purple-50">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-white rounded-lg shadow-sm">
                <Building2 className="w-5 h-5 text-indigo-600" />
              </div>
              <div>
                <h2 className="text-lg font-semibold text-slate-900">
                  {production ? "Modifier la production" : "Nouvelle production"}
                </h2>
                <p className="text-sm text-slate-600">
                  {production ? "Modifiez les informations ci-dessous" : "Remplissez les informations ci-dessous"}
                </p>
              </div>
            </div>
            <button
              onClick={onClose}
              className="p-2 hover:bg-white/50 rounded-lg transition-colors"
            >
              <X className="w-5 h-5 text-slate-500" />
            </button>
          </div>
        </div>

        {/* Body */}
        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          {error && (
            <div className="p-4 bg-red-50 border border-red-200 rounded-xl flex items-start gap-3">
              <div className="flex-shrink-0 w-5 h-5 bg-red-100 rounded-full flex items-center justify-center">
                <span className="text-red-600 text-xs font-bold">!</span>
              </div>
              <div className="flex-1">
                <p className="text-sm text-red-800 font-medium">Erreur</p>
                <p className="text-sm text-red-600">{error}</p>
              </div>
            </div>
          )}

          {/* Nom */}
          <div className="space-y-2">
            <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
              <FileText className="w-4 h-4 text-slate-500" />
              Nom de la production *
            </label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Ex: Festival d'Avignon 2025"
              className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
              required
            />
          </div>

          {/* Numéro d'objet */}
          <div className="space-y-2">
            <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
              <Hash className="w-4 h-4 text-slate-500" />
              Numéro d'objet
            </label>
            <input
              type="text"
              value={reference}
              onChange={(e) => setReference(e.target.value)}
              placeholder="Ex: PROD-2025-001"
              className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
            />
          </div>

          {/* Date de déclaration */}
          <div className="space-y-2">
            <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
              <Calendar className="w-4 h-4 text-slate-500" />
              Date de déclaration
            </label>
            <input
              type="date"
              value={declarationDate}
              onChange={(e) => setDeclarationDate(e.target.value)}
              className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
            />
          </div>

          {/* Déclarée FTS */}
          <div className="space-y-2">
            <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
              <FileText className="w-4 h-4 text-slate-500" />
              Déclarée FTS
            </label>
            <select
              value={declaredFts ? "true" : "false"}
              onChange={(e) => setDeclaredFts(e.target.value === "true")}
              className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
            >
              <option value="false">Non</option>
              <option value="true">Oui</option>
            </select>
          </div>

          {/* Type de production */}
          <div className="space-y-2">
            <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
              <FileText className="w-4 h-4 text-slate-500" />
              Type de prod
            </label>
            <select
              value={prodType}
              onChange={(e) => setProdType(e.target.value as ProductionType | "")}
              className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
            >
              <option value="">Sélectionnez un type</option>
              <option value="Spectacle vivant">Spectacle vivant</option>
              <option value="Production audiovisuelle">Production audiovisuelle</option>
              <option value="Production phonographique">Production phonographique</option>
              <option value="Administratif">Administratif</option>
            </select>
          </div>

          {/* Organisation */}
          <div className="space-y-2">
            <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
              <Building2 className="w-4 h-4 text-slate-500" />
              Organisation *
            </label>
            <select
              value={orgId}
              onChange={(e) => setOrgId(e.target.value)}
              className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
              required
            >
              <option value="">Sélectionnez une organisation</option>
              {organizations.map((org) => (
                <option key={org.id} value={org.id}>
                  {org.name}
                </option>
              ))}
            </select>
          </div>

          {/* Footer */}
          <div className="flex items-center justify-end gap-3 pt-4 border-t">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
              disabled={mutation.isPending}
            >
              Annuler
            </button>
            <button
              type="submit"
              disabled={mutation.isPending}
              className="px-4 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 rounded-lg transition-all shadow-sm hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
            >
              {mutation.isPending && <Loader2 className="w-4 h-4 animate-spin" />}
              {production ? "Enregistrer" : "Créer"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// Composant Modal de suppression
function DeleteConfirmModal({
  isOpen,
  onClose,
  production,
}: {
  isOpen: boolean;
  onClose: () => void;
  production: Production | null;
}) {
  const queryClient = useQueryClient();

  const deleteMutation = useMutation({
    mutationFn: async () => {
      if (!production) return;
      const res = await fetch(`/api/staff/productions/${production.id}`, {
        method: "DELETE",
      });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Erreur lors de la suppression");
      }
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["staff-productions"] });
      onClose();
    },
  });

  if (!isOpen || !production) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
      />
      <div className="relative w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
        <div className="p-6">
          <div className="flex items-center gap-4 mb-4">
            <div className="flex-shrink-0 w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
              <Trash2 className="w-6 h-6 text-red-600" />
            </div>
            <div className="flex-1">
              <h3 className="text-lg font-semibold text-slate-900">
                Confirmer la suppression
              </h3>
              <p className="text-sm text-slate-600 mt-1">
                Cette action est irréversible
              </p>
            </div>
          </div>

          <div className="p-4 bg-slate-50 rounded-xl mb-6">
            <p className="text-sm text-slate-700">
              Voulez-vous vraiment supprimer la production{" "}
              <span className="font-semibold">{production.name}</span> ?
            </p>
            {production.reference && (
              <p className="text-xs text-slate-500 mt-1">
                Numéro d'objet : {production.reference}
              </p>
            )}
          </div>

          <div className="flex items-center justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
              disabled={deleteMutation.isPending}
            >
              Annuler
            </button>
            <button
              onClick={() => deleteMutation.mutate()}
              disabled={deleteMutation.isPending}
              className="px-4 py-2.5 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
            >
              {deleteMutation.isPending && (
                <Loader2 className="w-4 h-4 animate-spin" />
              )}
              Supprimer
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Composant Modal de notification
function NotifyModal({
  isOpen,
  onClose,
  production,
}: {
  isOpen: boolean;
  onClose: () => void;
  production: Production | null;
}) {
  const queryClient = useQueryClient();

  const notifyMutation = useMutation({
    mutationFn: async () => {
      if (!production) return;
      const res = await fetch(`/api/staff/productions/${production.id}/notify`, {
        method: "POST",
      });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Erreur lors de l'envoi de la notification");
      }
      return res.json();
    },
    onSuccess: () => {
      toast.success("Notification envoyée avec succès !");
      queryClient.invalidateQueries({ queryKey: ["staff-productions"] });
      onClose();
    },
    onError: (error: Error) => {
      toast.error(error.message || "Erreur lors de l'envoi de la notification");
    },
  });

  if (!isOpen || !production) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
      />
      <div className="relative w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
        <div className="p-6">
          <div className="flex items-center gap-4 mb-4">
            <div className="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
              <Bell className="w-6 h-6 text-blue-600" />
            </div>
            <div className="flex-1">
              <h3 className="text-lg font-semibold text-slate-900">
                Envoyer une notification
              </h3>
              <p className="text-sm text-slate-600 mt-1">
                Informer l'organisation de la déclaration
              </p>
            </div>
          </div>

          <div className="p-4 bg-blue-50 rounded-xl mb-6">
            <p className="text-sm text-slate-700">
              Un email sera envoyé à l'organisation pour confirmer la déclaration de la production{" "}
              <span className="font-semibold">{production.name}</span>.
            </p>
            {production.reference && (
              <p className="text-xs text-slate-500 mt-2">
                Numéro d'objet : {production.reference}
              </p>
            )}
          </div>

          <div className="flex items-center justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
              disabled={notifyMutation.isPending}
            >
              Annuler
            </button>
            <button
              onClick={() => notifyMutation.mutate()}
              disabled={notifyMutation.isPending}
              className="px-4 py-2.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
            >
              {notifyMutation.isPending && (
                <Loader2 className="w-4 h-4 animate-spin" />
              )}
              Envoyer la notification
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Page principale
export default function GestionProductionsPage() {
  usePageTitle("Gestion des productions");

  const [searchQuery, setSearchQuery] = useState("");
  const [selectedOrgId, setSelectedOrgId] = useState("");
  const [showFilters, setShowFilters] = useState(false);
  const [editingProduction, setEditingProduction] = useState<Production | null>(null);
  const [deletingProduction, setDeletingProduction] = useState<Production | null>(null);
  const [notifyingProduction, setNotifyingProduction] = useState<Production | null>(null);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [sortColumn, setSortColumn] = useState<"name" | "reference" | "declaration_date" | null>("declaration_date");
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
  
  // Nouveaux filtres
  const [filterDeclaredFts, setFilterDeclaredFts] = useState<"all" | "yes" | "no">("all");
  const [filterProdType, setFilterProdType] = useState<ProductionType | "all">("all");
  const [filterYear, setFilterYear] = useState<string>("all");
  const [filterMonth, setFilterMonth] = useState<string>("all");

  const { data: staffCheck, isLoading: isLoadingStaff } = useStaffCheck();
  const { data: organizations = [], isLoading: isLoadingOrgs } = useOrganizations();
  const { data: productions = [], isLoading: isLoadingProductions, error } = useProductions(
    selectedOrgId,
    searchQuery
  );

  // Fonction pour gérer le tri
  const handleSort = (column: "name" | "reference" | "declaration_date") => {
    if (sortColumn === column) {
      // Inverser la direction si on clique sur la même colonne
      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
    } else {
      // Nouvelle colonne : par défaut descendant
      setSortColumn(column);
      setSortDirection("desc");
    }
  };

  // Générer les années disponibles
  const availableYears = useMemo(() => {
    const years = new Set<string>();
    productions.forEach((p) => {
      if (p.declaration_date) {
        years.add(new Date(p.declaration_date).getFullYear().toString());
      }
    });
    return Array.from(years).sort((a, b) => b.localeCompare(a)); // Plus récent en premier
  }, [productions]);

  // Filtrage et tri
  const filteredProductions = useMemo(() => {
    let result = productions;
    
    // Filtre par recherche
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      result = result.filter(
        (p) =>
          p.name.toLowerCase().includes(query) ||
          (p.reference && p.reference.toLowerCase().includes(query))
      );
    }

    // Filtre par organisation
    // (déjà géré par l'API dans useProductions)

    // Filtre par Déclarée FTS
    if (filterDeclaredFts !== "all") {
      result = result.filter((p) => {
        if (filterDeclaredFts === "yes") return p.declared_fts === true;
        if (filterDeclaredFts === "no") return p.declared_fts === false || p.declared_fts === null;
        return true;
      });
    }

    // Filtre par Type de prod
    if (filterProdType !== "all") {
      result = result.filter((p) => p.prod_type === filterProdType);
    }

    // Filtre par année
    if (filterYear !== "all") {
      result = result.filter((p) => {
        if (!p.declaration_date) return false;
        const year = new Date(p.declaration_date).getFullYear().toString();
        return year === filterYear;
      });
    }

    // Filtre par mois
    if (filterMonth !== "all") {
      result = result.filter((p) => {
        if (!p.declaration_date) return false;
        const month = (new Date(p.declaration_date).getMonth() + 1).toString().padStart(2, "0");
        return month === filterMonth;
      });
    }

    // Tri
    if (sortColumn) {
      result = [...result].sort((a, b) => {
        let aValue: any;
        let bValue: any;

        if (sortColumn === "name") {
          aValue = a.name.toLowerCase();
          bValue = b.name.toLowerCase();
        } else if (sortColumn === "reference") {
          aValue = a.reference?.toLowerCase() || "";
          bValue = b.reference?.toLowerCase() || "";
        } else if (sortColumn === "declaration_date") {
          aValue = a.declaration_date || "";
          bValue = b.declaration_date || "";
        }

        if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
        if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
        return 0;
      });
    }

    return result;
  }, [productions, searchQuery, sortColumn, sortDirection, filterDeclaredFts, filterProdType, filterYear, filterMonth]);

  // Vérification staff
  if (isLoadingStaff) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <Loader2 className="w-8 h-8 animate-spin text-indigo-600" />
      </div>
    );
  }

  if (!staffCheck?.isStaff) {
    return (
      <main className="p-6">
        <h1 className="text-lg font-semibold">Accès refusé</h1>
        <p className="text-sm text-slate-600">Cette page est réservée au Staff.</p>
      </main>
    );
  }

  const hasActiveFilters = selectedOrgId || searchQuery || filterDeclaredFts !== "all" || filterProdType !== "all" || filterYear !== "all" || filterMonth !== "all";
  const activeFiltersCount = [
    selectedOrgId,
    filterDeclaredFts !== "all",
    filterProdType !== "all",
    filterYear !== "all",
    filterMonth !== "all"
  ].filter(Boolean).length;

  return (
    <div className="space-y-5 p-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Gestion des productions</h1>
          <p className="text-sm text-slate-600 mt-1">
            Gérez les productions et spectacles de toutes les organisations
          </p>
        </div>
        <button
          onClick={() => setIsCreateModalOpen(true)}
          className="inline-flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-xl hover:from-indigo-700 hover:to-purple-700 transition-all shadow-sm hover:shadow-md"
        >
          <Plus className="w-5 h-5" />
          Nouvelle production
        </button>
      </div>

      {/* Filtres et recherche */}
      <section className="rounded-2xl border bg-white overflow-hidden shadow-sm">
        <div className="p-4 border-b bg-slate-50/50">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
            <div className="flex items-center gap-3 flex-1">
              <div className="relative flex-1 max-w-md">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Rechercher par nom ou référence..."
                  className="w-full pl-10 pr-4 py-2.5 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
                />
                {searchQuery && (
                  <button
                    onClick={() => setSearchQuery("")}
                    className="absolute right-3 top-1/2 -translate-y-1/2 p-1 hover:bg-slate-100 rounded-md transition-colors"
                  >
                    <X className="w-4 h-4 text-slate-400" />
                  </button>
                )}
              </div>
              <button
                onClick={() => setShowFilters(!showFilters)}
                className={`inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border transition-all ${
                  hasActiveFilters
                    ? "bg-indigo-50 border-indigo-200 text-indigo-700"
                    : "bg-white border-slate-200 text-slate-700 hover:bg-slate-50"
                }`}
              >
                <Filter className="w-4 h-4" />
                Filtres
                {activeFiltersCount > 0 && (
                  <span className="px-2 py-0.5 bg-indigo-600 text-white text-xs rounded-full">
                    {activeFiltersCount}
                  </span>
                )}
              </button>
            </div>
            
            {hasActiveFilters && (
              <button
                onClick={() => {
                  setSelectedOrgId("");
                  setSearchQuery("");
                  setFilterDeclaredFts("all");
                  setFilterProdType("all");
                  setFilterYear("all");
                  setFilterMonth("all");
                }}
                className="inline-flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900 transition-colors"
              >
                <X className="w-4 h-4" />
                Réinitialiser
              </button>
            )}
          </div>

          {showFilters && (
            <div className="mt-4 pt-4 border-t">
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                {/* Organisation */}
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-700">
                    Organisation
                  </label>
                  <select
                    value={selectedOrgId}
                    onChange={(e) => setSelectedOrgId(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  >
                    <option value="">Toutes</option>
                    {organizations.map((org) => (
                      <option key={org.id} value={org.id}>
                        {org.name}
                      </option>
                    ))}
                  </select>
                </div>

                {/* Déclarée FTS */}
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-700">
                    Déclarée FTS
                  </label>
                  <select
                    value={filterDeclaredFts}
                    onChange={(e) => setFilterDeclaredFts(e.target.value as "all" | "yes" | "no")}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  >
                    <option value="all">Toutes</option>
                    <option value="yes">Oui</option>
                    <option value="no">Non</option>
                  </select>
                </div>

                {/* Type de prod */}
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-700">
                    Type de prod
                  </label>
                  <select
                    value={filterProdType}
                    onChange={(e) => setFilterProdType(e.target.value as ProductionType | "all")}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  >
                    <option value="all">Tous</option>
                    <option value="Spectacle vivant">Spectacle vivant</option>
                    <option value="Production audiovisuelle">Production audiovisuelle</option>
                    <option value="Production phonographique">Production phonographique</option>
                    <option value="Administratif">Administratif</option>
                  </select>
                </div>

                {/* Année */}
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-700">
                    Année
                  </label>
                  <select
                    value={filterYear}
                    onChange={(e) => setFilterYear(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  >
                    <option value="all">Toutes</option>
                    {availableYears.map((year) => (
                      <option key={year} value={year}>
                        {year}
                      </option>
                    ))}
                  </select>
                </div>

                {/* Mois */}
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-700">
                    Mois
                  </label>
                  <select
                    value={filterMonth}
                    onChange={(e) => setFilterMonth(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  >
                    <option value="all">Tous</option>
                    <option value="01">Janvier</option>
                    <option value="02">Février</option>
                    <option value="03">Mars</option>
                    <option value="04">Avril</option>
                    <option value="05">Mai</option>
                    <option value="06">Juin</option>
                    <option value="07">Juillet</option>
                    <option value="08">Août</option>
                    <option value="09">Septembre</option>
                    <option value="10">Octobre</option>
                    <option value="11">Novembre</option>
                    <option value="12">Décembre</option>
                  </select>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Stats */}
        <div className="px-4 py-3 bg-gradient-to-r from-slate-50 to-indigo-50/30 border-b">
          <div className="flex items-center justify-between text-sm">
            <span className="text-slate-600">
              {isLoadingProductions ? (
                <span className="flex items-center gap-2">
                  <Loader2 className="w-4 h-4 animate-spin" />
                  Chargement...
                </span>
              ) : (
                <>
                  <span className="font-semibold text-slate-900">
                    {filteredProductions.length}
                  </span>{" "}
                  production{filteredProductions.length > 1 ? "s" : ""}
                  {hasActiveFilters && " (filtrée" + (filteredProductions.length > 1 ? "s" : "") + ")"}
                </>
              )}
            </span>
            {selectedOrgId && (
              <span className="text-slate-600">
                Organisation :{" "}
                <span className="font-medium text-slate-900">
                  {organizations.find((o) => o.id === selectedOrgId)?.name}
                </span>
              </span>
            )}
          </div>
        </div>

        {/* Tableau */}
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-slate-50 border-b">
              <tr>
                <th 
                  className="text-left px-6 py-3 text-xs font-semibold text-slate-600 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors"
                  onClick={() => handleSort("name")}
                >
                  <div className="flex items-center gap-2">
                    <span>Nom</span>
                    {sortColumn === "name" ? (
                      sortDirection === "asc" ? <ArrowUp className="w-3.5 h-3.5" /> : <ArrowDown className="w-3.5 h-3.5" />
                    ) : (
                      <ArrowUpDown className="w-3.5 h-3.5 opacity-30" />
                    )}
                  </div>
                </th>
                <th 
                  className="text-left px-6 py-3 text-xs font-semibold text-slate-600 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors"
                  onClick={() => handleSort("reference")}
                >
                  <div className="flex items-center gap-2">
                    <span>Numéro d'objet</span>
                    {sortColumn === "reference" ? (
                      sortDirection === "asc" ? <ArrowUp className="w-3.5 h-3.5" /> : <ArrowDown className="w-3.5 h-3.5" />
                    ) : (
                      <ArrowUpDown className="w-3.5 h-3.5 opacity-30" />
                    )}
                  </div>
                </th>
                <th className="text-left px-6 py-3 text-xs font-semibold text-slate-600 uppercase tracking-wider">
                  Type de prod
                </th>
                <th 
                  className="text-left px-6 py-3 text-xs font-semibold text-slate-600 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors"
                  onClick={() => handleSort("declaration_date")}
                >
                  <div className="flex items-center gap-2">
                    <span>Date déclaration</span>
                    {sortColumn === "declaration_date" ? (
                      sortDirection === "asc" ? <ArrowUp className="w-3.5 h-3.5" /> : <ArrowDown className="w-3.5 h-3.5" />
                    ) : (
                      <ArrowUpDown className="w-3.5 h-3.5 opacity-30" />
                    )}
                  </div>
                </th>
                <th className="text-left px-6 py-3 text-xs font-semibold text-slate-600 uppercase tracking-wider">
                  Déclarée FTS
                </th>
                <th className="text-left px-6 py-3 text-xs font-semibold text-slate-600 uppercase tracking-wider">
                  Organisation
                </th>
                <th className="text-right px-6 py-3 text-xs font-semibold text-slate-600 uppercase tracking-wider">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {isLoadingProductions ? (
                <tr>
                  <td colSpan={7} className="px-6 py-12 text-center">
                    <Loader2 className="w-6 h-6 animate-spin mx-auto text-indigo-600" />
                    <p className="text-sm text-slate-600 mt-2">
                      Chargement des productions...
                    </p>
                  </td>
                </tr>
              ) : error ? (
                <tr>
                  <td colSpan={7} className="px-6 py-12 text-center">
                    <p className="text-sm text-red-600">
                      Erreur lors du chargement des productions
                    </p>
                  </td>
                </tr>
              ) : filteredProductions.length === 0 ? (
                <tr>
                  <td colSpan={7} className="px-6 py-12 text-center">
                    <Building2 className="w-12 h-12 mx-auto text-slate-300 mb-3" />
                    <p className="text-sm font-medium text-slate-600">
                      Aucune production trouvée
                    </p>
                    <p className="text-xs text-slate-500 mt-1">
                      {hasActiveFilters
                        ? "Essayez de modifier vos filtres"
                        : "Créez votre première production"}
                    </p>
                  </td>
                </tr>
              ) : (
                filteredProductions.map((production) => {
                  const org = organizations.find((o) => o.id === production.org_id);
                  
                  // Badge color selon le type
                  const getTypeBadgeColor = (type: ProductionType | null) => {
                    switch (type) {
                      case "Spectacle vivant":
                        return "bg-purple-100 text-purple-700";
                      case "Production audiovisuelle":
                        return "bg-blue-100 text-blue-700";
                      case "Production phonographique":
                        return "bg-green-100 text-green-700";
                      case "Administratif":
                        return "bg-orange-100 text-orange-700";
                      default:
                        return "bg-slate-100 text-slate-500";
                    }
                  };
                  
                  return (
                    <tr
                      key={production.id}
                      className="hover:bg-slate-50/50 transition-colors"
                    >
                      <td className="px-6 py-4">
                        <div className="font-medium text-slate-900">
                          {production.name}
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        {production.reference ? (
                          <span className="inline-block px-2.5 py-1 bg-slate-100 text-slate-700 rounded-lg text-xs font-mono font-medium whitespace-nowrap">
                            {production.reference}
                          </span>
                        ) : (
                          <span className="text-slate-400 text-sm">—</span>
                        )}
                      </td>
                      <td className="px-6 py-4">
                        {production.prod_type ? (
                          <span className={`inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium ${getTypeBadgeColor(production.prod_type)}`}>
                            {production.prod_type}
                          </span>
                        ) : (
                          <span className="text-slate-400 text-sm">—</span>
                        )}
                      </td>
                      <td className="px-6 py-4">
                        {production.declaration_date ? (
                          <div className="flex items-center gap-2 text-sm text-slate-600">
                            <Calendar className="w-4 h-4 text-slate-400" />
                            {new Date(production.declaration_date).toLocaleDateString("fr-FR")}
                          </div>
                        ) : (
                          <span className="text-slate-400 text-sm">—</span>
                        )}
                      </td>
                      <td className="px-6 py-4">
                        {production.declared_fts ? (
                          <span className="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium bg-green-100 text-green-700">
                            Oui
                          </span>
                        ) : (
                          <span className="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium bg-slate-100 text-slate-600">
                            Non
                          </span>
                        )}
                      </td>
                      <td className="px-6 py-4">
                        <span className="text-sm text-slate-600">
                          {org?.name || "—"}
                        </span>
                      </td>
                      <td className="px-6 py-4">
                        <div className="flex items-center justify-end gap-2">
                          <button
                            onClick={() => setNotifyingProduction(production)}
                            className="p-2 hover:bg-blue-50 rounded-lg transition-colors group"
                            title="Envoyer notification"
                          >
                            <Bell className="w-4 h-4 text-slate-400 group-hover:text-blue-600" />
                          </button>
                          <button
                            onClick={() => setEditingProduction(production)}
                            className="p-2 hover:bg-indigo-50 rounded-lg transition-colors group"
                            title="Modifier"
                          >
                            <Edit2 className="w-4 h-4 text-slate-400 group-hover:text-indigo-600" />
                          </button>
                          <button
                            onClick={() => setDeletingProduction(production)}
                            className="p-2 hover:bg-red-50 rounded-lg transition-colors group"
                            title="Supprimer"
                          >
                            <Trash2 className="w-4 h-4 text-slate-400 group-hover:text-red-600" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      </section>

      {/* Modals */}
      <ProductionModal
        isOpen={isCreateModalOpen || !!editingProduction}
        onClose={() => {
          setIsCreateModalOpen(false);
          setEditingProduction(null);
        }}
        production={editingProduction}
        organizations={organizations}
      />

      <DeleteConfirmModal
        isOpen={!!deletingProduction}
        onClose={() => setDeletingProduction(null)}
        production={deletingProduction}
      />

      <NotifyModal
        isOpen={!!notifyingProduction}
        onClose={() => setNotifyingProduction(null)}
        production={notifyingProduction}
      />
    </div>
  );
}
