"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { ArrowDown, ArrowUpRight } from "lucide-react";
import { m } from "framer-motion";
import { collectionsPageCopy, getCollectionLocale, type NordenCollection } from "@/lib/collections";

export default function CollectionsCatalog({ locale, collections }: { locale: string; collections: NordenCollection[] }) {
  const activeLocale = getCollectionLocale(locale);
  const copy = collectionsPageCopy[activeLocale];
  const [activeIndex, setActiveIndex] = useState(0);
  const [hovered, setHovered] = useState(false);

  useEffect(() => {
    if (hovered) return;
    const timer = window.setInterval(() => {
      if (collections.length > 1) setActiveIndex((current) => (current + 1) % collections.length);
    }, 4000);
    return () => window.clearInterval(timer);
  }, [collections.length, hovered]);

  return (
    <main className="overflow-hidden pt-24" style={{ background: "var(--surface-0)", color: "var(--fg-primary)" }}>
      <section className="relative border-b px-6 pb-12 pt-16 md:px-12 md:pb-16 md:pt-20" style={{ borderColor: "var(--border)" }}>
        <div className="mx-auto flex max-w-[90rem] flex-col justify-between gap-8 lg:flex-row lg:items-end">
          <m.div initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}>
            <span className="eyebrow">{copy.eyebrow}</span>
            <h1 className="mt-4 max-w-4xl text-5xl font-medium leading-[.98] tracking-[-.045em] md:text-7xl">{copy.title}</h1>
          </m.div>
          <m.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7, delay: 0.1 }} className="max-w-lg">
            <p className="text-base leading-7" style={{ color: "var(--fg-secondary)" }}>{copy.intro}</p>
            <a href="#series-selector" className="mt-6 inline-flex items-center gap-2 text-xs font-medium uppercase tracking-[.15em]" style={{ color: "var(--ember-bright)" }}>{copy.explore}<ArrowDown size={14} /></a>
          </m.div>
        </div>
      </section>

      <section id="series-selector" className="mx-auto max-w-[100rem] px-4 py-12 md:px-8 md:py-20">
        <div onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} className="flex min-h-[620px] flex-col gap-3 lg:h-[690px] lg:min-h-0 lg:flex-row">
          {collections.map((collection, index) => {
            const active = activeIndex === index;
            const verticalNameInset = collection.name.length > 8 ? "bottom-24" : collection.name.length > 6 ? "bottom-16" : "bottom-12";
            return (
              <m.article
                key={collection.slug}
                onMouseEnter={() => setActiveIndex(index)}
                onFocusCapture={() => setActiveIndex(index)}
                transition={{ duration: 0.55, ease: [0.16, 1, 0.3, 1] }}
                className={`group relative min-h-[180px] overflow-hidden rounded-[26px] border transition-[flex-grow] duration-700 lg:min-w-[82px] ${active ? "lg:min-w-[360px]" : ""}`}
                style={{ flexGrow: active ? 3.8 : .72, borderColor: active ? "var(--accent-border)" : "var(--border)", background: "var(--surface-1)", boxShadow: active ? "var(--shadow-card-hover)" : "var(--shadow-card)" }}
              >
                <Link href={`/${activeLocale}/collections/${collection.slug}`} className="absolute inset-0 z-30" aria-label={`${collection.name} — ${copy.explore}`} />
                <Image src={collection.image} alt={`${collection.name} 60 cm hob`} fill sizes="(max-width: 1024px) 100vw, 45vw" className={`object-contain p-6 transition-all duration-700 md:p-10 ${active ? "scale-100 opacity-100" : "scale-90 opacity-55"}`} />
                <div className="absolute inset-0" style={{ background: active ? "linear-gradient(180deg, transparent 25%, rgba(7,9,12,.96) 100%)" : "linear-gradient(180deg, rgba(7,9,12,.2), rgba(7,9,12,.9))" }} />
                <span className="absolute left-6 top-6 z-10 font-mono text-[10px] tracking-[.2em] text-white/60">{String(index + 1).padStart(2, "0")}</span>

                <div className={`absolute inset-x-0 bottom-0 z-20 p-6 text-white transition-all duration-500 md:p-8 ${active ? "opacity-100" : "lg:translate-y-5 lg:opacity-0"}`}>
                  <p className="mb-2 font-mono text-[10px] uppercase tracking-[.2em] text-[#edba7c]">{collection.tagline[activeLocale]}</p>
                  <div className="flex items-end justify-between gap-4">
                    <div>
                      <h2 className="text-3xl font-medium tracking-[-.035em] md:text-5xl">{collection.name}</h2>
                      <p className="mt-3 max-w-lg text-sm leading-6 text-white/70">{collection.story[activeLocale]}</p>
                    </div>
                    <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/5"><ArrowUpRight size={17} /></span>
                  </div>
                </div>

                {!active && <span className={`absolute ${verticalNameInset} left-1/2 z-20 hidden -translate-x-1/2 -rotate-90 whitespace-nowrap text-xl font-medium leading-none tracking-[.18em] text-white lg:block`}>{collection.name}</span>}
              </m.article>
            );
          })}
        </div>
        <p className="mt-5 text-center text-[11px] uppercase tracking-[.16em]" style={{ color: "var(--fg-muted)" }}>{collections.length} {activeLocale === "tr" ? "koleksiyon" : activeLocale === "ru" ? "коллекций" : "collections"}</p>
      </section>
    </main>
  );
}