"use client";

import Image from "next/image";
import { useEffect, useRef, useState, useCallback } from "react";
import { useRouter } from "next/navigation";
import { Play, Plus } from "lucide-react";
import { STATIC_VIDEOS, StaticVideo } from "@/data/static";
import { useTranslation } from "@/i18n";

// ── Constants ──────────────────────────────────────────────────────────────────

const SLIDE_ITEMS: StaticVideo[] = STATIC_VIDEOS.slice(0, 4);
const AUTO_ROTATE_MS = 5000;
const FADE_MS = 500;

// ── Component ──────────────────────────────────────────────────────────────────

export function StaticHeroBanner() {
  const { t } = useTranslation();
  const router = useRouter();
  const [activeIndex, setActiveIndex] = useState(0);
  const [fadingOut, setFadingOut] = useState(false);
  const [displayIndex, setDisplayIndex] = useState(0);
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const goToSlide = useCallback(
    (nextIndex: number) => {
      if (nextIndex === displayIndex) return;
      setFadingOut(true);
      setTimeout(() => {
        setDisplayIndex(nextIndex);
        setActiveIndex(nextIndex);
        setFadingOut(false);
      }, FADE_MS);
    },
    [displayIndex]
  );

  const scheduleNext = useCallback(() => {
    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      const next = (activeIndex + 1) % SLIDE_ITEMS.length;
      goToSlide(next);
    }, AUTO_ROTATE_MS);
  }, [activeIndex, goToSlide]);

  useEffect(() => {
    scheduleNext();
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, [scheduleNext]);

  const handleDotClick = (idx: number) => {
    if (timerRef.current) clearTimeout(timerRef.current);
    goToSlide(idx);
  };

  const slide = SLIDE_ITEMS[displayIndex];

  return (
    <div
      className="relative w-full overflow-hidden rounded-2xl"
      style={{ minHeight: 320, maxHeight: 460 }}
    >
      {/* Background image with crossfade */}
      <div
        className="absolute inset-0 transition-opacity"
        style={{
          opacity: fadingOut ? 0 : 1,
          transitionDuration: `${FADE_MS}ms`,
          transitionTimingFunction: "ease-in-out",
        }}
      >
        <Image
          src={slide.thumbnail}
          alt={slide.title}
          fill
          className="object-cover"
          sizes="100vw"
          unoptimized
          priority
        />
      </div>

      {/* Dark gradient overlay — always visible */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
            "linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.18) 100%), linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 50%)",
        }}
      />

      {/* Content */}
      <div
        className="relative z-10 flex flex-col justify-end h-full px-6 py-8"
        style={{ minHeight: 320 }}
      >
        <div
          className="max-w-lg transition-opacity"
          style={{
            opacity: fadingOut ? 0 : 1,
            transitionDuration: `${FADE_MS}ms`,
            transitionTimingFunction: "ease-in-out",
          }}
        >
          {/* Category badge */}
          <span
            className="inline-flex items-center text-[8px] font-black uppercase tracking-[0.22em] px-2.5 py-[3px] rounded-sm mb-3"
            style={{ background: "var(--accent)", color: "white" }}
          >
            {slide.category}
          </span>

          {/* Title */}
          <h1
            className="text-xl sm:text-2xl font-black text-[#ffffff] leading-[1.2] mb-2"
            style={{ letterSpacing: "-0.02em", textShadow: "0 2px 12px rgba(0,0,0,0.6)" }}
          >
            {slide.title}
          </h1>

          {/* Description */}
          <p
            className="text-xs sm:text-sm leading-relaxed mb-5 line-clamp-2"
            style={{ color: "rgba(255,255,255,0.75)" }}
          >
            {slide.description}
          </p>

          {/* Action buttons */}
          <div className="flex items-center gap-3">
            <button
              onClick={() => router.push(`/video/${slide.id}`)}
              className="flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-bold text-[#ffffff] transition-all duration-150 hover:scale-[1.03] active:scale-[0.98]"
              style={{
                background: "var(--accent)",
                boxShadow: "0 4px 16px rgba(var(--accent-rgb),0.45)",
              }}
            >
              <Play size={13} fill="white" strokeWidth={0} />
              {t("static_hero_watch")}
            </button>
            <button
              className="flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold text-[#ffffff] transition-all duration-150 hover:scale-[1.03] active:scale-[0.98]"
              style={{
                background: "rgba(255,255,255,0.12)",
                backdropFilter: "blur(4px)",
                border: "1px solid rgba(255,255,255,0.2)",
              }}
            >
              <Plus size={13} />
              {t("static_hero_add_watchlater")}
            </button>
          </div>
        </div>

        {/* Dot indicators */}
        <div className="flex items-center gap-2 mt-5">
          {SLIDE_ITEMS.map((_, idx) => (
            <button
              key={idx}
              onClick={() => handleDotClick(idx)}
              className="transition-all duration-300 rounded-full"
              style={{
                width: idx === activeIndex ? 22 : 6,
                height: 6,
                background:
                  idx === activeIndex
                    ? "var(--accent)"
                    : "rgba(255,255,255,0.35)",
              }}
              aria-label={`Slide ${idx + 1}`}
            />
          ))}
        </div>
      </div>
    </div>
  );
}