/**
 * Todo Board App - Kanban-style todo management
 */

import React, { useState, useEffect } from 'react';

interface Todo {
  id: number;
  content: string;
  completed: boolean;
  assignees: string[];
  due_on?: string;
}

export function TodoBoard({ projectId }: { projectId?: number }) {
  const [todos, setTodos] = useState<Todo[]>([]);

  useEffect(() => {
    // Simulated data
    setTodos([
      { id: 1, content: 'Design homepage mockup', completed: true, assignees: ['Alice'], due_on: '2024-01-20' },
      { id: 2, content: 'Implement responsive navigation', completed: false, assignees: ['Bob'], due_on: '2024-01-22' },
      { id: 3, content: 'Write content for About page', completed: false, assignees: ['Charlie'], due_on: '2024-01-25' },
      { id: 4, content: 'QA testing round 1', completed: false, assignees: ['Diana'], due_on: '2024-01-30' },
    ]);
  }, [projectId]);

  const completedTodos = todos.filter(t => t.completed);
  const incompleteTodos = todos.filter(t => !t.completed);

  const toggleTodo = (id: number) => {
    setTodos(todos.map(t => t.id === id ? { ...t, completed: !t.completed } : t));
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>Todo Board</h1>
      
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <div>
          <h2 style={{ fontSize: '18px', marginBottom: '15px', color: '#666' }}>
            To Do ({incompleteTodos.length})
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            {incompleteTodos.map((todo) => (
              <div key={todo.id} style={{ border: '1px solid #ddd', borderRadius: '6px', padding: '12px', background: 'white' }}>
                <label style={{ display: 'flex', alignItems: 'start', cursor: 'pointer' }}>
                  <input 
                    type="checkbox" 
                    checked={todo.completed}
                    onChange={() => toggleTodo(todo.id)}
                    style={{ marginRight: '10px', marginTop: '2px' }}
                  />
                  <div style={{ flex: 1 }}>
                    <div style={{ marginBottom: '4px' }}>{todo.content}</div>
                    <div style={{ fontSize: '12px', color: '#999' }}>
                      {todo.assignees.join(', ')} • {todo.due_on}
                    </div>
                  </div>
                </label>
              </div>
            ))}
          </div>
        </div>

        <div>
          <h2 style={{ fontSize: '18px', marginBottom: '15px', color: '#28a745' }}>
            Completed ({completedTodos.length})
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            {completedTodos.map((todo) => (
              <div key={todo.id} style={{ border: '1px solid #ddd', borderRadius: '6px', padding: '12px', background: '#f8f9fa' }}>
                <label style={{ display: 'flex', alignItems: 'start', cursor: 'pointer' }}>
                  <input 
                    type="checkbox" 
                    checked={todo.completed}
                    onChange={() => toggleTodo(todo.id)}
                    style={{ marginRight: '10px', marginTop: '2px' }}
                  />
                  <div style={{ flex: 1, textDecoration: 'line-through', color: '#999' }}>
                    <div style={{ marginBottom: '4px' }}>{todo.content}</div>
                    <div style={{ fontSize: '12px' }}>
                      {todo.assignees.join(', ')} • {todo.due_on}
                    </div>
                  </div>
                </label>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
