import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { Table, LayoutGrid, Plus, Wifi, WifiOff, List, Trash2 } from 'lucide-react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { Toggle } from '../ui/Toggle';
import { projectService } from '../../services/projectService';
import { getGlobalOperationTracker } from '../../utils/operationTracker';
import { Card } from '../ui/card';

import { useTaskSocket } from '../../hooks/useTaskSocket';
import type { CreateTaskRequest, UpdateTaskRequest, DatabaseTaskStatus } from '../../types/project';
import { WebSocketState } from '../../services/socketIOService';
import { TaskTableView, Task } from './TaskTableView';
import { TaskBoardView } from './TaskBoardView';
import { EditTaskModal } from './EditTaskModal';

// Assignee utilities
const ASSIGNEE_OPTIONS = ['User', 'Archon', 'AI IDE Agent'] as const;

// Delete confirmation modal component
interface DeleteConfirmModalProps {
  onConfirm: () => void;
  onCancel: () => void;
  title: string;
  message: string;
  confirmText?: string;
}

const DeleteConfirmModal = ({
  onConfirm,
  onCancel,
  title,
  message,
  confirmText = 'Archive'
}: DeleteConfirmModalProps) => {
  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
      <div className="relative p-6 rounded-md backdrop-blur-md w-full max-w-md
          bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30
          border border-gray-200 dark:border-zinc-800/50
          shadow-[0_10px_30px_-15px_rgba(0,0,0,0.1)] dark:shadow-[0_10px_30px_-15px_rgba(0,0,0,0.7)]
          before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-[2px] 
          before:rounded-t-[4px] before:bg-red-500 
          before:shadow-[0_0_10px_2px_rgba(239,68,68,0.4)] dark:before:shadow-[0_0_20px_5px_rgba(239,68,68,0.7)]">
        
        <div className="relative z-10">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
              <Trash2 className="w-6 h-6 text-red-600 dark:text-red-400" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-gray-800 dark:text-white">
                {title}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                This action cannot be undone
              </p>
            </div>
          </div>
          
          <p className="text-gray-700 dark:text-gray-300 mb-6">
            {message}
          </p>
          
          <div className="flex justify-end gap-3">
            <button
              onClick={onCancel}
              className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
            >
              Cancel
            </button>
            <button
              onClick={onConfirm}
              className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors shadow-lg shadow-red-600/25 hover:shadow-red-700/25"
            >
              {confirmText}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

// Mapping functions for status conversion
const mapUIStatusToDBStatus = (uiStatus: Task['status']): DatabaseTaskStatus => {
  switch (uiStatus) {
    case 'backlog': return 'todo';
    case 'in-progress': return 'doing';
    case 'review': return 'review'; // Map UI 'review' to database 'review'
    case 'complete': return 'done';
    default: return 'todo';
  }
};

const mapDBStatusToUIStatus = (dbStatus: DatabaseTaskStatus): Task['status'] => {
  switch (dbStatus) {
    case 'todo': return 'backlog';
    case 'doing': return 'in-progress';
    case 'review': return 'review'; // Map database 'review' to UI 'review'
    case 'done': return 'complete';
    default: return 'backlog';
  }
};

// Helper function to map database task format to UI task format
const mapDatabaseTaskToUITask = (dbTask: any): Task => {
  return {
    id: dbTask.id,
    title: dbTask.title,
    description: dbTask.description || '',
    status: mapDBStatusToUIStatus(dbTask.status),
    assignee: {
      name: dbTask.assignee || 'User',
      avatar: ''
    },
    feature: dbTask.feature || 'General',
    featureColor: '#3b82f6', // Default blue color
    task_order: dbTask.task_order || 0,
  };
};

export const TasksTab = ({
  initialTasks,
  onTasksChange,
  projectId
}: {
  initialTasks: Task[];
  onTasksChange: (tasks: Task[]) => void;
  projectId: string;
}) => {
  const [viewMode, setViewMode] = useState<'table' | 'board'>('board');
  const [tasks, setTasks] = useState<Task[]>([]);
  const [editingTask, setEditingTask] = useState<Task | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [projectFeatures, setProjectFeatures] = useState<import('../types/jsonb').ProjectFeature[]>([]);
  const [isLoadingFeatures, setIsLoadingFeatures] = useState(false);
  const [isSavingTask, setIsSavingTask] = useState<boolean>(false);
  const [isWebSocketConnected, setIsWebSocketConnected] = useState(false);
  const [taskToDelete, setTaskToDelete] = useState<Task | null>(null);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  
  // Track recently deleted tasks to prevent race conditions
  const [recentlyDeletedIds, setRecentlyDeletedIds] = useState<Set<string>>(new Set());
  
  // Initialize tasks
  useEffect(() => {
    setTasks(initialTasks);
  }, [initialTasks]);

  // Load project features on component mount
  useEffect(() => {
    loadProjectFeatures();
  }, [projectId]);

  // Optimized socket handlers with conflict resolution
  const handleTaskUpdated = useCallback((message: any) => {
    const updatedTask = message.data || message;
    const mappedTask = mapDatabaseTaskToUITask(updatedTask);
    
    // Skip updates for recently deleted tasks (race condition prevention)
    if (recentlyDeletedIds.has(updatedTask.id)) {
      console.log('[Socket] Ignoring update for recently deleted task:', updatedTask.id);
      return;
    }
    
    // Skip updates while modal is open for the same task to prevent conflicts
    if (isModalOpen && editingTask?.id === updatedTask.id) {
      console.log('[Socket] Skipping update for task being edited:', updatedTask.id);
      return;
    }
    
    setTasks(prev => {
      // Use server timestamp for conflict resolution
      const existingTask = prev.find(task => task.id === updatedTask.id);
      
      // Skip if we already have this task (prevent duplicate additions)
      if (!existingTask) {
        console.log('[Socket] Task not found locally, adding:', updatedTask.id);
      }
      
      const updated = prev.map(task => 
        task.id === updatedTask.id 
          ? { ...mappedTask }
          : task
      );
      
      // Notify parent after state settles
      setTimeout(() => onTasksChange(updated), 0);
      return updated;
    });
  }, [onTasksChange, isModalOpen, editingTask?.id, recentlyDeletedIds]);

  const handleTaskCreated = useCallback((message: any) => {
    const newTask = message.data || message;
    console.log('🆕 Real-time task created:', newTask);
    const mappedTask = mapDatabaseTaskToUITask(newTask);
    
    setTasks(prev => {
      // Check if this is replacing a temporary task from optimistic update
      const hasTempTask = prev.some(task => task.id.startsWith('temp-') && task.title === mappedTask.title);
      
      if (hasTempTask) {
        // Replace temporary task with real task
        const updated = prev.map(task => 
          task.id.startsWith('temp-') && task.title === mappedTask.title 
            ? mappedTask 
            : task
        );
        setTimeout(() => onTasksChange(updated), 0);
        console.log('Replaced temporary task with real task:', mappedTask.id);
        return updated;
      }
      
      // Check if task already exists to prevent duplicates
      if (prev.some(task => task.id === newTask.id)) {
        console.log('Task already exists, skipping create');
        return prev;
      }
      
      const updated = [...prev, mappedTask];
      setTimeout(() => onTasksChange(updated), 0);
      return updated;
    });
  }, [onTasksChange]);

  const handleTaskDeleted = useCallback((message: any) => {
    const deletedTask = message.data || message;
    console.log('🗑️ Real-time task deleted:', deletedTask);
    
    // Remove from recently deleted cache when deletion is confirmed
    setRecentlyDeletedIds(prev => {
      const newSet = new Set(prev);
      newSet.delete(deletedTask.id);
      return newSet;
    });
    
    setTasks(prev => {
      const updated = prev.filter(task => task.id !== deletedTask.id);
      setTimeout(() => onTasksChange(updated), 0);
      return updated;
    });
  }, [onTasksChange]);

  const handleTaskArchived = useCallback((message: any) => {
    const archivedTask = message.data || message;
    console.log('📦 Real-time task archived:', archivedTask);
    setTasks(prev => {
      const updated = prev.filter(task => task.id !== archivedTask.id);
      setTimeout(() => onTasksChange(updated), 0);
      return updated;
    });
  }, [onTasksChange]);

  const handleTasksReordered = useCallback((message: any) => {
    const reorderData = message.data || message;
    console.log('🔄 Real-time tasks reordered:', reorderData);
    
    // Handle bulk task reordering from server
    if (reorderData.tasks && Array.isArray(reorderData.tasks)) {
      const uiTasks: Task[] = reorderData.tasks.map(mapDatabaseTaskToUITask);
      setTasks(uiTasks);
      setTimeout(() => onTasksChange(uiTasks), 0);
    }
  }, [onTasksChange]);

  const handleInitialTasks = useCallback((message: any) => {
    const initialWebSocketTasks = message.data || message;
    const uiTasks: Task[] = initialWebSocketTasks.map(mapDatabaseTaskToUITask);
    setTasks(uiTasks);
    onTasksChange(uiTasks);
  }, [onTasksChange]);

  // Simplified socket connection with better lifecycle management
  const { isConnected, connectionState } = useTaskSocket({
    projectId,
    onTaskCreated: handleTaskCreated,
    onTaskUpdated: handleTaskUpdated,
    onTaskDeleted: handleTaskDeleted,
    onTaskArchived: handleTaskArchived,
    onTasksReordered: handleTasksReordered,
    onInitialTasks: handleInitialTasks,
    onConnectionStateChange: (state) => {
      setIsWebSocketConnected(state === WebSocketState.CONNECTED);
    }
  });

  // Update connection state when hook state changes
  useEffect(() => {
    setIsWebSocketConnected(isConnected);
  }, [isConnected]);

  const loadProjectFeatures = async () => {
    if (!projectId) return;
    
    setIsLoadingFeatures(true);
    try {
      const response = await projectService.getProjectFeatures(projectId);
      setProjectFeatures(response.features || []);
    } catch (error) {
      console.error('Failed to load project features:', error);
      setProjectFeatures([]);
    } finally {
      setIsLoadingFeatures(false);
    }
  };

  // Modal management functions
  const openEditModal = async (task: Task) => {
    setEditingTask(task);
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
    setEditingTask(null);
  };

  const saveTask = async (task: Task) => {
    setEditingTask(task);
    
    setIsSavingTask(true);
    try {
      let parentTaskId = task.id;
      
      if (task.id) {
        // Update existing task
        const updateData: UpdateTaskRequest = {
          title: task.title,
          description: task.description,
          status: mapUIStatusToDBStatus(task.status),
          assignee: task.assignee?.name || 'User',
          task_order: task.task_order,
          ...(task.feature && { feature: task.feature }),
          ...(task.featureColor && { featureColor: task.featureColor })
        };
        
        await projectService.updateTask(task.id, updateData);
      } else {
        // Create new task first to get UUID
        const createData: CreateTaskRequest = {
          project_id: projectId,
          title: task.title,
          description: task.description,
          status: mapUIStatusToDBStatus(task.status),
          assignee: task.assignee?.name || 'User',
          task_order: task.task_order,
          ...(task.feature && { feature: task.feature }),
          ...(task.featureColor && { featureColor: task.featureColor })
        };
        
        const createdTask = await projectService.createTask(createData);
        parentTaskId = createdTask.id;
      }
      
      // Don't reload tasks - let socket updates handle synchronization
      closeModal();
    } catch (error) {
      console.error('Failed to save task:', error);
      alert(`Failed to save task: ${error instanceof Error ? error.message : 'Unknown error'}`);
    } finally {
      setIsSavingTask(false);
    }
  };

  // Update tasks helper
  const updateTasks = (newTasks: Task[]) => {
    setTasks(newTasks);
    onTasksChange(newTasks);
  };

  // Helper function to reorder tasks by status to ensure no gaps (1,2,3...)
  const reorderTasksByStatus = async (status: Task['status']) => {
    const tasksInStatus = tasks
      .filter(task => task.status === status)
      .sort((a, b) => a.task_order - b.task_order);
    
    const updatePromises = tasksInStatus.map((task, index) => 
      projectService.updateTask(task.id, { task_order: index + 1 })
    );
    
    await Promise.all(updatePromises);
  };

  // Helper function to get next available order number for a status
  const getNextOrderForStatus = (status: Task['status']): number => {
    const tasksInStatus = tasks.filter(task => 
      task.status === status
    );
    
    if (tasksInStatus.length === 0) return 1;
    
    const maxOrder = Math.max(...tasksInStatus.map(task => task.task_order));
    return maxOrder + 1;
  };

  // Simple debounce function
  const debounce = (func: Function, delay: number) => {
    let timeoutId: NodeJS.Timeout;
    return (...args: any[]) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func(...args), delay);
    };
  };

  // Batch reorder persistence for efficient updates
  const debouncedPersistBatchReorder = useMemo(
    () => debounce(async (tasksToUpdate: Task[]) => {
      try {
        console.log(`REORDER: Persisting batch update for ${tasksToUpdate.length} tasks`);
        
        // Send batch update request to backend
        // For now, update tasks individually (backend can be optimized later for batch endpoint)
        const updatePromises = tasksToUpdate.map(task =>
          projectService.updateTask(task.id, { 
            task_order: task.task_order
          })
        );
        
        await Promise.all(updatePromises);
        console.log('REORDER: Batch reorder persisted successfully');
        
      } catch (error) {
        console.error('REORDER: Failed to persist batch reorder:', error);
        // Socket will handle state recovery
        console.log('REORDER: Socket will handle state recovery');
      }
    }, 500), // Shorter delay for batch updates
    [projectId]
  );
  
  // Single task persistence (still used for other operations)
  const debouncedPersistSingleTask = useMemo(
    () => debounce(async (task: Task) => {
      try {
        console.log('REORDER: Persisting position change for task:', task.title, 'new position:', task.task_order);
        
        // Update only the moved task
        await projectService.updateTask(task.id, { 
          task_order: task.task_order
        });
        console.log('REORDER: Single task position persisted successfully');
        
      } catch (error) {
        console.error('REORDER: Failed to persist task position:', error);
        console.log('REORDER: Socket will handle state recovery');
      }
    }, 800),
    [projectId]
  );

  // Standard drag-and-drop reordering with sequential integers (like Jira/Trello/Linear)
  const handleTaskReorder = useCallback((taskId: string, targetIndex: number, status: Task['status']) => {
    console.log('REORDER: Moving task', taskId, 'to index', targetIndex, 'in status', status);
    
    // Get all tasks in the target status, sorted by current order
    const statusTasks = tasks
      .filter(task => task.status === status)
      .sort((a, b) => a.task_order - b.task_order);
    
    const otherTasks = tasks.filter(task => task.status !== status);
    
    // Find the moving task
    const movingTaskIndex = statusTasks.findIndex(task => task.id === taskId);
    if (movingTaskIndex === -1) {
      console.log('REORDER: Task not found in status');
      return;
    }
    
    // Prevent invalid moves
    if (targetIndex < 0 || targetIndex >= statusTasks.length) {
      console.log('REORDER: Invalid target index', targetIndex);
      return;
    }
    
    // Skip if moving to same position
    if (movingTaskIndex === targetIndex) {
      console.log('REORDER: Task already in target position');
      return;
    }
    
    console.log('REORDER: Moving task from position', movingTaskIndex, 'to', targetIndex);
    
    // Remove the task from its current position and insert at target position
    const reorderedTasks = [...statusTasks];
    const [movedTask] = reorderedTasks.splice(movingTaskIndex, 1);
    reorderedTasks.splice(targetIndex, 0, movedTask);
    
    // Assign sequential order numbers (1, 2, 3, etc.) to all tasks in this status
    const updatedStatusTasks = reorderedTasks.map((task, index) => ({
      ...task,
      task_order: index + 1,
      lastUpdate: Date.now()
    }));
    
    console.log('REORDER: New order:', updatedStatusTasks.map(t => `${t.title}:${t.task_order}`));
    
    // Update UI immediately with all reordered tasks
    const allUpdatedTasks = [...otherTasks, ...updatedStatusTasks];
    updateTasks(allUpdatedTasks);
    
    // Batch update to backend - only update tasks that changed position
    const tasksToUpdate = updatedStatusTasks.filter((task, index) => {
      const originalTask = statusTasks.find(t => t.id === task.id);
      return originalTask && originalTask.task_order !== task.task_order;
    });
    
    console.log(`REORDER: Updating ${tasksToUpdate.length} tasks in backend`);
    
    // Send batch update to backend (debounced)
    debouncedPersistBatchReorder(tasksToUpdate);
  }, [tasks, updateTasks, debouncedPersistBatchReorder]);

  // Task move function (for board view) with optimistic UI update
  const moveTask = async (taskId: string, newStatus: Task['status']) => {
    console.log(`[TasksTab] Attempting to move task ${taskId} to new status: ${newStatus}`);
    
    const movingTask = tasks.find(task => task.id === taskId);
    if (!movingTask) {
      console.warn(`[TasksTab] Task ${taskId} not found for move operation.`);
      return;
    }
    
    const oldStatus = movingTask.status;
    const newOrder = getNextOrderForStatus(newStatus);
    const updatedTask = { ...movingTask, status: newStatus, task_order: newOrder };

    console.log(`[TasksTab] Moving task ${movingTask.title} from ${oldStatus} to ${newStatus} with order ${newOrder}`);

    // OPTIMISTIC UPDATE: Update UI immediately
    setTasks(prev => {
      const updated = prev.map(task => task.id === taskId ? updatedTask : task);
      setTimeout(() => onTasksChange(updated), 0);
      return updated;
    });
    console.log(`[TasksTab] Optimistically updated UI for task ${taskId}`);

    try {
      // Then update the backend
      await projectService.updateTask(taskId, {
        status: mapUIStatusToDBStatus(newStatus),
        task_order: newOrder
      });
      console.log(`[TasksTab] Successfully updated task ${taskId} status in backend.`);
      
      // Socket will confirm the update, but UI is already updated
      
    } catch (error) {
      console.error(`[TasksTab] Failed to move task ${taskId}, rolling back:`, error);
      
      // ROLLBACK on error - restore original task
      setTasks(prev => {
        const updated = prev.map(task => task.id === taskId ? movingTask : task);
        setTimeout(() => onTasksChange(updated), 0);
        return updated;
      });
      
      alert(`Failed to move task: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  };

  const completeTask = (taskId: string) => {
    console.log(`[TasksTab] Calling completeTask for ${taskId}`);
    moveTask(taskId, 'complete');
  };

  const deleteTask = async (task: Task) => {
    // Set the task to delete and show confirmation modal
    setTaskToDelete(task);
    setShowDeleteConfirm(true);
  };

  const confirmDeleteTask = async () => {
    if (!taskToDelete) return;
    
    try {
      // Add to recently deleted cache to prevent race conditions
      setRecentlyDeletedIds(prev => new Set(prev).add(taskToDelete.id));
      
      // OPTIMISTIC UPDATE: Remove task from UI immediately
      setTasks(prev => {
        const updated = prev.filter(t => t.id !== taskToDelete.id);
        setTimeout(() => onTasksChange(updated), 0);
        return updated;
      });
      console.log(`[TasksTab] Optimistically removed task ${taskToDelete.id} from UI`);
      
      // Then delete from backend
      await projectService.deleteTask(taskToDelete.id);
      console.log(`[TasksTab] Task ${taskToDelete.id} deletion confirmed by backend`);
      
      // Clear from recently deleted cache after a delay (to catch any lingering socket events)
      setTimeout(() => {
        setRecentlyDeletedIds(prev => {
          const newSet = new Set(prev);
          newSet.delete(taskToDelete.id);
          return newSet;
        });
      }, 3000); // 3 second window to ignore stale socket events
      
    } catch (error) {
      console.error('Failed to delete task:', error);
      
      // Remove from recently deleted cache on error
      setRecentlyDeletedIds(prev => {
        const newSet = new Set(prev);
        newSet.delete(taskToDelete.id);
        return newSet;
      });
      
      // ROLLBACK on error - restore the task
      setTasks(prev => {
        const updated = [...prev, taskToDelete].sort((a, b) => a.task_order - b.task_order);
        setTimeout(() => onTasksChange(updated), 0);
        return updated;
      });
      console.log(`[TasksTab] Rolled back task deletion for ${taskToDelete.id}`);
      
      // Re-throw to let the calling component handle the error display
      throw error;
    } finally {
      setTaskToDelete(null);
      setShowDeleteConfirm(false);
    }
  };

  // Inline task creation function
  const createTaskInline = async (newTask: Omit<Task, 'id'>) => {
    try {
      // Auto-assign next order number if not provided
      const nextOrder = newTask.task_order || getNextOrderForStatus(newTask.status);
      
      const createData: CreateTaskRequest = {
        project_id: projectId,
        title: newTask.title,
        description: newTask.description,
        status: mapUIStatusToDBStatus(newTask.status),
        assignee: newTask.assignee?.name || 'User',
        task_order: nextOrder,
        ...(newTask.feature && { feature: newTask.feature }),
        ...(newTask.featureColor && { featureColor: newTask.featureColor })
      };
      
      await projectService.createTask(createData);
      
      // Don't reload tasks - let socket updates handle synchronization
      console.log('[TasksTab] Task creation sent to backend, waiting for socket update');
      
    } catch (error) {
      console.error('Failed to create task:', error);
      throw error;
    }
  };

  // Inline task update function
  const updateTaskInline = async (taskId: string, updates: Partial<Task>) => {
    console.log(`[TasksTab] Inline update for task ${taskId} with updates:`, updates);
    try {
      const updateData: Partial<UpdateTaskRequest> = {};
      
      if (updates.title !== undefined) updateData.title = updates.title;
      if (updates.description !== undefined) updateData.description = updates.description;
      if (updates.status !== undefined) {
        console.log(`[TasksTab] Mapping UI status ${updates.status} to DB status.`);
        updateData.status = mapUIStatusToDBStatus(updates.status);
        console.log(`[TasksTab] Mapped status for ${taskId}: ${updates.status} -> ${updateData.status}`);
      }
      if (updates.assignee !== undefined) updateData.assignee = updates.assignee.name;
      if (updates.task_order !== undefined) updateData.task_order = updates.task_order;
      if (updates.feature !== undefined) updateData.feature = updates.feature;
      if (updates.featureColor !== undefined) updateData.featureColor = updates.featureColor;
      
      console.log(`[TasksTab] Sending update request for task ${taskId} to projectService:`, updateData);
      await projectService.updateTask(taskId, updateData);
      console.log(`[TasksTab] projectService.updateTask successful for ${taskId}.`);
      
      // Don't update local state optimistically - let socket handle it
      console.log(`[TasksTab] Waiting for socket update for task ${taskId}.`);
      
    } catch (error) {
      console.error(`[TasksTab] Failed to update task ${taskId} inline:`, error);
      alert(`Failed to update task: ${error instanceof Error ? error.message : 'Unknown error'}`);
      throw error;
    }
  };

  // Get tasks for priority selection with descriptive labels
  const getTasksForPrioritySelection = (status: Task['status']): Array<{value: number, label: string}> => {
    const tasksInStatus = tasks
      .filter(task => task.status === status && task.id !== editingTask?.id) // Exclude current task if editing
      .sort((a, b) => a.task_order - b.task_order);
    
    const options: Array<{value: number, label: string}> = [];
    
    if (tasksInStatus.length === 0) {
      // No tasks in this status
      options.push({ value: 1, label: "1 - First task in this status" });
    } else {
      // Add option to be first
      options.push({ 
        value: 1, 
        label: `1 - Before "${tasksInStatus[0].title.substring(0, 30)}${tasksInStatus[0].title.length > 30 ? '...' : ''}"` 
      });
      
      // Add options between existing tasks
      for (let i = 0; i < tasksInStatus.length - 1; i++) {
        const currentTask = tasksInStatus[i];
        const nextTask = tasksInStatus[i + 1];
        options.push({ 
          value: i + 2, 
          label: `${i + 2} - After "${currentTask.title.substring(0, 20)}${currentTask.title.length > 20 ? '...' : ''}", Before "${nextTask.title.substring(0, 20)}${nextTask.title.length > 20 ? '...' : ''}"` 
        });
      }
      
      // Add option to be last
      const lastTask = tasksInStatus[tasksInStatus.length - 1];
      options.push({ 
        value: tasksInStatus.length + 1, 
        label: `${tasksInStatus.length + 1} - After "${lastTask.title.substring(0, 30)}${lastTask.title.length > 30 ? '...' : ''}"` 
      });
    }
    
    return options;
  };

  // Memoized version of getTasksForPrioritySelection to prevent recalculation on every render
  const memoizedGetTasksForPrioritySelection = useMemo(
    () => getTasksForPrioritySelection,
    [tasks, editingTask?.id]
  );

  return (
    <DndProvider backend={HTML5Backend}>
      <div className="min-h-[70vh] relative">
        {/* Main content - Table or Board view */}
        <div className="relative h-[calc(100vh-220px)] overflow-auto">
          {viewMode === 'table' ? (
            <TaskTableView
              tasks={tasks}
              onTaskView={openEditModal}
              onTaskComplete={completeTask}
              onTaskDelete={deleteTask}
              onTaskReorder={handleTaskReorder}
              onTaskCreate={createTaskInline}
              onTaskUpdate={updateTaskInline}
            />
          ) : (
            <TaskBoardView
              tasks={tasks}
              onTaskView={openEditModal}
              onTaskComplete={completeTask}
              onTaskDelete={deleteTask}
              onTaskMove={moveTask}
              onTaskReorder={handleTaskReorder}
            />
          )}
        </div>

        {/* Fixed View Controls */}
        <div className="fixed bottom-6 left-0 right-0 flex justify-center z-50 pointer-events-none">
          <div className="flex items-center gap-4">
            {/* WebSocket Status Indicator */}
            <div className="flex items-center gap-2 px-3 py-2 bg-white/80 dark:bg-black/90 border border-gray-200 dark:border-gray-800 rounded-lg shadow-[0_0_20px_rgba(0,0,0,0.1)] dark:shadow-[0_0_20px_rgba(0,0,0,0.5)] backdrop-blur-md pointer-events-auto">
              {isWebSocketConnected ? (
                <>
                  <Wifi className="w-4 h-4 text-green-500" />
                  <span className="text-xs text-green-600 dark:text-green-400">Live</span>
                </>
              ) : (
                <>
                  <WifiOff className="w-4 h-4 text-red-500" />
                  <span className="text-xs text-red-600 dark:text-red-400">Offline</span>
                </>
              )}
            </div>
            
            {/* Add Task Button with Luminous Style */}
            <button 
              onClick={() => {
                const defaultOrder = getTasksForPrioritySelection('backlog')[0]?.value || 1;
                setEditingTask({
                  id: '',
                  title: '',
                  description: '',
                  status: 'backlog',
                  assignee: { name: 'AI IDE Agent', avatar: '' },
                  feature: '',
                  featureColor: '#3b82f6',
                  task_order: defaultOrder
                });
                setIsModalOpen(true);
              }}
              className="relative px-5 py-2.5 flex items-center gap-2 bg-white/80 dark:bg-black/90 border border-gray-200 dark:border-gray-800 rounded-lg shadow-[0_0_20px_rgba(0,0,0,0.1)] dark:shadow-[0_0_20px_rgba(0,0,0,0.5)] backdrop-blur-md pointer-events-auto text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 transition-all duration-300"
            >
              <Plus className="w-4 h-4 mr-1" />
              <span>Add Task</span>
              <span className="absolute bottom-0 left-[0%] right-[0%] w-[95%] mx-auto h-[2px] bg-cyan-500 shadow-[0_0_10px_2px_rgba(34,211,238,0.4)] dark:shadow-[0_0_20px_5px_rgba(34,211,238,0.7)]"></span>
            </button>
          
            {/* View Toggle Controls */}
            <div className="flex items-center bg-white/80 dark:bg-black/90 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden shadow-[0_0_20px_rgba(0,0,0,0.1)] dark:shadow-[0_0_20px_rgba(0,0,0,0.5)] backdrop-blur-md pointer-events-auto">
              <button 
                onClick={() => setViewMode('table')} 
                className={`px-5 py-2.5 flex items-center gap-2 relative transition-all duration-300 ${viewMode === 'table' ? 'text-cyan-600 dark:text-cyan-400' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300'}`}
              >
                <Table className="w-4 h-4" />
                <span>Table</span>
                {viewMode === 'table' && <span className="absolute bottom-0 left-[15%] right-[15%] w-[70%] mx-auto h-[2px] bg-cyan-500 shadow-[0_0_10px_2px_rgba(34,211,238,0.4)] dark:shadow-[0_0_20px_5px_rgba(34,211,238,0.7)]"></span>}
              </button>
              <button 
                onClick={() => setViewMode('board')} 
                className={`px-5 py-2.5 flex items-center gap-2 relative transition-all duration-300 ${viewMode === 'board' ? 'text-purple-600 dark:text-purple-400' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300'}`}
              >
                <LayoutGrid className="w-4 h-4" />
                <span>Board</span>
                {viewMode === 'board' && <span className="absolute bottom-0 left-[15%] right-[15%] w-[70%] mx-auto h-[2px] bg-purple-500 shadow-[0_0_10px_2px_rgba(168,85,247,0.4)] dark:shadow-[0_0_20px_5px_rgba(168,85,247,0.7)]"></span>}
              </button>
            </div>
          </div>
        </div>

        {/* Edit Task Modal */}
        <EditTaskModal
          isModalOpen={isModalOpen}
          editingTask={editingTask}
          projectFeatures={projectFeatures}
          isLoadingFeatures={isLoadingFeatures}
          isSavingTask={isSavingTask}
          onClose={closeModal}
          onSave={saveTask}
          getTasksForPrioritySelection={memoizedGetTasksForPrioritySelection}
        />

        {/* Delete Confirmation Modal */}
        {showDeleteConfirm && taskToDelete && (
          <DeleteConfirmModal
            onConfirm={confirmDeleteTask}
            onCancel={() => {
              setTaskToDelete(null);
              setShowDeleteConfirm(false);
            }}
            title="Archive Task"
            message={`Are you sure you want to archive the task "${taskToDelete.title}"? You can restore it from the archived tasks view.`}
            confirmText="Archive Task"
          />
        )}
      </div>
    </DndProvider>
  );
};