'use client';

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

interface Article {
  slug: string;
  title: string;
  cardImage?: string | null;
  excerpt?: string | null;
  category?: string | null;
  publicationDate?: string | null;
  readingTime?: number | null;
}

interface SiteLatestArticlesEditorProps {
  count?: number;
}

export function SiteLatestArticlesEditor({ count = 12 }: SiteLatestArticlesEditorProps) {
  const { data: articles, loading } = useEditorData<Article[]>({ type: 'latest', count });

  if (loading) {
    return (
      <section className="py-12 md:py-16 bg-[#0F0F12]">
        <div className="container mx-auto px-4">
          <div className="flex items-center gap-3 mb-8">
            <div className="w-1 h-8 bg-[#E60023] rounded-full" />
            <h2 className="text-3xl md:text-4xl font-bold text-white">最新記事</h2>
          </div>
          <div className="flex gap-6 overflow-hidden">
            {Array.from({ length: 4 }).map((_, i) => (
              <div key={i} className="flex-shrink-0 w-[280px]">
                <div className="bg-[#202026] rounded-xl overflow-hidden border border-[#2A2A33]">
                  <div className="h-[180px] 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-4 rounded w-1/2 animate-pulse" />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  if (!articles || articles.length === 0) {
    return (
      <section className="py-12 md:py-16 bg-[#0F0F12]">
        <div className="container mx-auto px-4">
          <div className="flex items-center gap-3 mb-8">
            <div className="w-1 h-8 bg-[#E60023] rounded-full" />
            <h2 className="text-3xl md:text-4xl font-bold text-white">最新記事</h2>
          </div>
          <p className="text-[#B8B8C0] text-center py-8">記事がまだありません</p>
        </div>
      </section>
    );
  }

  return (
    <section className="py-12 md:py-16 bg-[#0F0F12]">
      <div className="container mx-auto px-4">
        <div className="flex items-center gap-3 mb-8">
          <div className="w-1 h-8 bg-[#E60023] rounded-full" />
          <h2 className="text-3xl md:text-4xl font-bold text-white">最新記事</h2>
        </div>
        <div className="flex gap-6 overflow-x-auto" style={{ scrollbarWidth: 'none' }}>
          {articles.slice(0, Math.min(count, 10)).map((article, index) => (
            <div key={article.slug} className="flex-shrink-0 w-[280px]">
              <div className="bg-[#202026] rounded-xl overflow-hidden border border-[#2A2A33] hover:border-[#E60023] transition-all h-full flex flex-col">
                <div className="relative h-[180px] overflow-hidden">
                  {article.cardImage ? (
                    <img
                      src={article.cardImage}
                      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 className="absolute top-3 left-3 bg-[#E60023] text-white font-bold text-xl w-10 h-10 rounded-lg flex items-center justify-center shadow-lg">
                    {index + 1}
                  </div>
                </div>
                <div className="p-4 flex-1 flex flex-col">
                  {article.category && (
                    <span className="inline-block bg-[#E60023] text-white text-xs font-bold px-2 py-0.5 rounded-full mb-2 w-fit">
                      {article.category}
                    </span>
                  )}
                  <h3 className="text-white font-bold text-sm leading-tight line-clamp-2 mb-2">
                    {article.title}
                  </h3>
                  <div className="mt-auto text-xs text-[#B8B8C0]">
                    {article.publicationDate && (
                      <span>{new Date(article.publicationDate).toLocaleDateString('ja-JP')}</span>
                    )}
                    {article.readingTime && <span> • {article.readingTime}分</span>}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
