'use client';

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

interface CategoryData {
  categoryName: string;
  articles: {
    title: string;
    image: string;
    linkUrl: string;
  }[];
}

interface SiteCategorySectionEditorProps {
  articlesPerCategory?: number;
}

export function SiteCategorySectionEditor({ articlesPerCategory = 4 }: SiteCategorySectionEditorProps) {
  const { data: categoriesData, loading } = useEditorData<CategoryData[]>({
    type: 'categories-with-articles',
    count: articlesPerCategory,
  });

  if (loading) {
    return (
      <div>
        {['攻略情報', 'キャラクター評価', 'リセマラ・ガチャ情報'].map((name) => (
          <section key={name} className="py-12 md:py-16 bg-[#0F0F12]">
            <div className="container mx-auto px-4">
              <div className="flex items-center justify-between mb-8">
                <h2 className="text-2xl md:text-3xl font-bold text-white border-l-4 border-[#E60023] pl-4">
                  {name}
                </h2>
                <span className="text-sm font-medium text-[#E60023]">もっと見る →</span>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {Array.from({ length: articlesPerCategory }).map((_, i) => (
                  <div key={i} className="bg-[#202026] rounded-xl overflow-hidden border border-[#2A2A33]">
                    <div className="h-[160px] bg-[#1A1A1F] animate-pulse" />
                    <div className="p-4 space-y-3">
                      <div className="bg-[#2A2A33] h-4 rounded w-3/4 animate-pulse" />
                      <div className="bg-[#2A2A33] h-3 rounded w-1/2 animate-pulse" />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>
        ))}
      </div>
    );
  }

  if (!categoriesData || categoriesData.length === 0) {
    return (
      <section className="py-12 md:py-16 bg-[#0F0F12]">
        <div className="container mx-auto px-4">
          <p className="text-[#B8B8C0] text-center py-8">カテゴリ記事がまだありません</p>
        </div>
      </section>
    );
  }

  return (
    <div>
      {categoriesData.map((cat) => (
        <section key={cat.categoryName} className="py-12 md:py-16 bg-[#0F0F12]">
          <div className="container mx-auto px-4">
            <div className="flex items-center justify-between mb-8">
              <h2 className="text-2xl md:text-3xl font-bold text-white border-l-4 border-[#E60023] pl-4">
                {cat.categoryName}
              </h2>
              <span className="text-sm font-medium text-[#E60023]">もっと見る →</span>
            </div>
            {cat.articles.length > 0 ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {cat.articles.slice(0, articlesPerCategory).map((article, i) => (
                  <div key={i} className="bg-[#202026] rounded-xl overflow-hidden border border-[#2A2A33] hover:border-[#E60023] transition-all">
                    <div className="relative h-[160px] overflow-hidden">
                      {article.image ? (
                        <img
                          src={article.image}
                          alt={article.title}
                          className="w-full h-full object-cover"
                        />
                      ) : (
                        <div className="w-full h-full bg-gradient-to-br from-[#1A1A1F] to-[#202026]" />
                      )}
                    </div>
                    <div className="p-4">
                      <span className="inline-block bg-[#E60023] text-white text-xs font-bold px-2 py-0.5 rounded-full mb-2">
                        {cat.categoryName}
                      </span>
                      <h3 className="text-white font-bold text-sm leading-tight line-clamp-2">
                        {article.title}
                      </h3>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-[#B8B8C0] text-sm">記事がまだありません</p>
            )}
          </div>
        </section>
      ))}
    </div>
  );
}
