"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 = {
  start: "start",
  securityReview: "security-review",
  performanceReview: "performance-review",
  maintainabilityReview: "maintainability-review",
  aggregate: "aggregate",
  complete: "complete",
};

const nodes = [
  {
    id: nodeIds.start,
    type: "workflow",
    position: { x: 0, y: 200 },
    data: {
      label: "Start Workflow",
      description: "Initialize parallel review workflow",
      handles: { target: false, source: true },
      content: "Input: Code to review",
      footer: "Setup: globalThis.fetch = fetch",
    },
  },
  {
    id: nodeIds.securityReview,
    type: "workflow",
    position: { x: 500, y: 0 },
    data: {
      label: "Security Review",
      description: "Identify vulnerabilities and risks",
      handles: { target: true, source: true },
      content: "Check: vulnerabilities, injection risks, authentication issues",
      footer: "Model: openai/o4-mini • Parallel",
    },
  },
  {
    id: nodeIds.performanceReview,
    type: "workflow",
    position: { x: 500, y: 200 },
    data: {
      label: "Performance Review",
      description: "Identify bottlenecks and optimizations",
      handles: { target: true, source: true },
      content: "Check: bottlenecks, memory leaks, optimization opportunities",
      footer: "Model: openai/o4-mini • Parallel",
    },
  },
  {
    id: nodeIds.maintainabilityReview,
    type: "workflow",
    position: { x: 500, y: 400 },
    data: {
      label: "Maintainability Review",
      description: "Assess code quality and structure",
      handles: { target: true, source: true },
      content: "Check: structure, readability, best practices, quality score",
      footer: "Model: openai/o4-mini • Parallel",
    },
  },
  {
    id: nodeIds.aggregate,
    type: "workflow",
    position: { x: 1000, y: 200 },
    data: {
      label: "Aggregate Summary",
      description: "Synthesize review results",
      handles: { target: true, source: true },
      content: "Combine security, performance, and maintainability reviews",
      footer: "Model: openai/o4-mini • Technical lead",
    },
  },
  {
    id: nodeIds.complete,
    type: "workflow",
    position: { x: 1500, y: 200 },
    data: {
      label: "Complete",
      description: "Workflow finished",
      handles: { target: true, source: false },
      content: "All reviews completed and summarized",
      footer: "Status: Success",
    },
  },
];

const edges = [
  {
    id: "edge1",
    source: nodeIds.start,
    target: nodeIds.securityReview,
    type: "animated",
  },
  {
    id: "edge2",
    source: nodeIds.start,
    target: nodeIds.performanceReview,
    type: "animated",
  },
  {
    id: "edge3",
    source: nodeIds.start,
    target: nodeIds.maintainabilityReview,
    type: "animated",
  },
  {
    id: "edge4",
    source: nodeIds.securityReview,
    target: nodeIds.aggregate,
    type: "animated",
  },
  {
    id: "edge5",
    source: nodeIds.performanceReview,
    target: nodeIds.aggregate,
    type: "animated",
  },
  {
    id: "edge6",
    source: nodeIds.maintainabilityReview,
    target: nodeIds.aggregate,
    type: "animated",
  },
  {
    id: "edge7",
    source: nodeIds.aggregate,
    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-muted-foreground text-xs">{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="font-semibold text-sm">Parallel Review Pattern</h3>
        <p className="text-muted-foreground text-xs">
          Concurrent code reviews with aggregation
        </p>
        <div className="flex gap-1">
          <Badge variant="secondary">Security</Badge>
          <Badge variant="secondary">Performance</Badge>
          <Badge variant="secondary">Maintainability</Badge>
        </div>
      </div>
    </Panel>
  </Canvas>
);

export default Example;