"use client";

import { useState } from "react";
import Link from "next/link";
import { m, useReducedMotion } from "framer-motion";
import { ChevronDown, Images } from "lucide-react";
import { useTranslations } from "next-intl";
import MediaFilmPlayer from "@/components/MediaFilmPlayer";
import { nordenHeroFilms, resolveLocale, type NordenFilm } from "@/lib/media-library";

interface HeroProps {
  locale: string;
  films?: NordenFilm[];
}

const galleryLabels = {
  tr: "Norden Gallery",
  en: "Norden Gallery",
  ru: "Галерея Norden",
};

const playlistLabels = {
  tr: "Tanıtım filmleri",
  en: "Brand films",
  ru: "Имиджевые фильмы",
};

export default function Hero({ locale, films = nordenHeroFilms }: HeroProps) {
  const t = useTranslations();
  const safeLocale = resolveLocale(locale);
  const [activeIndex, setActiveIndex] = useState(0);
  const reduceMotion = useReducedMotion();
  const activeFilm = films[activeIndex] ?? films[0];

  const showNextFilm = () => {
    if (films.length > 1) setActiveIndex((current) => (current + 1) % films.length);
  };

  const handleScrollToCategories = () => {
    document.getElementById("categories")?.scrollIntoView({ behavior: reduceMotion ? "auto" : "smooth" });
  };

  if (!activeFilm) return null;

  return (
    <>
      <section className="relative flex min-h-[42rem] h-[100svh] w-full items-center justify-center overflow-hidden bg-surface-0">
        <div className="absolute inset-0 z-0">
          <MediaFilmPlayer key={activeFilm.id} film={activeFilm} locale={safeLocale} active autoplay loop={films.length === 1} showPoster={false} onEnded={showNextFilm} className="h-full w-full object-cover bg-black brightness-[0.4] contrast-[1.05]" />
          <div className="absolute inset-0 bg-[linear-gradient(to_top,var(--surface-0)_0%,rgba(0,0,0,0.34)_52%,rgba(0,0,0,0.12)_100%)]" />
        </div>

        <div className="relative z-20 mx-auto flex w-full max-w-7xl flex-col items-center px-6 text-center md:px-12">
          <m.p initial={reduceMotion ? false : { opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }} className="eyebrow mb-6">
            {t("hero.eyebrow")}
          </m.p>
          <m.h1 initial={reduceMotion ? false : { opacity: 0, x: -60 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.1, duration: 0.9, ease: [0.16, 1, 0.3, 1] }} className="mb-6 text-5xl font-light leading-[1.05] tracking-tight text-white md:text-7xl">
            {t("hero.headline1")} <br />
            <span className="font-normal italic text-ember-bright">{t("hero.headline2")}</span>
          </m.h1>
          <m.p initial={reduceMotion ? false : { opacity: 0, x: 60 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.2, duration: 0.9, ease: [0.16, 1, 0.3, 1] }} className="mb-10 max-w-2xl text-sm font-light leading-relaxed text-white/80 md:text-base">
            {t("hero.sub")}
          </m.p>
          <m.div initial={reduceMotion ? false : { opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3, duration: 0.8 }} className="flex flex-col items-center gap-3 sm:flex-row">
            <button onClick={handleScrollToCategories} className="glass-pill rounded-full px-8 py-3.5 text-xs font-medium uppercase tracking-widest text-white transition-transform hover:scale-[1.03]">
              {t("hero.cta_primary")}
            </button>
            <Link href={`/${safeLocale}/gallery`} className="flex min-h-11 items-center gap-2 rounded-full px-6 py-3 text-xs uppercase tracking-widest text-white/80 transition-colors hover:text-white">
              <Images size={17} className="text-ember" />
              {galleryLabels[safeLocale]}
            </Link>
          </m.div>

          {films.length > 1 ? (
            <div className="mt-10 flex items-center gap-2" aria-label={playlistLabels[safeLocale]}>
              {films.map((film, index) => (
                <button key={film.id} type="button" onClick={() => setActiveIndex(index)} className={`h-1 rounded-full transition-all ${index === activeIndex ? "w-10 bg-ember-bright" : "w-5 bg-white/35"}`} aria-label={`${index + 1}. ${film.title[safeLocale]}`} aria-current={index === activeIndex ? "true" : undefined} />
              ))}
            </div>
          ) : null}
        </div>

        <button onClick={handleScrollToCategories} className="absolute bottom-8 left-1/2 z-20 flex -translate-x-1/2 flex-col items-center p-3 text-ember" aria-label={t("hero.cta_primary")}>
          <m.span animate={reduceMotion ? undefined : { y: [0, 6, 0] }} transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}><ChevronDown size={24} /></m.span>
        </button>
      </section>

    </>
  );
}