'use client';
import { useState } from 'react';
import { useTasks, Task } from './TasksProvider';
import { FaTrash } from 'react-icons/fa';
import TaskDialog from './TaskDialog';

export default function TasksList() {
  const { tasks, updateTask, deleteTask, setIsDialogOpen, setSelectedTask, isDialogOpen, selectedTask } = useTasks();
  const [sortField, setSortField] = useState<keyof Task>('start_date');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');

  const handleSort = (field: keyof Task) => {
    if (sortField === field) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortDirection('asc');
    }
  };

  // Sort tasks based on sortField and sortDirection
  const sortedTasks = [...tasks].sort((a, b) => {
    let aField = a[sortField], bField = b[sortField];
    if (sortField === 'start_date') {
      const aDate = new Date(aField as string);
      const bDate = new Date(bField as string);
      return sortDirection === 'asc'
        ? aDate.getTime() - bDate.getTime()
        : bDate.getTime() - aDate.getTime();
    }
    // Compare numeric values
    if (typeof aField === 'number' && typeof bField === 'number') {
      return sortDirection === 'asc' ? aField - bField : bField - aField;
    }
    // Fallback to string comparison
    return sortDirection === 'asc'
      ? String(aField).localeCompare(String(bField))
      : String(bField).localeCompare(String(aField));
  });

  const handleRowClick = (task: Task) => {
    setSelectedTask(task);
    setIsDialogOpen(true);
  };

  const handleSave = (updatedFields: Partial<Task>) => {
    if (selectedTask?.id) {
      updateTask(selectedTask.id, updatedFields);
    }
  };

  const renderField = (task: Task, field: keyof Task) => {
    let displayValue = task[field];
    if (field === 'start_date' && typeof displayValue === 'string') {
      displayValue = new Date(displayValue).toLocaleDateString('bg-BG', {
        day: 'numeric',
        month: 'short',
        year: 'numeric'
      });
    }
    return <span>{displayValue}</span>;
  };

  if (tasks.length === 0) {
    return <p>Няма задачи.</p>;
  }

  return (
    <div>
      <div className="overflow-x-auto w-full">
        <table className="w-full table table-fixed min-w-[800px]">
          <thead>
            <tr className="bg-orange-200">
              <th className="sm:w-[300px] text-neutral cursor-pointer" onClick={() => handleSort('name')}>Име 📝</th>
              <th className="w-[150px] text-neutral cursor-pointer" onClick={() => handleSort('start_date')}>Начална Дата 📅</th>
              <th className="w-[150px] text-neutral cursor-pointer" onClick={() => handleSort('interval')}>Интервал ⏳</th>
              <th className="w-[100px] text-neutral cursor-pointer" onClick={() => handleSort('difficulty')}>Diff 🔥</th>
              <th className="w-[100px] text-neutral cursor-pointer" onClick={() => handleSort('time')}>Време ⏰</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {sortedTasks.map((task) => (
              <tr 
                key={task.id} 
                onClick={() => handleRowClick(task)}
                className="hover:bg-orange-50 cursor-pointer"
              >
                <td>{renderField(task, 'name')}</td>
                <td>{renderField(task, 'start_date')}</td>
                <td>{renderField(task, 'interval')}дни</td>
                <td>{renderField(task, 'difficulty')}</td>
                <td>{renderField(task, 'time')}</td>
                <td className="text-right">
                  <button onClick={(e) => {
                    e.stopPropagation();
                    if (confirm('Сигурни ли сте, че искате да изтриете тази задача?')) {
                      deleteTask(task.id);
                    }
                  }}>
                    <FaTrash className="text-gray-600 hover:text-gray-800" />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <TaskDialog
        isOpen={isDialogOpen}
        onClose={() => {
          setIsDialogOpen(false);
          setSelectedTask(undefined);
        }}
        onSave={handleSave}
        onDelete={deleteTask}
        task={selectedTask}
      />
    </div>
  );
}