import React from 'react';
import Link from 'next/link';
import { getLatestArticles } from '@/lib/utils/db';

interface ManualItem {
  title?: string;
  image?: string;
  category?: string;
  excerpt?: string;
  linkUrl?: string;
}

interface HeroBlogCarouselProps {
  sectionTitle?: string;
  articleCount?: number;
  bgImage?: string;
  showCategoryBadge?: string;
  showExcerpt?: string;
  theme?: string;
  dataMode?: string;
  manualItems?: ManualItem[];
}

export async function HeroBlogCarousel({
  sectionTitle = '最新記事',
  articleCount = 5,
  bgImage = '',
  showCategoryBadge = 'yes',
  showExcerpt = 'yes',
  theme = 'default',
  dataMode = 'auto',
  manualItems = [],
}: HeroBlogCarouselProps) {
  const useManual = dataMode === 'manual' && manualItems.length > 0;
  const articles = useManual ? [] : await getLatestArticles(articleCount);

  const displayItems = useManual
    ? manualItems.map((item) => ({
        slug: item.linkUrl || '#',
        title: item.title || '',
        cardImage: item.image || '',
        category: item.category || '',
        excerpt: item.excerpt || '',
        isManual: true,
      }))
    : articles.map((a) => ({
        slug: `/post/${a.slug}`,
        title: a.title,
        cardImage: a.cardImage || '',
        category: a.category || '',
        excerpt: a.excerpt || '',
        isManual: false,
      }));

  const themeClasses: Record<string, { gradient: string; badge: string }> = {
    default: { gradient: 'from-brand-primary/80 to-brand-primary/30', badge: 'bg-[#E60023]' },
    warm: { gradient: 'from-orange-700/80 to-orange-400/30', badge: 'bg-orange-500' },
    professional: { gradient: 'from-slate-900/90 to-slate-700/50', badge: 'bg-slate-600' },
    ocean: { gradient: 'from-blue-800/80 to-indigo-400/30', badge: 'bg-blue-500' },
    forest: { gradient: 'from-emerald-800/80 to-teal-400/30', badge: 'bg-emerald-500' },
  };
  const t = themeClasses[theme] || themeClasses.default;

  if (displayItems.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">まだ記事がありません。</p>
          </div>
        </div>
      </section>
    );
  }

  const hero = displayItems[0];
  const sidebar = displayItems.slice(1);

  return (
    <section className="w-full py-10">
      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {sectionTitle && (
          <h2 className="text-2xl font-bold text-white mb-6">{sectionTitle}</h2>
        )}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          {/* Main Hero Article */}
          {hero.isManual ? (
            <a
              href={hero.slug}
              className="lg:col-span-2 relative rounded-2xl overflow-hidden group shadow-md hover:shadow-lg transition-shadow min-h-[320px] block"
            >
              {(hero.cardImage || bgImage) ? (
                <img src={hero.cardImage || bgImage} alt={hero.title} className="w-full h-full object-cover absolute inset-0 group-hover:scale-105 transition-transform duration-700" />
              ) : (
                <div className="w-full h-full absolute inset-0 bg-slate-300" />
              )}
              <div className={`absolute inset-0 bg-gradient-to-t ${t.gradient}`} />
              <div className="absolute inset-0 flex flex-col justify-end p-6">
                {showCategoryBadge === 'yes' && hero.category && (
                  <span className={`text-[11px] font-bold uppercase tracking-wider px-3 py-1 rounded-full ${t.badge} text-white w-fit mb-3`}>{hero.category}</span>
                )}
                <h3 className="text-white text-xl sm:text-2xl font-bold leading-tight line-clamp-2 mb-1">{hero.title}</h3>
                {showExcerpt === 'yes' && hero.excerpt && (
                  <p className="text-white/80 text-sm line-clamp-2">{hero.excerpt}</p>
                )}
              </div>
            </a>
          ) : (
            <Link
              href={hero.slug}
              className="lg:col-span-2 relative rounded-2xl overflow-hidden group shadow-md hover:shadow-lg transition-shadow min-h-[320px]"
            >
              {(hero.cardImage || bgImage) ? (
                <img src={hero.cardImage || bgImage} alt={hero.title} className="w-full h-full object-cover absolute inset-0 group-hover:scale-105 transition-transform duration-700" />
              ) : (
                <div className="w-full h-full absolute inset-0 bg-slate-300" />
              )}
              <div className={`absolute inset-0 bg-gradient-to-t ${t.gradient}`} />
              <div className="absolute inset-0 flex flex-col justify-end p-6">
                {showCategoryBadge === 'yes' && hero.category && (
                  <span className={`text-[11px] font-bold uppercase tracking-wider px-3 py-1 rounded-full ${t.badge} text-white w-fit mb-3`}>{hero.category}</span>
                )}
                <h3 className="text-white text-xl sm:text-2xl font-bold leading-tight line-clamp-2 mb-1">{hero.title}</h3>
                {showExcerpt === 'yes' && hero.excerpt && (
                  <p className="text-white/80 text-sm line-clamp-2">{hero.excerpt}</p>
                )}
              </div>
            </Link>
          )}

          {/* Sidebar Articles */}
          <div className="flex flex-col gap-3">
            {sidebar.map((item, idx) => {
              const Wrapper = item.isManual ? 'a' : Link;
              return (
                <Wrapper
                  key={`s-${idx}`}
                  href={item.slug}
                  className="relative rounded-xl overflow-hidden group shadow-sm hover:shadow-md transition-shadow flex-1 min-h-[76px]"
                >
                  {(item.cardImage || bgImage) ? (
                    <img src={item.cardImage || bgImage} alt={item.title} className="w-full h-full object-cover absolute inset-0 group-hover:scale-105 transition-transform duration-500" />
                  ) : (
                    <div className="w-full h-full absolute inset-0 bg-slate-300" />
                  )}
                  <div className={`absolute inset-0 bg-gradient-to-t ${t.gradient}`} />
                  <div className="absolute inset-0 flex flex-col justify-end p-3">
                    {showCategoryBadge === 'yes' && item.category && (
                      <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${t.badge} text-white w-fit mb-1`}>{item.category}</span>
                    )}
                    <h4 className="text-white text-sm font-semibold line-clamp-2 leading-snug">{item.title}</h4>
                  </div>
                </Wrapper>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}
