"use client";

import { motion, useReducedMotion } from "framer-motion";

import { cn } from "@/lib/utils";

type MarqueeDirection = "left" | "right";

export type MarqueeRow = {
  items: string[];
  direction: MarqueeDirection;
  duration?: number;
};

type StackedMarqueeSectionProps = {
  className?: string;
  rows?: MarqueeRow[];
};

const DEFAULT_ROWS: MarqueeRow[] = [
  {
    direction: "left",
    duration: 126,
    items: [
      "Next.js",
      "React",
      "WordPress",
      "Docker",
      "Technical SEO",
      "Tailwind CSS",
      "Google Analytics",
      "Framer Motion",
      "Cloudflare",
      "Performance",
    ],
  },
  {
    direction: "right",
    duration: 220,
    items: [
      "TypeScript",
      "Node.js",
      "WooCommerce",
      "Schema Markup",
      "DevOps",
      "Responsive Design",
      "Core Web Vitals",
      "Plausible Analytics",
      "Design Systems",
      "Server Infrastructure",
    ],
  },
  {
    direction: "left",
    duration: 168,
    items: [
      "JavaScript",
      "REST APIs",
      "Git",
      "Linux",
      "Search Console",
      "Conversion Tracking",
      "UI Engineering",
      "Accessibility",
      "Component Architecture",
      "Web Performance",
    ],
  },
  {
    direction: "right",
    duration: 144,
    items: [
      "Frontend Strategy",
      "CMS Integration",
      "Motion Design",
      "Content Architecture",
      "E-Commerce",
      "SEO Audits",
      "Deployments",
      "Scalable UI",
      "Analytics Setup",
      "Product Pages",
    ],
  },
];

function MarqueeRowTrack({ items, direction, duration = 24 }: MarqueeRow) {
  const shouldReduceMotion = useReducedMotion();

  return (
    <div className="overflow-hidden leading-[0.92]">
      <motion.div
        className="flex w-max min-w-full flex-nowrap"
        animate={
          shouldReduceMotion
            ? { x: 0 }
            : {
                x: direction === "left" ? ["0%", "-50%"] : ["-50%", "0%"],
              }
        }
        transition={
          shouldReduceMotion
            ? undefined
            : {
                duration,
                ease: "linear",
                repeat: Number.POSITIVE_INFINITY,
              }
        }
      >
        {Array.from({ length: 2 }).map((_, copyIndex) => (
          <div
            key={`${direction}-${copyIndex}`}
            className="flex shrink-0 items-center gap-3 pr-3 sm:gap-4 sm:pr-4 lg:gap-5 lg:pr-5"
            aria-hidden={copyIndex === 1}
          >
            {items.map((item, itemIndex) => (
              <div
                key={`${copyIndex}-${item}`}
                className="flex shrink-0 items-center gap-3 sm:gap-4 lg:gap-5"
              >
                <span
                  className={cn(
                    "shrink-0 whitespace-nowrap text-[clamp(2.05rem,6vw,4.8rem)] uppercase leading-[0.92] tracking-[-0.01em] text-[hsl(var(--surface-3))] dark:text-[hsl(var(--surface-3))] [text-shadow:none]",
                    itemIndex % 2 === 0 ? "font-black" : "font-light",
                  )}
                >
                  {item}
                </span>
                <span
                  className="text-[clamp(1.85rem,5vw,4rem)] font-light leading-[0.92] tracking-[-0.01em] text-[hsl(var(--surface-3))] dark:text-[hsl(var(--surface-3))] [text-shadow:none]"
                  aria-hidden="true"
                >
                  /
                </span>
              </div>
            ))}
          </div>
        ))}
      </motion.div>
    </div>
  );
}

export function StackedMarqueeSection({
  className,
  rows = DEFAULT_ROWS,
}: StackedMarqueeSectionProps) {
  return (
    <section
      aria-label="Technology marquee"
      className={cn(
        "relative isolate overflow-hidden bg-transparent py-3 sm:py-4 lg:py-5",
        className,
      )}
    >
      <div className="relative flex flex-col gap-0 sm:gap-0 lg:gap-0">
        {rows.map((row, index) => (
          <div key={`${row.direction}-${index}`} className={index === 0 ? "" : "-mt-0.5 sm:-mt-1"}>
            <MarqueeRowTrack
              items={row.items}
              direction={row.direction}
              duration={row.duration}
            />
          </div>
        ))}
      </div>
    </section>
  );
}