'use client';

import React, { useState, useEffect, useCallback } from 'react';

interface CardItem {
  image: string;
  title: string;
  excerpt: string;
  category: string;
  linkUrl: string;
}

interface ArticleCardCarouselProps {
  cards?: CardItem[];
  autoplaySpeed?: number;
  theme?: string;
}

export function ArticleCardCarousel({
  cards = [],
  autoplaySpeed = 4000,
  theme = 'default',
}: ArticleCardCarouselProps) {
  const [current, setCurrent] = useState(0);
  const safeCards = cards.length > 0 ? cards : [{ image: '', title: 'カードを追加してください', excerpt: '', category: '', linkUrl: '' }];

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

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

  const themeClasses: Record<string, { bg: string; card: string; text: string; sub: string; badge: string; dot: string; dotActive: string }> = {
    default: { bg: 'bg-deep-black', card: 'bg-white', text: 'text-white', sub: 'text-text-light-gray', badge: 'bg-crimson-red text-white', dot: 'bg-slate-300', dotActive: 'bg-crimson-red' },
    warm: { bg: 'bg-orange-50/30', card: 'bg-white', text: 'text-slate-800', sub: 'text-slate-500', badge: 'bg-orange-500 text-white', dot: 'bg-orange-200', dotActive: 'bg-orange-500' },
    professional: { bg: 'bg-slate-50', card: 'bg-white', text: 'text-slate-800', sub: 'text-slate-500', badge: 'bg-slate-700 text-white', dot: 'bg-slate-300', dotActive: 'bg-slate-700' },
    ocean: { bg: 'bg-blue-50/30', card: 'bg-white', text: 'text-slate-800', sub: 'text-slate-500', badge: 'bg-blue-500 text-white', dot: 'bg-blue-200', dotActive: 'bg-blue-500' },
    forest: { bg: 'bg-emerald-50/30', card: 'bg-white', text: 'text-slate-800', sub: 'text-slate-500', badge: 'bg-emerald-600 text-white', dot: 'bg-emerald-200', dotActive: 'bg-emerald-500' },
  };
  const t = themeClasses[theme] || themeClasses.default;

  const card = safeCards[current];

  return (
    <section className={`w-full py-12 ${t.bg}`}>
      <div className="container max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className={`rounded-2xl overflow-hidden shadow-lg ${t.card}`}>
          {/* Image */}
          <div className="relative">
            {card.image ? (
              <img src={card.image} alt={card.title} className="w-full aspect-[3/2] object-cover" />
            ) : (
              <div className="w-full aspect-[3/2] bg-slate-100 flex items-center justify-center text-slate-400 text-sm">
                📷 画像を追加
              </div>
            )}
          </div>

          {/* Content */}
          <div className="p-6 sm:p-8">
            {card.category && (
              <span className={`inline-block px-3 py-1 text-xs font-bold rounded-full mb-3 ${t.badge}`}>
                {card.category}
              </span>
            )}
            <h3 className={`text-xl sm:text-2xl font-bold leading-tight mb-3 ${t.text}`}>
              {card.title}
            </h3>
            {card.excerpt && (
              <p className={`text-sm leading-relaxed line-clamp-3 ${t.sub}`}>
                {card.excerpt}
              </p>
            )}
          </div>
        </div>

        {/* Dot pagination */}
        {safeCards.length > 1 && (
          <div className="flex items-center justify-center gap-2 mt-6">
            {safeCards.map((_, i) => (
              <button
                key={i}
                onClick={() => setCurrent(i)}
                className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
                  i === current ? `${t.dotActive} scale-110` : `${t.dot} hover:opacity-70`
                }`}
              />
            ))}
          </div>
        )}
      </div>
    </section>
  );
}
