import { useMemo, useState } from "react";
import type { ContractSummary, ContractPhase } from "../../lib/api";
import { PhaseColumn } from "./PhaseColumn";
import { ContractContextMenu } from "../contracts/ContractContextMenu";

interface WorkflowBoardProps {
  contracts: ContractSummary[];
  onContractClick: (contractId: string) => void;
  onPhaseChange: (contractId: string, newPhase: ContractPhase) => void;
  onMarkComplete?: (contract: ContractSummary) => void;
  onMarkActive?: (contract: ContractSummary) => void;
  onArchive?: (contract: ContractSummary) => void;
  onDelete?: (contract: ContractSummary) => void;
  onGoToSupervisor?: (contract: ContractSummary) => void;
}

const phases: ContractPhase[] = ["research", "specify", "plan", "execute", "review"];

export function WorkflowBoard({
  contracts,
  onContractClick,
  onPhaseChange,
  onMarkComplete,
  onMarkActive,
  onArchive,
  onDelete,
  onGoToSupervisor,
}: WorkflowBoardProps) {
  const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(null);
  const [contextMenuContract, setContextMenuContract] = useState<ContractSummary | null>(null);

  const handleContextMenu = (e: React.MouseEvent, contract: ContractSummary) => {
    e.preventDefault();
    e.stopPropagation(); // Prevent interference with drag-and-drop
    setContextMenuPosition({ x: e.clientX, y: e.clientY });
    setContextMenuContract(contract);
  };

  const closeContextMenu = () => {
    setContextMenuPosition(null);
    setContextMenuContract(null);
  };

  // Group contracts by phase
  const contractsByPhase = useMemo(() => {
    const grouped: Record<ContractPhase, ContractSummary[]> = {
      research: [],
      specify: [],
      plan: [],
      execute: [],
      review: [],
    };

    for (const contract of contracts) {
      const phase = contract.phase as ContractPhase;
      if (grouped[phase]) {
        grouped[phase].push(contract);
      } else {
        // Default to research if unknown phase
        grouped.research.push(contract);
      }
    }

    return grouped;
  }, [contracts]);

  return (
    <>
      <div className="flex gap-2 h-full overflow-x-auto">
        {phases.map((phase) => (
          <PhaseColumn
            key={phase}
            phase={phase}
            contracts={contractsByPhase[phase]}
            onContractClick={onContractClick}
            onDrop={onPhaseChange}
            onContextMenu={handleContextMenu}
          />
        ))}
      </div>

      {/* Context Menu */}
      {contextMenuPosition && contextMenuContract && (
        <ContractContextMenu
          x={contextMenuPosition.x}
          y={contextMenuPosition.y}
          contract={contextMenuContract}
          onClose={closeContextMenu}
          onMarkComplete={() => onMarkComplete?.(contextMenuContract)}
          onMarkActive={() => onMarkActive?.(contextMenuContract)}
          onArchive={() => onArchive?.(contextMenuContract)}
          onDelete={() => onDelete?.(contextMenuContract)}
          onGoToSupervisor={() => onGoToSupervisor?.(contextMenuContract)}
        />
      )}
    </>
  );
}