import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Calendar } from '@/components/ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Plus, Calendar as CalendarIcon, Clock, Copy, Play, Tag, Edit, Trash2, Palette, FileText, ArrowLeft } from 'lucide-react';
import { Label, Task } from '@shared/schema';
import TaskDetailsModal from '@/components/TaskDetailsModal';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { apiRequest } from '@/lib/queryClient';

// Helper function to get today's date at start of day for proper date comparison
const getStartOfToday = () => {
  const today = new Date();
  return new Date(today.getFullYear(), today.getMonth(), today.getDate());
};

// Helper function to convert ProjectTask to global Task format
const convertProjectTaskToTask = (projectTask: ProjectTask, projectId: string): Task => {
  return {
    id: `project-${projectId}-task-${projectTask.id}`, // Generate unique ID
    title: projectTask.title,
    description: projectTask.description || null,
    status: projectTask.status,
    priority: projectTask.priority,
    dueDate: null, // Projects tasks don't have due dates by default
    timeTracked: projectTask.timeTracked || 0,
    isTracking: false,
    projectId: projectId,
    notes: projectTask.notes || null,
    labelId: projectTask.labelId || null,
    energyLevel: 'medium',
    estimatedDuration: (projectTask.estimatedHours || 0) * 60,
    dependencies: [],
    userId: null,
    parentTaskId: null,
    startDate: null,
    isRecurring: false,
    recurrenceInterval: null,
    recurrenceIntervalValue: null,
    recurrenceDays: null,
    recurrenceEnd: null
  };
};

interface TimeEntry {
  id: string;
  date: Date;
  timeSpent: number; // in minutes
  description?: string;
}

interface ProjectTask {
  id: string;
  title: string;
  description?: string;
  priority: 'low' | 'medium' | 'high';
  status: 'todo' | 'inProgress' | 'done';
  estimatedHours?: number;
  labelId?: string;
  notes?: string;
  timeTracked?: number; // in minutes
  timeEntries?: TimeEntry[];
}

interface Project {
  id: string;
  name: string;
  description?: string;
  status: 'planning' | 'active' | 'finished';
  tasks: ProjectTask[];
  startDate?: Date;
  endDate?: Date;
  plannedEndDate?: Date;
  createdAt: Date;
}

interface ProjectTemplateProps {
  onCreateFromTemplate?: (templateId: string, startDate: Date, projectName: string) => void;
  onCreateTemplate?: (template: any) => void;
  onCreateTasks?: (tasks: Task[]) => void;
  onNavigateToSettings?: () => void;
}

const defaultProjects: Project[] = [
  {
    id: '1',
    name: 'Website Redesign',
    description: 'Complete redesign of company website',
    status: 'active',
    startDate: new Date(),
    createdAt: new Date(),
    tasks: [
      { id: '1', title: 'Research competitors', priority: 'high', status: 'done', estimatedHours: 4 },
      { id: '2', title: 'Create wireframes', priority: 'high', status: 'inProgress', estimatedHours: 8 },
      { id: '3', title: 'Design mockups', priority: 'medium', status: 'todo', estimatedHours: 12 },
      { id: '4', title: 'Frontend development', priority: 'high', status: 'todo', estimatedHours: 40 }
    ]
  },
  {
    id: '2',
    name: 'Mobile App Launch',
    description: 'Launch new mobile application',
    status: 'planning',
    createdAt: new Date(),
    tasks: [
      { id: '1', title: 'Define requirements', priority: 'high', status: 'todo', estimatedHours: 6 },
      { id: '2', title: 'Create user stories', priority: 'medium', status: 'todo', estimatedHours: 8 },
      { id: '3', title: 'Design UI/UX', priority: 'high', status: 'todo', estimatedHours: 20 }
    ]
  },
  {
    id: '3',
    name: 'Blog Platform',
    description: 'Personal blog with CMS',
    status: 'finished',
    startDate: new Date('2024-01-01'),
    endDate: new Date('2024-03-01'),
    createdAt: new Date('2024-01-01'),
    tasks: [
      { id: '1', title: 'Setup infrastructure', priority: 'high', status: 'done', estimatedHours: 8 },
      { id: '2', title: 'Develop backend API', priority: 'high', status: 'done', estimatedHours: 32 },
      { id: '3', title: 'Create admin panel', priority: 'medium', status: 'done', estimatedHours: 16 },
      { id: '4', title: 'Deploy and test', priority: 'high', status: 'done', estimatedHours: 4 }
    ]
  }
];

