"use client";

/* eslint-disable no-unused-vars */
import * as React from "react";
import { motion } from "framer-motion";

interface LineProps {
  className?: string;
  delay?: number;
}

export const HeroLines: React.FC<LineProps> = ({
  className = "",
  delay = 0,
}) => {
  return (
    <svg
      className={`absolute pointer-events-none ${className}`}
      viewBox="0 0 800 600"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <motion.path
        d="M-100 300 C 100 300, 200 100, 400 100 C 600 100, 700 500, 900 500"
        stroke="currentColor"
        strokeWidth="1"
        strokeLinecap="round"
        className="text-slate-200"
        initial={{ pathLength: 0, opacity: 0 }}
        animate={{ pathLength: 1, opacity: 1 }}
        transition={{ duration: 2, delay: delay, ease: "easeInOut" }}
      />
      <motion.path
        d="M-100 350 C 100 350, 200 150, 400 150 C 600 150, 700 550, 900 550"
        stroke="currentColor"
        strokeWidth="1"
        strokeLinecap="round"
        className="text-slate-100"
        initial={{ pathLength: 0, opacity: 0 }}
        animate={{ pathLength: 1, opacity: 1 }}
        transition={{ duration: 2.5, delay: delay + 0.2, ease: "easeInOut" }}
      />

      {/* Animated Pulses */}
      <motion.circle r="3" fill="currentColor" className="text-slate-300">
        <animateMotion
          dur="6s"
          repeatCount="indefinite"
          path="M-100 300 C 100 300, 200 100, 400 100 C 600 100, 700 500, 900 500"
        />
      </motion.circle>
      <motion.circle r="3" fill="currentColor" className="text-slate-200">
        <animateMotion
          dur="8s"
          repeatCount="indefinite"
          path="M-100 350 C 100 350, 200 150, 400 150 C 600 150, 700 550, 900 550"
        />
      </motion.circle>

      {/* Nodes */}
      <motion.circle
        cx="400"
        cy="100"
        r="4"
        className="fill-slate-200"
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ delay: delay + 1, duration: 0.5 }}
      />
      <motion.circle
        cx="400"
        cy="150"
        r="4"
        className="fill-slate-100"
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ delay: delay + 1.2, duration: 0.5 }}
      />
    </svg>
  );
};

export const GridLines: React.FC<LineProps> = ({
  className = "",
  delay = 0,
}) => {
  return (
    <svg
      className={`absolute pointer-events-none ${className}`}
      viewBox="0 0 400 400"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path
            d="M 40 0 L 0 0 0 40"
            fill="none"
            stroke="currentColor"
            strokeWidth="0.5"
            className="text-slate-100"
          />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid)" />

      {/* Highlighted Path */}
      <motion.path
        d="M 40 40 L 120 40 L 120 120 L 200 120"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="text-slate-300"
        initial={{ pathLength: 0 }}
        whileInView={{ pathLength: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 1.5, delay: delay }}
      />

      {/* Active Cells */}
      <motion.rect
        x="120"
        y="40"
        width="40"
        height="40"
        className="fill-slate-50"
        initial={{ opacity: 0 }}
        animate={{ opacity: [0, 0.5, 0] }}
        transition={{ duration: 3, repeat: Infinity, repeatDelay: 2 }}
      />
      <motion.rect
        x="160"
        y="80"
        width="40"
        height="40"
        className="fill-slate-50"
        initial={{ opacity: 0 }}
        animate={{ opacity: [0, 0.5, 0] }}
        transition={{ duration: 4, repeat: Infinity, repeatDelay: 1 }}
      />

      <motion.circle
        cx="200"
        cy="120"
        r="3"
        className="fill-slate-400"
        initial={{ scale: 0 }}
        whileInView={{ scale: 1 }}
        viewport={{ once: true }}
        transition={{ delay: delay + 1.5 }}
      />
    </svg>
  );
};

