"use client";

import { useCallback, useEffect, useState } from "react";
import { CAROUSEL_SLIDES, EXAM, SCHOOL } from "@/lib/constants";

const INTERVAL = 5200;

export default function HeroCarousel() {
  const [index, setIndex] = useState(0);
  const [paused, setPaused] = useState(false);

  const goTo = useCallback((i: number) => {
    setIndex((prev) => (prev + i + CAROUSEL_SLIDES.length) % CAROUSEL_SLIDES.length);
  }, []);

  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIndex((p) => (p + 1) % CAROUSEL_SLIDES.length), INTERVAL);
    return () => clearInterval(t);
  }, [paused, index]);

  const active = CAROUSEL_SLIDES[index];

  return (
    <section
      className="no-print relative h-[92vh] min-h-[560px] w-full overflow-hidden bg-maroon-950"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      {/* slides */}
      {CAROUSEL_SLIDES.map((slide, i) => (
        <div
          key={slide.src}
          className={`absolute inset-0 transition-opacity duration-1000 ${
            i === index ? "opacity-100" : "opacity-0"
          }`}
          aria-hidden={i !== index}
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={slide.src}
            alt={slide.alt}
            className={`h-full w-full object-cover ${
              i === index ? "animate-kenburns" : ""
            }`}
            loading={i === 0 ? "eager" : "lazy"}
            draggable={false}
          />
        </div>
      ))}

      {/* overlays */}
      <div className="absolute inset-0 bg-gradient-to-r from-maroon-950/95 via-maroon-950/55 to-transparent" />
      <div className="absolute inset-0 bg-gradient-to-t from-maroon-950/90 via-transparent to-maroon-950/30" />
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_40%,rgba(189,149,31,0.25),transparent_55%)]" />

      {/* decorative frame */}
      <div className="pointer-events-none absolute inset-4 hidden border border-gold-400/25 md:block" />
      <div className="pointer-events-none absolute inset-6 hidden border border-gold-400/10 md:block" />

      {/* content */}
      <div className="relative z-10 mx-auto flex h-full max-w-7xl flex-col justify-center px-6 md:px-10">
        <div className="max-w-2xl">
          <div className="animate-rise flex items-center gap-3" style={{ animationDelay: "80ms" }}>
            <span className="h-px w-10 bg-gold-400" />
            <p className="text-[11px] font-semibold uppercase tracking-[0.42em] text-gold-300">
              Department of Employment &amp; Training
            </p>
          </div>

          <h1
            className="animate-rise mt-5 font-display text-[clamp(2.4rem,5.8vw,4.8rem)] font-semibold leading-[1.02] text-cream"
            style={{ animationDelay: "180ms" }}
          >
            Industrial School
            <span className="shimmer-text block italic font-normal">Common Examination July 2026</span>
          </h1>

          <p
            className="animate-rise mt-5 max-w-xl text-base leading-relaxed text-cream/80 md:text-lg"
            style={{ animationDelay: "300ms" }}
          >
            {SCHOOL.fullName}. Official statement of marks for all industrial school trades are published.
            Verify your result instantly using your{" "}
            <span className="font-semibold text-gold-200">Registration Number</span> and{" "}
            <span className="font-semibold text-gold-200">Date of Birth</span>.
          </p>

          <div
            className="animate-rise mt-8 flex flex-wrap items-center gap-4"
            style={{ animationDelay: "420ms" }}
          >
            <a
              href="#check-result"
              className="group relative overflow-hidden rounded-sm bg-gold-500 px-8 py-3.5 text-sm font-bold uppercase tracking-[0.18em] text-maroon-950 shadow-[0_16px_40px_-12px_rgba(189,149,31,0.75)] transition-transform duration-300 hover:-translate-y-0.5"
            >
              <span className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/50 to-transparent transition-transform duration-700 group-hover:translate-x-full" />
              Check Your Result
            </a>
            <a
              href="#courses"
              className="rounded-sm border border-cream/40 px-8 py-3.5 text-sm font-semibold uppercase tracking-[0.18em] text-cream transition-colors duration-300 hover:border-gold-400 hover:text-gold-200"
            >
              Trades Offered
            </a>
          </div>

          <div
            className="animate-rise mt-10 flex items-center gap-6 text-[11px] uppercase tracking-[0.28em] text-cream/60"
            style={{ animationDelay: "540ms" }}
          >
            <span>Result Declared · {EXAM.resultDate}</span>
            <span className="hidden h-3 w-px bg-cream/30 sm:block" />
            <span className="hidden sm:inline">Session {EXAM.session}</span>
          </div>
        </div>
      </div>

      {/* bottom bar: caption + controls */}
      <div className="absolute inset-x-0 bottom-0 z-20">
        <div className="mx-auto flex max-w-7xl items-end justify-between gap-4 px-6 pb-6 md:px-10">
          <div className="min-w-0">
            <p key={index} className="animate-pop-in truncate font-display text-lg italic text-gold-200 md:text-xl">
              {active.caption}
            </p>
            <p key={`t-${index}`} className="animate-pop-in font-tamil text-sm text-cream/70" style={{ animationDelay: "60ms" }}>
              {active.tamil}
            </p>
          </div>

          <div className="flex items-center gap-3">
            <div className="mr-2 flex items-center gap-2">
              {CAROUSEL_SLIDES.map((_, i) => (
                <button
                  key={i}
                  onClick={() => setIndex(i)}
                  aria-label={`Go to slide ${i + 1}`}
                  className={`group relative h-1 overflow-hidden rounded-full transition-all duration-300 ${
                    i === index ? "w-10 bg-cream/30" : "w-5 bg-cream/30 hover:bg-cream/60"
                  }`}
                >
                  {i === index && !paused && (
                    <span key={`p-${index}`} className="animate-progress absolute inset-y-0 left-0 bg-gold-400" />
                  )}
                </button>
              ))}
            </div>
            <button
              onClick={() => goTo(-1)}
              aria-label="Previous slide"
              className="grid h-10 w-10 place-items-center rounded-full border border-cream/30 text-cream transition-colors hover:border-gold-400 hover:text-gold-300"
            >
              <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M15 18l-6-6 6-6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
            <button
              onClick={() => goTo(1)}
              aria-label="Next slide"
              className="grid h-10 w-10 place-items-center rounded-full border border-cream/30 text-cream transition-colors hover:border-gold-400 hover:text-gold-300"
            >
              <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M9 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}