"use client";

import { motion } from "motion/react";
import type { RefObject } from "react";
import React, { useRef } from "react";
import { useEffect, useId, useState } from "react";

import { Globe } from "@/components/magicui/globe";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface Feature251Props {
  className?: string;
}

const Feature251 = ({ className }: Feature251Props) => {
  const containerRef1 = useRef<HTMLDivElement>(null);
  const containerRef2 = useRef<HTMLDivElement>(null);
  const div1Ref = useRef<HTMLDivElement>(null);
  const div2Ref = useRef<HTMLDivElement>(null);
  const div3Ref = useRef<HTMLDivElement>(null);
  const div4Ref = useRef<HTMLDivElement>(null);
  const div5Ref = useRef<HTMLDivElement>(null);
  const div6Ref = useRef<HTMLDivElement>(null);
  const div7Ref = useRef<HTMLDivElement>(null);
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-5">
          <Card className="relative h-96 w-166 rounded-3xl border">
            <CardHeader className="text-start">
              <h3 className="text-xl font-semibold tracking-tight text-balance">
                تریگر رویداد
              </h3>
              <p className="mt-2 text-pretty text-muted-foreground/70">
                شرط هوشمند
              </p>
            </CardHeader>
            <CardContent ref={containerRef1} className="relative ms-5">
              <IconCard
                ref={div1Ref as React.RefObject<HTMLDivElement>}
                src="/block-media/shadcnblocks/block/logos/google-icon.svg"
                imageAlt="سازنده گردش‌کار"
                className="mb-3"
              />
              <IconCard
                ref={div2Ref as React.RefObject<HTMLDivElement>}
                src="/block-media/shadcnblocks/block/logos/figma-icon.svg"
                imageAlt="نمای اتوماسیون فرایند"
                className="translate-x-32 rtl:-translate-x-32"
              />
              <IconCard
                ref={div3Ref as React.RefObject<HTMLDivElement>}
                src="/block-media/shadcnblocks/block/logos/notion-icon.svg"
                imageAlt="لاگ اجرای خودکار"
                className="mt-3"
              />
              <IconCard
                ref={div5Ref as React.RefObject<HTMLDivElement>}
                src="/block-media/shadcnblocks/block/block-1.svg"
                imageAlt="سازنده گردش‌کار"
                className="absolute end-12 top-1/2 -translate-y-1/2"
              />
              <div
                ref={div4Ref as React.RefObject<HTMLDivElement>}
                className="absolute top-1/2 left-1/2 z-99 h-4 w-4 -translate-y-1/2 rounded-full border bg-muted"
              />
              <AnimatedBeam
                duration={3}
                containerRef={containerRef1}
                fromRef={div1Ref}
                curvature={40}
                toRef={div4Ref}
              />
              <AnimatedBeam
                duration={3}
                containerRef={containerRef1}
                fromRef={div2Ref}
                toRef={div4Ref}
              />
              <AnimatedBeam
                duration={3}
                containerRef={containerRef1}
                fromRef={div3Ref}
                curvature={-40}
                toRef={div4Ref}
              />
              <AnimatedBeam
                duration={3}
                containerRef={containerRef1}
                fromRef={div4Ref}
                toRef={div5Ref}
              />
            </CardContent>
          </Card>

          <Card className="h-96 w-full rounded-3xl border md:w-83">
            <CardHeader className="text-start">
              <h3 className="text-xl font-semibold tracking-tight text-balance">
                اعلان خودکار
              </h3>
              <p className="text-pretty text-muted-foreground/70">
                تأیید چندمرحله‌ای
              </p>
            </CardHeader>
            <CardContent
              ref={containerRef2}
              className="relative flex h-full flex-col items-center justify-between"
            >
              <IconCard
                ref={div6Ref as React.RefObject<HTMLDivElement>}
                src="/block-media/shadcnblocks/block/block-1.svg"
                imageAlt="نمای اتوماسیون فرایند"
                className="mb-3"
              />

              <IconCard
                ref={div7Ref as React.RefObject<HTMLDivElement>}
                src="/block-media/shadcnblocks/block/logos/g2-icon.svg"
                imageAlt="لاگ اجرای خودکار"
                className="mt-3"
              />

              <AnimatedBeam
                duration={3}
                containerRef={containerRef2}
                fromRef={div6Ref as React.RefObject<HTMLDivElement>}
                direction="vertical"
                curvature={40}
                toRef={div7Ref as React.RefObject<HTMLDivElement>}
              />
            </CardContent>
          </Card>

          <Card className="relative flex h-96 w-full flex-col rounded-3xl border md:w-[330px]">
            <CardContent>
              <img
                src="/block-media/shadcnblocks/block/block-1.svg"
                className="mt-5 size-32"
                alt="سازنده گردش‌کار"
              />
            </CardContent>
            <CardHeader className="mt-auto text-start">
              <h3 className="text-xl font-semibold tracking-tight text-balance">
                لاگ اجرا
              </h3>
              <p className="text-pretty text-muted-foreground/70">
                قالب آماده
              </p>
            </CardHeader>
          </Card>
          <Card className="relative flex h-96 w-166 flex-col overflow-hidden rounded-3xl border">
            <CardHeader className="relative z-10 shrink-0 text-start">
              <h3 className="text-xl font-semibold tracking-tight text-balance">
                اتصال ابزار
              </h3>
              <p className="text-pretty text-muted-foreground/70">
                سازنده گردش‌کار
              </p>
            </CardHeader>

            <div className="relative mt-auto h-56 w-full overflow-hidden">
              <Globe className="-top-8" />
            </div>
          </Card>
        </div>
      </div>
    </section>
  );
};

