"use client";

import { Canvas } from "@/components/ai-elements/canvas";
import { Connection } from "@/components/ai-elements/connection";
import { Controls } from "@/components/ai-elements/controls";
import { Edge } from "@/components/ai-elements/edge";
import {
  Node,
  NodeContent,
  NodeDescription,
  NodeFooter,
  NodeHeader,
  NodeTitle,
} from "@/components/ai-elements/node";
import { Panel } from "@/components/ai-elements/panel";
import { Badge } from "@/components/ui/badge";

const nodeIds = {
  complete: "complete",
  orchestrator: "orchestrator",
  start: "start",
  workerCreate: "worker-create",
  workerDelete: "worker-delete",
  workerModify: "worker-modify",
};

const nodes = [
  {
    data: {
      content: "Input: Feature Request",
      description: "Initialize orchestrator workflow",
      footer: "Setup: globalThis.fetch = fetch",
      handles: { source: true, target: false },
      label: "Start Workflow",
    },
    id: nodeIds.start,
    position: { x: 0, y: 200 },
    type: "workflow",
  },
  {
    data: {
      content:
        "Generate implementation plan with files array (purpose, filePath, changeType)",
      description: "Plan the implementation",
      footer: "Model: openai/o4-mini • Step 1",
      handles: { source: true, target: true },
      label: "Orchestrator",
    },
    id: nodeIds.orchestrator,
    position: { x: 500, y: 200 },
    type: "workflow",
  },
  {
    data: {
      content: "Expert at implementing new files following best practices",
      description: "Implement new files",
      footer: "Parallel execution",
      handles: { source: true, target: true },
      label: "Worker: Create",
    },
    id: nodeIds.workerCreate,
    position: { x: 1000, y: 0 },
    type: "workflow",
  },
  {
    data: {
      content: "Expert at modifying code while maintaining consistency",
      description: "Update existing code",
      footer: "Parallel execution",
      handles: { source: true, target: true },
      label: "Worker: Modify",
    },
    id: nodeIds.workerModify,
    position: { x: 1000, y: 200 },
    type: "workflow",
  },
  {
    data: {
      content: "Expert at safely removing code without breaking changes",
      description: "Safely remove code",
      footer: "Parallel execution",
      handles: { source: true, target: true },
      label: "Worker: Delete",
    },
    id: nodeIds.workerDelete,
    position: { x: 1000, y: 400 },
    type: "workflow",
  },
  {
    data: {
      content: "All file changes executed successfully",
      description: "Workflow finished",
      footer: "Status: Success",
      handles: { source: false, target: true },
      label: "Complete",
    },
    id: nodeIds.complete,
    position: { x: 1500, y: 200 },
    type: "workflow",
  },
];

const edges = [
  {
    id: "edge1",
    source: nodeIds.start,
    target: nodeIds.orchestrator,
    type: "animated",
  },
  {
    id: "edge2",
    source: nodeIds.orchestrator,
    target: nodeIds.workerCreate,
    type: "animated",
  },
  {
    id: "edge3",
    source: nodeIds.orchestrator,
    target: nodeIds.workerModify,
    type: "animated",
  },
  {
    id: "edge4",
    source: nodeIds.orchestrator,
    target: nodeIds.workerDelete,
    type: "animated",
  },
  {
    id: "edge5",
    source: nodeIds.workerCreate,
    target: nodeIds.complete,
    type: "animated",
  },
  {
    id: "edge6",
    source: nodeIds.workerModify,
    target: nodeIds.complete,
    type: "animated",
  },
  {
    id: "edge7",
    source: nodeIds.workerDelete,
    target: nodeIds.complete,
    type: "animated",
  },
];

const nodeTypes = {
  workflow: ({
    data,
  }: {
    data: {
      label: string;
      description: string;
      handles: { target: boolean; source: boolean };
      content: string;
      footer: string;
    };
  }) => (
    <Node handles={data.handles}>
      <NodeHeader>
        <NodeTitle>{data.label}</NodeTitle>
        <NodeDescription>{data.description}</NodeDescription>
      </NodeHeader>
      <NodeContent>
        <p className="text-sm">{data.content}</p>
      </NodeContent>
      <NodeFooter>
        <p className="text-xs text-muted-foreground">{data.footer}</p>
      </NodeFooter>
    </Node>
  ),
};

const edgeTypes = {
  animated: Edge.Animated,
  temporary: Edge.Temporary,
};

const Example = () => (
  <Canvas
    connectionLineComponent={Connection}
    edges={edges}
    edgeTypes={edgeTypes}
    fitView
    nodes={nodes}
    nodeTypes={nodeTypes}
  >
    <Controls />
    <Panel position="top-left">
      <div className="flex flex-col gap-2">
        <h3 className="text-sm font-semibold">Orchestrator-Worker Pattern</h3>
        <p className="text-xs text-muted-foreground">
          Parallel execution of specialized workers
        </p>
        <div className="flex gap-1">
          <Badge variant="secondary">Orchestrator</Badge>
          <Badge variant="secondary">Workers</Badge>
          <Badge variant="secondary">Parallel</Badge>
        </div>
      </div>
    </Panel>
  </Canvas>
);

export default Example;

