import React, { useState } from 'react';
import { Plus, MoreHorizontal, Clock, UserCircle, X, DollarSign, GripVertical, Trash2, Building2 } from 'lucide-react';
import { KanbanColumn, KanbanTask, Company, Receivable } from '../types';
import { useToast } from '../contexts/ToastContext';
import { CustomSelect } from './CustomSelect';

const initialColumns: KanbanColumn[] = [
  {
    id: 'todo',
    title: 'A Fazer',
    tasks: [
      { id: 't1', title: 'Criar contrato Uda Studios', priority: 'high', dueDate: '2024-05-15', value: 12000, description: 'Negociação referente ao projeto de redesign completo.' },
      { id: 't2', title: 'Revisar balanço trimestral', priority: 'medium', dueDate: '2024-05-20', value: 0, description: 'Verificar lançamentos de março e abril.' },
    ]
  },
  {
    id: 'progress',
    title: 'Em Progresso',
    tasks: [
      { id: 't3', title: 'Design do Dashboard', priority: 'high', dueDate: '2024-05-18', value: 5000 },
    ]
  },
  {
    id: 'review',
    title: 'Revisão',
    tasks: [
      { id: 't4', title: 'Aprovação de Orçamento', priority: 'low', dueDate: '2024-05-12', value: 3500 },
    ]
  },
  {
    id: 'done',
    title: 'Concluído',
    tasks: [
      { id: 't5', title: 'Onboarding Angels Healthcare', priority: 'medium', dueDate: '2024-05-10', value: 15000 },
    ]
  }
];

interface KanbanViewProps {
  companies: Company[];
  onAddReceivable: (receivable: Receivable) => void;
}

