'use client';

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';

/**
 * Reusable full-width hero slider used on every page.
 * Props:
 *   slides: Array<{ image, label, heading, subheading, cta, ctaLink }>
 *   height: Tailwind class string (default 'min-h-[580px] md:min-h-[680px]')
 */
export default function HeroSlider({ slides = [], height = 'min-h-[580px] md:min-h-[680px]' }) {
  const [current, setCurrent] = useState(0);
  const [animating, setAnimating] = useState(false);

  const goTo = useCallback((index) => {
    if (animating) return;
    setAnimating(true);
    setCurrent(index);
    setTimeout(() => setAnimating(false), 600);
  }, [animating]);

  const next = useCallback(() => {
    goTo((current + 1) % slides.length);
  }, [current, slides.length, goTo]);

  const prev = useCallback(() => {
    goTo((current - 1 + slides.length) % slides.length);
  }, [current, slides.length, goTo]);

  // Auto-advance every 5 seconds
  useEffect(() => {
    if (slides.length <= 1) return;
    const timer = setInterval(next, 5000);
    return () => clearInterval(timer);
  }, [next, slides.length]);

  if (!slides.length) return null;

  const slide = slides[current];

  return (
    <section
      aria-label="Hero"
      className={`relative ${height} flex items-center overflow-hidden`}
    >
      {/* Background images — crossfade */}
      {slides.map((s, i) => (
        <div
          key={i}
          aria-hidden="true"
          className={`absolute inset-0 transition-opacity duration-700 ${i === current ? 'opacity-100' : 'opacity-0'}`}
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={s.image}
            alt=""
            className="w-full h-full object-cover object-center"
          />
          {/* Dark overlay */}
          <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-black/20" />
        </div>
      ))}

      {/* Content */}
      <div className="relative z-10 container-page py-20 md:py-28">
        <div className="max-w-2xl">
          {/* Label */}
          <p
            key={`label-${current}`}
            className="text-[#e31e24] text-[11px] font-bold tracking-[0.3em] uppercase mb-5 animate-fade-in"
          >
            {slide.label}
          </p>

          {/* Heading — parse <red> tags safely */}
          <h1
            key={`heading-${current}`}
            className="text-5xl sm:text-6xl md:text-7xl font-black text-white leading-[1.0] tracking-tight mb-5 animate-fade-in"
          >
            {slide.heading.split(/(<red>.*?<\/red>)/g).map((part, i) => {
              const match = part.match(/^<red>(.*)<\/red>$/);
              return match
                ? <span key={i} style={{ color: '#e31e24' }}>{match[1]}</span>
                : part;
            })}
          </h1>

          {/* Subheading */}
          <p
            key={`sub-${current}`}
            className="text-gray-300 text-lg leading-relaxed mb-10 max-w-md animate-fade-in"
          >
            {slide.subheading}
          </p>

          {/* CTAs — always Order Now + View Menu */}
          <div className="flex flex-wrap gap-3">
            <Link href="/menu"
              className="inline-flex items-center justify-center font-bold tracking-widest uppercase text-xs
                         bg-[#e31e24] text-white hover:bg-[#b91c1c]
                         transition-colors duration-200
                         focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#e31e24] focus-visible:ring-offset-2
                         min-h-[44px] px-7"
            >
              Order Now
            </Link>
            <Link href="/menu"
              className="inline-flex items-center justify-center font-bold tracking-widest uppercase text-xs
                         border border-white/60 text-white hover:bg-white hover:text-[#1a1a1a]
                         transition-colors duration-200
                         focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white
                         min-h-[44px] px-7"
            >
              View Menu
            </Link>
          </div>
        </div>
      </div>

      {/* Prev / Next arrows — slim, minimal */}
      {slides.length > 1 && (
        <>
          <button
            onClick={prev}
            aria-label="Previous slide"
            className="absolute left-4 top-1/2 -translate-y-1/2 z-20 w-9 h-9 rounded-full bg-black/30 hover:bg-[#e31e24] text-white flex items-center justify-center transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white border border-white/20"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5} aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
            </svg>
          </button>
          <button
            onClick={next}
            aria-label="Next slide"
            className="absolute right-4 top-1/2 -translate-y-1/2 z-20 w-9 h-9 rounded-full bg-black/30 hover:bg-[#e31e24] text-white flex items-center justify-center transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white border border-white/20"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5} aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
            </svg>
          </button>
        </>
      )}

      {/* Dot indicators — override min-h from globals */}
      {slides.length > 1 && (
        <div className="absolute bottom-5 left-1/2 -translate-x-1/2 z-20 flex items-center gap-1.5" style={{ minHeight: 'unset' }}>
          {slides.map((_, i) => (
            <button
              key={i}
              onClick={() => goTo(i)}
              aria-label={`Go to slide ${i + 1}`}
              style={{
                width: i === current ? '20px' : '6px',
                height: '6px',
                minHeight: 'unset',
                minWidth: 'unset',
                padding: 0,
                borderRadius: '9999px',
                backgroundColor: i === current ? '#e31e24' : 'rgba(255,255,255,0.4)',
                border: 'none',
                cursor: 'pointer',
                transition: 'all 0.3s',
                outline: 'none',
              }}
            />
          ))}
        </div>
      )}
    </section>
  );
}