"use client";

import { Canvas } from "@/components/ai-elements/canvas";
import { Connection } from "@/components/ai-elements/connection";
import { Controls } from "@/components/ai-elements/controls";
import { Edge } from "@/components/ai-elements/edge";
import {
  Node,
  NodeContent,
  NodeDescription,
  NodeFooter,
  NodeHeader,
  NodeTitle,
} from "@/components/ai-elements/node";
import { Panel } from "@/components/ai-elements/panel";
import { Badge } from "@/components/ui/badge";

const nodeIds = {
  complete: "complete",
  orchestrator: "orchestrator",
  start: "start",
  workerCreate: "worker-create",
  workerDelete: "worker-delete",
  workerModify: "worker-modify",
};

const nodes = [
  {
    data: {
      content: "Input: Feature Request",
      description: "Initialize orchestrator workflow",
      footer: "Setup: globalThis.fetch = fetch",
      handles: { source: true, target: false },
      label: "Start Workflow",
    },
    id: nodeIds.start,
    position: { x: 0, y: 200 },
    type: "workflow",
  },
  {
    data: {
      content:
        "Generate implementation plan with files array (purpose, filePath, changeType)",
      description: "Plan the implementation",
      footer: "Model: openai/o4-mini • Step 1",
      handles: { source: true, target: true },
      label: "Orchestrator",
    },
    id: nodeIds.orchestrator,
    position: { x: 500, y: 200 },
    type: "workflow",
  },
  {
    data: {
      content: "Expert at implementing new files following best practices",
      description: "Implement new files",
      footer: "Parallel execution",
      handles: { source: true, target: true },
      label: "Worker: Create",
    },
    id: nodeIds.workerCreate,
    position: { x: 1000, y: 0 },
    type: "workflow",
  },
  {
    data: {
      content: "Expert at modifying code while maintaining consistency",
      description: "Update existing code",
      footer: "Parallel execution",
      handles: { source: true, target: true },
      label: "Worker: Modify",
    },
    id: nodeIds.workerModify,
    position: { x: 1000, y: 200 },
    type: "workflow",
  },
  {
    data: {
      content: "Expert at safely removing code without breaking changes",
      description: "Safely remove code",
      footer: "Parallel execution",
      handles: { source: true, target: true },
      label: "Worker: Delete",
    },
    id: nodeIds.workerDelete,
    position: { x: 1000, y: 400 },
    type: "workflow",
  },
  {
    data: {
      content: "All file changes executed successfully",
      description: "Workflow finished",
      footer: "Status: Success",
      handles: { source: false, target: true },
      label: "Complete",
    },
    id: nodeIds.complete,
    position: { x: 1500, y: 200 },
    type: "workflow",
  },
];

const edges = [
  {
    id: "edge1",
    source: nodeIds.start,
    target: nodeIds.orchestrator,
    type: "animated",
  },
  {
    id: "edge2",
    source: nodeIds.orchestrator,
    target: nodeIds.workerCreate,
    type: "animated",
  },
  {
    id: "edge3",
    source: nodeIds.orchestrator,
    target: nodeIds.workerModify,
    type: "animated",
  },
  {
    id: "edge4",
    source: nodeIds.orchestrator,
    target: nodeIds.workerDelete,
    type: "animated",
  },
  {
    id: "edge5",
    source: nodeIds.workerCreate,
    target: nodeIds.complete,
    type: "animated",
  },
  {
    id: "edge6",
    source: nodeIds.workerModify,
    target: nodeIds.complete,
    type: "animated",
  },
  {
    id: "edge7",
    source: nodeIds.workerDelete,
    target: nodeIds.complete,
    type: "animated",
  },
];

const nodeTypes = {
  workflow: ({
    data,
  }: {
    data: {
      label: string;
      description: string;
      handles: { target: boolean; source: boolean };
      content: string;
      footer: string;
    };
  }) => (
    <Node handles={data.handles}>
      <NodeHeader>
        <NodeTitle>{data.label}</NodeTitle>
        <NodeDescription>{data.description}</NodeDescription>
      </NodeHeader>
      <NodeContent>
        <p className="text-sm">{data.content}</p>
      </NodeContent>
      <NodeFooter>
        <p className="text-xs text-muted-foreground">{data.footer}</p>
      </NodeFooter>
    </Node>
  ),
};

const edgeTypes = {
  animated: Edge.Animated,
  temporary: Edge.Temporary,
};

const Example = () => (
  <Canvas
    connectionLineComponent={Connection}
    edges={edges}
    edgeTypes={edgeTypes}
    fitView
    nodes={nodes}
    nodeTypes={nodeTypes}
  >
    <Controls />
    <Panel position="top-left">
      <div className="flex flex-col gap-2">
        <h3 className="text-sm font-semibold">Orchestrator-Worker Pattern</h3>
        <p className="text-xs text-muted-foreground">
          Parallel execution of specialized workers
        </p>
        <div className="flex gap-1">
          <Badge variant="secondary">Orchestrator</Badge>
          <Badge variant="secondary">Workers</Badge>
          <Badge variant="secondary">Parallel</Badge>
        </div>
      </div>
    </Panel>
  </Canvas>
);

export default Example;