import React, { useState, useEffect } from 'react';
import { Task } from '../../entities/Task';
import { Project } from '../../entities/Project';
import TaskHeader from './TaskHeader';

// Import SubtasksDisplay component from TaskHeader
interface SubtasksDisplayProps {
    showSubtasks: boolean;
    loadingSubtasks: boolean;
    subtasks: Task[];
    onTaskClick: (e: React.MouseEvent, task: Task) => void;
    onTaskUpdate: (task: Task) => Promise<void>;
    loadSubtasks: () => Promise<void>;
}

const SubtasksDisplay: React.FC<SubtasksDisplayProps> = ({
    showSubtasks,
    loadingSubtasks,
    subtasks,
    onTaskClick,
    onTaskUpdate,
    loadSubtasks,
}) => {
    const { t } = useTranslation();

    if (!showSubtasks) return null;

    return (
        <div className="mt-1 space-y-1">
            {loadingSubtasks ? (
                <div className="ml-12 text-sm text-gray-500 dark:text-gray-400">
                    {t('loading.subtasks', 'Loading subtasks...')}
                </div>
            ) : subtasks.length > 0 ? (
                subtasks.map((subtask) => (
                    <div
                        key={subtask.id}
                        className="ml-12 group"
                    >
                        <div
                            className={`rounded-lg shadow-sm bg-white dark:bg-gray-900 border-2 cursor-pointer transition-all duration-200 ${
                                subtask.status === 'in_progress' || subtask.status === 1
                                    ? 'border-green-400/60 dark:border-green-500/60'
                                    : 'border-gray-50 dark:border-gray-800'
                            }`}
                            onClick={(e) => {
                                e.stopPropagation();
                                onTaskClick(e, subtask);
                            }}
                        >
                            <div className="px-4 py-3 flex items-center justify-between">
                                <div className="flex items-center space-x-2 flex-1 min-w-0">
                                    {subtask.status === 'done' || subtask.status === 2 ? (
                                        <div 
                                            className="h-5 w-5 cursor-pointer hover:scale-110 transition-transform text-green-500 flex items-center justify-center"
                                            style={{ width: '16px', height: '16px' }}
                                            onClick={async (e) => {
                                                e.stopPropagation();
                                                if (subtask.id) {
                                                    try {
                                                        const updatedSubtask = await toggleTaskCompletion(subtask.id);
                                                        await onTaskUpdate(updatedSubtask);
                                                        // Refresh subtasks to show updated status
                                                        await loadSubtasks();
                                                    } catch (error) {
                                                        console.error('Error toggling subtask completion:', error);
                                                    }
                                                }
                                            }}
                                        >
                                            <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                                            </svg>
                                        </div>
                                    ) : (
                                        <div 
                                            className={`h-5 w-5 cursor-pointer hover:scale-110 transition-transform border-2 border-current rounded-full flex-shrink-0 ${
                                                subtask.priority === 'high'
                                                    ? 'text-red-500'
                                                    : subtask.priority === 'medium'
                                                    ? 'text-yellow-500'
                                                    : 'text-gray-300'
                                            }`}
                                            style={{ width: '16px', height: '16px' }}
                                            onClick={async (e) => {
                                                e.stopPropagation();
                                                if (subtask.id) {
                                                    try {
                                                        const updatedSubtask = await toggleTaskCompletion(subtask.id);
                                                        await onTaskUpdate(updatedSubtask);
                                                        // Refresh subtasks to show updated status
                                                        await loadSubtasks();
                                                    } catch (error) {
                                                        console.error('Error toggling subtask completion:', error);
                                                    }
                                                }
                                            }}
                                        />
                                    )}
                                    <span className={`text-base flex-1 truncate ${
                                        subtask.status === 'done' || subtask.status === 2
                                            ? 'text-gray-500 dark:text-gray-400 line-through'
                                            : 'text-gray-900 dark:text-gray-100'
                                    }`}>
                                        {subtask.name}
                                    </span>
                                </div>
                                <div className="flex items-center space-x-1">
                                    {subtask.status === 'done' || subtask.status === 2 ? (
                                        <span className="text-sm text-green-600 dark:text-green-400 font-medium">
                                            ✓
                                        </span>
                                    ) : subtask.status === 'in_progress' || subtask.status === 1 ? (
                                        <span className="text-sm text-blue-600 dark:text-blue-400 font-medium">
                                            ▶
                                        </span>
                                    ) : null}
                                </div>
                            </div>
                        </div>
                    </div>
                ))
            ) : (
                <div className="ml-12 text-sm text-gray-500 dark:text-gray-400">
                    {t('subtasks.noSubtasks', 'No subtasks found')}
                </div>
            )}
        </div>
    );
};
import TaskModal from './TaskModal';
import { toggleTaskCompletion, fetchSubtasks } from '../../utils/tasksService';
import { isTaskOverdue } from '../../utils/dateUtils';
import { useTranslation } from 'react-i18next';

