'use client';

import React from 'react';
import { useEditorData } from '@/hooks/useEditorData';

interface Article {
  slug?: string;
  title: string;
  cardImage?: string | null;
  image?: string;
  excerpt?: string | null;
  category?: string | null;
  linkUrl?: string;
}

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

interface SiteHeroSectionEditorProps {
  dataMode?: 'auto' | 'manual';
  count?: number;
  autoRotateInterval?: number;
  showExcerpt?: boolean;
  manualItems?: ManualItem[];
}

export function SiteHeroSectionEditor({
  dataMode = 'auto',
  count = 5,
  showExcerpt = true,
  manualItems = [],
}: SiteHeroSectionEditorProps) {
  const { data: dbArticles, loading } = useEditorData<Article[]>({
    type: 'latest',
    count,
    skip: dataMode === 'manual',
  });

  // Determine which articles to show
  let articles: Article[] = [];
  if (dataMode === 'manual' && manualItems.length > 0) {
    articles = manualItems.map((item) => ({
      title: item.title || '記事タイトル',
      cardImage: item.image || null,
      excerpt: item.excerpt || null,
      category: item.category || null,
      linkUrl: item.linkUrl || '/',
    }));
  } else if (dbArticles && dbArticles.length > 0) {
    articles = dbArticles;
  }

  if (loading && dataMode === 'auto') {
    return (
      <section className="bg-[#1A1A1F] py-12 md:py-16">
        <div className="container mx-auto px-4">
          <div className="relative rounded-xl overflow-hidden bg-[#202026] border border-[#2A2A33] h-[400px] flex items-center justify-center">
            <div className="text-center">
              <div className="text-4xl mb-4">🎮</div>
              <p className="text-white font-bold text-lg mb-2">ヒーローカルーセル</p>
              <p className="text-[#B8B8C0] text-sm">データ読み込み中...</p>
            </div>
          </div>
        </div>
      </section>
    );
  }

  if (articles.length === 0) {
    return (
      <section className="bg-[#1A1A1F] py-12 md:py-16">
        <div className="container mx-auto px-4">
          <div className="relative rounded-xl overflow-hidden bg-[#202026] border border-[#2A2A33] h-[400px] flex items-center justify-center">
            <div className="text-center">
              <div className="text-4xl mb-4">🎮</div>
              <p className="text-white font-bold text-lg mb-2">ヒーローカルーセル</p>
              <p className="text-[#B8B8C0] text-sm">
                {dataMode === 'manual' ? '手動アイテムを追加してください' : '記事がまだありません'}
              </p>
            </div>
          </div>
        </div>
      </section>
    );
  }

  const featured = articles[0];
  const imageUrl = featured.cardImage || featured.image || '';

  return (
    <section className="bg-[#1A1A1F] py-12 md:py-16">
      <div className="container mx-auto px-4">
        <div className="relative rounded-xl overflow-hidden bg-[#202026] border border-[#2A2A33] h-[400px]">
          {imageUrl && (
            <img
              src={imageUrl}
              alt={featured.title}
              className="absolute inset-0 w-full h-full object-cover opacity-60"
            />
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
          <div className="relative h-full flex flex-col justify-end p-8">
            {featured.category && (
              <span className="inline-block bg-[#E60023] text-white text-xs font-bold px-3 py-1 rounded-full mb-3 w-fit">
                {featured.category}
              </span>
            )}
            <h2 className="text-white text-2xl md:text-3xl font-bold mb-2 line-clamp-2">
              {featured.title}
            </h2>
            {showExcerpt && featured.excerpt && (
              <p className="text-[#B8B8C0] text-sm line-clamp-2">{featured.excerpt}</p>
            )}
            <div className="flex gap-2 mt-4">
              {articles.slice(0, count).map((_, i) => (
                <div
                  key={i}
                  className={`h-1 rounded-full ${i === 0 ? 'bg-[#E60023] w-8' : 'bg-white/30 w-4'}`}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
