"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",
};

function useNodes(t: ReturnType<typeof useTranslations>): Node[] {
  return [
    // Row 1: WordPress CMS
    {
      id: "wordpress-cms",
      type: "input",
      data: {
        label: (
          <div className="text-center">
            <div className="mb-1 font-bold text-lg">
              {t("wordpressCmsLabel")}
            </div>
            <div className="text-neutral-400 text-xs">
              {t("wordpressCmsSubLabel")}
            </div>
          </div>
        ),
      },
      position: { x: 50, y: 50 },
      style: nodeStyle,
      sourcePosition: Position.Right,
    },
    // Row 1: API Layer (highlighted)
    {
      id: "api-layer",
      data: {
        label: (
          <div className="text-center">
            <div className="mb-1 font-bold text-[#FD105E] text-lg">
              {t("apiLayerLabel")}
            </div>
            <div className="text-neutral-400 text-xs">
              {t("apiLayerSubLabel")}
            </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("nextjsFrontendLabel")}
            </div>
            <div className="text-neutral-400 text-xs">
              {t("nextjsFrontendSubLabel")}
            </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">
              {t("stripeLabel")}
            </div>
            <div className="text-neutral-400 text-xs">
              {t("stripeSubLabel")}
            </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">
              {t("klaviyoLabel")}
            </div>
            <div className="text-neutral-400 text-xs">
              {t("klaviyoSubLabel")}
            </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">
              {t("vercelEdgeLabel")}
            </div>
            <div className="text-neutral-400 text-xs">
              {t("vercelEdgeSubLabel")}
            </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">
              {t("analyticsLabel")}
            </div>
            <div className="text-neutral-400 text-xs">
              {t("analyticsSubLabel")}
            </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("customerLabel")}
            </div>
            <div className="text-neutral-400 text-xs">
              {t("customerSubLabel")}
            </div>
          </div>
        ),
      },
      position: { x: 450, y: 450 },
      style: highlightNodeStyle,
      targetPosition: Position.Top,
    },
  ];
}

function useEdges(t: ReturnType<typeof useTranslations>): Edge[] {
  return [
    // Main flow: WordPress -> API -> Frontend
    {
      id: "e1-2",
      source: "wordpress-cms",
      target: "api-layer",
      animated: true,
      style: { stroke: "#FD105E", strokeWidth: 2 },
      label: t("edgeContentLabel"),
      labelStyle: { fill: "#FD105E", fontWeight: 700, fontSize: 12 },
      labelBgStyle: { fill: "#1a1a1a" },
      markerEnd: { type: MarkerType.ArrowClosed, color: "#FD105E" },
    },
    {
      id: "e2-3",
      source: "api-layer",
      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: "api-layer",
      animated: true,
      style: { stroke: "#93C5FD", strokeWidth: 2 },
      label: t("edgePaymentsLabel"),
      labelStyle: { fill: "#93C5FD", fontWeight: 600, fontSize: 11 },
      labelBgStyle: { fill: "#1a1a1a" },
      markerEnd: { type: MarkerType.ArrowClosed, color: "#93C5FD" },
    },
    {
      id: "klaviyo-api",
      source: "klaviyo",
      target: "api-layer",
      animated: true,
      style: { stroke: "#34D399", strokeWidth: 2 },
      label: t("edgeProfilesLabel"),
      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" },
    },
  ];
}

export function WordPressSolution() {
  const t = useTranslations("wordpressSolution");
  const nodes = useNodes(t);
  const edges = useEdges(t);

  return (
    <section className="py-12 sm:py-24 md:py-32" id="wordpress-solution">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Section 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("title")}
            <span className="text-[#FD105E]">{t("titleHighlight")}</span>
          </h2>
          <p className="mx-auto max-w-4xl text-base text-white/70 md:text-lg">
            {t("description")}
          </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={edges}
            elementsSelectable={false}
            fitView
            fitViewOptions={{ padding: 0.15 }}
            nodes={nodes}
            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-12 flex max-w-4xl flex-wrap justify-center 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]">
              {t("stripeLabel")}
            </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]">
              {t("klaviyoLabel")}
            </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]">
              {t("vercelEdgeLabel")}
            </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]">
              {t("analyticsLabel")}
            </span>{" "}
            {t("pillAnalytics")}
          </div>
        </div>
      </div>
    </section>
  );
}