'use client';

import React, { useState, useEffect, useCallback } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

interface Slide {
  image: string;
  title: string;
  description?: string;
  tag: string;
  linkUrl: string;
}

interface HeroFullWidthSliderProps {
  slides?: Slide[];
  autoplaySpeed?: number;
  theme?: string;
}

export function HeroFullWidthSlider({
  slides = [],
  autoplaySpeed = 5000,
  theme = 'default',
}: HeroFullWidthSliderProps) {
  const [current, setCurrent] = useState(0);
  const safeSlides = slides.length > 0 ? slides : [{ image: '', title: 'スライドを追加してください', tag: '', linkUrl: '' }];

  const next = useCallback(() => setCurrent((c) => (c + 1) % safeSlides.length), [safeSlides.length]);
  const prev = useCallback(() => setCurrent((c) => (c - 1 + safeSlides.length) % safeSlides.length), [safeSlides.length]);

  useEffect(() => {
    if (safeSlides.length <= 1 || !autoplaySpeed) return;
    const timer = setInterval(next, autoplaySpeed);
    return () => clearInterval(timer);
  }, [next, safeSlides.length, autoplaySpeed]);

  const themeClasses: Record<string, { overlay: string; tag: string; dot: string; dotActive: string }> = {
    default: { overlay: 'from-black/70 via-black/30 to-transparent', tag: 'bg-crimson-red text-white', dot: 'bg-white/40', dotActive: 'bg-white' },
    warm: { overlay: 'from-orange-900/70 via-orange-900/20 to-transparent', tag: 'bg-orange-500 text-white', dot: 'bg-white/40', dotActive: 'bg-orange-400' },
    professional: { overlay: 'from-slate-900/80 via-slate-900/40 to-slate-900/10', tag: 'bg-slate-700 text-white', dot: 'bg-white/30', dotActive: 'bg-amber-400' },
    ocean: { overlay: 'from-blue-900/70 via-blue-900/20 to-transparent', tag: 'bg-blue-500 text-white', dot: 'bg-white/40', dotActive: 'bg-blue-300' },
    forest: { overlay: 'from-emerald-900/70 via-emerald-900/20 to-transparent', tag: 'bg-emerald-600 text-white', dot: 'bg-white/40', dotActive: 'bg-emerald-300' },
  };
  const t = themeClasses[theme] || themeClasses.default;

  return (
    <section className="relative w-full h-[50vh] sm:h-[60vh] md:h-[70vh] overflow-hidden group">
      {/* Slides */}
      {safeSlides.map((slide, i) => (
        <div
          key={i}
          className={`absolute inset-0 transition-opacity duration-700 ease-in-out ${i === current ? 'opacity-100 z-10' : 'opacity-0 z-0'}`}
        >
          {slide.image ? (
            <img src={slide.image} alt={slide.title} className="w-full h-full object-cover" />
          ) : (
            <div className="w-full h-full bg-gradient-to-br from-slate-700 to-slate-900 flex items-center justify-center text-slate-500 text-sm">
              📷 画像を追加
            </div>
          )}
          {/* Gradient overlay */}
          <div className={`absolute inset-0 bg-gradient-to-t ${t.overlay}`} />
          {/* Content */}
          <div className="absolute bottom-0 left-0 right-0 z-20 p-6 sm:p-10 md:p-14">
            <div className="container max-w-5xl mx-auto">
              {slide.tag && (
                <span className={`inline-block px-3 py-1 text-xs font-bold rounded-md mb-3 ${t.tag}`}>
                  {slide.tag}
                </span>
              )}
              <h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white leading-tight max-w-2xl">
                {slide.title}
              </h2>
              {slide.description && (
                <p className="text-white/80 text-sm sm:text-base mt-2 max-w-xl line-clamp-2">{slide.description}</p>
              )}
            </div>
          </div>
        </div>
      ))}

      {/* Nav arrows */}
      {safeSlides.length > 1 && (
        <>
          <button
            onClick={prev}
            className="absolute left-4 top-1/2 -translate-y-1/2 z-30 w-10 h-10 rounded-full bg-black/30 backdrop-blur-sm text-white flex items-center justify-center sm:opacity-0 sm:group-hover:opacity-100 transition-opacity hover:bg-black/50"
          >
            <ChevronLeft className="w-5 h-5" />
          </button>
          <button
            onClick={next}
            className="absolute right-4 top-1/2 -translate-y-1/2 z-30 w-10 h-10 rounded-full bg-black/30 backdrop-blur-sm text-white flex items-center justify-center sm:opacity-0 sm:group-hover:opacity-100 transition-opacity hover:bg-black/50"
          >
            <ChevronRight className="w-5 h-5" />
          </button>
        </>
      )}

      {/* Dot pagination */}
      {safeSlides.length > 1 && (
        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-30 flex items-center gap-2">
          {safeSlides.map((_, i) => (
            <button
              key={i}
              onClick={() => setCurrent(i)}
              className={`w-3 h-3 rounded-full transition-all duration-300 ${
                i === current ? `${t.dotActive} scale-110` : `${t.dot} hover:bg-white/60`
              }`}
            />
          ))}
        </div>
      )}
    </section>
  );
}
