"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",
  translate: "translate",
  evaluate: "evaluate",
  decision: "decision",
  optimize: "optimize",
  complete: "complete",
};

const nodes = [
  {
    id: nodeIds.start,
    type: "workflow",
    position: { x: 0, y: 200 },
    data: {
      label: "Start Workflow",
      description: "Initialize translation workflow",
      handles: { target: false, source: true },
      content: "Input: Text + Target Language (es)",
      footer: "Model: GPT-4o-mini",
    },
  },
  {
    id: nodeIds.translate,
    type: "workflow",
    position: { x: 500, y: 200 },
    data: {
      label: "Initial Translation",
      description: "Generate first translation",
      handles: { target: true, source: true },
      content: "Translate text preserving tone and cultural nuances",
      footer: "Step 1 • Fast model",
    },
  },
  {
    id: nodeIds.evaluate,
    type: "workflow",
    position: { x: 1000, y: 200 },
    data: {
      label: "Evaluate Quality",
      description: "Assess translation quality",
      handles: { target: true, source: true },
      content: "Check: Quality Score, Tone, Nuance, Cultural Accuracy, Issues",
      footer: "Model: GPT-4o",
    },
  },
  {
    id: nodeIds.decision,
    type: "workflow",
    position: { x: 1500, y: 200 },
    data: {
      label: "Quality Check",
      description: "Meets quality threshold?",
      handles: { target: true, source: true },
      content: "Score ≥ 8 && Tone ✓ && Nuance ✓ && Cultural ✓",
      footer: "Max iterations: 3",
    },
  },
  {
    id: nodeIds.optimize,
    type: "workflow",
    position: { x: 550, y: -120 },
    data: {
      label: "Optimize Translation",
      description: "Improve based on feedback",
      handles: { target: true, source: true },
      content: "Apply suggestions and fix specific issues",
      footer: "Model: GPT-4o",
    },
  },
  {
    id: nodeIds.complete,
    type: "workflow",
    position: { x: 2000, y: 200 },
    data: {
      label: "Complete",
      description: "Workflow finished",
      handles: { target: true, source: false },
      content: "Final translation meets all quality criteria",
      footer: "Status: Success",
    },
  },
];

const edges = [
  {
    id: "edge1",
    source: nodeIds.start,
    target: nodeIds.translate,
    type: "animated",
  },
  {
    id: "edge2",
    source: nodeIds.translate,
    target: nodeIds.evaluate,
    type: "animated",
  },
  {
    id: "edge3",
    source: nodeIds.evaluate,
    target: nodeIds.decision,
    type: "animated",
  },
  {
    id: "edge4",
    source: nodeIds.decision,
    target: nodeIds.complete,
    type: "animated",
    label: "Quality Met",
  },
  {
    id: "edge5",
    source: nodeIds.decision,
    target: nodeIds.optimize,
    type: "temporary",
    label: "Needs Improvement",
  },
  {
    id: "edge6",
    source: nodeIds.optimize,
    target: nodeIds.evaluate,
    type: "animated",
    label: "Re-evaluate",
  },
];

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">Evaluator-Optimizer Pattern</h3>
        <p className="text-muted-foreground text-xs">
          Iterative quality improvement loop
        </p>
        <div className="flex gap-1">
          <Badge variant="secondary">Translation</Badge>
          <Badge variant="secondary">AI Evaluation</Badge>
        </div>
      </div>
    </Panel>
  </Canvas>
);

export default Example;