export { Feature251 };

const IconCard = ({
  src,
  imageAlt,
  className,
  ref,
}: {
  src: string;
  imageAlt: string;
  className?: string;
  ref: React.RefObject<HTMLDivElement>;
}) => {
  return (
    <div
      ref={ref}
      className={cn(
        "relative z-10 flex size-14 items-center justify-center rounded-xl bg-muted",
        className,
      )}
    >
      <img src={src} alt={imageAlt} className="size-5" />
      <HandleIcon
        aria-hidden
        className="absolute -top-3 left-1/2 size-6 -translate-x-1/2"
      />
      <HandleIcon
        aria-hidden
        className="absolute -bottom-3 left-1/2 size-6 -translate-x-1/2"
      />
      <HandleIcon
        aria-hidden
        className="absolute top-1/2 -start-3 size-6 -translate-y-1/2 rotate-90"
      />
      <HandleIcon
        aria-hidden
        className="absolute top-1/2 -end-3 size-6 -translate-y-1/2 rotate-90"
      />
    </div>
  );
};

const HandleIcon = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg
      {...props}
      width="14"
      height="5"
      viewBox="0 0 14 5"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <line
        x1="0.543457"
        y1="0.972656"
        x2="0.543457"
        y2="4.625"
        stroke="black"
        strokeOpacity="0.2"
      />
      <line
        x1="4.54346"
        y1="0.972656"
        x2="4.54346"
        y2="4.625"
        stroke="black"
        strokeOpacity="0.2"
      />
      <line
        x1="8.54346"
        y1="0.972656"
        x2="8.54346"
        y2="4.625"
        stroke="black"
        strokeOpacity="0.2"
      />
      <line
        x1="12.5435"
        y1="0.972656"
        x2="12.5435"
        y2="4.625"
        stroke="black"
        strokeOpacity="0.2"
      />
    </svg>
  );
};

// Below is the modified component from Magic UI
// Original source: https://magicui.design/docs/components/animated-beam
// Modified to follow our coding standards and design system
// We respect copyright and attribution to the original creators

export interface AnimatedBeamProps {
  className?: string;
  containerRef: RefObject<HTMLElement | null>; // Container ref
  fromRef: RefObject<HTMLElement | null>;
  toRef: RefObject<HTMLElement | null>;
  curvature?: number;
  reverse?: boolean;
  pathColor?: string;
  pathWidth?: number;
  pathOpacity?: number;
  gradientStartColor?: string;
  gradientStopColor?: string;
  delay?: number;
  duration?: number;
  startXOffset?: number;
  startYOffset?: number;
  endXOffset?: number;
  endYOffset?: number;
  direction?: "horizontal" | "vertical";
}

