"use client";

import {
  Background,
  BackgroundVariant,
  Controls,
  type Edge,
  MarkerType,
  type Node,
  Position,
  ReactFlow,
} from "@xyflow/react";
import "@xyflow/react/dist/style.css";
import { useTranslations } from "next-intl";

// Custom node styles that match our design system
const nodeStyle = {
  background: "linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%)",
  color: "#fff",
  border: "2px solid #333333",
  borderRadius: "16px",
  padding: "20px 24px",
  fontSize: "14px",
  fontWeight: "600",
  minWidth: "180px",
  boxShadow: "0 4px 20px rgba(0, 0, 0, 0.5)",
};

const highlightNodeStyle = {
  ...nodeStyle,
  border: "2px solid #FD105E",
  boxShadow: "0 4px 30px rgba(253, 16, 94, 0.3)",
};

const serviceNodeStyle = {
  ...nodeStyle,
  minWidth: "160px",
  padding: "16px 20px",
  fontSize: "13px",
};

export function HeadlessGrowthEngine() {
  const t = useTranslations("headlessGrowthEngine");

  const initialNodes: Node[] = [
    // Row 1: Shopify Backend
    {
      id: "shopify-backend",
      type: "input",
      data: {
        label: (
          <div className="text-center">
            <div className="mb-1 font-bold text-lg">
              {t("nodeShopifyBackend")}
            </div>
            <div className="text-neutral-400 text-xs">
              {t("nodeShopifyBackendSub")}
            </div>
          </div>
        ),
      },
      position: { x: 50, y: 50 },
      style: nodeStyle,
      sourcePosition: Position.Right,
    },
    // Row 1: Storefront API (highlighted)
    {
      id: "storefront-api",
      data: {
        label: (
          <div className="text-center">
            <div className="mb-1 font-bold text-[#FD105E] text-lg">
              {t("nodeStorefrontApi")}
            </div>
            <div className="text-neutral-400 text-xs">
              {t("nodeStorefrontApiSub")}
            </div>
          </div>
        ),
      },
      position: { x: 350, y: 50 },
      style: highlightNodeStyle,
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },
    // Row 1: Next.js Frontend (highlighted)
    {
      id: "custom-frontend",
      data: {
        label: (
          <div className="text-center">
            <div className="mb-1 font-bold text-[#FD105E] text-lg">
              {t("nodeNextjsFrontend")}
            </div>
            <div className="text-neutral-400 text-xs">
              {t("nodeNextjsFrontendSub")}
            </div>
          </div>
        ),
      },
      position: { x: 650, y: 50 },
      style: highlightNodeStyle,
      sourcePosition: Position.Bottom,
      targetPosition: Position.Left,
    },

    // Row 2: Third-party Services (left side)
    {
      id: "stripe",
      data: {
        label: (
          <div className="text-center">
            <div className="mb-1 font-semibold text-base">Stripe</div>
            <div className="text-neutral-400 text-xs">
              {t("nodeStripeLabel")}
            </div>
          </div>
        ),
      },
      position: { x: 100, y: 200 },
      style: serviceNodeStyle,
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },
    {
      id: "klaviyo",
      data: {
        label: (
          <div className="text-center">
            <div className="mb-1 font-semibold text-base">Klaviyo</div>
            <div className="text-neutral-400 text-xs">
              {t("nodeKlaviyoLabel")}
            </div>
          </div>
        ),
      },
      position: { x: 100, y: 310 },
      style: serviceNodeStyle,
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },

    // Row 2: Vercel Edge - CENTER (highlighted)
    {
      id: "cdn",
      data: {
        label: (
          <div className="text-center">
            <div className="mb-1 font-semibold text-[#FD105E] text-base">
              Vercel Edge
            </div>
            <div className="text-neutral-400 text-xs">{t("nodeCdnLabel")}</div>
          </div>
        ),
      },
      position: { x: 475, y: 250 },
      style: highlightNodeStyle,
      sourcePosition: Position.Bottom,
      targetPosition: Position.Top,
    },

    // Row 2: Analytics (right side)
    {
      id: "analytics",
      data: {
        label: (
          <div className="text-center">
            <div className="mb-1 font-semibold text-base">Analytics</div>
            <div className="text-neutral-400 text-xs">
              {t("nodeAnalyticsLabel")}
            </div>
          </div>
        ),
      },
      position: { x: 850, y: 250 },
      style: serviceNodeStyle,
      sourcePosition: Position.Bottom,
      targetPosition: Position.Top,
    },

    // Row 3: Customer (bottom center)
    {
      id: "customer",
      type: "output",
      data: {
        label: (
          <div className="text-center">
            <div className="mb-1 font-bold text-[#FD105E] text-lg">
              {t("nodeCustomer")}
            </div>
            <div className="text-neutral-400 text-xs">
              {t("nodeCustomerSub")}
            </div>
          </div>
        ),
      },
      position: { x: 450, y: 450 },
      style: highlightNodeStyle,
      targetPosition: Position.Top,
    },
  ];

  const initialEdges: Edge[] = [
    // Main flow: Shopify -> API -> Frontend
    {
      id: "e1-2",
      source: "shopify-backend",
      target: "storefront-api",
      animated: true,
      style: { stroke: "#FD105E", strokeWidth: 2 },
      label: t("edgeProductsLabel"),
      labelStyle: { fill: "#FD105E", fontWeight: 700, fontSize: 12 },
      labelBgStyle: { fill: "#1a1a1a" },
      markerEnd: { type: MarkerType.ArrowClosed, color: "#FD105E" },
    },
    {
      id: "e2-3",
      source: "storefront-api",
      target: "custom-frontend",
      animated: true,
      style: { stroke: "#FD105E", strokeWidth: 2 },
      label: t("edgeApiCallsLabel"),
      labelStyle: { fill: "#FD105E", fontWeight: 700, fontSize: 12 },
      labelBgStyle: { fill: "#1a1a1a" },
      markerEnd: { type: MarkerType.ArrowClosed, color: "#FD105E" },
    },

    // Third-party integrations -> API Layer
    {
      id: "stripe-api",
      source: "stripe",
      target: "storefront-api",
      animated: true,
      style: { stroke: "#93C5FD", strokeWidth: 2 },
      label: t("edgeCheckoutLabel"),
      labelStyle: { fill: "#93C5FD", fontWeight: 600, fontSize: 11 },
      labelBgStyle: { fill: "#1a1a1a" },
      markerEnd: { type: MarkerType.ArrowClosed, color: "#93C5FD" },
    },
    {
      id: "klaviyo-api",
      source: "klaviyo",
      target: "storefront-api",
      animated: true,
      style: { stroke: "#34D399", strokeWidth: 2 },
      label: t("edgeCustomersLabel"),
      labelStyle: { fill: "#34D399", fontWeight: 600, fontSize: 11 },
      labelBgStyle: { fill: "#1a1a1a" },
      markerEnd: { type: MarkerType.ArrowClosed, color: "#34D399" },
    },

    // Frontend -> Vercel Edge (CENTER)
    {
      id: "frontend-cdn",
      source: "custom-frontend",
      target: "cdn",
      animated: true,
      style: { stroke: "#60A5FA", strokeWidth: 2 },
      label: t("edgeDeployLabel"),
      labelStyle: { fill: "#60A5FA", fontWeight: 600, fontSize: 11 },
      labelBgStyle: { fill: "#1a1a1a" },
      markerEnd: { type: MarkerType.ArrowClosed, color: "#60A5FA" },
    },

    // Frontend -> Analytics
    {
      id: "frontend-analytics",
      source: "custom-frontend",
      target: "analytics",
      animated: true,
      style: { stroke: "#FBBF24", strokeWidth: 2 },
      label: t("edgeEventsLabel"),
      labelStyle: { fill: "#FBBF24", fontWeight: 600, fontSize: 11 },
      labelBgStyle: { fill: "#1a1a1a" },
      markerEnd: { type: MarkerType.ArrowClosed, color: "#FBBF24" },
    },

    // Vercel Edge -> Customer (main path)
    {
      id: "cdn-customer",
      source: "cdn",
      target: "customer",
      animated: true,
      style: { stroke: "#FD105E", strokeWidth: 3 },
      label: t("edgeOptimizedLabel"),
      labelStyle: { fill: "#FD105E", fontWeight: 700, fontSize: 12 },
      labelBgStyle: { fill: "#1a1a1a" },
      markerEnd: { type: MarkerType.ArrowClosed, color: "#FD105E" },
    },

    // Analytics -> Customer
    {
      id: "analytics-customer",
      source: "analytics",
      target: "customer",
      animated: true,
      style: { stroke: "#FBBF24", strokeWidth: 2 },
      label: t("edgeInsightsLabel"),
      labelStyle: { fill: "#FBBF24", fontWeight: 600, fontSize: 11 },
      labelBgStyle: { fill: "#1a1a1a" },
      markerEnd: { type: MarkerType.ArrowClosed, color: "#FBBF24" },
    },
  ];

  return (
    <section className="py-12 sm:py-24 md:py-32" id="headless-growth-engine">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mb-8 text-center md:mb-16">
          <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:mb-6 md:text-5xl">
            {t("headingStart")}
            <br />
            <span className="text-[#FD105E]">{t("headingHighlight")}</span>
          </h2>
          <p className="mx-auto max-w-4xl text-base text-white/70 md:text-lg">
            {t("subtitle")}
          </p>
        </div>

        {/* React Flow Diagram */}
        <div className="h-[350px] w-full overflow-hidden rounded-2xl border border-white/10 sm:h-[450px] md:h-[600px]">
          <ReactFlow
            edges={initialEdges}
            elementsSelectable={false}
            fitView
            fitViewOptions={{ padding: 0.15 }}
            nodes={initialNodes}
            nodesConnectable={false}
            nodesDraggable={false}
            proOptions={{ hideAttribution: true }}
          >
            <Background
              color="#333333"
              gap={16}
              size={1}
              variant={BackgroundVariant.Dots}
            />
            <Controls
              showFitView={false}
              showInteractive={false}
              showZoom={false}
            />
          </ReactFlow>
        </div>

        {/* Integration Pills */}
        <div className="mx-auto mt-8 flex max-w-4xl flex-wrap justify-center gap-2 md:mt-12 md:gap-3">
          <div className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-white/70 backdrop-blur-sm">
            <span className="font-semibold text-[#93C5FD]">Stripe</span>{" "}
            {t("pillStripe")}
          </div>
          <div className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-white/70 backdrop-blur-sm">
            <span className="font-semibold text-[#34D399]">Klaviyo</span>{" "}
            {t("pillKlaviyo")}
          </div>
          <div className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-white/70 backdrop-blur-sm">
            <span className="font-semibold text-[#FD105E]">Vercel Edge</span>{" "}
            {t("pillVercel")}
          </div>
          <div className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-white/70 backdrop-blur-sm">
            <span className="font-semibold text-[#FBBF24]">Analytics</span>{" "}
            {t("pillAnalytics")}
          </div>
        </div>
      </div>
    </section>
  );
}