export const FlowLines: React.FC<LineProps> = ({
  className = "",
  delay = 0,
}) => {
  return (
    <svg
      className={`absolute pointer-events-none ${className}`}
      viewBox="0 0 600 200"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <motion.path
        d="M 0 100 H 100 C 150 100, 150 50, 200 50 H 300"
        stroke="currentColor"
        strokeWidth="1"
        className="text-slate-200"
        initial={{ pathLength: 0 }}
        whileInView={{ pathLength: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 1.5, delay: delay }}
      />
      <motion.path
        d="M 0 100 H 100 C 150 100, 150 150, 200 150 H 300"
        stroke="currentColor"
        strokeWidth="1"
        className="text-slate-200"
        initial={{ pathLength: 0 }}
        whileInView={{ pathLength: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 1.5, delay: delay + 0.2 }}
      />

      {/* Pulse */}
      <motion.circle r="2" fill="currentColor" className="text-slate-400">
        <animateMotion
          dur="4s"
          repeatCount="indefinite"
          path="M 0 100 H 100 C 150 100, 150 50, 200 50 H 300"
        />
      </motion.circle>

      <motion.rect
        x="300"
        y="30"
        width="80"
        height="40"
        rx="8"
        className="stroke-slate-300 fill-white"
        strokeWidth="1"
        initial={{ opacity: 0, x: 280 }}
        whileInView={{ opacity: 1, x: 300 }}
        viewport={{ once: true }}
        transition={{ delay: delay + 1 }}
      />

      <motion.rect
        x="300"
        y="130"
        width="80"
        height="40"
        rx="8"
        className="stroke-slate-300 fill-white"
        strokeWidth="1"
        initial={{ opacity: 0, x: 280 }}
        whileInView={{ opacity: 1, x: 300 }}
        viewport={{ once: true }}
        transition={{ delay: delay + 1.2 }}
      />
    </svg>
  );
};

export const CirclePattern: React.FC<LineProps> = ({
  className = "",
  delay = 0,
}) => {
  return (
    <svg
      className={`absolute pointer-events-none ${className}`}
      viewBox="0 0 400 400"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <motion.circle
        cx="200"
        cy="200"
        r="100"
        stroke="currentColor"
        strokeWidth="1"
        className="text-slate-100"
        initial={{ scale: 0.8, opacity: 0 }}
        whileInView={{ scale: 1, opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 1, delay: delay }}
      />
      <motion.circle
        cx="200"
        cy="200"
        r="150"
        stroke="currentColor"
        strokeWidth="1"
        className="text-slate-50"
        initial={{ scale: 0.8, opacity: 0 }}
        whileInView={{ scale: 1, opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 1, delay: delay + 0.2 }}
      />
      <motion.circle
        cx="200"
        cy="200"
        r="50"
        stroke="currentColor"
        strokeWidth="1"
        className="text-slate-200"
        initial={{ scale: 0.8, opacity: 0 }}
        whileInView={{ scale: 1, opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 1, delay: delay + 0.4 }}
      />

      {/* Rotating Ring */}
      <motion.circle
        cx="200"
        cy="200"
        r="120"
        stroke="currentColor"
        strokeWidth="1"
        strokeDasharray="10 10"
        className="text-slate-200"
        animate={{ rotate: 360 }}
        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
      />
    </svg>
  );
};

export const ServicesFlow: React.FC<LineProps> = ({
  className = "",
  delay = 0,
}) => {
  return (
    <svg
      className={`absolute pointer-events-none ${className}`}
      viewBox="0 0 1000 200"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      {/* Path connecting the 3 steps */}
      <motion.path
        d="M 100 100 L 900 100"
        stroke="currentColor"
        strokeWidth="3"
        strokeDasharray="8 8"
        className="text-slate-300"
        initial={{ pathLength: 0 }}
        whileInView={{ pathLength: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 2, delay: delay }}
      />

      {/* Animated pulse moving along the line */}
      <motion.circle r="5" fill="currentColor" className="text-slate-900">
        <animateMotion
          dur="3s"
          repeatCount="indefinite"
          path="M 100 100 L 900 100"
        />
      </motion.circle>

      {/* Second pulse with delay */}
      <motion.circle r="5" fill="currentColor" className="text-slate-900">
        <animateMotion
          dur="3s"
          begin="1.5s"
          repeatCount="indefinite"
          path="M 100 100 L 900 100"
        />
      </motion.circle>
    </svg>
  );
};

export const ComparisonLines: React.FC<LineProps> = ({
  className = "",
  delay = 0,
}) => {
  return (
    <svg
      className={`absolute pointer-events-none ${className}`}
      viewBox="0 0 100 400"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <motion.path
        d="M 50 0 V 400"
        stroke="currentColor"
        strokeWidth="3"
        strokeDasharray="4 4"
        className="text-slate-300"
        initial={{ pathLength: 0 }}
        whileInView={{ pathLength: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 1.5, delay: delay }}
      />
      <motion.circle r="5" fill="currentColor" className="text-slate-900">
        <animateMotion dur="4s" repeatCount="indefinite" path="M 50 0 V 400" />
      </motion.circle>
    </svg>
  );
};

export const ConnectorStart: React.FC<LineProps> = (_props) => null;
export const ConnectorBranch: React.FC<LineProps> = (_props) => null;
export const ConnectorSplit: React.FC<LineProps> = (_props) => null;
export const ConnectorEnd: React.FC<LineProps> = (_props) => null;
