Site-comptage-heure/app/admin/page.tsx

'use client';

import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { Button } from '../../components/ui/button';
import { Input } from '../../components/ui/input';
import { Label } from '../../components/ui/label';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '../../components/ui/table';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '../../components/ui/card';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '../../components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../../components/ui/select';
import { Checkbox } from '../../components/ui/checkbox';
import { toast } from 'sonner';
import { DatePicker } from '../../components/ui/date-picker';
import { format } from 'date-fns';
import { useSettings } from '../../context/SettingsContext';

interface Hour {
  id: string;
  date: string;
  duration: number;
  reason: string;
  status: string;
  userId: string;
  createdAt?: string;
  user: { email: string; firstName?: string; lastName?: string; role: string };
  validatedBy?: { firstName?: string; lastName?: string; email: string };
}

interface Settings {
  name: string;
  logo: string;
}

interface User {
  id: string;
  email: string;
  firstName?: string;
  lastName?: string;
  role: string;
}

export default function AdminPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [hours, setHours] = useState<Hour[]>([]);
  const [settings, setSettings] = useState<Settings>({ name: '', logo: '' });
  const [newEmail, setNewEmail] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [newRole, setNewRole] = useState('MEMBER');
  const [logoFile, setLogoFile] = useState<File | null>(null);
  const [date, setDate] = useState<Date>();
  const [duration, setDuration] = useState('');
  const [reason, setReason] = useState('');
  const [hoursInput, setHoursInput] = useState('');
  const [minutesInput, setMinutesInput] = useState('');
  const [newFirstName, setNewFirstName] = useState('');
  const [newLastName, setNewLastName] = useState('');
  const [showAll, setShowAll] = useState(false);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [selectedUser, setSelectedUser] = useState<{
    id: string;
    name: string;
  } | null>(null);
  const [currentPassword, setCurrentPassword] = useState('');
  const [changeNewPassword, setChangeNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [forceDelete, setForceDelete] = useState(false);
  const [showForceModal, setShowForceModal] = useState(false);
  const [selectedUserForReset, setSelectedUserForReset] = useState<{
    id: string;
    name: string;
  } | null>(null);
  const [newPasswordForReset, setNewPasswordForReset] = useState('');
  const [resetPasswordDialog, setResetPasswordDialog] = useState(false);
  const [confirmReset, setConfirmReset] = useState(false);
  const [confirmResetPassword, setConfirmResetPassword] = useState(false);
  const [users, setUsers] = useState<User[]>([]);
  const [confirmPasswordChange, setConfirmPasswordChange] = useState(false);
  const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
  const [sortBy, setSortBy] = useState<'date' | 'createdAt'>('date');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
  const [showPendingFirst, setShowPendingFirst] = useState(true);
  const { refetchSettings } = useSettings();

  useEffect(() => {
    if (status === 'loading') return;
    if (
      !session ||
      (session.user.role !== 'ADMIN' && session.user.role !== 'SUPER_ADMIN')
    ) {
      router.push('/dashboard');
      return;
    }
    fetchHours();
    fetchSettings();
  }, [session, status, router]);

  useEffect(() => {
    if (
      session?.user?.role === 'SUPER_ADMIN' ||
      session?.user?.role === 'ADMIN'
    ) {
      fetchUsers();
    }
  }, [session]);

  const fetchHours = async () => {
    const res = await fetch('/api/hours');
    if (res.ok) {
      const data = await res.json();
      setHours(data);
    }
  };

  const fetchSettings = async () => {
    const res = await fetch('/api/settings');
    if (res.ok) {
      const data = await res.json();
      setSettings(data);
    }
  };

  const fetchUsers = async () => {
    const res = await fetch('/api/users');
    if (res.ok) {
      const data = await res.json();
      setUsers(data);
    }
  };

  const handleValidate = async (id: string, status: string) => {
    await fetch(`/api/hours/${id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status }),
    });
    fetchHours();
    toast.success(`Heure ${status === 'VALIDATED' ? 'validée' : 'rejetée'}`);
  };

  const handleUpdateSettings = async (e: React.FormEvent) => {
    e.preventDefault();
    let logoPath = settings.logo;
    if (logoFile) {
      const formData = new FormData();
      formData.append('file', logoFile);
      const uploadRes = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      if (uploadRes.ok) {
        const uploadData = await uploadRes.json();
        logoPath = uploadData.path;
      } else {
        alert('Erreur upload');
        return;
      }
    }
    const res = await fetch('/api/settings', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: settings.name, logo: logoPath }),
    });
    if (res.ok) {
      setLogoFile(null);
      fetchSettings();
      refetchSettings();
      toast.success('Paramètres mis à jour');
    } else {
      toast.error('Erreur lors de la mise à jour des paramètres');
    }
  };

  const handleCreateUser = async (e: React.FormEvent) => {
    e.preventDefault();
    const res = await fetch('/api/auth/signup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: newEmail,
        password: newPassword,
        role: newRole,
        firstName: newFirstName,
        lastName: newLastName,
      }),
    });
    if (res.ok) {
      setNewEmail('');
      setNewPassword('');
      setNewRole('MEMBER');
      setNewFirstName('');
      setNewLastName('');
      toast.success('Utilisateur créé');
    }
  };

  const handleExport = (format: string) => {
    window.open(`/api/export?format=${format}`, '_blank');
  };

  const handleAddHour = async (e: React.FormEvent) => {
    e.preventDefault();
    const totalMinutes = parseInt(hoursInput) * 60 + parseInt(minutesInput);
    const dateString = date ? format(date, 'yyyy-MM-dd') : '';
    const res = await fetch('/api/hours', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        date: dateString,
        duration: totalMinutes,
        reason,
        userIds: selectedUserIds.length > 0 ? selectedUserIds : undefined,
      }),
    });
    if (res.ok) {
      setDate(undefined);
      setHoursInput('');
      setMinutesInput('');
      setReason('');
      setSelectedUserIds([]);
      fetchHours();
      toast.success('Heure ajoutée avec succès');
    } else {
      toast.error("Erreur lors de l'ajout de l'heure");
    }
  };

  const handleDelete = async (id: string) => {
    // Reject the hour entry then delete
    await handleValidate(id, 'REJECTED');
    await fetch(`/api/hours/${id}`, {
      method: 'DELETE',
    });
    fetchHours();
    toast.success('Heure supprimée');
  };

  const userMap = users.reduce(
    (acc, user) => {
      const name =
        `${user.firstName || ''} ${user.lastName || ''}`.trim() || user.email;
      acc[user.id] = { name, email: user.email, role: user.role };
      return acc;
    },
    {} as Record<string, { name: string; email: string; role: string }>,
  );

  const userTotals = users.reduce(
    (acc, user) => {
      acc[user.id] = hours
        .filter((h) => h.userId === user.id && h.status === 'VALIDATED')
        .reduce((sum, h) => sum + h.duration, 0);
      return acc;
    },
    {} as Record<string, number>,
  );

  const handleDeleteUser = async () => {
    if (!selectedUser) return;
    const res = await fetch(`/api/users/${selectedUser.id}`, {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ force: forceDelete }),
    });
    if (res.ok) {
      setDialogOpen(false);
      setSelectedUser(null);
      fetchHours();
      toast.success('Utilisateur supprimé');
    } else if (res.status === 400) {
      setDialogOpen(false);
      setShowForceModal(true);
    } else {
      const data = await res.json();
      toast.error(data.error || 'Erreur lors de la suppression');
    }
  };

  const handleForceDelete = async () => {
    if (!selectedUser) return;
    const res = await fetch(`/api/users/${selectedUser.id}`, {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ force: true }),
    });
    if (res.ok) {
      setShowForceModal(false);
      setSelectedUser(null);
      fetchHours();
      toast.success('Utilisateur supprimé');
    } else {
      const data = await res.json();
      toast.error(data.error || 'Erreur lors de la suppression');
    }
  };

  const handleConfirmChangePassword = async () => {
    const res = await fetch('/api/auth/change-password', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ currentPassword, newPassword: changeNewPassword }),
    });
    if (res.ok) {
      toast.success('Mot de passe changé avec succès');
      setCurrentPassword('');
      setChangeNewPassword('');
      setConfirmPassword('');
      setConfirmPasswordChange(false);
    } else {
      const data = await res.json();
      toast.error(data.error || 'Erreur lors du changement de mot de passe');
    }
  };

  const handleChangePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    if (changeNewPassword !== confirmPassword) {
      toast.error('Les mots de passe ne correspondent pas');
      return;
    }
    await handleConfirmChangePassword();
  };

  const handleResetPassword = () => {
    setConfirmResetPassword(true);
  };

  const handleConfirmResetPassword = async () => {
    if (!selectedUserForReset || !newPasswordForReset) return;
    const res = await fetch(`/api/users/${selectedUserForReset.id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ password: newPasswordForReset }),
    });
    if (res.ok) {
      setResetPasswordDialog(false);
      setConfirmResetPassword(false);
      setSelectedUserForReset(null);
      setNewPasswordForReset('');
      toast.success('Mot de passe réinitialisé');
    } else {
      const data = await res.json();
      toast.error(data.error || 'Erreur lors de la réinitialisation');
    }
  };

  if (status === 'loading') return <div>Chargement...</div>;

  const isSuperAdmin = session?.user?.role === 'SUPER_ADMIN';

  const sortedHours = [...hours].sort((a, b) => {
    if (showPendingFirst) {
      if (a.status === 'PENDING' && b.status !== 'PENDING') return -1;
      if (a.status !== 'PENDING' && b.status === 'PENDING') return 1;
    }

    let dateA, dateB;
    if (sortBy === 'createdAt') {
      dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
      dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
    } else {
      dateA = new Date(a.date).getTime();
      dateB = new Date(b.date).getTime();
    }

    if (sortOrder === 'asc') {
      return dateA - dateB;
    } else {
      return dateB - dateA;
    }
  });
  const displayedHours = showAll ? sortedHours : sortedHours.slice(0, 10);

  const formatHours = (minutes: number) => {
    const h = Math.floor(minutes / 60);
    const m = minutes % 60;
    return `${h}h ${m}min`;
  };

  return (
    <div className="container mx-auto p-4">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-2xl font-bold">Administration</h1>
        <Button onClick={() => router.push('/admin/import-users')}>
          Importer des utilisateurs
        </Button>
      </div>
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Ajouter des heures</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleAddHour} className="space-y-4">
            <div>
              <Label className="mb-2 block">
                Utilisateurs (laisser vide pour vous-même)
              </Label>
              <div className="h-40 overflow-y-auto border rounded p-2 space-y-2 bg-white dark:bg-stone-900">
                {users.map((user) => (
                  <div key={user.id} className="flex items-center space-x-2">
                    <Checkbox
                      id={`user-${user.id}`}
                      checked={selectedUserIds.includes(user.id)}
                      onCheckedChange={(checked) => {
                        if (checked) {
                          setSelectedUserIds([...selectedUserIds, user.id]);
                        } else {
                          setSelectedUserIds(
                            selectedUserIds.filter((id) => id !== user.id),
                          );
                        }
                      }}
                    />
                    <Label
                      htmlFor={`user-${user.id}`}
                      className="cursor-pointer font-normal"
                    >
                      {user.firstName} {user.lastName} ({user.email})
                    </Label>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <Label htmlFor="date">Date</Label>
              <DatePicker date={date} setDate={setDate} />
            </div>
            <div className="flex space-x-2">
              <div>
                <Label htmlFor="hours">Heures</Label>
                <Input
                  id="hours"
                  type="number"
                  value={hoursInput}
                  onChange={(e) => setHoursInput(e.target.value)}
                  min="0"
                  required
                />
              </div>
              <div>
                <Label htmlFor="minutes">Minutes</Label>
                <Input
                  id="minutes"
                  type="number"
                  value={minutesInput}
                  onChange={(e) => setMinutesInput(e.target.value)}
                  min="0"
                  max="59"
                  required
                />
              </div>
            </div>
            <div>
              <Label htmlFor="reason">Raison</Label>
              <Input
                id="reason"
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                required
              />
            </div>
            <Button type="submit">Ajouter</Button>
          </form>
        </CardContent>
      </Card>
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Gestion des heures</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-4 mb-4 items-end">
            <div className="w-[200px]">
              <Label htmlFor="sortBy" className="mb-2 block">
                Trier par
              </Label>
              <Select
                value={sortBy}
                onValueChange={(value) =>
                  setSortBy(value as 'date' | 'createdAt')
                }
              >
                <SelectTrigger id="sortBy">
                  <SelectValue placeholder="Trier par" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="date">Date effective</SelectItem>
                  <SelectItem value="createdAt">Date d'ajout</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="w-[200px]">
              <Label htmlFor="sortOrder" className="mb-2 block">
                Ordre
              </Label>
              <Select
                value={sortOrder}
                onValueChange={(value) => setSortOrder(value as 'asc' | 'desc')}
              >
                <SelectTrigger id="sortOrder">
                  <SelectValue placeholder="Ordre" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="desc">Récent d'abord</SelectItem>
                  <SelectItem value="asc">Ancien d'abord</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-center space-x-2 pb-2">
              <Checkbox
                id="showPendingFirst"
                checked={showPendingFirst}
                onCheckedChange={(checked) =>
                  setShowPendingFirst(checked as boolean)
                }
              />
              <Label
                htmlFor="showPendingFirst"
                className="cursor-pointer font-normal"
              >
                Afficher les "En attente" en premier
              </Label>
            </div>
          </div>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Date</TableHead>
                <TableHead>Durée</TableHead>
                <TableHead>Raison</TableHead>
                <TableHead>Statut</TableHead>
                <TableHead>Utilisateur</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {displayedHours.map((hour) => (
                <TableRow key={hour.id}>
                  <TableCell>
                    {new Date(hour.date).toLocaleDateString()}
                  </TableCell>
                  <TableCell>{hour.duration} min</TableCell>
                  <TableCell>{hour.reason}</TableCell>
                  <TableCell>
                    {hour.status === 'VALIDATED' && hour.validatedBy
                      ? `Validé par ${hour.validatedBy.firstName || ''} ${hour.validatedBy.lastName || ''}`.trim() ||
                        hour.validatedBy.email
                      : hour.status === 'REJECTED' && hour.validatedBy
                        ? `Rejeté par ${hour.validatedBy.firstName || ''} ${hour.validatedBy.lastName || ''}`.trim() ||
                          hour.validatedBy.email
                        : hour.status === 'PENDING'
                          ? 'En attente'
                          : hour.status}
                  </TableCell>
                  <TableCell>{userMap[hour.userId]?.name}</TableCell>
                  <TableCell>
                    {hour.status === 'VALIDATED' ||
                    hour.status === 'REJECTED' ? (
                      <Button
                        onClick={() => handleDelete(hour.id)}
                        variant="destructive"
                      >
                        Supprimer
                      </Button>
                    ) : (
                      <>
                        <Button
                          onClick={() => handleValidate(hour.id, 'VALIDATED')}
                          className="mr-2"
                          disabled={hour.userId === session?.user?.id}
                        >
                          Valider
                        </Button>
                        <Button
                          onClick={() => handleValidate(hour.id, 'REJECTED')}
                          variant="destructive"
                          disabled={hour.userId === session?.user?.id}
                        >
                          Rejeter
                        </Button>
                      </>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          {hours.length > 10 && !showAll && (
            <div className="mt-4">
              <Button onClick={() => setShowAll(true)}>Voir plus</Button>
            </div>
          )}
          <div className="mt-4">
            <h5 className="text-lg font-bold">Totaux par utilisateur</h5>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Utilisateur</TableHead>
                  <TableHead>Heures Validées</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {Object.entries(userTotals).map(([userId, total]) => (
                  <TableRow key={userId}>
                    <TableCell>{userMap[userId]?.name}</TableCell>
                    <TableCell>{formatHours(total)}</TableCell>
                    <TableCell>
                      {isSuperAdmin ? (
                        userMap[userId]?.role === 'SUPER_ADMIN' ? (
                          'Super Admin'
                        ) : (
                          <>
                            <Button
                              onClick={() => {
                                setSelectedUser({
                                  id: userId,
                                  name: userMap[userId]?.name,
                                });
                                setForceDelete(false);
                                setDialogOpen(true);
                              }}
                              variant="destructive"
                              className="mr-2"
                            >
                              Supprimer
                            </Button>
                            <Button
                              onClick={() => {
                                setSelectedUserForReset({
                                  id: userId,
                                  name: userMap[userId]?.name,
                                });
                                setResetPasswordDialog(true);
                              }}
                              variant="outline"
                            >
                              Réinitialiser le mot de passe
                            </Button>
                          </>
                        )
                      ) : userMap[userId]?.role === 'SUPER_ADMIN' ? (
                        'Gestionnaire'
                      ) : userMap[userId]?.role === 'ADMIN' ? (
                        'Bureau'
                      ) : (
                        'Membre'
                      )}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Changer mot de passe</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleChangePassword} className="space-y-4">
            <div>
              <Label htmlFor="currentPassword">Mot de passe actuel</Label>
              <Input
                id="currentPassword"
                type="password"
                value={currentPassword}
                onChange={(e) => setCurrentPassword(e.target.value)}
                required
              />
            </div>
            <div>
              <Label htmlFor="changeNewPassword">Nouveau mot de passe</Label>
              <Input
                id="changeNewPassword"
                type="password"
                value={changeNewPassword}
                onChange={(e) => setChangeNewPassword(e.target.value)}
                required
              />
            </div>
            <div>
              <Label htmlFor="confirmPassword">
                Confirmer nouveau mot de passe
              </Label>
              <Input
                id="confirmPassword"
                type="password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                required
              />
            </div>
            <Button type="submit">Changer mot de passe</Button>
          </form>
        </CardContent>
      </Card>
      {isSuperAdmin && (
        <Card className="mb-4">
          <CardHeader>
            <CardTitle>Créer un compte</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleCreateUser} className="space-y-4">
              <div>
                <Label htmlFor="newEmail">Email</Label>
                <Input
                  id="newEmail"
                  type="email"
                  value={newEmail}
                  onChange={(e) => setNewEmail(e.target.value)}
                  required
                />
              </div>
              <div>
                <Label htmlFor="newPassword">Mot de passe</Label>
                <Input
                  id="newPassword"
                  type="password"
                  value={newPassword}
                  onChange={(e) => setNewPassword(e.target.value)}
                  required
                />
              </div>
              <div>
                <Label htmlFor="newFirstName">Prénom</Label>
                <Input
                  id="newFirstName"
                  value={newFirstName}
                  onChange={(e) => setNewFirstName(e.target.value)}
                  required
                />
              </div>
              <div>
                <Label htmlFor="newLastName">Nom de famille</Label>
                <Input
                  id="newLastName"
                  value={newLastName}
                  onChange={(e) => setNewLastName(e.target.value)}
                  required
                />
              </div>
              <div>
                <Label htmlFor="newRole" className="mb-2 block">
                  Rôle
                </Label>
                <Select value={newRole} onValueChange={setNewRole}>
                  <SelectTrigger id="newRole">
                    <SelectValue placeholder="Rôle" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="MEMBER">Membre</SelectItem>
                    <SelectItem value="ADMIN">Bureau</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <Button type="submit">Créer</Button>
            </form>
          </CardContent>
        </Card>
      )}
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Paramètres du Club</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleUpdateSettings} className="space-y-4">
            <div>
              <Label htmlFor="name">Nom du Club</Label>
              <Input
                id="name"
                value={settings.name}
                onChange={(e) =>
                  setSettings({ ...settings, name: e.target.value })
                }
              />
            </div>
            <div>
              <Label htmlFor="logo">Logo</Label>
              <Input
                id="logo"
                type="file"
                accept="image/png,image/jpeg,image/jpg"
                onChange={(e) => setLogoFile(e.target.files?.[0] || null)}
              />
              {settings.logo && <p>Actuel : {settings.logo}</p>}
            </div>
            <Button type="submit">Mettre à jour</Button>
          </form>
        </CardContent>
      </Card>
      {selectedUser && (
        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Confirmation</DialogTitle>
            </DialogHeader>
            <DialogDescription>
              Êtes-vous sûr de vouloir supprimer cet utilisateur ?
              <div className="flex items-center space-x-2 mt-2">
                <Checkbox
                  id="force"
                  checked={forceDelete}
                  onCheckedChange={(checked) => setForceDelete(checked as boolean)}
                />
                <Label htmlFor="force">
                  Forcer la suppression même si l'utilisateur a des heures
                </Label>
              </div>
            </DialogDescription>
            <DialogFooter>
              <Button onClick={() => setDialogOpen(false)}>Annuler</Button>
              <Button onClick={handleDeleteUser} variant="destructive">
                Supprimer
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}
      {selectedUser && showForceModal && (
        <Dialog open={showForceModal} onOpenChange={setShowForceModal}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Confirmation de suppression forcée</DialogTitle>
            </DialogHeader>
            <DialogDescription>
              Cette action supprimera l'utilisateur sans tenir compte de ses
              heures. Êtes-vous sûr ?
            </DialogDescription>
            <DialogFooter>
              <Button onClick={() => setShowForceModal(false)}>Annuler</Button>
              <Button onClick={handleForceDelete} variant="destructive">
                Supprimer
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}
      {selectedUserForReset && (
        <Dialog
          open={resetPasswordDialog}
          onOpenChange={setResetPasswordDialog}
        >
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Réinitialiser le mot de passe</DialogTitle>
            </DialogHeader>
            <DialogDescription>
              Entrez un nouveau mot de passe pour {selectedUserForReset.name}.
            </DialogDescription>
            <div className="space-y-4">
              <div>
                <Label htmlFor="newPasswordReset">Nouveau mot de passe</Label>
                <Input
                  id="newPasswordReset"
                  type="password"
                  value={newPasswordForReset}
                  onChange={(e) => setNewPasswordForReset(e.target.value)}
                  required
                />
              </div>
            </div>
            <DialogFooter>
              <Button onClick={() => setResetPasswordDialog(false)}>
                Annuler
              </Button>
              <Button onClick={handleResetPassword}>Réinitialiser</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}
      {selectedUserForReset && confirmResetPassword && (
        <Dialog
          open={confirmResetPassword}
          onOpenChange={setConfirmResetPassword}
        >
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Confirmation de réinitialisation</DialogTitle>
            </DialogHeader>
            <DialogDescription>
              Êtes-vous sûr de vouloir réinitialiser le mot de passe de{' '}
              {selectedUserForReset.name} ?
            </DialogDescription>
            <DialogFooter>
              <Button onClick={() => setConfirmResetPassword(false)}>
                Annuler
              </Button>
              <Button onClick={handleConfirmResetPassword}>Confirmer</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}
      <div>
        <Button onClick={() => handleExport('csv')} className="mr-2">
          Exporter CSV
        </Button>
        <Button onClick={() => handleExport('excel')}>Exporter Excel</Button>
      </div>
    </div>
  );
}