export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
  className,
  containerRef,
  fromRef,
  toRef,
  curvature = 0,
  reverse = false, // Include the reverse prop
  duration = Math.random() * 3 + 4,
  delay = 0,
  pathColor = "gray",
  pathWidth = 2,
  pathOpacity = 0.2,
  gradientStartColor = "#ffaa40",
  gradientStopColor = "#9c40ff",
  startXOffset = 0,
  startYOffset = 0,
  endXOffset = 0,
  endYOffset = 0,
  direction = "horizontal",
}) => {
  const id = useId();
  const [pathD, setPathD] = useState("");
  const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });

  // Calculate the gradient coordinates based on the reverse prop
  const gradientCoordinates =
    direction === "vertical"
      ? reverse
        ? {
            x1: ["0%", "0%"],
            x2: ["0%", "0%"],
            y1: ["90%", "-10%"],
            y2: ["100%", "0%"],
          }
        : {
            x1: ["0%", "0%"],
            x2: ["0%", "0%"],
            y1: ["10%", "110%"],
            y2: ["0%", "100%"],
          }
      : reverse
        ? {
            // Horizontal (existing logic)
            x1: ["90%", "-10%"],
            x2: ["100%", "0%"],
            y1: ["0%", "0%"],
            y2: ["0%", "0%"],
          }
        : {
            x1: ["10%", "110%"],
            x2: ["0%", "100%"],
            y1: ["0%", "0%"],
            y2: ["0%", "0%"],
          };

  useEffect(() => {
    const updatePath = () => {
      if (containerRef.current && fromRef.current && toRef.current) {
        const containerRect = containerRef.current.getBoundingClientRect();
        const rectA = fromRef.current.getBoundingClientRect();
        const rectB = toRef.current.getBoundingClientRect();

        const svgWidth = containerRect.width;
        const svgHeight = containerRect.height;
        setSvgDimensions({ width: svgWidth, height: svgHeight });

        const startX =
          rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
        const startY =
          rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
        const endX =
          rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
        const endY =
          rectB.top - containerRect.top + rectB.height / 2 + endYOffset;

        const controlY = startY - curvature;
        const d = `M ${startX},${startY} Q ${
          (startX + endX) / 2
        },${controlY} ${endX},${endY}`;
        setPathD(d);
      }
    };

    // Initialize ResizeObserver
    const resizeObserver = new ResizeObserver((entries) => {
      // For all entries, recalculate the path
      for (const _entry of entries) {
        updatePath();
      }
    });

    // Observe the container element
    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }

    // Call the updatePath initially to set the initial path
    updatePath();

    // Clean up the observer on component unmount
    return () => {
      resizeObserver.disconnect();
    };
  }, [
    containerRef,
    fromRef,
    toRef,
    curvature,
    startXOffset,
    startYOffset,
    endXOffset,
    endYOffset,
  ]);

  return (
    <svg
      fill="none"
      width={svgDimensions.width}
      height={svgDimensions.height}
      xmlns="http://www.w3.org/2000/svg"
      className={cn(
        "pointer-events-none absolute start-0 top-0 transform-gpu stroke-2",
        className,
      )}
      viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
    >
      <path
        d={pathD}
        stroke={pathColor}
        strokeWidth={pathWidth}
        strokeOpacity={pathOpacity}
        strokeLinecap="round"
      />
      <path
        d={pathD}
        strokeWidth={pathWidth}
        stroke={`url(#${id})`}
        strokeOpacity="1"
        strokeLinecap="round"
      />
      <defs>
        <motion.linearGradient
          className="transform-gpu"
          id={id}
          gradientUnits="userSpaceOnUse"
          initial={{
            x1: "0%",
            x2: "0%",
            y1: "0%",
            y2: "0%",
          }}
          animate={{
            x1: gradientCoordinates.x1,
            x2: gradientCoordinates.x2,
            y1: gradientCoordinates.y1,
            y2: gradientCoordinates.y2,
          }}
          transition={{
            delay,
            duration,
            ease: [0.16, 1, 0.3, 1],
            repeat: Infinity,
            repeatDelay: 0,
          }}
        >
          <stop stopColor={gradientStartColor} stopOpacity="0"></stop>
          <stop stopColor={gradientStartColor}></stop>
          <stop offset="32.5%" stopColor={gradientStopColor}></stop>
          <stop
            offset="100%"
            stopColor={gradientStopColor}
            stopOpacity="0"
          ></stop>
        </motion.linearGradient>
      </defs>
    </svg>
  );
};