Site-comptage-heure/app/dashboard/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 { DatePicker } from '../../components/ui/date-picker';
import { format } from 'date-fns';
import { toast } from 'sonner';

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

export default function DashboardPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [hours, setHours] = useState<Hour[]>([]);
  const [date, setDate] = useState<Date>();
  const [duration, setDuration] = useState('');
  const [reason, setReason] = useState('');
  const [hoursInput, setHoursInput] = useState('');
  const [minutesInput, setMinutesInput] = useState('');
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

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

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

  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,
      }),
    });
    if (res.ok) {
      setDate(undefined);
      setHoursInput('');
      setMinutesInput('');
      setReason('');
      fetchHours();
      toast.success('Heure ajoutée avec succès');
    } else {
      toast.error("Erreur lors de l'ajout de l'heure");
    }
  };

  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 handleChangePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    if (newPassword !== confirmPassword) {
      toast.error('Les mots de passe ne correspondent pas');
      return;
    }
    const res = await fetch('/api/auth/change-password', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ currentPassword, newPassword }),
    });
    if (res.ok) {
      toast.success('Mot de passe changé avec succès');
      setCurrentPassword('');
      setNewPassword('');
      setConfirmPassword('');
    } else {
      const data = await res.json();
      toast.error(data.error || 'Erreur lors du changement de mot de passe');
    }
  };

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

  const isAdmin =
    session?.user?.role === 'ADMIN' || session?.user?.role === 'SUPER_ADMIN';
  const isMember = session?.user?.role === 'MEMBER';

  const totalPending = hours
    .filter((h) => h.status === 'PENDING')
    .reduce((sum, h) => sum + h.duration, 0);
  const totalValidated = hours
    .filter((h) => h.status === 'VALIDATED')
    .reduce((sum, h) => sum + h.duration, 0);
  const totalRejected = hours
    .filter((h) => h.status === 'REJECTED')
    .reduce((sum, h) => sum + h.duration, 0);

  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">
      <h1 className="text-2xl font-bold mb-4">Tableau de bord</h1>
      <div className="mb-4">
        <h2 className="text-xl font-bold">Totaux</h2>
        <div className="flex space-x-4">
          <div>
            <h3 className="font-semibold">En attente</h3>
            <p>{formatHours(totalPending)}</p>
          </div>
          <div>
            <h3 className="font-semibold">Validées</h3>
            <p>{formatHours(totalValidated)}</p>
          </div>
          <div>
            <h3 className="font-semibold">Rejetées</h3>
            <p>{formatHours(totalRejected)}</p>
          </div>
        </div>
      </div>
      {isMember && (
        <Card className="mb-4">
          <CardHeader>
            <CardTitle>Ajouter une heure</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleAddHour} className="space-y-4">
              <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>Liste des heures</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Date</TableHead>
                <TableHead>Durée</TableHead>
                <TableHead>Raison</TableHead>
                <TableHead>Statut</TableHead>
                {isAdmin && <TableHead>Utilisateur</TableHead>}
                {isAdmin && <TableHead>Actions</TableHead>}
              </TableRow>
            </TableHeader>
            <TableBody>
              {hours.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>
                  {isAdmin && <TableCell>{hour.user.email}</TableCell>}
                  {isAdmin && (
                    <TableCell>
                      <Button
                        onClick={() => handleValidate(hour.id, 'VALIDATED')}
                        className="mr-2"
                      >
                        Valider
                      </Button>
                      <Button
                        onClick={() => handleValidate(hour.id, 'REJECTED')}
                        variant="destructive"
                      >
                        Rejeter
                      </Button>
                    </TableCell>
                  )}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
      {isMember && (
        <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="newPassword">Nouveau mot de passe</Label>
                <Input
                  id="newPassword"
                  type="password"
                  value={newPassword}
                  onChange={(e) => setNewPassword(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>
      )}
    </div>
  );
}