"use client";
import { useEffect, useState } from 'react';
import { Task, TaskStatus } from '@/types/types';
import { getTasks } from '@/helpers/axios_helper';
import { Plus, Edit, Trash2 } from 'lucide-react';

const statusLabels: Record<TaskStatus, string> = {
  IN_PROGRESS: 'En cours',
  PENDING: 'En attente',
  COMPLETED: 'Terminée',
  OVERDUE: 'En retard',
};

const ClientTasksCards = ({ clientId }: { clientId?: number }) => {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [loading, setLoading] = useState(true);
  const [showAdd, setShowAdd] = useState(false);
  const [showEdit, setShowEdit] = useState<Task | null>(null);

  useEffect(() => {
    setLoading(true);
    getTasks().then(allTasks => {
      setTasks(clientId ? allTasks.filter(t => t.clientId === clientId) : allTasks);
      setLoading(false);
    });
  }, [clientId]);

  // Placeholder pour ajout/édition/suppression (à brancher sur tes modals ou formulaires réels)
  const handleAdd = () => setShowAdd(true);
  const handleEdit = (task: Task) => setShowEdit(task);
  const handleDelete = (taskId: number) => setTasks(tasks.filter(t => t.id !== taskId));

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <h4 className="font-semibold">Tâches {clientId ? 'du client' : ''}</h4>
        <button onClick={handleAdd} className="flex items-center gap-1 px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition">
          <Plus className="w-4 h-4" /> Ajouter
        </button>
      </div>
      {loading ? (
        <div className="text-gray-400">Chargement...</div>
      ) : tasks.length === 0 ? (
        <div className="text-gray-400">Aucune tâche{clientId ? ' pour ce client' : ''}.</div>
      ) : (
        <div className="grid gap-4">
          {tasks.map(task => (
            <div key={task.id} className="bg-white rounded shadow p-4 flex flex-col md:flex-row md:items-center md:justify-between border">
              <div>
                <div className="font-semibold text-lg">{task.title}</div>
                <div className="text-sm text-gray-500">{task.description}</div>
                <div className="text-xs text-gray-400 mt-1">Statut : {statusLabels[task.status]}</div>
              </div>
              <div className="flex gap-2 mt-2 md:mt-0">
                <button onClick={() => handleEdit(task)} className="p-2 rounded hover:bg-gray-100" title="Modifier"><Edit className="w-4 h-4" /></button>
                <button onClick={() => handleDelete(task.id)} className="p-2 rounded hover:bg-red-100 text-red-600" title="Supprimer"><Trash2 className="w-4 h-4" /></button>
              </div>
            </div>
          ))}
        </div>
      )}
      {/* Modals d'ajout/édition à brancher ici si besoin */}
      {showAdd && (
        <div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded shadow max-w-md w-full">
            <h2 className="font-bold mb-4">Ajouter une tâche</h2>
            {/* Formulaire d'ajout ici */}
            <button onClick={() => setShowAdd(false)} className="mt-4 px-4 py-2 bg-gray-200 rounded">Annuler</button>
          </div>
        </div>
      )}
      {showEdit && (
        <div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded shadow max-w-md w-full">
            <h2 className="font-bold mb-4">Modifier la tâche</h2>
            {/* Formulaire d'édition ici, prérempli avec showEdit */}
            <button onClick={() => setShowEdit(null)} className="mt-4 px-4 py-2 bg-gray-200 rounded">Annuler</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default ClientTasksCards;