"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",
  generateCopy: "generate-copy",
  qualityCheck: "quality-check",
  decision: "decision",
  regenerate: "regenerate",
  complete: "complete",
};

const nodes = [
  {
    id: nodeIds.start,
    type: "workflow",
    position: { x: 0, y: 200 },
    data: {
      label: "Start Workflow",
      description: "Initialize sequential workflow",
      handles: { target: false, source: true },
      content: "Input: Marketing copy request",
      footer: "Setup: globalThis.fetch = fetch",
    },
  },
  {
    id: nodeIds.generateCopy,
    type: "workflow",
    position: { x: 500, y: 200 },
    data: {
      label: "Generate Marketing Copy",
      description: "Create persuasive copy",
      handles: { target: true, source: true },
      content:
        "Write persuasive marketing copy focusing on benefits and emotional appeal",
      footer: "Model: openai/o4-mini • Step 1",
    },
  },
  {
    id: nodeIds.qualityCheck,
    type: "workflow",
    position: { x: 1000, y: 200 },
    data: {
      label: "Quality Check",
      description: "Evaluate copy metrics",
      handles: { target: true, source: true },
      content: "Check: hasCallToAction, emotionalAppeal (1-10), clarity (1-10)",
      footer: "Model: openai/o4-mini • Step 2",
    },
  },
  {
    id: nodeIds.decision,
    type: "workflow",
    position: { x: 1500, y: 200 },
    data: {
      label: "Quality Threshold",
      description: "Meets quality standards?",
      handles: { target: true, source: true },
      content: "hasCallToAction && emotionalAppeal ≥ 7 && clarity ≥ 7",
      footer: "Conditional check",
    },
  },
  {
    id: nodeIds.regenerate,
    type: "workflow",
    position: { x: 1000, y: -120 },
    data: {
      label: "Regenerate Copy",
      description: "Improve based on feedback",
      handles: { target: true, source: true },
      content:
        "Rewrite with specific improvements: CTA, emotional appeal, clarity",
      footer: "Model: openai/o4-mini • Conditional",
    },
  },
  {
    id: nodeIds.complete,
    type: "workflow",
    position: { x: 2000, y: 200 },
    data: {
      label: "Complete",
      description: "Workflow finished",
      handles: { target: true, source: false },
      content: "Marketing copy meets quality standards",
      footer: "Status: Success",
    },
  },
];

const edges = [
  {
    id: "edge1",
    source: nodeIds.start,
    target: nodeIds.generateCopy,
    type: "animated",
  },
  {
    id: "edge2",
    source: nodeIds.generateCopy,
    target: nodeIds.qualityCheck,
    type: "animated",
  },
  {
    id: "edge3",
    source: nodeIds.qualityCheck,
    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.regenerate,
    type: "temporary",
    label: "Needs Improvement",
  },
  {
    id: "edge6",
    source: nodeIds.regenerate,
    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">Sequential Pattern</h3>
        <p className="text-muted-foreground text-xs">
          Step-by-step execution with quality gates
        </p>
        <div className="flex gap-1">
          <Badge variant="secondary">Sequential</Badge>
          <Badge variant="secondary">Quality Check</Badge>
        </div>
      </div>
    </Panel>
  </Canvas>
);

export default Example;