'use client';

import React from 'react';

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

interface HeroSlideCarouselEditorProps {
  slides?: Slide[];
  theme?: string;
}

export function HeroSlideCarouselEditor({
  slides = [],
  theme = 'default',
}: HeroSlideCarouselEditorProps) {
  const themeColors: Record<string, { badge: string; gradient: string }> = {
    default: { badge: 'bg-crimson-red', gradient: 'from-brand-primary/30 to-brand-primary/10' },
    warm: { badge: 'bg-orange-500', gradient: 'from-orange-500/30 to-orange-300/10' },
    professional: { badge: 'bg-slate-600', gradient: 'from-slate-700/40 to-slate-500/10' },
    ocean: { badge: 'bg-blue-500', gradient: 'from-blue-500/30 to-indigo-300/10' },
    forest: { badge: 'bg-emerald-500', gradient: 'from-emerald-500/30 to-teal-300/10' },
  };
  const tc = themeColors[theme] || themeColors.default;

  if (slides.length === 0) {
    return (
      <section className="w-full py-10">
        <div className="container max-w-7xl mx-auto px-4">
          <div className="bg-dark-gray rounded-2xl p-12 text-center border border-soft-gray-border/20">
            <p className="text-text-light-gray">
              スライドを追加してください。右パネルの「Slides」から追加できます。
            </p>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="w-full py-10">
      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex gap-4 overflow-x-auto pb-4 snap-x snap-mandatory scrollbar-hide -mx-4 px-4">
          {slides.map((slide, i) => (
            <a
              key={i}
              href={slide.linkUrl || '#'}
              className="rounded-2xl overflow-hidden shrink-0 w-[85%] sm:w-[60%] lg:w-[45%] aspect-[16/10] snap-start shadow-md relative block"
            >
              {/* Background */}
              {slide.image ? (
                <img
                  src={slide.image}
                  alt={slide.title || `Slide ${i + 1}`}
                  className="w-full h-full object-cover absolute inset-0"
                />
              ) : (
                <div className={`w-full h-full absolute inset-0 bg-gradient-to-br ${tc.gradient}`} />
              )}

              {/* Overlay */}
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />

              {/* Content */}
              <div className="absolute inset-0 flex flex-col justify-end p-5">
                {slide.tag && (
                  <span className={`text-[10px] font-bold uppercase tracking-wider px-2.5 py-0.5 rounded-full ${tc.badge} text-white w-fit mb-2`}>
                    {slide.tag}
                  </span>
                )}
                {slide.title ? (
                  <h3 className="text-white text-lg font-bold line-clamp-2 leading-snug">
                    {slide.title}
                  </h3>
                ) : (
                  <div className="h-5 bg-white/30 rounded w-3/4 mb-1" />
                )}
                {slide.description ? (
                  <p className="text-white/70 text-xs line-clamp-1 mt-1">{slide.description}</p>
                ) : (
                  <div className="h-3 bg-white/20 rounded w-1/2 mt-1" />
                )}
              </div>
            </a>
          ))}
        </div>

        {/* Dot indicators */}
        {slides.length > 1 && (
          <div className="flex items-center justify-center gap-1.5 mt-3">
            {slides.map((_, i) => (
              <div key={i} className={`w-2 h-2 rounded-full ${i === 0 ? tc.badge : 'bg-slate-300'}`} />
            ))}
          </div>
        )}

        <p className="text-center text-xs text-text-light-gray mt-2 italic">
          ※ {slides.length}枚のスライドがカルーセルで表示されます
        </p>
      </div>
    </section>
  );
}
