"use client";

import React, { useEffect, useState } from 'react';
import { Task, TaskStatus } from '@/types/types';
import Button from '@/components/ui/button/Button';
import { format } from 'date-fns';
import { getTasks } from '@/helpers/axios_helper';

const statusLabels: Record<TaskStatus, string> = {
  IN_PROGRESS: 'Tâches en cours',
  PENDING: 'Tâches en attente',
  COMPLETED: 'Tâches terminées',
  OVERDUE: 'Tâches en retard',
};

const statusOrder: TaskStatus[] = [
  TaskStatus.IN_PROGRESS,
  TaskStatus.PENDING,
  TaskStatus.COMPLETED,
  TaskStatus.OVERDUE,
];

export default function TaskJournal() {
  const [statusFilter, setStatusFilter] = useState<TaskStatus>(TaskStatus.IN_PROGRESS);
  const [tasks, setTasks] = useState<Task[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setLoading(true);
    setError(null);
    getTasks()
      .then((data) => {
        setTasks(data.filter((t) => t.status === statusFilter));
      })
      .catch((err) => setError('Erreur lors du chargement des tâches'))
      .finally(() => setLoading(false));
  }, [statusFilter]);

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Journal client</h1>
      <div className="flex gap-2 mb-6">
        {statusOrder.map((status) => (
          <Button
            key={status}
            variant={statusFilter === status ? 'primary' : 'outline'}
            onClick={() => setStatusFilter(status)}
          >
            {statusLabels[status]}
          </Button>
        ))}
      </div>
      {loading ? (
        <div>Chargement...</div>
      ) : error ? (
        <div className="text-red-600">{error}</div>
      ) : (
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Titre</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date de début</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Échéance</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {tasks.length === 0 ? (
              <tr>
                <td colSpan={3} className="text-center py-4 text-gray-500">Aucune tâche à afficher.</td>
              </tr>
            ) : (
              tasks.map((task) => (
                <tr key={task.id}>
                  <td className="px-6 py-4 whitespace-nowrap">{task.title}</td>
                  <td className="px-6 py-4 whitespace-nowrap">{task.startDate ? format(new Date(task.startDate), 'dd/MM/yyyy') : '-'}</td>
                  <td className="px-6 py-4 whitespace-nowrap">{task.dueDate ? format(new Date(task.dueDate), 'dd/MM/yyyy') : '-'}</td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      )}
    </div>
  );
}