"use client";

/**
 * Barre d'actions en lot pour les utilisateurs - COOP-CA AMIFOND
 *
 * Composant pour les actions sur plusieurs utilisateurs sélectionnés
 */

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge";
import { ChevronDown, UserPlus, UserMinus, Mail, Key, Trash2, Download, X } from "lucide-react";
import { User } from "@/types/auth";
import { useBulkUserAction } from "@/hooks/users/use-users-queries";
import { UserAction } from "@/types/users";

interface BulkActionsBarProps {
  selectedUsers: User[];
}

export function BulkActionsBar({ selectedUsers }: BulkActionsBarProps) {
  const [confirmAction, setConfirmAction] = useState<{
    action: UserAction["action"];
    title: string;
    description: string;
  } | null>(null);

  const bulkActionMutation = useBulkUserAction();

  // Si aucun utilisateur sélectionné, ne pas afficher la barre
  if (selectedUsers.length === 0) {
    return null;
  }

  // Statistiques des utilisateurs sélectionnés
  const activeCount = selectedUsers.filter((user) => user.is_active).length;
  const inactiveCount = selectedUsers.filter((user) => !user.is_active).length;
  const unverifiedCount = selectedUsers.filter((user) => !user.is_verified).length;

  // Handler pour les actions en lot
  const handleBulkAction = (action: UserAction["action"]) => {
    const userIds = selectedUsers.map((user) => user.id);

    const actionConfigs = {
      activate: {
        title: "Activer les utilisateurs",
        description: `Êtes-vous sûr de vouloir activer ${userIds.length} utilisateur(s) ? Ils pourront se connecter au système.`,
      },
      deactivate: {
        title: "Désactiver les utilisateurs",
        description: `Êtes-vous sûr de vouloir désactiver ${userIds.length} utilisateur(s) ? Ils ne pourront plus se connecter.`,
      },
      reset_password: {
        title: "Réinitialiser les mots de passe",
        description: `Réinitialiser les mots de passe de ${userIds.length} utilisateur(s) ? Un nouveau mot de passe temporaire sera envoyé par email.`,
      },
      send_verification: {
        title: "Envoyer les emails de vérification",
        description: `Envoyer un email de vérification à ${userIds.length} utilisateur(s) ?`,
      },
    };

    setConfirmAction({
      action,
      ...actionConfigs[action],
    });
  };

  // Confirmer et exécuter l'action
  const confirmBulkAction = () => {
    if (!confirmAction) return;

    const userIds = selectedUsers.map((user) => user.id);
    const actionData: UserAction = {
      action: confirmAction.action,
      user_ids: userIds,
    };

    bulkActionMutation.mutate(actionData);
    setConfirmAction(null);
  };

  // Export des utilisateurs sélectionnés
  const exportSelectedUsers = () => {
    const csvContent = [
      // En-têtes
      ["Email", "Prénom", "Nom", "Type", "Téléphone", "Département", "Statut", "Date d'inscription"].join(","),
      // Données
      ...selectedUsers.map((user) =>
        [
          user.email,
          user.first_name,
          user.last_name,
          user.user_type,
          user.phone_number,
          user.department || "",
          user.is_active ? "Actif" : "Inactif",
          new Date(user.date_joined).toLocaleDateString("fr-FR"),
        ].join(","),
      ),
    ].join("\n");

    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = `utilisateurs_selectionnes_${new Date().toISOString().split("T")[0]}.csv`;
    link.click();
  };

  return (
    <>
      <div className="flex items-center justify-between rounded-lg border border-blue-200 bg-blue-50 p-4">
        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-2">
            <Badge variant="default" className="bg-blue-600">
              {selectedUsers.length} utilisateur(s) sélectionné(s)
            </Badge>
            {activeCount > 0 && (
              <Badge variant="outline" className="border-green-600 text-green-600">
                {activeCount} actif(s)
              </Badge>
            )}
            {inactiveCount > 0 && (
              <Badge variant="outline" className="border-red-600 text-red-600">
                {inactiveCount} inactif(s)
              </Badge>
            )}
            {unverifiedCount > 0 && (
              <Badge variant="outline" className="border-orange-600 text-orange-600">
                {unverifiedCount} non vérifié(s)
              </Badge>
            )}
          </div>
        </div>

        <div className="flex items-center space-x-2">
          {/* Actions rapides */}
          {inactiveCount > 0 && (
            <Button
              size="sm"
              variant="outline"
              onClick={() => handleBulkAction("activate")}
              className="border-green-600 text-green-600 hover:bg-green-50"
            >
              <UserPlus className="mr-2 h-4 w-4" />
              Activer ({inactiveCount})
            </Button>
          )}

          {activeCount > 0 && (
            <Button
              size="sm"
              variant="outline"
              onClick={() => handleBulkAction("deactivate")}
              className="border-orange-600 text-orange-600 hover:bg-orange-50"
            >
              <UserMinus className="mr-2 h-4 w-4" />
              Désactiver ({activeCount})
            </Button>
          )}

          {/* Menu d'actions supplémentaires */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button size="sm" variant="outline">
                Plus d'actions
                <ChevronDown className="ml-2 h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem onClick={() => handleBulkAction("send_verification")}>
                <Mail className="mr-2 h-4 w-4" />
                Envoyer vérification ({unverifiedCount})
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => handleBulkAction("reset_password")}>
                <Key className="mr-2 h-4 w-4" />
                Réinitialiser mots de passe
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={exportSelectedUsers}>
                <Download className="mr-2 h-4 w-4" />
                Exporter la sélection
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                className="text-red-600"
                onClick={() => {
                  setConfirmAction({
                    action: "deactivate", // On utilise deactivate car il n'y a pas de delete en lot sécurisé
                    title: "Attention",
                    description:
                      "La suppression en lot n'est pas autorisée pour des raisons de sécurité. Utilisez la désactivation ou supprimez les utilisateurs individuellement.",
                  });
                }}
              >
                <Trash2 className="mr-2 h-4 w-4" />
                Supprimer (désactivé)
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          {/* Bouton pour annuler la sélection */}
          <Button size="sm" variant="ghost">
            <X className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* Dialog de confirmation */}
      <AlertDialog open={!!confirmAction} onOpenChange={(open) => !open && setConfirmAction(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{confirmAction?.title}</AlertDialogTitle>
            <AlertDialogDescription>{confirmAction?.description}</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={bulkActionMutation.isPending}>Annuler</AlertDialogCancel>
            <AlertDialogAction
              onClick={confirmBulkAction}
              disabled={bulkActionMutation.isPending}
              className={confirmAction?.action === "deactivate" ? "bg-orange-600 hover:bg-orange-700" : ""}
            >
              {bulkActionMutation.isPending ? "En cours..." : "Confirmer"}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}