import { Box, Text, Button, Group, Stack, Badge, ActionIcon } from '@mantine/core';
import { IconPlus, IconCheck, IconX } from '@tabler/icons-react';
import { useState, useCallback, memo } from 'react';

interface Task {
  id: string;
  title: string;
  completed: boolean;
}

interface TaskDockProps {
  onTaskUpdate?: (tasks: Task[]) => void;
}

function TaskDockComponent({ onTaskUpdate }: TaskDockProps) {
  const [tasks, setTasks] = useState<Task[]>([
    { id: '1', title: 'Configurar dockview', completed: true },
    { id: '2', title: 'Crear componentes de dock', completed: false },
    { id: '3', title: 'Implementar comunicación', completed: false },
  ]);

  const [newTaskTitle, setNewTaskTitle] = useState('');

  const toggleTask = useCallback((id: string) => {
    const updatedTasks = tasks.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    );
    setTasks(updatedTasks);
    onTaskUpdate?.(updatedTasks);
  }, [tasks, onTaskUpdate]);

  const addTask = useCallback(() => {
    if (newTaskTitle.trim()) {
      const newTask = {
        id: Date.now().toString(),
        title: newTaskTitle,
        completed: false,
      };
      const updatedTasks = [...tasks, newTask];
      setTasks(updatedTasks);
      setNewTaskTitle('');
      onTaskUpdate?.(updatedTasks);
    }
  }, [newTaskTitle, tasks, onTaskUpdate]);

  const removeTask = useCallback((id: string) => {
    const updatedTasks = tasks.filter(task => task.id !== id);
    setTasks(updatedTasks);
    onTaskUpdate?.(updatedTasks);
  }, [tasks, onTaskUpdate]);

  return (
    <Box p="md" h="100%">
      <Text size="lg" fw={600} mb="md">Lista de Tareas</Text>

      <Group mb="md">
        <input
          type="text"
          placeholder="Nueva tarea..."
          value={newTaskTitle}
          onChange={(e) => setNewTaskTitle(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTask()}
          style={{ flex: 1, padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}
        />
        <ActionIcon onClick={addTask} variant="filled">
          <IconPlus size={16} />
        </ActionIcon>
      </Group>

      <Stack gap="xs">
        {tasks.map((task) => (
          <Group key={task.id} justify="space-between" p="xs" style={{
            border: '1px solid #e0e0e0',
            borderRadius: '4px',
            backgroundColor: task.completed ? '#f5f5f5' : 'white'
          }}>
            <Group>
              <ActionIcon
                onClick={() => toggleTask(task.id)}
                variant={task.completed ? 'filled' : 'outline'}
                color={task.completed ? 'green' : 'gray'}
                size="sm"
              >
                <IconCheck size={14} />
              </ActionIcon>
              <Text
                style={{ textDecoration: task.completed ? 'line-through' : 'none' }}
                c={task.completed ? 'dimmed' : 'dark'}
              >
                {task.title}
              </Text>
              <Badge variant="light" color={task.completed ? 'green' : 'blue'}>
                {task.completed ? 'Completada' : 'Pendiente'}
              </Badge>
            </Group>
            <ActionIcon
              onClick={() => removeTask(task.id)}
              variant="subtle"
              color="red"
              size="sm"
            >
              <IconX size={14} />
            </ActionIcon>
          </Group>
        ))}
      </Stack>
    </Box>
  );
}

export const TaskDock = memo(TaskDockComponent);