import React, { useState, useEffect } from 'react';
import {
  CheckSquare,
  Clock,
  AlertCircle,
  CheckCircle2,
  XCircle,
  Plus,
  Calendar,
  User,
  Play,
} from 'lucide-react';
import { toast } from 'react-toastify';
import { Loading, EmptyState } from '../../components/common';
import { useAsync } from '../../hooks/useAsync';
import taskService, { Task, TaskStatistics } from '../../services/api/taskService';
import { formatDate } from '../../utils/format';
import TaskDetailModal from '../../components/tasks/TaskDetailModal';
import CreateTaskModal from '../../components/tasks/CreateTaskModal';
import TaskFilters from '../../components/tasks/TaskFilters';
import { logger } from '../../utils/logger';

type TaskStatus = 'pending' | 'assigned' | 'in_progress' | 'completed' | 'cancelled' | 'overdue';
type TaskPriority = 'low' | 'medium' | 'high' | 'urgent';

const TaskManagementPage: React.FC = () => {
  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
  const [showTaskDetail, setShowTaskDetail] = useState(false);
  const [showCreateTask, setShowCreateTask] = useState(false);
  const [filters, setFilters] = useState({
    status: '' as string,
    priority: '' as string,
    task_type: '',
    assigned_to: '',
    search: '',
  });
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 20;

  const { data: tasks, loading: tasksLoading, execute: fetchTasks } = useAsync<Task[]>(
    () => taskService.getTasks({
      status: filters.status || undefined,
      priority: filters.priority || undefined,
      task_type: filters.task_type || undefined,
      assigned_to: filters.assigned_to ? parseInt(filters.assigned_to) : undefined,
      skip: (currentPage - 1) * itemsPerPage,
      limit: itemsPerPage,
    }).then(r => {
      // Handle response structure: { status: 'success', data: [...] }
      // apiClient returns axios response, so r.data is the response body
      const responseData = r.data;
      const tasksArray = responseData?.data || responseData || [];
      return Array.isArray(tasksArray) ? tasksArray : [];
    }).catch(error => {
      logger.error('Error fetching tasks', error);
      return [];
    }),
    { immediate: true }
  );

  const { data: statistics, execute: fetchStatistics } = useAsync<TaskStatistics>(
    async () => {
      const r = await taskService.getTaskStatistics();
      return (r as any).data?.data || r.data;
    },
    { immediate: true }
  );

  useEffect(() => {
    fetchTasks();
  }, [filters, currentPage]);

  const handleTaskClick = async (task: Task) => {
    try {
      const response = await taskService.getTask(task.id);
      setSelectedTask(response.data.data);
      setShowTaskDetail(true);
    } catch (error: any) {
      toast.error(error.message || 'Failed to load task details');
    }
  };

  const handleTaskComplete = async (taskId: number) => {
    try {
      await taskService.completeTask(taskId);
      toast.success('Task completed successfully');
      fetchTasks();
      fetchStatistics();
      if (selectedTask?.id === taskId) {
        setShowTaskDetail(false);
        setSelectedTask(null);
      }
    } catch (error: any) {
      toast.error(error.message || 'Failed to complete task');
    }
  };

  const handleTaskStart = async (taskId: number) => {
    try {
      await taskService.startTask(taskId);
      toast.success('Task started');
      fetchTasks();
      if (selectedTask?.id === taskId) {
        const response = await taskService.getTask(taskId);
        setSelectedTask(response.data.data);
      }
    } catch (error: any) {
      toast.error(error.message || 'Failed to start task');
    }
  };

  const getStatusIcon = (status: TaskStatus) => {
    switch (status) {
      case 'completed':
        return <CheckCircle2 className="w-5 h-5 text-green-500" />;
      case 'in_progress':
        return <Play className="w-5 h-5 text-blue-500" />;
      case 'overdue':
        return <AlertCircle className="w-5 h-5 text-red-500" />;
      case 'cancelled':
        return <XCircle className="w-5 h-5 text-gray-400" />;
      default:
        return <Clock className="w-5 h-5 text-amber-500" />;
    }
  };

  const getStatusBadge = (status: TaskStatus) => {
    const baseClasses = 'px-3 py-1 rounded-full text-xs font-semibold';
    switch (status) {
      case 'completed':
        return `${baseClasses} bg-green-100 text-green-800 border border-green-200`;
      case 'in_progress':
        return `${baseClasses} bg-blue-100 text-blue-800 border border-blue-200`;
      case 'overdue':
        return `${baseClasses} bg-red-100 text-red-800 border border-red-200`;
      case 'cancelled':
        return `${baseClasses} bg-gray-100 text-gray-800 border border-gray-200`;
      case 'assigned':
        return `${baseClasses} bg-purple-100 text-purple-800 border border-purple-200`;
      default:
        return `${baseClasses} bg-amber-100 text-amber-800 border border-amber-200`;
    }
  };

  const getPriorityBadge = (priority: TaskPriority) => {
    const baseClasses = 'px-2 py-1 rounded text-xs font-semibold';
    switch (priority) {
      case 'urgent':
        return `${baseClasses} bg-red-100 text-red-800 border border-red-200`;
      case 'high':
        return `${baseClasses} bg-orange-100 text-orange-800 border border-orange-200`;
      case 'medium':
        return `${baseClasses} bg-yellow-100 text-yellow-800 border border-yellow-200`;
      default:
        return `${baseClasses} bg-gray-100 text-gray-800 border border-gray-200`;
    }
  };

  const isOverdue = (dueDate?: string) => {
    if (!dueDate) return false;
    return new Date(dueDate) < new Date() && !selectedTask?.completed_at;
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
        {/* Header */}
        <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <h1 className="text-3xl font-bold text-gray-900 mb-2">Task Management</h1>
              <p className="text-gray-600">Manage and track all tasks and workflows</p>
            </div>
            <button
              onClick={() => setShowCreateTask(true)}
              className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2"
            >
              <Plus className="w-5 h-5" />
              Create Task
            </button>
          </div>
        </div>

        {/* Statistics */}
        {statistics && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600 mb-1">Total Tasks</p>
                  <p className="text-2xl font-bold text-gray-900">{statistics.total}</p>
                </div>
                <CheckSquare className="w-8 h-8 text-indigo-500" />
              </div>
            </div>
            <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600 mb-1">In Progress</p>
                  <p className="text-2xl font-bold text-blue-600">{statistics.in_progress}</p>
                </div>
                <Play className="w-8 h-8 text-blue-500" />
              </div>
            </div>
            <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600 mb-1">Completed</p>
                  <p className="text-2xl font-bold text-green-600">{statistics.completed}</p>
                </div>
                <CheckCircle2 className="w-8 h-8 text-green-500" />
              </div>
            </div>
            <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600 mb-1">Overdue</p>
                  <p className="text-2xl font-bold text-red-600">{statistics.overdue}</p>
                </div>
                <AlertCircle className="w-8 h-8 text-red-500" />
              </div>
            </div>
          </div>
        )}

        {/* Filters */}
        <TaskFilters filters={filters} onFiltersChange={setFilters} />

        {/* Tasks List */}
        {tasksLoading ? (
          <Loading fullScreen text="Loading tasks..." />
        ) : !tasks || tasks.length === 0 ? (
          <div className="bg-white rounded-xl shadow-lg p-8 border border-gray-100">
            <EmptyState
              title="No tasks found"
              description="Create a new task or adjust your filters"
              action={{
                label: 'Create Task',
                onClick: () => setShowCreateTask(true),
              }}
            />
          </div>
        ) : (
          <div className="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-gradient-to-r from-gray-50 to-gray-100">
                  <tr>
                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Task</th>
                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Status</th>
                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Priority</th>
                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Assigned To</th>
                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Due Date</th>
                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Actions</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {(tasks || []).map((task) => (
                    <tr
                      key={task.id}
                      className="hover:bg-gray-50 transition-colors cursor-pointer"
                      onClick={() => handleTaskClick(task)}
                    >
                      <td className="px-6 py-4">
                        <div className="flex items-center gap-3">
                          {getStatusIcon(task.status)}
                          <div>
                            <p className="text-sm font-semibold text-gray-900">{task.title}</p>
                            {task.description && (
                              <p className="text-xs text-gray-500 line-clamp-1">{task.description}</p>
                            )}
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <span className={getStatusBadge(task.status)}>{task.status.replace('_', ' ')}</span>
                      </td>
                      <td className="px-6 py-4">
                        <span className={getPriorityBadge(task.priority)}>{task.priority}</span>
                      </td>
                      <td className="px-6 py-4">
                        {task.assigned_to_name ? (
                          <div className="flex items-center gap-2">
                            <User className="w-4 h-4 text-gray-400" />
                            <span className="text-sm text-gray-700">{task.assigned_to_name}</span>
                          </div>
                        ) : (
                          <span className="text-sm text-gray-400">Unassigned</span>
                        )}
                      </td>
                      <td className="px-6 py-4">
                        {task.due_date ? (
                          <div className="flex items-center gap-2">
                            <Calendar className={`w-4 h-4 ${isOverdue(task.due_date) ? 'text-red-500' : 'text-gray-400'}`} />
                            <span className={`text-sm ${isOverdue(task.due_date) ? 'text-red-600 font-semibold' : 'text-gray-700'}`}>
                              {formatDate(new Date(task.due_date), 'short')}
                            </span>
                          </div>
                        ) : (
                          <span className="text-sm text-gray-400">No due date</span>
                        )}
                      </td>
                      <td className="px-6 py-4">
                        <div className="flex items-center gap-2">
                          {task.status === 'assigned' && (
                            <button
                              onClick={(e) => {
                                e.stopPropagation();
                                handleTaskStart(task.id);
                              }}
                              className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                              title="Start Task"
                            >
                              <Play className="w-4 h-4" />
                            </button>
                          )}
                          {task.status === 'in_progress' && (
                            <button
                              onClick={(e) => {
                                e.stopPropagation();
                                handleTaskComplete(task.id);
                              }}
                              className="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
                              title="Complete Task"
                            >
                              <CheckCircle2 className="w-4 h-4" />
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Pagination */}
        {tasks && tasks.length > 0 && (
          <div className="flex items-center justify-between">
            <button
              onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
              disabled={currentPage === 1}
              className="px-4 py-2 bg-white border border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Previous
            </button>
            <span className="text-sm text-gray-600">Page {currentPage}</span>
            <button
              onClick={() => setCurrentPage(p => p + 1)}
              disabled={tasks.length < itemsPerPage}
              className="px-4 py-2 bg-white border border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Next
            </button>
          </div>
        )}
      </div>

      {/* Task Detail Modal */}
      {showTaskDetail && selectedTask && (
        <TaskDetailModal
          task={selectedTask}
          onClose={() => {
            setShowTaskDetail(false);
            setSelectedTask(null);
          }}
          onUpdate={() => {
            fetchTasks();
            fetchStatistics();
          }}
        />
      )}

      {/* Create Task Modal */}
      {showCreateTask && (
        <CreateTaskModal
          onClose={() => setShowCreateTask(false)}
          onSuccess={() => {
            setShowCreateTask(false);
            fetchTasks();
            fetchStatistics();
          }}
        />
      )}
    </div>
  );
};

export default TaskManagementPage;