import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { MoreVertical, Plus, Calendar, MessageSquare } from 'lucide-react';
import { Avatar } from './Avatar';
import { Badge } from './Badge';

export interface KanbanTask {
  id: string;
  title: string;
  description?: string;
  priority: 'low' | 'medium' | 'high';
  assignee?: { name: string; avatar?: string };
  dueDate?: string;
  comments?: number;
  tags?: string[];
}

export interface KanbanColumn {
  id: string;
  title: string;
  color?: string; // e.g. 'primary', 'warning', 'success'
  taskIds: string[];
}

export interface KanbanBoardConfig {
  columns: KanbanColumn[];
  tasks: Record<string, KanbanTask>;
}

export interface KanbanProps {
  config: KanbanBoardConfig;
  onTaskMove?: (taskId: string, sourceColId: string, destColId: string) => void;
  onTaskClick?: (task: KanbanTask) => void;
  className?: string;
}

export function Kanban({ config, onTaskMove, onTaskClick, className = '' }: KanbanProps) {
  const [boardConfig, setBoardConfig] = useState(config);
  
  // Basic drag and drop state simulation
  const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);

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

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

    // Find source col
    const sourceCol = boardConfig.columns.find(c => c.taskIds.includes(draggedTaskId));
    if (!sourceCol || sourceCol.id === colId) {
      setDraggedTaskId(null);
      return;
    }

    // Move task logic
    const newConfig = { ...boardConfig };
    const newSourceCol = newConfig.columns.find(c => c.id === sourceCol.id);
    const newDestCol = newConfig.columns.find(c => c.id === colId);

    if (newSourceCol && newDestCol) {
      newSourceCol.taskIds = newSourceCol.taskIds.filter(id => id !== draggedTaskId);
      newDestCol.taskIds.push(draggedTaskId);
      setBoardConfig(newConfig);
      
      if (onTaskMove) {
        onTaskMove(draggedTaskId, sourceCol.id, colId);
      }
    }
    
    setDraggedTaskId(null);
  };

  const getPriorityColor = (p: string) => {
    if (p === 'high') return 'error';
    if (p === 'medium') return 'warning';
    return 'info';
  };

  return (
    <div className={`flex gap-6 overflow-x-auto pb-4 custom-scrollbar h-full ${className}`}>
      {boardConfig.columns.map((col) => (
        <div 
          key={col.id} 
          className="flex flex-col min-w-[320px] w-[320px] bg-surface/30 rounded-2xl border border-border/50 shrink-0"
          onDragOver={(e) => e.preventDefault()}
          onDrop={(e) => handleDrop(e, col.id)}
        >
          {/* Column Header */}
          <div className="flex items-center justify-between p-4 border-b border-border/50">
            <div className="flex items-center gap-3">
              <div className={`w-3 h-3 rounded-full bg-${col.color || 'primary'} shadow-[0_0_10px_color-mix(in_oklab,var(--colors-${col.color || 'primary'})_50%,transparent)]`} />
              <h3 className="font-bold text-text">{col.title}</h3>
              <span className="text-xs font-bold text-text-muted bg-background px-2 py-0.5 rounded-full border border-border">
                {col.taskIds.length}
              </span>
            </div>
            <button className="text-text-muted hover:text-text transition-colors">
              <MoreVertical className="w-5 h-5" />
            </button>
          </div>

          {/* Tasks Container */}
          <div className="flex-1 p-4 space-y-4 overflow-y-auto custom-scrollbar">
            <AnimatePresence>
              {col.taskIds.map((taskId) => {
                const task = boardConfig.tasks[taskId];
                if (!task) return null;

                return (
                  <motion.div
                    key={task.id}
                    layout
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, scale: 0.9 }}
                    draggable
                    onDragStart={(e: any) => handleDragStart(e, task.id)}
                    onClick={() => onTaskClick?.(task)}
                    className="bg-surface border border-border/50 hover:border-primary/50 rounded-xl p-4 shadow-lg hover:shadow-xl cursor-grab active:cursor-grabbing transition-all group"
                  >
                    <div className="flex flex-wrap gap-2 mb-3">
                      <Badge variant={getPriorityColor(task.priority) as any}>{task.priority}</Badge>
                      {task.tags?.map(tag => (
                        <Badge key={tag} variant="outline">{tag}</Badge>
                      ))}
                    </div>
                    
                    <h4 className="font-bold text-text mb-2 group-hover:text-primary transition-colors">
                      {task.title}
                    </h4>
                    
                    {task.description && (
                      <p className="text-xs text-text-muted line-clamp-2 mb-4">
                        {task.description}
                      </p>
                    )}

                    <div className="flex items-center justify-between mt-auto pt-4 border-t border-border/50">
                      <div className="flex items-center gap-3 text-text-muted text-xs font-medium">
                        {task.dueDate && (
                          <span className="flex items-center gap-1.5"><Calendar className="w-3.5 h-3.5" /> {task.dueDate}</span>
                        )}
                        {task.comments !== undefined && (
                          <span className="flex items-center gap-1.5"><MessageSquare className="w-3.5 h-3.5" /> {task.comments}</span>
                        )}
                      </div>
                      
                      {task.assignee && (
                        <Avatar fallback={task.assignee.name.substring(0, 2).toUpperCase()} src={task.assignee.avatar} size="sm" />
                      )}
                    </div>
                  </motion.div>
                );
              })}
            </AnimatePresence>

            <button className="w-full py-3 flex items-center justify-center gap-2 text-sm font-bold text-text-muted hover:text-primary hover:bg-primary/5 border border-dashed border-border hover:border-primary/30 rounded-xl transition-all">
              <Plus className="w-4 h-4" /> Agregar Tarea
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}