export default function ProjectTemplate({
  onCreateFromTemplate,
  onCreateTemplate,
  onCreateTasks,
  onNavigateToSettings
}: ProjectTemplateProps) {
  const { t } = useTranslation();
  const [projects, setProjects] = useState<Project[]>(defaultProjects);
  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
  const [draggedProject, setDraggedProject] = useState<string | null>(null);
  const [isCreateProjectOpen, setIsCreateProjectOpen] = useState(false);
  const [isEditProjectOpen, setIsEditProjectOpen] = useState(false);
  const [newProjectName, setNewProjectName] = useState('');
  const [newProjectDescription, setNewProjectDescription] = useState('');
  const [newPlannedEndDate, setNewPlannedEndDate] = useState<Date | undefined>();
  const [isPlannedEndDateCalendarOpen, setIsPlannedEndDateCalendarOpen] = useState(false);
  const [isRestartProjectOpen, setIsRestartProjectOpen] = useState(false);
  const [restartingProject, setRestartingProject] = useState<Project | null>(null);
  const [newEndDate, setNewEndDate] = useState<Date | undefined>();
  const [clearHistory, setClearHistory] = useState(false);
  const [isEndDateCalendarOpen, setIsEndDateCalendarOpen] = useState(false);
  const [closedProjectsFilter, setClosedProjectsFilter] = useState('');

  // Task management state
  const [projectTasks, setProjectTasks] = useState<ProjectTask[]>([]);
  const [isEditingTask, setIsEditingTask] = useState(false);
  const [editingTaskIndex, setEditingTaskIndex] = useState<number | null>(null);
  const [taskForm, setTaskForm] = useState<Partial<ProjectTask>>({});

  // Label management state
  const [isLabelDialogOpen, setIsLabelDialogOpen] = useState(false);
  const [editingLabel, setEditingLabel] = useState<Label | null>(null);
  const [labelName, setLabelName] = useState('');
  const [labelColor, setLabelColor] = useState('#3B82F6');

  // Task details modal state
  const [isTaskDetailsOpen, setIsTaskDetailsOpen] = useState(false);
  const [selectedTaskForDetails, setSelectedTaskForDetails] = useState<ProjectTask | null>(null);

  const queryClient = useQueryClient();

  // Fetch labels
  const { data: labels = [], isLoading: labelsLoading } = useQuery<Label[]>({
    queryKey: ['/api/labels'],
  });

  // Create label mutation
  const createLabelMutation = useMutation({
    mutationFn: (data: { name: string; color: string }) =>
      apiRequest('POST', '/api/labels', data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['/api/labels'] });
      setIsLabelDialogOpen(false);
      setLabelName('');
      setLabelColor('#3B82F6');
      setEditingLabel(null);
    }
  });

  // Update label mutation
  const updateLabelMutation = useMutation({
    mutationFn: ({ id, ...data }: { id: string; name?: string; color?: string }) =>
      apiRequest('PATCH', `/api/labels/${id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['/api/labels'] });
      setIsLabelDialogOpen(false);
      setLabelName('');
      setLabelColor('#3B82F6');
      setEditingLabel(null);
    }
  });

  // Delete label mutation
  const deleteLabelMutation = useMutation({
    mutationFn: (id: string) => apiRequest('DELETE', `/api/labels/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['/api/labels'] });
    }
  });

  const handleCreateProject = () => {
    if (newProjectName.trim()) {
      const newProjectId = Date.now().toString();
      const newProject: Project = {
        id: newProjectId,
        name: newProjectName.trim(),
        description: newProjectDescription.trim() || undefined,
        status: 'planning',
        tasks: projectTasks,
        plannedEndDate: newPlannedEndDate,
        createdAt: new Date()
      };

      // Add project to projects list
      setProjects(currentProjects => [...currentProjects, newProject]);

      // Convert project tasks to global tasks and add them to global state
      if (projectTasks.length > 0 && onCreateTasks) {
        const globalTasks = projectTasks.map(task =>
          convertProjectTaskToTask(task, newProjectId)
        );
        onCreateTasks(globalTasks);
        console.log('Added', globalTasks.length, 'tasks to global state for project:', newProject.name);
      }

      // Reset form state
      setNewProjectName('');
      setNewProjectDescription('');
      setNewPlannedEndDate(undefined);
      setProjectTasks([]);
      setIsCreateProjectOpen(false);
      console.log('Created new project:', newProject.name, 'with', projectTasks.length, 'tasks');
    }
  };

  const handleEditProject = (project: Project) => {
    setSelectedProject(project);
    setProjectTasks([...project.tasks]);
    setIsEditProjectOpen(true);
  };

  const handleDeleteProject = (projectId: string) => {
    if (confirm('Are you sure you want to delete this project?')) {
      setProjects(currentProjects => currentProjects.filter(p => p.id !== projectId));
    }
  };

  const handleProjectStatusChange = (projectId: string, newStatus: Project['status']) => {
    setProjects(currentProjects => currentProjects.map(project =>
      project.id === projectId ? { ...project, status: newStatus } : project
    ));
  };

  const handleDragStart = (projectId: string) => {
    setDraggedProject(projectId);
  };

  const handleDragEnd = () => {
    setDraggedProject(null);
  };

  const handleDrop = (status: Project['status']) => {
    if (draggedProject) {
      handleProjectStatusChange(draggedProject, status);
      setDraggedProject(null);
    }
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
  };

  const handleRestartProject = (project: Project) => {
    setRestartingProject(project);
    setIsRestartProjectOpen(true);
  };

  const handleConfirmRestart = () => {
    if (restartingProject && newEndDate) {
      // Create a new project as a duplicate/copy of the closed project
      const newProjectId = Date.now().toString();

      const duplicatedTasks = clearHistory
        ? []
        : restartingProject.tasks.map(task => ({
          ...task,
          id: `${newProjectId}-task-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, // Generate new task ID
          status: 'todo' as const // Reset all tasks to todo status
        }));

      const duplicatedProject: Project = {
        ...restartingProject,
        id: newProjectId, // New unique ID
        status: 'planning', // Start as planning
        startDate: new Date(), // Set new start date
        endDate: undefined, // Clear end date since it's active again
        plannedEndDate: newEndDate, // Set the new planned end date
        createdAt: new Date(), // Set new creation date
        tasks: duplicatedTasks
      };

      // Add the new project to the projects array without removing the original
      setProjects(currentProjects => [...currentProjects, duplicatedProject]);

      // Convert project tasks to global tasks and add them to global state
      if (duplicatedTasks.length > 0 && onCreateTasks) {
        const globalTasks = duplicatedTasks.map(task =>
          convertProjectTaskToTask(task, newProjectId)
        );
        onCreateTasks(globalTasks);
        console.log('Added', globalTasks.length, 'tasks to global state for duplicated project:', duplicatedProject.name);
      }

      setIsRestartProjectOpen(false);
      setRestartingProject(null);
      setNewEndDate(undefined);
      setClearHistory(false);
      console.log('Project duplicated:', duplicatedProject.name, 'with', duplicatedProject.tasks.length, 'tasks. Original project remains closed.');
    }
  };

  const getFilteredClosedProjects = () => {
    const closedProjects = projects.filter(project => project.status === 'finished');
    if (!closedProjectsFilter) return closedProjects;

    return closedProjects.filter(project =>
      project.name.toLowerCase().includes(closedProjectsFilter.toLowerCase()) ||
      (project.description && project.description.toLowerCase().includes(closedProjectsFilter.toLowerCase()))
    );
  };

  // Task management functions
  const handleAddTask = () => {
    const newTask: ProjectTask = {
      id: Date.now().toString(),
      title: taskForm.title || 'New Task',
      description: taskForm.description || '',
      priority: taskForm.priority || 'medium',
      status: taskForm.status || 'todo',
      estimatedHours: taskForm.estimatedHours || 0,
      labelId: taskForm.labelId
    };

    setProjectTasks([...projectTasks, newTask]);
    setTaskForm({});
    setIsEditingTask(false);
  };

  const handleEditTask = (index: number) => {
    setEditingTaskIndex(index);
    setTaskForm({ ...projectTasks[index] });
    setIsEditingTask(true);
  };

  const handleSaveTask = () => {
    if (editingTaskIndex !== null) {
      const currentTask = projectTasks[editingTaskIndex];
      const updatedTasks = [...projectTasks];

      // Check if this is a new task (temporary ID) or existing task
      const isNewTask = currentTask.id.startsWith('temp-');

      updatedTasks[editingTaskIndex] = {
        id: isNewTask ? Date.now().toString() : currentTask.id,
        title: taskForm.title || 'New Task',
        description: taskForm.description || '',
        priority: taskForm.priority || 'medium',
        status: taskForm.status || 'todo',
        estimatedHours: taskForm.estimatedHours || 0,
        labelId: taskForm.labelId
      };

      setProjectTasks(updatedTasks);
    }

    setTaskForm({});
    setIsEditingTask(false);
    setEditingTaskIndex(null);
  };

  const handleRemoveTask = (index: number) => {
    setProjectTasks(projectTasks.filter((_, i) => i !== index));
  };

  const handleCancelTaskEdit = () => {
    // If we're editing a task that has a temporary ID (new task), remove it from the list
    if (editingTaskIndex !== null) {
      const currentTask = projectTasks[editingTaskIndex];
      if (currentTask.id.startsWith('temp-')) {
        const updatedTasks = projectTasks.filter((_, index) => index !== editingTaskIndex);
        setProjectTasks(updatedTasks);
      }
    }

    setTaskForm({});
    setIsEditingTask(false);
    setEditingTaskIndex(null);
  };

  const handleStartNewTask = () => {
    // Create a temporary new task and add it to the list in edit mode
    const tempTask: ProjectTask = {
      id: 'temp-' + Date.now(),
      title: '',
      description: '',
      priority: 'medium',
      status: 'todo',
      estimatedHours: 0
    };

    const newTasks = [...projectTasks, tempTask];
    setProjectTasks(newTasks);
    setEditingTaskIndex(newTasks.length - 1);
    setTaskForm({
      title: '',
      description: '',
      priority: 'medium',
      status: 'todo',
      estimatedHours: 0
    });
    setIsEditingTask(true);
  };

  // Task details modal handlers
  const handleOpenTaskDetails = (task: ProjectTask, isFromProject: boolean = false) => {
    setSelectedTaskForDetails(task);
    setIsTaskDetailsOpen(true);
  };

  const handleCloseTaskDetails = () => {
    setSelectedTaskForDetails(null);
    setIsTaskDetailsOpen(false);
  };

  const handleSaveTaskDetails = (updatedTask: ProjectTask) => {
    // Update the task in projectTasks array
    const taskIndex = projectTasks.findIndex(task => task.id === updatedTask.id);
    if (taskIndex !== -1) {
      const updatedTasks = [...projectTasks];
      updatedTasks[taskIndex] = updatedTask;
      setProjectTasks(updatedTasks);
      console.log('Task updated:', updatedTask.title, 'with notes and time tracking');
    }

    // If we're in edit project mode, also update the selected project
    if (selectedProject) {
      const updatedProject = { ...selectedProject };
      const projectTaskIndex = updatedProject.tasks.findIndex(task => task.id === updatedTask.id);
      if (projectTaskIndex !== -1) {
        updatedProject.tasks[projectTaskIndex] = updatedTask;
        setSelectedProject(updatedProject);

        // Update the projects array
        setProjects(currentProjects => currentProjects.map(p =>
          p.id === selectedProject.id ? updatedProject : p
        ));
      }
    }
  };

  const handleSaveEditedProject = () => {
    if (selectedProject) {
      const updatedProject = {
        ...selectedProject,
        tasks: projectTasks
      };

      setProjects(currentProjects => currentProjects.map(p =>
        p.id === selectedProject.id ? updatedProject : p
      ));

      setSelectedProject(null);
      setProjectTasks([]);
      setIsEditProjectOpen(false);
      console.log('Updated project:', updatedProject.name, 'with', projectTasks.length, 'tasks');
    }
  };

  // Label management functions
  const handleSaveLabel = () => {
    if (!labelName.trim()) return;

    if (editingLabel) {
      updateLabelMutation.mutate({ id: editingLabel.id, name: labelName.trim(), color: labelColor });
    } else {
      createLabelMutation.mutate({ name: labelName.trim(), color: labelColor });
    }
  };

  const handleEditLabel = (label: Label) => {
    setEditingLabel(label);
    setLabelName(label.name);
    setLabelColor(label.color);
    setIsLabelDialogOpen(true);
  };

  const handleDeleteLabel = (id: string) => {
    if (confirm(t('projectTemplate.deleteConfirm'))) {
      deleteLabelMutation.mutate(id);
    }
  };

  const getTotalEstimatedHours = (project: Project) => {
    return project.tasks.reduce((sum, task) => sum + (task.estimatedHours || 0), 0);
  };

  const getTaskCompletionRate = (project: Project) => {
    if (project.tasks.length === 0) return 0;
    const completedTasks = project.tasks.filter(task => task.status === 'done').length;
    return Math.round((completedTasks / project.tasks.length) * 100);
  };

  const getProjectsByStatus = (status: Project['status']) => {
    return projects.filter(project => project.status === status);
  };

  const projectColumns = [
    { id: 'planning', title: t('projectTemplate.planning'), status: 'planning' as const, color: 'bg-slate-100' },
    { id: 'active', title: t('projectTemplate.active'), status: 'active' as const, color: 'bg-blue-100' },
    { id: 'finished', title: t('projectTemplate.finished'), status: 'finished' as const, color: 'bg-green-100' }
  ];

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between gap-2">
        <div className="flex items-center gap-3">
          {onNavigateToSettings && (
            <Button
              variant="ghost"
              size="icon"
              onClick={onNavigateToSettings}
              data-testid="button-back-to-settings"
            >
              <ArrowLeft className="w-5 h-5" />
            </Button>
          )}
          <h2 className="text-base sm:text-lg font-semibold" data-testid="text-settings-title">
            {t('projectTemplate.title')}
          </h2>
        </div>
        <Button
          onClick={() => setIsCreateProjectOpen(true)}
          data-testid="button-create-project"
          size="lg"
          className="h-11"
        >
          <Plus className="w-4 h-4 mr-2" />
          {t('projectTemplate.newProject')}
        </Button>
      </div>

      <Tabs defaultValue="projects" className="space-y-3 sm:space-y-4">
        <TabsList className="w-full">
          <TabsTrigger value="projects" data-testid="tab-projects" className="flex-1">{t('projectTemplate.projects')}</TabsTrigger>
          <TabsTrigger value="labels" data-testid="tab-labels" className="flex-1">{t('projectTemplate.labels')}</TabsTrigger>
        </TabsList>

        <TabsContent value="projects" className="space-y-4 sm:space-y-6">
          {/* Project Kanban Board */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
            {projectColumns.map((column) => {
              const columnProjects = getProjectsByStatus(column.status);

              return (
                <Card
                  key={column.id}
                  className="p-3 sm:p-4"
                  onDragOver={handleDragOver}
                  onDrop={() => handleDrop(column.status)}
                  data-testid={`column-${column.id}`}
                >
                  <div className="flex items-center justify-between mb-3 sm:mb-4">
                    <h3 className="font-semibold text-sm" data-testid={`text-column-title-${column.id}`}>
                      {column.title}
                    </h3>
                    <Badge variant="secondary" className="text-xs">
                      {columnProjects.length}
                    </Badge>
                  </div>

                  <div className="space-y-2 sm:space-y-3 min-h-[200px] sm:min-h-[300px]">
                    {columnProjects.map((project) => (
                      <Card
                        key={project.id}
                        draggable
                        onDragStart={() => handleDragStart(project.id)}
                        onDragEnd={handleDragEnd}
                        className={`p-3 sm:p-4 cursor-move hover-elevate transition-all ${draggedProject === project.id ? 'opacity-50 scale-95' : ''
                          }`}
                        data-testid={`project-card-${project.id}`}
                      >
                        <div className="space-y-3">
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <h4 className="font-semibold text-sm" data-testid={`text-project-name-${project.id}`}>
                                {project.name}
                              </h4>
                              {project.description && (
                                <p className="text-xs text-muted-foreground mt-1">
                                  {project.description}
                                </p>
                              )}
                            </div>

                            <div className="flex items-center gap-1">
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => handleEditProject(project)}
                                data-testid={`button-edit-${project.id}`}
                              >
                                <Edit className="w-3 h-3" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => handleDeleteProject(project.id)}
                                data-testid={`button-delete-${project.id}`}
                              >
                                <Trash2 className="w-3 h-3" />
                              </Button>
                            </div>
                          </div>

                          <div className="flex items-center gap-4 text-xs text-muted-foreground">
                            <div className="flex items-center gap-1">
                              <Clock className="w-3 h-3" />
                              <span>{getTotalEstimatedHours(project)}h</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <Badge variant="outline" className="text-xs">
                                {project.tasks.length} tasks
                              </Badge>
                            </div>
                          </div>

                          {project.tasks.length > 0 && (
                            <div className="space-y-2">
                              <div className="flex items-center justify-between text-xs">
                                <span className="text-muted-foreground">Progress</span>
                                <span className="font-medium">{getTaskCompletionRate(project)}%</span>
                              </div>
                              <div className="w-full bg-muted rounded-full h-2">
                                <div
                                  className="bg-primary h-2 rounded-full transition-all"
                                  style={{ width: `${getTaskCompletionRate(project)}%` }}
                                />
                              </div>
                            </div>
                          )}

                          {project.startDate && (
                            <div className="text-xs text-muted-foreground">
                              Started: {project.startDate.toLocaleDateString()}
                            </div>
                          )}
                        </div>
                      </Card>
                    ))}

                    {columnProjects.length === 0 && (
                      <div className="text-center text-muted-foreground text-sm py-8 border-2 border-dashed border-muted rounded-lg">
                        No projects in {column.title.toLowerCase()}
                      </div>
                    )}
                  </div>
                </Card>
              );
            })}
          </div>

          {/* Closed Projects Section */}
          <div className="space-y-4 mt-8">
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-semibold">{t('projectTemplate.closedProjects')}</h3>
              <Input
                placeholder="Filter closed projects..."
                value={closedProjectsFilter}
                onChange={(e) => setClosedProjectsFilter(e.target.value)}
                className="max-w-xs"
                data-testid="input-filter-closed-projects"
              />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {getFilteredClosedProjects().map((project) => (
                <Card key={project.id} className="p-4 hover-elevate" data-testid={`closed-project-card-${project.id}`}>
                  <div className="space-y-3">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <h4 className="font-semibold text-sm" data-testid={`text-closed-project-name-${project.id}`}>
                          {project.name}
                        </h4>
                        {project.description && (
                          <p className="text-xs text-muted-foreground mt-1">
                            {project.description}
                          </p>
                        )}
                      </div>

                      <Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-200">
                        Finished
                      </Badge>
                    </div>

                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
                      <div className="flex items-center gap-1">
                        <Clock className="w-3 h-3" />
                        <span>{getTotalEstimatedHours(project)}h</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Badge variant="outline" className="text-xs">
                          {project.tasks.length} tasks
                        </Badge>
                      </div>
                    </div>

                    {project.endDate && (
                      <div className="text-xs text-muted-foreground">
                        Finished: {project.endDate.toLocaleDateString()}
                      </div>
                    )}

                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleRestartProject(project)}
                      className="w-full"
                      data-testid={`button-restart-${project.id}`}
                    >
                      <Play className="w-3 h-3 mr-2" />
                      Start Again
                    </Button>
                  </div>
                </Card>
              ))}

              {getFilteredClosedProjects().length === 0 && (
                <div className="col-span-full text-center text-muted-foreground text-sm py-8">
                  {closedProjectsFilter ? 'No closed projects match your filter' : 'No closed projects yet'}
                </div>
              )}
            </div>
          </div>
        </TabsContent>

        {/* Restart Project Dialog */}
        <Dialog open={isRestartProjectOpen} onOpenChange={setIsRestartProjectOpen}>
          <DialogContent className="sm:max-w-md">
            <DialogHeader>
              <DialogTitle>Restart Project</DialogTitle>
            </DialogHeader>
            {restartingProject && (
              <div className="space-y-4 py-4">
                <div className="p-3 bg-muted rounded-lg">
                  <div className="text-sm font-medium">{restartingProject.name}</div>
                  <div className="text-xs text-muted-foreground">
                    {restartingProject.tasks.length} tasks • {getTotalEstimatedHours(restartingProject)}h estimated
                  </div>
                </div>

                <div className="space-y-2">
                  <label className="text-sm font-medium">Planned End Date</label>
                  <Popover open={isEndDateCalendarOpen} onOpenChange={setIsEndDateCalendarOpen}>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        className="w-full justify-start text-left"
                        data-testid="button-select-end-date"
                      >
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {newEndDate ? newEndDate.toLocaleDateString() : "Select planned end date"}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                      <Calendar
                        mode="single"
                        selected={newEndDate}
                        onSelect={(date) => {
                          setNewEndDate(date);
                          setIsEndDateCalendarOpen(false);
                        }}
                        disabled={(date) => date < getStartOfToday()}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                </div>

                <div className="flex items-center space-x-2">
                  <input
                    type="checkbox"
                    id="clearHistory"
                    checked={clearHistory}
                    onChange={(e) => setClearHistory(e.target.checked)}
                    className="rounded border-gray-300"
                    data-testid="checkbox-clear-history"
                  />
                  <label htmlFor="clearHistory" className="text-sm">
                    Clear project history (remove all tasks and start fresh)
                  </label>
                </div>
              </div>
            )}
            <div className="flex gap-2">
              <Button
                variant="outline"
                onClick={() => {
                  setIsRestartProjectOpen(false);
                  setRestartingProject(null);
                  setNewEndDate(undefined);
                  setClearHistory(false);
                }}
                className="flex-1"
              >
                Cancel
              </Button>
              <Button
                onClick={handleConfirmRestart}
                disabled={!newEndDate}
                className="flex-1"
                data-testid="button-confirm-restart"
              >
                Start Again
              </Button>
            </div>
          </DialogContent>
        </Dialog>

        {/* Create Project Dialog */}
        <Dialog open={isCreateProjectOpen} onOpenChange={() => {
          setIsCreateProjectOpen(false);
          setNewProjectName('');
          setNewProjectDescription('');
          setNewPlannedEndDate(undefined);
          setProjectTasks([]);
          setTaskForm({});
          setIsEditingTask(false);
        }}>
          <DialogContent className="sm:max-w-3xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>{t('projectTemplate.createProject')}</DialogTitle>
              <DialogDescription>
                {t('projectTemplate.pageDescription')}
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-6 py-4">
              {/* Project Details */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium">{t('projectTemplate.projectName')}</label>
                  <Input
                    value={newProjectName}
                    onChange={(e) => setNewProjectName(e.target.value)}
                    placeholder={t('projectTemplate.projectNamePlaceholder')}
                    data-testid="input-project-name"
                  />
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium">{t('projectTemplate.projectDescription')}</label>
                  <Input
                    value={newProjectDescription}
                    onChange={(e) => setNewProjectDescription(e.target.value)}
                    placeholder={t('projectTemplate.projectDescriptionPlaceholder')}
                    data-testid="input-project-description"
                  />
                </div>
              </div>

              {/* Planned End Date */}
              <div className="space-y-2">
                <label className="text-sm font-medium">{t('projectTemplate.plannedEndDate')}</label>
                <Popover open={isPlannedEndDateCalendarOpen} onOpenChange={setIsPlannedEndDateCalendarOpen}>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      className="w-full md:w-80 justify-start text-left"
                      data-testid="button-select-planned-end-date"
                    >
                      <CalendarIcon className="mr-2 h-4 w-4" />
                      {newPlannedEndDate ? newPlannedEndDate.toLocaleDateString() : t('projectTemplate.selectPlannedEndDate')}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0" align="start">
                    <Calendar
                      mode="single"
                      selected={newPlannedEndDate}
                      onSelect={(date) => {
                        setNewPlannedEndDate(date);
                        setIsPlannedEndDateCalendarOpen(false);
                      }}
                      disabled={(date) => date < getStartOfToday()}
                      initialFocus
                    />
                  </PopoverContent>
                </Popover>
                {newPlannedEndDate && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setNewPlannedEndDate(undefined)}
                    className="text-xs text-muted-foreground hover:text-destructive"
                    data-testid="button-clear-create-planned-end-date"
                  >
                    {t('projectTemplate.clearDate')}
                  </Button>
                )}
              </div>

              {/* Tasks Section */}
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold">{t('projectTemplate.projectTasks')}</h3>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={handleStartNewTask}
                    data-testid="button-add-task"
                  >
                    <Plus className="w-4 h-4 mr-2" />
                    {t('projectTemplate.addTask')}
                  </Button>
                </div>

                {/* Task List */}
                <div className="space-y-2 max-h-64 overflow-y-auto">
                  {projectTasks.map((task, index) => (
                    <Card key={task.id} className="p-3">
                      <div className="flex items-center justify-between">
                        <div className="flex-1">
                          <h4 className="font-medium text-sm">{task.title}</h4>
                          {task.description && (
                            <p className="text-xs text-muted-foreground">{task.description}</p>
                          )}
                          <div className="flex items-center gap-2 mt-1">
                            <Badge variant="outline" className="text-xs">
                              {task.priority}
                            </Badge>
                            <Badge variant="outline" className="text-xs">
                              {task.status}
                            </Badge>
                            {task.estimatedHours ? (
                              <Badge variant="outline" className="text-xs">
                                {task.estimatedHours}h
                              </Badge>
                            ) : null}
                          </div>
                        </div>
                        <div className="flex items-center gap-1">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleEditTask(index)}
                            data-testid={`button-edit-task-${index}`}
                          >
                            <Edit className="w-3 h-3" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleRemoveTask(index)}
                            data-testid={`button-remove-task-${index}`}
                          >
                            <Trash2 className="w-3 h-3" />
                          </Button>
                        </div>
                      </div>
                    </Card>
                  ))}

                  {projectTasks.length === 0 && (
                    <div className="text-center text-muted-foreground text-sm py-8 border-2 border-dashed border-muted rounded-lg">
                      {t('projectTemplate.noLabelsDescription')}
                    </div>
                  )}
                </div>

                {/* Task Form */}
                {isEditingTask && (
                  <Card className="p-4 border-primary">
                    <div className="space-y-4">
                      <h4 className="font-semibold text-sm">
                        {editingTaskIndex !== null ? t('projectTemplate.edit') : t('projectTemplate.addTask')}
                      </h4>

                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <label className="text-sm font-medium">{t('projectTemplate.taskTitle')}</label>
                          <Input
                            value={taskForm.title || ''}
                            onChange={(e) => setTaskForm({ ...taskForm, title: e.target.value })}
                            placeholder={t('projectTemplate.enterTaskTitle')}
                            data-testid="input-task-title"
                          />
                        </div>

                        <div className="space-y-2">
                          <label className="text-sm font-medium">{t('projectTemplate.description')}</label>
                          <Input
                            value={taskForm.description || ''}
                            onChange={(e) => setTaskForm({ ...taskForm, description: e.target.value })}
                            placeholder={t('projectTemplate.enterTaskDescription')}
                            data-testid="input-task-description"
                          />
                        </div>

                        <div className="space-y-2">
                          <label className="text-sm font-medium">{t('projectTemplate.priority')}</label>
                          <Select
                            value={taskForm.priority || 'medium'}
                            onValueChange={(value: ProjectTask['priority']) =>
                              setTaskForm({ ...taskForm, priority: value })
                            }
                          >
                            <SelectTrigger data-testid="select-task-priority">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="low">{t('priority.low')}</SelectItem>
                              <SelectItem value="medium">{t('priority.medium')}</SelectItem>
                              <SelectItem value="high">{t('priority.high')}</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

                        <div className="space-y-2">
                          <label className="text-sm font-medium">{t('projectTemplate.status')}</label>
                          <Select
                            value={taskForm.status || 'todo'}
                            onValueChange={(value: ProjectTask['status']) =>
                              setTaskForm({ ...taskForm, status: value })
                            }
                          >
                            <SelectTrigger data-testid="select-task-status">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="todo">{t('status.todo')}</SelectItem>
                              <SelectItem value="inProgress">{t('status.inProgress')}</SelectItem>
                              <SelectItem value="done">{t('status.done')}</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

                        <div className="space-y-2">
                          <label className="text-sm font-medium">{t('projectTemplate.estimatedHours')}</label>
                          <Input
                            type="number"
                            value={taskForm.estimatedHours || ''}
                            onChange={(e) => setTaskForm({ ...taskForm, estimatedHours: Number(e.target.value) })}
                            placeholder="0"
                            min="0"
                            data-testid="input-task-hours"
                          />
                        </div>
                      </div>

                      <div className="flex gap-2">
                        <Button
                          variant="outline"
                          onClick={handleCancelTaskEdit}
                          className="flex-1"
                        >
                          {t('projectTemplate.cancel')}
                        </Button>
                        <Button
                          onClick={editingTaskIndex !== null ? handleSaveTask : handleAddTask}
                          disabled={!taskForm.title?.trim()}
                          className="flex-1"
                          data-testid="button-save-task"
                        >
                          {editingTaskIndex !== null ? t('projectTemplate.save') : t('projectTemplate.addTask')}
                        </Button>
                      </div>
                    </div>
                  </Card>
                )}
              </div>
            </div>
            <div className="flex gap-2 pt-4 border-t">
              <Button
                variant="outline"
                onClick={() => {
                  setIsCreateProjectOpen(false);
                  setProjectTasks([]);
                  setTaskForm({});
                  setIsEditingTask(false);
                }}
                className="flex-1"
              >
                {t('projectTemplate.cancel')}
              </Button>
              <Button
                onClick={handleCreateProject}
                disabled={!newProjectName.trim()}
                className="flex-1"
                data-testid="button-save-project"
              >
                {t('projectTemplate.createProject')} ({projectTasks.length} {t('projectTemplate.tasks', { count: projectTasks.length })})
              </Button>
            </div>
          </DialogContent>
        </Dialog>

        {/* Edit Project Dialog */}
        <Dialog open={isEditProjectOpen} onOpenChange={() => {
          setIsEditProjectOpen(false);
          setSelectedProject(null);
          setProjectTasks([]);
          setTaskForm({});
          setIsEditingTask(false);
        }}>
          <DialogContent className="sm:max-w-3xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>{t('projectTemplate.edit')}</DialogTitle>
            </DialogHeader>
            {selectedProject && (
              <div className="space-y-6 py-4">
                {/* Project Details */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium">{t('projectTemplate.projectName')}</label>
                    <Input
                      value={selectedProject.name}
                      onChange={(e) => setSelectedProject({ ...selectedProject, name: e.target.value })}
                      placeholder={t('projectTemplate.projectNamePlaceholder')}
                      data-testid="input-edit-project-name"
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">{t('projectTemplate.projectDescription')}</label>
                    <Input
                      value={selectedProject.description || ''}
                      onChange={(e) => setSelectedProject({ ...selectedProject, description: e.target.value })}
                      placeholder={t('projectTemplate.projectDescriptionPlaceholder')}
                      data-testid="input-edit-project-description"
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">{t('projectTemplate.status')}</label>
                    <Select
                      value={selectedProject.status}
                      onValueChange={(value: Project['status']) =>
                        setSelectedProject({ ...selectedProject, status: value })
                      }
                    >
                      <SelectTrigger data-testid="select-project-status">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="planning">{t('projectTemplate.planning')}</SelectItem>
                        <SelectItem value="active">{t('projectTemplate.active')}</SelectItem>
                        <SelectItem value="finished">{t('projectTemplate.finished')}</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                {/* Planned End Date */}
                <div className="space-y-2">
                  <label className="text-sm font-medium">{t('projectTemplate.plannedEndDate')}</label>
                  <Popover open={isPlannedEndDateCalendarOpen} onOpenChange={setIsPlannedEndDateCalendarOpen}>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        className="w-full md:w-80 justify-start text-left"
                        data-testid="button-edit-planned-end-date"
                      >
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {selectedProject.plannedEndDate
                          ? selectedProject.plannedEndDate.toLocaleDateString()
                          : t('projectTemplate.selectPlannedEndDate')}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                      <Calendar
                        mode="single"
                        selected={selectedProject.plannedEndDate}
                        onSelect={(date) => {
                          setSelectedProject({ ...selectedProject, plannedEndDate: date });
                          setIsPlannedEndDateCalendarOpen(false);
                        }}
                        disabled={(date) => date < getStartOfToday()}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                  {selectedProject.plannedEndDate && (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setSelectedProject({ ...selectedProject, plannedEndDate: undefined })}
                      className="text-xs text-muted-foreground hover:text-destructive"
                      data-testid="button-clear-planned-end-date"
                    >
                      {t('projectTemplate.clearDate')}
                    </Button>
                  )}
                </div>

                {/* Tasks Section */}
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <h3 className="text-lg font-semibold">{t('projectTemplate.projectTasks')}</h3>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={handleStartNewTask}
                      data-testid="button-add-task-edit"
                    >
                      <Plus className="w-4 h-4 mr-2" />
                      {t('projectTemplate.addTask')}
                    </Button>
                  </div>

                  {/* Task List with Inline Editing */}
                  <div className="space-y-2 max-h-64 overflow-y-auto">
                    {projectTasks.map((task, index) => (
                      <Card key={task.id} className={`p-3 ${editingTaskIndex === index ? 'border-primary' : ''}`}>
                        {editingTaskIndex === index ? (
                          // Inline Edit Mode
                          <div className="space-y-3">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                              <div className="space-y-1">
                                <label className="text-xs font-medium text-muted-foreground">{t('projectTemplate.taskTitle')}</label>
                                <Input
                                  value={taskForm.title || ''}
                                  onChange={(e) => setTaskForm({ ...taskForm, title: e.target.value })}
                                  placeholder={t('projectTemplate.enterTaskTitle')}
                                  className="text-sm"
                                  data-testid={`input-inline-task-title-${index}`}
                                />
                              </div>

                              <div className="space-y-1">
                                <label className="text-xs font-medium text-muted-foreground">{t('projectTemplate.description')}</label>
                                <Input
                                  value={taskForm.description || ''}
                                  onChange={(e) => setTaskForm({ ...taskForm, description: e.target.value })}
                                  placeholder={t('projectTemplate.enterTaskDescription')}
                                  className="text-sm"
                                  data-testid={`input-inline-task-description-${index}`}
                                />
                              </div>

                              <div className="space-y-1">
                                <label className="text-xs font-medium text-muted-foreground">{t('projectTemplate.priority')}</label>
                                <Select
                                  value={taskForm.priority || 'medium'}
                                  onValueChange={(value: ProjectTask['priority']) =>
                                    setTaskForm({ ...taskForm, priority: value })
                                  }
                                >
                                  <SelectTrigger className="text-sm" data-testid={`select-inline-task-priority-${index}`}>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="low">{t('priority.low')}</SelectItem>
                                    <SelectItem value="medium">{t('priority.medium')}</SelectItem>
                                    <SelectItem value="high">{t('priority.high')}</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>

                              <div className="space-y-1">
                                <label className="text-xs font-medium text-muted-foreground">{t('projectTemplate.status')}</label>
                                <Select
                                  value={taskForm.status || 'todo'}
                                  onValueChange={(value: ProjectTask['status']) =>
                                    setTaskForm({ ...taskForm, status: value })
                                  }
                                >
                                  <SelectTrigger className="text-sm" data-testid={`select-inline-task-status-${index}`}>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="todo">{t('status.todo')}</SelectItem>
                                    <SelectItem value="inProgress">{t('status.inProgress')}</SelectItem>
                                    <SelectItem value="done">{t('status.done')}</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>

                              <div className="space-y-1 md:col-span-2">
                                <label className="text-xs font-medium text-muted-foreground">{t('projectTemplate.estimatedHours')}</label>
                                <Input
                                  type="number"
                                  value={taskForm.estimatedHours || ''}
                                  onChange={(e) => setTaskForm({ ...taskForm, estimatedHours: Number(e.target.value) })}
                                  placeholder="0"
                                  min="0"
                                  className="text-sm max-w-32"
                                  data-testid={`input-inline-task-hours-${index}`}
                                />
                              </div>
                            </div>

                            <div className="flex items-center gap-2 justify-end pt-2 border-t">
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={handleCancelTaskEdit}
                                data-testid={`button-cancel-inline-edit-${index}`}
                              >
                                {t('projectTemplate.cancel')}
                              </Button>
                              <Button
                                size="sm"
                                onClick={handleSaveTask}
                                disabled={!taskForm.title?.trim()}
                                data-testid={`button-save-inline-edit-${index}`}
                              >
                                {t('projectTemplate.save')}
                              </Button>
                            </div>
                          </div>
                        ) : (
                          // Display Mode
                          <div className="flex items-center justify-between">
                            <div
                              className="flex-1 cursor-pointer hover-elevate rounded-md p-2 -m-2"
                              onClick={() => handleOpenTaskDetails(task)}
                              data-testid={`clickable-task-${index}`}
                            >
                              <h4 className="font-medium text-sm">{task.title}</h4>
                              {task.description && (
                                <p className="text-xs text-muted-foreground">{task.description}</p>
                              )}
                              <div className="flex items-center gap-2 mt-1">
                                <Badge variant="outline" className="text-xs">
                                  {task.priority}
                                </Badge>
                                <Badge variant="outline" className="text-xs">
                                  {task.status}
                                </Badge>
                                {task.estimatedHours ? (
                                  <Badge variant="outline" className="text-xs">
                                    {task.estimatedHours}h
                                  </Badge>
                                ) : null}
                                {task.timeTracked && task.timeTracked > 0 && (
                                  <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200">
                                    {Math.floor(task.timeTracked / 60)}h {task.timeTracked % 60}m {t('projectTemplate.tracked')}
                                  </Badge>
                                )}
                                {task.notes && task.notes.trim() && (
                                  <Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-200">
                                    <FileText className="w-3 h-3 mr-1" />
                                    {t('projectTemplate.notesLabel')}
                                  </Badge>
                                )}
                              </div>
                            </div>
                            <div className="flex items-center gap-1">
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  handleOpenTaskDetails(task);
                                }}
                                data-testid={`button-details-task-${index}`}
                                title={t('projectTemplate.viewTaskDetails')}
                              >
                                <FileText className="w-3 h-3" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  handleEditTask(index);
                                }}
                                data-testid={`button-edit-task-edit-${index}`}
                                title={t('projectTemplate.editTaskTooltip')}
                              >
                                <Edit className="w-3 h-3" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  handleRemoveTask(index);
                                }}
                                data-testid={`button-remove-task-edit-${index}`}
                                title={t('projectTemplate.removeTask')}
                              >
                                <Trash2 className="w-3 h-3" />
                              </Button>
                            </div>
                          </div>
                        )}
                      </Card>
                    ))}

                    {projectTasks.length === 0 && (
                      <div className="text-center text-muted-foreground text-sm py-8 border-2 border-dashed border-muted rounded-lg">
                        {t('projectTemplate.noTasksInProject')}
                      </div>
                    )}
                  </div>

                </div>
              </div>
            )}
            <div className="flex gap-2 pt-4 border-t">
              <Button
                variant="outline"
                onClick={() => {
                  setIsEditProjectOpen(false);
                  setSelectedProject(null);
                  setProjectTasks([]);
                  setTaskForm({});
                  setIsEditingTask(false);
                }}
                className="flex-1"
              >
                {t('projectTemplate.cancel')}
              </Button>
              <Button
                onClick={handleSaveEditedProject}
                disabled={!selectedProject?.name.trim()}
                className="flex-1"
                data-testid="button-update-project"
              >
                {t('projectTemplate.update')} ({projectTasks.length} {t('projectTemplate.tasks', { count: projectTasks.length })})
              </Button>
            </div>
          </DialogContent>
        </Dialog>

        <TabsContent value="labels" className="space-y-6">
          {/* Labels Section Header */}
          <div className="flex items-center justify-between">
            <h3 className="text-md font-medium">{t('settings.labels.title')}</h3>
            <Dialog open={isLabelDialogOpen} onOpenChange={setIsLabelDialogOpen}>
              <DialogTrigger asChild>
                <Button variant="outline" size="sm" data-testid="button-create-label">
                  <Plus className="w-4 h-4 mr-2" />
                  {t('projectTemplate.createLabel')}
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>{editingLabel ? t('projectTemplate.editLabel') : t('projectTemplate.createNewLabel')}</DialogTitle>
                </DialogHeader>
                <div className="space-y-4">
                  <div>
                    <Input
                      placeholder={t('projectTemplate.labelNamePlaceholder')}
                      value={labelName}
                      onChange={(e) => setLabelName(e.target.value)}
                      data-testid="input-label-name"
                    />
                  </div>
                  <div>
                    <div className="flex items-center gap-3">
                      <input
                        type="color"
                        value={labelColor}
                        onChange={(e) => setLabelColor(e.target.value)}
                        className="w-12 h-8 rounded border cursor-pointer"
                        data-testid="input-label-color"
                      />
                      <Input
                        value={labelColor}
                        onChange={(e) => setLabelColor(e.target.value)}
                        placeholder="#3B82F6"
                        className="flex-1"
                        data-testid="input-label-color-text"
                      />
                    </div>
                  </div>
                  <div className="flex gap-3 pt-2">
                    <Button
                      variant="outline"
                      onClick={() => {
                        setIsLabelDialogOpen(false);
                        setEditingLabel(null);
                        setLabelName('');
                        setLabelColor('#3B82F6');
                      }}
                      className="flex-1"
                      data-testid="button-cancel-label"
                    >
                      {t('projectTemplate.cancel')}
                    </Button>
                    <Button
                      onClick={handleSaveLabel}
                      disabled={!labelName.trim() || createLabelMutation.isPending || updateLabelMutation.isPending}
                      className="flex-1"
                      data-testid="button-save-label"
                    >
                      {editingLabel ? t('projectTemplate.update') : t('projectTemplate.create')}
                    </Button>
                  </div>
                </div>
              </DialogContent>
            </Dialog>
          </div>

          {/* Labels List */}
          {labelsLoading ? (
            <div className="flex items-center justify-center p-8">
              <div className="text-muted-foreground">{t('projectTemplate.loadingLabels')}</div>
            </div>
          ) : (
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {labels.map((label) => (
                <Card
                  key={label.id}
                  className="p-4 hover-elevate active-elevate-2"
                  style={{ borderLeft: `4px solid ${label.color}` }}
                  data-testid={`label-${label.id}`}
                >
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div
                        className="w-4 h-4 rounded"
                        style={{ backgroundColor: label.color }}
                      />
                      <span className="font-medium text-sm" data-testid={`text-label-name-${label.id}`}>
                        {label.name}
                      </span>
                    </div>
                    <div className="flex items-center gap-1">
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => handleEditLabel(label)}
                        className="w-6 h-6"
                        data-testid={`button-edit-${label.id}`}
                      >
                        <Edit className="w-3 h-3" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => handleDeleteLabel(label.id)}
                        className="w-6 h-6 text-destructive hover:text-destructive"
                        data-testid={`button-delete-${label.id}`}
                      >
                        <Trash2 className="w-3 h-3" />
                      </Button>
                    </div>
                  </div>
                </Card>
              ))}
              {labels.length === 0 && (
                <div className="col-span-full flex flex-col items-center justify-center p-8 text-center">
                  <Tag className="w-12 h-12 text-muted-foreground mb-4" />
                  <h3 className="font-medium text-muted-foreground mb-2">{t('projectTemplate.noLabelsYet')}</h3>
                  <p className="text-sm text-muted-foreground mb-4">
                    {t('projectTemplate.noLabelsDescription')}
                  </p>
                  <Button
                    variant="outline"
                    onClick={() => setIsLabelDialogOpen(true)}
                    data-testid="button-create-first-label"
                  >
                    <Plus className="w-4 h-4 mr-2" />
                    {t('projectTemplate.createLabel')}
                  </Button>
                </div>
              )}
            </div>
          )}
        </TabsContent>
      </Tabs>

      {/* Task Details Modal */}
      <TaskDetailsModal
        isOpen={isTaskDetailsOpen}
        onClose={handleCloseTaskDetails}
        task={selectedTaskForDetails ? convertProjectTaskToTask(selectedTaskForDetails, selectedProject?.id || 'temp') : null}
        onSave={(updatedTask) => {
          // Convert back to ProjectTask
          const projectTask: ProjectTask = {
            id: selectedTaskForDetails?.id || updatedTask.id, // Keep original ID if possible
            title: updatedTask.title,
            description: updatedTask.description || undefined,
            status: updatedTask.status as any,
            priority: updatedTask.priority as any,
            estimatedHours: updatedTask.estimatedDuration ? Math.round(updatedTask.estimatedDuration / 60) : 0,
            labelId: updatedTask.labelId || undefined,
            notes: updatedTask.notes || undefined,
            timeTracked: updatedTask.timeTracked,
            timeEntries: [] // Simplify for now
          };
          handleSaveTaskDetails(projectTask);
        }}
        labels={labels}
      />
    </div>
  );
}