import React, { useState } from 'react';
import {
  DndContext,
  DragOverlay,
  PointerSensor,
  useSensor,
  useSensors,
  type DragEndEvent,
  type DragStartEvent,
} from '@dnd-kit/core';
import {
  SortableContext,
  arrayMove,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { useBMADStore } from '../store/useBMADStore';
import { KanbanColumn } from './KanbanColumn';
import { DeploymentCard } from './DeploymentCard';
import type { Deployment, TaskStatus } from '../../../shared/types.js';

const statusColumns: { id: TaskStatus; title: string; color: string }[] = [
  { id: 'backlog', title: 'Backlog', color: 'bg-gray-100' },
  { id: 'todo', title: 'To Do', color: 'bg-blue-100' },
  { id: 'in_progress', title: 'In Progress', color: 'bg-yellow-100' },
  { id: 'review', title: 'Review', color: 'bg-purple-100' },
  { id: 'done', title: 'Done', color: 'bg-green-100' },
  { id: 'blocked', title: 'Blocked', color: 'bg-red-100' },
];

export const KanbanBoard: React.FC = () => {
  const { kanbanColumns, updateDeploymentStatus } = useBMADStore();
  const [activeId, setActiveId] = useState<string | null>(null);

  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8,
      },
    })
  );

  const handleDragStart = (event: DragStartEvent) => {
    setActiveId(event.active.id as string);
  };

  const handleDragEnd = async (event: DragEndEvent) => {
    const { active, over } = event;
    
    if (!over) {
      setActiveId(null);
      return;
    }

    const activeId = active.id as string;
    const overId = over.id as string;

    // Find the deployment
    let deployment: Deployment | undefined;
    let sourceColumn: TaskStatus | undefined;

    for (const [status, deployments] of Object.entries(kanbanColumns)) {
      const found = deployments.find((d) => d.id === activeId);
      if (found) {
        deployment = found;
        sourceColumn = status as TaskStatus;
        break;
      }
    }

    if (!deployment || !sourceColumn) {
      setActiveId(null);
      return;
    }

    // Check if dropped on a column
    const targetColumn = statusColumns.find((col) => col.id === overId);
    if (targetColumn && targetColumn.id !== sourceColumn) {
      // Update deployment status
      await updateDeploymentStatus(deployment.id, targetColumn.id);
    }

    setActiveId(null);
  };

  const activeDeployment = activeId
    ? Object.values(kanbanColumns)
        .flat()
        .find((d) => d.id === activeId)
    : null;

  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900">BMAD Kanban Board</h1>
        <p className="text-gray-600">Drag and drop tasks to update their status</p>
      </div>

      <DndContext
        sensors={sensors}
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
      >
        <div className="grid grid-cols-6 gap-4">
          {statusColumns.map((column) => (
            <KanbanColumn
              key={column.id}
              id={column.id}
              title={column.title}
              color={column.color}
              deployments={kanbanColumns[column.id] || []}
            />
          ))}
        </div>

        <DragOverlay>
          {activeDeployment ? (
            <DeploymentCard deployment={activeDeployment} isDragging />
          ) : null}
        </DragOverlay>
      </DndContext>
    </div>
  );
};