"use client";

import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { Image as ImageIcon } from "lucide-react";
import { useLocale } from "next-intl";

interface SeriesItem {
  name: string;
  slug: string;
  imageUrl: string;
}

export default function SeriesMarquee() {
  const locale = useLocale();
  const seriesList: SeriesItem[] = [
    {
      name: "Elite",
      slug: "elite",
      imageUrl: "/products/elite/elite-inox-30-cm-2-gaz-sac/01-perspective.webp",
    },
    {
      name: "Nexus",
      slug: "nexus",
      imageUrl: "/products/nexus/nexus-inox-30-cm-2-gaz-sac/01-perspective.webp",
    },
    {
      name: "Swan",
      slug: "swan",
      imageUrl: "/products/swan/swan-inox-30-cm-2-gaz-sac/01-perspective.webp",
    },
    {
      name: "Mono",
      slug: "mono",
      imageUrl: "/products/mono/mono-siyah-cam-30cm-2-gaz/01-perspective.webp",
    },
    {
      name: "Nero",
      slug: "nero",
      imageUrl: "/products/nero/nero-inox-30-cm-2-gaz-sac/01-perspective.webp",
    },
    {
      name: "Nirvana",
      slug: "nirvana",
      imageUrl: "/products/nirvana/nirvana-inox-30-cm-2-gaz-sac/01-perspective.webp",
    },
    {
      name: "Vitroceramic",
      slug: "vitroceramic",
      imageUrl: "/products/vtc/vtc-ceran-30cm-ceran/01-perspective.webp",
    },
  ];

  const marqueeItems = [...seriesList, ...seriesList, ...seriesList, ...seriesList];

  return (
    <section
      className="relative w-full overflow-hidden py-6 md:py-7 border-y select-none"
      style={{ background: "var(--surface-0)", borderColor: "var(--border)" }}
    >
      <div className="absolute inset-y-0 left-0 w-20 md:w-32 z-10 pointer-events-none" style={{ background: "linear-gradient(to right, var(--surface-0), transparent)" }} />
      <div className="absolute inset-y-0 right-0 w-20 md:w-32 z-10 pointer-events-none" style={{ background: "linear-gradient(to left, var(--surface-0), transparent)" }} />

      <div className="flex animate-marquee gap-4 md:gap-5">
        {marqueeItems.map((series, index) => (
          <MarqueeChip key={`${series.slug}-${index}`} series={series} locale={locale} />
        ))}
      </div>
    </section>
  );
}

function MarqueeChip({ series, locale }: { series: SeriesItem; locale: string }) {
  const [imageError, setImageError] = useState(false);

  return (
    <Link
      href={`/${locale}/products?series=${series.slug}`}
      className="glass-pill flex items-center gap-3 pl-2 pr-5 py-2 rounded-full flex-shrink-0 cursor-pointer group"
    >
      <div
        className="relative w-9 h-9 rounded-full overflow-hidden flex-shrink-0 flex items-center justify-center border"
        style={{ background: "var(--surface-1)", borderColor: "var(--border)" }}
      >
        {!imageError && series.imageUrl ? (
          <Image
            src={series.imageUrl}
            alt={series.name}
            fill
            onError={() => setImageError(true)}
            className="object-cover scale-[1.3] group-hover:scale-[1.5] transition-transform duration-500"
            sizes="36px"
          />
        ) : (
          <ImageIcon size={14} style={{ color: "var(--fg-muted)" }} />
        )}
      </div>

      <span
        className="font-sans text-sm font-medium tracking-wide transition-colors duration-300"
        style={{ color: "var(--fg-primary)" }}
        onMouseEnter={(e) => (e.currentTarget.style.color = "var(--ember)")}
        onMouseLeave={(e) => (e.currentTarget.style.color = "var(--fg-primary)")}
      >
        {series.name}
      </span>
    </Link>
  );
}