
import React from 'react';
import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
import { motion } from 'framer-motion';
import { MoreHorizontal, Calendar, DollarSign, User, StickyNote, FileText, CheckSquare } from 'lucide-react';
import { cn } from '@/lib/utils';
import { toast } from '@/components/ui/use-toast';

const KanbanCard = ({ item, index, onClick, onAction }) => {
  const handleAction = (e, action) => {
    e.stopPropagation();
    onAction && onAction(action, item);
  };

  return (
    <Draggable draggableId={item.id.toString()} index={index}>
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          onClick={() => onClick(item)}
          style={{ ...provided.draggableProps.style }}
          className={cn(
            "bg-white dark:bg-gray-900 p-4 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm mb-3 group transition-all",
            snapshot.isDragging ? "shadow-xl ring-2 ring-[#941403] rotate-2" : "hover:shadow-md hover:-translate-y-1"
          )}
        >
          <div className="flex justify-between items-start mb-2">
            <span className="text-xs font-medium text-gray-500 dark:text-gray-400 truncate max-w-[120px]">{item.client}</span>
            <button className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-all">
              <MoreHorizontal className="w-4 h-4 text-gray-500" />
            </button>
          </div>
          <h4 className="font-semibold text-gray-900 dark:text-white mb-3 line-clamp-2">{item.name}</h4>
          
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-1 text-[#941403] font-medium bg-red-50 dark:bg-red-900/20 px-2 py-1 rounded-lg text-xs">
              <DollarSign className="w-3 h-3" />
              {item.amount.toLocaleString()}€
            </div>
            <div className={cn(
              "text-xs font-medium px-2 py-1 rounded-lg",
              item.probability >= 75 ? "bg-green-100 text-green-700" :
              item.probability >= 50 ? "bg-yellow-100 text-yellow-700" :
              "bg-gray-100 text-gray-700"
            )}>
              {item.probability}%
            </div>
          </div>

          <div className="flex items-center justify-between pt-3 border-t border-gray-100 dark:border-gray-800">
            <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
               <button 
                 onClick={(e) => handleAction(e, 'note')} 
                 className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded text-gray-500"
                 title="Ajouter une note"
               >
                 <StickyNote className="w-3.5 h-3.5" />
               </button>
               <button 
                 onClick={(e) => handleAction(e, 'task')}
                 className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded text-gray-500"
                 title="Créer une tâche"
               >
                 <CheckSquare className="w-3.5 h-3.5" />
               </button>
               <button 
                 onClick={(e) => handleAction(e, 'quote')}
                 className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded text-gray-500"
                 title="Créer un devis"
               >
                 <FileText className="w-3.5 h-3.5" />
               </button>
            </div>
            <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
              <div className="flex items-center gap-1">
                <Calendar className="w-3 h-3" />
                {new Date(item.closeDate).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
              </div>
              {item.owner && (
                 <div className="w-6 h-6 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-[10px]">
                   {item.owner.charAt(0)}
                 </div>
              )}
            </div>
          </div>
        </div>
      )}
    </Draggable>
  );
};

const KanbanColumn = ({ column, items, onClickItem, onActionItem }) => {
  const totalAmount = items.reduce((sum, item) => sum + item.amount, 0);

  return (
    <div className="flex flex-col h-full min-w-[320px] w-[320px] bg-gray-50/50 dark:bg-gray-900/20 rounded-2xl p-3 border border-transparent hover:border-gray-200 dark:hover:border-gray-800 transition-colors">
      <div className="flex items-center justify-between mb-4 px-1">
        <div className="flex items-center gap-2">
          <h3 className="font-semibold text-gray-700 dark:text-gray-200 text-sm uppercase tracking-wide">{column.title}</h3>
          <span className="bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs font-medium px-2 py-0.5 rounded-full">
            {items.length}
          </span>
        </div>
        {totalAmount > 0 && (
          <span className="text-xs font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 px-2 py-1 rounded shadow-sm">
            {totalAmount.toLocaleString()}€
          </span>
        )}
      </div>

      <Droppable droppableId={column.id}>
        {(provided, snapshot) => (
          <div
            {...provided.droppableProps}
            ref={provided.innerRef}
            className={cn(
              "flex-1 overflow-y-auto px-1 transition-colors rounded-xl custom-scrollbar",
              snapshot.isDraggingOver ? "bg-red-50/30 dark:bg-red-900/10 ring-2 ring-inset ring-red-100/50" : ""
            )}
          >
            {items.map((item, index) => (
              <KanbanCard 
                key={item.id} 
                item={item} 
                index={index} 
                onClick={onClickItem} 
                onAction={onActionItem}
              />
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </div>
  );
};

const KanbanBoard = ({ columns, items, onDragEnd, onItemClick, onActionItem }) => {
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div className="flex h-full gap-4 overflow-x-auto pb-4 items-start">
        {columns.map(col => (
          <KanbanColumn 
            key={col.id} 
            column={col} 
            items={items.filter(i => i.stage === col.id)} 
            onClickItem={onItemClick}
            onActionItem={onActionItem}
          />
        ))}
      </div>
    </DragDropContext>
  );
};

export default KanbanBoard;