export const KanbanView: React.FC<KanbanViewProps> = ({ companies, onAddReceivable }) => {
  const { addToast } = useToast();
  const [columns, setColumns] = useState<KanbanColumn[]>(initialColumns);
  
  // States para Modais
  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
  const [isColumnModalOpen, setIsColumnModalOpen] = useState(false);
  
  // State de Edição/Criação
  const [currentTask, setCurrentTask] = useState<Partial<KanbanTask>>({});
  const [currentColumnId, setCurrentColumnId] = useState<string>('todo');
  const [newColumnTitle, setNewColumnTitle] = useState('');
  const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
  const [draggedSourceColumnId, setDraggedSourceColumnId] = useState<string | null>(null);

  // --- Drag and Drop Logic ---

  const handleDragStart = (e: React.DragEvent, taskId: string, columnId: string) => {
    setDraggedTaskId(taskId);
    setDraggedSourceColumnId(columnId);
    e.dataTransfer.effectAllowed = 'move';
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault(); // Necessary to allow dropping
    e.dataTransfer.dropEffect = 'move';
  };

  const handleDrop = (e: React.DragEvent, targetColumnId: string) => {
    e.preventDefault();
    if (!draggedTaskId || !draggedSourceColumnId) return;

    if (draggedSourceColumnId === targetColumnId) {
      setDraggedTaskId(null);
      setDraggedSourceColumnId(null);
      return;
    }

    // Move logic
    const sourceCol = columns.find(c => c.id === draggedSourceColumnId);
    const targetCol = columns.find(c => c.id === targetColumnId);
    const taskToMove = sourceCol?.tasks.find(t => t.id === draggedTaskId);

    if (sourceCol && targetCol && taskToMove) {
       const newColumns = columns.map(col => {
         if (col.id === draggedSourceColumnId) {
           return { ...col, tasks: col.tasks.filter(t => t.id !== draggedTaskId) };
         }
         if (col.id === targetColumnId) {
           return { ...col, tasks: [...col.tasks, taskToMove] };
         }
         return col;
       });
       setColumns(newColumns);

       // INTEGRAÇÃO FINANCEIRA: Se moveu para "Concluído" (done), tem valor e cliente, sugere faturar
       if (targetColumnId === 'done' && taskToMove.value && taskToMove.value > 0 && taskToMove.clientId) {
          const client = companies.find(c => c.id === taskToMove.clientId);
          
          // Use toast with action instead of window.confirm for better UI? 
          // For now, simpler confirmation but using toast for success
          if (window.confirm(`A tarefa "${taskToMove.title}" foi concluída.\n\nDeseja gerar automaticamente uma Conta a Receber no valor de R$ ${taskToMove.value.toLocaleString('pt-BR')}?`)) {
              
              const newReceivable: Receivable = {
                  id: Math.random().toString(36).substr(2, 9),
                  description: taskToMove.title,
                  companyName: client?.fantasyName || client?.name || 'Cliente Kanban',
                  category: 'Serviços', // Default category
                  value: taskToMove.value,
                  dueDate: taskToMove.dueDate || new Date().toISOString().split('T')[0],
                  status: 'pending',
                  type: 'one-time'
              };
              
              onAddReceivable(newReceivable);
              addToast({ type: 'success', title: 'Faturamento Gerado', message: `Conta a receber criada para ${client?.fantasyName}.` });
          }
       }
    }

    setDraggedTaskId(null);
    setDraggedSourceColumnId(null);
  };

  // --- CRUD Logic ---

  const openNewTaskModal = () => {
    setCurrentTask({ priority: 'medium', dueDate: new Date().toISOString().split('T')[0], value: 0, description: '' });
    setCurrentColumnId(columns[0].id); // Default to first column
    setIsTaskModalOpen(true);
  };

  const openEditTaskModal = (task: KanbanTask, colId: string) => {
    setCurrentTask(task);
    setCurrentColumnId(colId);
    setIsTaskModalOpen(true);
  };

  const handleSaveTask = () => {
    if (!currentTask.title) {
        addToast({ type: 'warning', title: 'Título Obrigatório', message: 'Dê um nome para a tarefa.' });
        return;
    }

    // Check if updating existing or creating new
    if (currentTask.id) {
      // Logic to update existing task (potentially moving columns)
      const newColumns = columns.map(col => {
        // Remove from all columns first (in case it moved)
        const filteredTasks = col.tasks.filter(t => t.id !== currentTask.id);
        
        // If this is the target column, add the updated task
        if (col.id === currentColumnId) {
          return { ...col, tasks: [...filteredTasks, currentTask as KanbanTask] };
        }
        return { ...col, tasks: filteredTasks };
      });
      setColumns(newColumns);
      addToast({ type: 'success', title: 'Tarefa Atualizada' });
    } else {
      // Create new
      const newTask: KanbanTask = {
        ...currentTask,
        id: Math.random().toString(36).substr(2, 9),
      } as KanbanTask;
      
      const newColumns = columns.map(col => {
        if (col.id === currentColumnId) {
          return { ...col, tasks: [newTask, ...col.tasks] }; // Add to top
        }
        return col;
      });
      setColumns(newColumns);
      addToast({ type: 'success', title: 'Tarefa Criada' });
    }
    setIsTaskModalOpen(false);
  };

  const handleDeleteTask = () => {
    if (!currentTask.id) return;
    if (window.confirm('Tem certeza que deseja excluir esta tarefa?')) {
       const newColumns = columns.map(col => ({
         ...col,
         tasks: col.tasks.filter(t => t.id !== currentTask.id)
       }));
       setColumns(newColumns);
       setIsTaskModalOpen(false);
       addToast({ type: 'info', title: 'Tarefa Excluída' });
    }
  };

  const handleCreateColumn = () => {
    if (!newColumnTitle) return;
    const newCol: KanbanColumn = {
      id: Math.random().toString(36).substr(2, 9),
      title: newColumnTitle,
      tasks: []
    };
    setColumns([...columns, newCol]);
    setNewColumnTitle('');
    setIsColumnModalOpen(false);
    addToast({ type: 'success', title: 'Coluna Adicionada' });
  };

  // Styles for Inputs (High Contrast)
  const labelClass = "block text-sm font-bold text-slate-800 mb-1";
  const inputClass = "w-full p-2.5 bg-white border border-slate-300 rounded-xl text-slate-900 placeholder-slate-400 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-shadow";

  return (
    <div className="h-full flex flex-col animate-fade-in relative">
      
      {/* Task Modal (Create & Edit) */}
      {isTaskModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onClick={() => setIsTaskModalOpen(false)}></div>
          <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-lg p-0 animate-scale-up flex flex-col max-h-[90vh]">
             <div className="flex justify-between items-center px-6 py-4 border-b border-slate-100 bg-slate-50 flex-shrink-0">
              <h3 className="font-bold text-slate-800 text-lg">
                {currentTask.id ? 'Detalhes da Tarefa' : 'Nova Tarefa'}
              </h3>
              <div className="flex items-center gap-2">
                {currentTask.id && (
                  <button onClick={handleDeleteTask} className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors">
                    <Trash2 size={18} />
                  </button>
                )}
                <button onClick={() => setIsTaskModalOpen(false)} className="p-2 text-slate-400 hover:text-slate-600 rounded-lg transition-colors">
                  <X size={20} />
                </button>
              </div>
            </div>
            
            <div className="p-6 space-y-5 overflow-y-auto">
              {/* Title */}
              <div>
                <label className={labelClass}>Título da Tarefa</label>
                <input 
                  type="text" 
                  className={inputClass} 
                  value={currentTask.title || ''} 
                  onChange={e => setCurrentTask({...currentTask, title: e.target.value})} 
                  placeholder="Ex: Reunião com Cliente X"
                />
              </div>

              {/* Status & Priority Row */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className={labelClass}>Coluna (Status)</label>
                  <CustomSelect 
                    value={currentColumnId}
                    onChange={(val) => setCurrentColumnId(val)}
                    options={columns.map(col => ({ value: col.id, label: col.title }))}
                  />
                </div>
                <div>
                  <label className={labelClass}>Prioridade</label>
                  <CustomSelect 
                    value={currentTask.priority || 'medium'}
                    onChange={(val) => setCurrentTask({...currentTask, priority: val})}
                    options={[
                        { value: 'low', label: 'Baixa' },
                        { value: 'medium', label: 'Média' },
                        { value: 'high', label: 'Alta' }
                    ]}
                  />
                </div>
              </div>

              {/* CRM Linkage */}
              <div>
                 <label className={labelClass}>Vincular Cliente (CRM)</label>
                 <CustomSelect 
                    value={currentTask.clientId || ''}
                    onChange={(val) => setCurrentTask({...currentTask, clientId: val})}
                    placeholder="Sem vínculo"
                    icon={<Building2 size={16}/>}
                    options={[
                        { value: '', label: 'Sem vínculo' },
                        ...companies.map(c => ({ value: c.id, label: c.fantasyName || c.name }))
                    ]}
                 />
                 <p className="text-[10px] text-slate-400 mt-1">Ao concluir a tarefa, o sistema oferecerá gerar cobrança para este cliente.</p>
              </div>

              {/* Commercial Data Section */}
              <div className="bg-slate-50 p-4 rounded-xl border border-slate-100 space-y-4">
                <h4 className="font-bold text-slate-700 text-sm border-b border-slate-200 pb-2 mb-2 flex items-center gap-2">
                  Dados Comerciais & Agenda
                </h4>
                
                <div className="grid grid-cols-2 gap-4">
                   <div>
                    <label className={labelClass}>Valor da Negociação</label>
                    <div className="relative">
                      <DollarSign size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
                      <input 
                        type="number" 
                        className={`${inputClass} pl-9`} 
                        value={currentTask.value || ''} 
                        onChange={e => setCurrentTask({...currentTask, value: Number(e.target.value)})} 
                        placeholder="0,00"
                      />
                    </div>
                  </div>

                  <div>
                    <label className={labelClass}>Prazo / Data</label>
                    <div className="relative">
                      <Clock size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
                      <input 
                        type="date" 
                        className={`${inputClass} pl-10`} 
                        value={currentTask.dueDate || ''} 
                        onChange={e => setCurrentTask({...currentTask, dueDate: e.target.value})} 
                      />
                    </div>
                  </div>
                </div>

                <div>
                  <label className={labelClass}>Descrição / Notas</label>
                  <textarea 
                    rows={4}
                    className={inputClass} 
                    value={currentTask.description || ''} 
                    onChange={e => setCurrentTask({...currentTask, description: e.target.value})} 
                    placeholder="Detalhes sobre a negociação, pauta da reunião, etc..."
                  />
                </div>
              </div>

            </div>

            <div className="px-6 py-4 bg-slate-50 border-t border-slate-100 flex justify-end gap-3 flex-shrink-0 rounded-b-2xl">
               <button onClick={() => setIsTaskModalOpen(false)} className="px-4 py-2 text-slate-600 font-medium hover:bg-slate-200 rounded-xl transition-colors">
                  Cancelar
                </button>
              <button 
                onClick={handleSaveTask} 
                className="px-6 py-2 bg-primary-500 text-white font-bold rounded-xl hover:bg-primary-600 shadow-lg shadow-primary-200/50 transition-all"
              >
                {currentTask.id ? 'Salvar Alterações' : 'Criar Tarefa'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* New Column Modal */}
      {isColumnModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onClick={() => setIsColumnModalOpen(false)}></div>
          <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 animate-scale-up">
            <h3 className="font-bold text-slate-800 text-lg mb-4">Nova Coluna</h3>
            <div className="space-y-4">
              <div>
                <label className={labelClass}>Nome da Coluna</label>
                <input 
                  type="text" 
                  className={inputClass} 
                  value={newColumnTitle} 
                  onChange={e => setNewColumnTitle(e.target.value)} 
                  placeholder="Ex: Em Aprovação"
                />
              </div>
              <div className="flex justify-end gap-2 pt-2">
                 <button onClick={() => setIsColumnModalOpen(false)} className="px-4 py-2 text-slate-500 font-medium hover:bg-slate-100 rounded-xl">Cancelar</button>
                 <button onClick={handleCreateColumn} className="px-4 py-2 bg-primary-500 text-white font-bold rounded-xl hover:bg-primary-600">Criar</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Kanban Header */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Projetos & Tarefas</h1>
          <p className="text-slate-500">Gestão visual do fluxo de trabalho.</p>
        </div>
        <button onClick={openNewTaskModal} className="flex items-center gap-2 px-5 py-3 bg-primary-500 text-white rounded-xl shadow-lg shadow-primary-200/50 hover:bg-primary-600 font-bold transition-all">
          <Plus size={20} /> Nova Tarefa
        </button>
      </div>

      {/* Kanban Board Area */}
      <div className="flex-1 overflow-x-auto">
        <div className="flex gap-6 h-full pb-4">
          {columns.map(col => {
            // Calculate total value for the column
            const totalValue = col.tasks.reduce((sum, task) => sum + (task.value || 0), 0);

            return (
              <div 
                key={col.id} 
                className="flex-shrink-0 flex flex-col w-[300px]"
                onDragOver={handleDragOver}
                onDrop={(e) => handleDrop(e, col.id)}
              >
                {/* Column Header */}
                <div className="flex justify-between items-start mb-4 p-1">
                  <div>
                    <h3 className="font-bold text-slate-700 flex items-center gap-2 truncate">
                      {col.title}
                      <span className="bg-slate-200 text-slate-600 text-[10px] px-2 py-0.5 rounded-full">{col.tasks.length}</span>
                    </h3>
                    {totalValue > 0 && (
                      <div className="text-xs font-bold text-slate-400 mt-1 pl-1">
                        Total: R$ {totalValue.toLocaleString('pt-BR')}
                      </div>
                    )}
                  </div>
                  <button className="text-slate-400 hover:text-slate-600"><MoreHorizontal size={18} /></button>
                </div>

                {/* Tasks Container */}
                <div className="bg-slate-100/50 rounded-2xl p-2 flex-1 border border-slate-100/50 overflow-y-auto">
                  <div className="space-y-3 min-h-[50px]">
                    {col.tasks.map(task => (
                      <div 
                        key={task.id}
                        draggable 
                        onDragStart={(e) => handleDragStart(e, task.id, col.id)}
                        onClick={() => openEditTaskModal(task, col.id)}
                        className={`bg-white p-4 rounded-xl shadow-sm border border-slate-100 hover:shadow-md hover:border-primary-200 cursor-pointer transition-all group relative ${draggedTaskId === task.id ? 'opacity-50 border-dashed border-slate-400' : ''}`}
                      >
                        <div className="flex justify-between items-start mb-2">
                          <span className={`text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded ${
                            task.priority === 'high' ? 'bg-red-50 text-red-600' :
                            task.priority === 'medium' ? 'bg-amber-50 text-amber-600' :
                            'bg-blue-50 text-blue-600'
                          }`}>
                            {task.priority === 'high' ? 'Alta' : task.priority === 'medium' ? 'Média' : 'Baixa'}
                          </span>
                          <div className="opacity-0 group-hover:opacity-100 text-slate-300 cursor-grab active:cursor-grabbing">
                            <GripVertical size={16}/>
                          </div>
                        </div>
                        
                        <h4 className="font-bold text-slate-800 text-sm mb-3 line-clamp-2">{task.title}</h4>
                        
                        {/* Optional: Show Value if present */}
                        {task.value && task.value > 0 && (
                          <div className="mb-3 text-xs font-semibold text-slate-600 bg-slate-50 px-2 py-1 rounded inline-block">
                            R$ {task.value.toLocaleString('pt-BR')}
                          </div>
                        )}
                        
                        {/* Show Linked Client Badge */}
                        {task.clientId && (
                            <div className="mb-3 flex items-center gap-1 text-[10px] text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded w-fit">
                                <Building2 size={10} /> {companies.find(c => c.id === task.clientId)?.fantasyName || 'Cliente'}
                            </div>
                        )}

                        <div className="flex justify-between items-center pt-3 border-t border-slate-50">
                          <div className="flex -space-x-2">
                            <div className="w-6 h-6 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-[10px] font-bold text-slate-500">
                              <UserCircle size={16} />
                            </div>
                          </div>
                          <div className="flex items-center gap-1 text-xs text-slate-400">
                            <Clock size={12} /> {task.dueDate ? new Date(task.dueDate).toLocaleDateString('pt-BR', {day:'2-digit', month:'short'}) : 'Sem data'}
                          </div>
                        </div>
                      </div>
                    ))}
                    
                    <button onClick={openNewTaskModal} className="w-full py-2 text-slate-400 text-sm font-medium hover:bg-slate-200/50 rounded-xl transition-colors flex items-center justify-center gap-2 border border-transparent hover:border-slate-200/50">
                      <Plus size={16} /> Adicionar
                    </button>
                  </div>
                </div>
              </div>
            );
          })}

          {/* Add Column Button */}
          <div className="flex-shrink-0 w-[50px] pt-10">
            <button 
              onClick={() => setIsColumnModalOpen(true)}
              className="w-full h-[50px] bg-white border border-dashed border-slate-300 rounded-2xl flex items-center justify-center text-slate-400 hover:text-primary-500 hover:border-primary-300 hover:bg-primary-50 transition-all group tooltip-container"
              title="Nova Coluna"
            >
              <Plus size={24} />
            </button>
          </div>

        </div>
      </div>
    </div>
  );
};