interface TaskItemProps {
    task: Task;
    onTaskUpdate: (task: Task) => Promise<void>;
    onTaskDelete: (taskId: number) => void;
    projects: Project[];
    hideProjectName?: boolean;
    onToggleToday?: (taskId: number) => Promise<void>;
}

const TaskItem: React.FC<TaskItemProps> = ({
    task,
    onTaskUpdate,
    onTaskDelete,
    projects,
    hideProjectName = false,
    onToggleToday,
}) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [subtaskModalOpen, setSubtaskModalOpen] = useState(false);
    const [selectedSubtask, setSelectedSubtask] = useState<Task | null>(null);
    const [projectList, setProjectList] = useState<Project[]>(projects);
    
    // Subtasks state
    const [showSubtasks, setShowSubtasks] = useState(false);
    const [subtasks, setSubtasks] = useState<Task[]>([]);
    const [loadingSubtasks, setLoadingSubtasks] = useState(false);
    const [hasSubtasks, setHasSubtasks] = useState(false);
    
    // Calculate completion percentage
    const calculateCompletionPercentage = () => {
        if (subtasks.length === 0) return 0;
        const completedCount = subtasks.filter(subtask => 
            subtask.status === 'done' || subtask.status === 2
        ).length;
        return Math.round((completedCount / subtasks.length) * 100);
    };
    
    const completionPercentage = calculateCompletionPercentage();

    // Check if task has subtasks on mount
    useEffect(() => {
        const checkSubtasks = async () => {
            if (!task.id) return;
            
            try {
                const subtasksData = await fetchSubtasks(task.id);
                setHasSubtasks(subtasksData.length > 0);
            } catch (error) {
                console.error('Error fetching subtasks:', error);
                setHasSubtasks(false);
            }
        };
        
        checkSubtasks();
    }, [task.id]);

    const loadSubtasks = async () => {
        if (!task.id) return;
        
        setLoadingSubtasks(true);
        try {
            const subtasksData = await fetchSubtasks(task.id);
            setSubtasks(subtasksData);
        } catch (error) {
            console.error('Failed to load subtasks:', error);
            setSubtasks([]);
        } finally {
            setLoadingSubtasks(false);
        }
    };
    
    // Reload subtasks when showSubtasks changes to true
    useEffect(() => {
        if (showSubtasks && subtasks.length === 0) {
            loadSubtasks();
        }
    }, [showSubtasks, subtasks.length]);

    const handleSubtasksToggle = async (e: React.MouseEvent) => {
        e.stopPropagation();
        
        if (!showSubtasks && subtasks.length === 0) {
            await loadSubtasks();
        }
        
        setShowSubtasks(!showSubtasks);
    };

    const handleTaskClick = () => {
        setIsModalOpen(true);
    };

    const handleSubtaskClick = (subtask: Task) => {
        setSelectedSubtask(subtask);
        setSubtaskModalOpen(true);
    };

    const handleSubtaskSave = async (updatedSubtask: Task) => {
        await onTaskUpdate(updatedSubtask);
        setSubtaskModalOpen(false);
        setSelectedSubtask(null);
    };

    const handleSubtaskDelete = async () => {
        if (selectedSubtask && selectedSubtask.id) {
            await onTaskDelete(selectedSubtask.id);
            setSubtaskModalOpen(false);
            setSelectedSubtask(null);
        }
    };

    const handleSave = async (updatedTask: Task) => {
        await onTaskUpdate(updatedTask);
        setIsModalOpen(false);
    };

    const handleDelete = async () => {
        if (task.id) {
            await onTaskDelete(task.id);
        }
    };

    const handleToggleCompletion = async () => {
        if (task.id) {
            try {
                const updatedTask = await toggleTaskCompletion(task.id);
                await onTaskUpdate(updatedTask);
            } catch (error) {
                console.error('Error toggling task completion:', error);
            }
        }
    };

    const handleCreateProject = async (name: string): Promise<Project> => {
        try {
            const response = await fetch('/api/project', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ name, active: true }),
            });

            if (!response.ok) {
                throw new Error('Failed to create project');
            }

            const newProject = await response.json();
            setProjectList((prevProjects) => [...prevProjects, newProject]);
            return newProject;
        } catch (error) {
            console.error('Error creating project:', error);
            throw error;
        }
    };

    // Use the project from the task's included data if available, otherwise find from projectList
    let project =
        task.Project || projectList.find((p) => p.id === task.project_id);

    // If project exists but doesn't have an ID, add the ID from task.project_id
    if (project && !project.id && task.project_id) {
        project = { ...project, id: task.project_id };
    }

    // Check if task is in progress to apply pulsing border animation
    const isInProgress = task.status === 'in_progress' || task.status === 1;

    // Check if task is overdue (created yesterday or earlier and not completed)
    const isOverdue = isTaskOverdue(task);

    return (
        <>
            <div
                className={`rounded-lg shadow-sm bg-white dark:bg-gray-900 mt-1 relative overflow-hidden transition-all duration-200 ease-in-out ${
                    isInProgress
                        ? 'border-2 border-green-400/60 dark:border-green-500/60'
                        : 'border-2 border-gray-50 dark:border-gray-800'
                }`}
            >
                <TaskHeader
                    task={task}
                    project={project}
                    onTaskClick={handleTaskClick}
                    onToggleCompletion={handleToggleCompletion}
                    hideProjectName={hideProjectName}
                    onToggleToday={onToggleToday}
                    onTaskUpdate={onTaskUpdate}
                    isOverdue={isOverdue}
                    showSubtasks={showSubtasks}
                    hasSubtasks={hasSubtasks}
                    onSubtasksToggle={handleSubtasksToggle}
                />
                
                {/* Progress bar at bottom of parent task */}
                {subtasks.length > 0 && (
                    <div className={`absolute bottom-0 left-0 right-0 h-1 transition-all duration-300 ease-in-out ${
                        showSubtasks ? 'opacity-100 transform translate-y-0' : 'opacity-0 transform translate-y-2'
                    }`}>
                        <div className="w-full h-full bg-gray-200 dark:bg-gray-700">
                            <div 
                                className="h-full bg-gradient-to-r from-green-400 via-green-500 to-green-600 transition-all duration-500 ease-out"
                                style={{ width: `${completionPercentage}%` }}
                            />
                        </div>
                    </div>
                )}
            </div>

            <SubtasksDisplay
                showSubtasks={showSubtasks}
                loadingSubtasks={loadingSubtasks}
                subtasks={subtasks}
                onTaskClick={(e, task) => {
                    e.stopPropagation();
                    handleSubtaskClick(task);
                }}
                onTaskUpdate={onTaskUpdate}
                loadSubtasks={loadSubtasks}
            />

            <TaskModal
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
                task={task}
                onSave={handleSave}
                onDelete={handleDelete}
                projects={projectList}
                onCreateProject={handleCreateProject}
            />

            {selectedSubtask && (
                <TaskModal
                    isOpen={subtaskModalOpen}
                    onClose={() => {
                        setSubtaskModalOpen(false);
                        setSelectedSubtask(null);
                    }}
                    task={selectedSubtask}
                    onSave={handleSubtaskSave}
                    onDelete={handleSubtaskDelete}
                    projects={projectList}
                    onCreateProject={handleCreateProject}
                />
            )}
        </>
    );
};

export default TaskItem;
