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

interface WorkflowBoardProps {
  contracts: ContractSummary[];
  onContractClick: (contractId: string) => void;
  onPhaseChange: (contractId: string, newPhase: ContractPhase) => void;
}

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

export function WorkflowBoard({
  contracts,
  onContractClick,
  onPhaseChange,
}: WorkflowBoardProps) {
  // 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}
        />
      ))}
    </div>
  );
}