import { useMemo } from "react";
import type { DirectiveStep } from "../../lib/api";
import { StepNode } from "./StepNode";

interface DirectiveDAGProps {
  steps: DirectiveStep[];
  onComplete?: (stepId: string) => void;
  onFail?: (stepId: string) => void;
  onSkip?: (stepId: string) => void;
}

interface Layer {
  steps: DirectiveStep[];
}

function topoSort(steps: DirectiveStep[]): Layer[] {
  if (steps.length === 0) return [];

  // Group steps by orderIndex — each unique orderIndex is one execution phase
  const byOrder = new Map<number, DirectiveStep[]>();
  for (const step of steps) {
    const group = byOrder.get(step.orderIndex) ?? [];
    group.push(step);
    byOrder.set(step.orderIndex, group);
  }

  // Sort groups by ascending orderIndex
  const sortedKeys = [...byOrder.keys()].sort((a, b) => a - b);
  return sortedKeys.map((key) => ({
    steps: byOrder.get(key)!.sort((a, b) => a.name.localeCompare(b.name)),
  }));
}

export function DirectiveDAG({ steps, onComplete, onFail, onSkip }: DirectiveDAGProps) {
  const layers = useMemo(() => topoSort(steps), [steps]);

  if (steps.length === 0) {
    return (
      <div className="text-center py-8 text-[#7788aa] font-mono text-sm">
        No steps yet. Add steps to build the DAG.
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-4 items-center py-4">
      {layers.map((layer, layerIdx) => (
        <div key={layerIdx}>
          {layerIdx > 0 && (
            <div className="flex justify-center py-1">
              <div className="w-px h-4 bg-[#2a3a5a]" />
            </div>
          )}
          <div className="flex flex-wrap gap-3 justify-center">
            {layer.steps.map((step) => (
              <StepNode
                key={step.id}
                step={step}
                onComplete={onComplete ? () => onComplete(step.id) : undefined}
                onFail={onFail ? () => onFail(step.id) : undefined}
                onSkip={onSkip ? () => onSkip(step.id) : undefined}
              />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}