import React from 'react';
import Link from 'next/link';
import { Clock, ArrowRight } from 'lucide-react';
import { getFeaturedArticles } from '@/lib/utils/db';

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

interface FeaturedArticleSpotlightProps {
  sectionTitle?: string;
  articleCount?: number;
  theme?: string;
  dataMode?: string;
  manualItems?: ManualItem[];
}

export async function FeaturedArticleSpotlight({
  sectionTitle = '注目の記事',
  articleCount = 1,
  theme = 'default',
  dataMode = 'auto',
  manualItems = [],
}: FeaturedArticleSpotlightProps) {
  const useManual = dataMode === 'manual' && manualItems.length > 0;
  const articles = useManual ? [] : await getFeaturedArticles(articleCount);

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

  const themeClasses: Record<string, { text: string; sub: string; badge: string; accent: string; link: string; border: string }> = {
    default: { text: 'text-white', sub: 'text-text-light-gray', badge: 'bg-[#E60023] text-white', accent: 'text-[#E60023]', link: 'text-[#E60023]', border: 'border-soft-gray-border/20' },
    warm: { text: 'text-white', sub: 'text-[#B8B8C0]', badge: 'bg-orange-500 text-white', accent: 'text-orange-600', link: 'text-orange-600', border: 'border-orange-200' },
    professional: { text: 'text-white', sub: 'text-[#B8B8C0]', badge: 'bg-slate-700 text-white', accent: 'text-[#B8B8C0]', link: 'text-blue-600', border: 'border-[#2A2A33]' },
    ocean: { text: 'text-white', sub: 'text-[#B8B8C0]', badge: 'bg-blue-500 text-white', accent: 'text-blue-600', link: 'text-blue-600', border: 'border-blue-200' },
    forest: { text: 'text-white', sub: 'text-[#B8B8C0]', badge: 'bg-emerald-600 text-white', accent: 'text-emerald-600', link: 'text-emerald-600', border: 'border-emerald-200' },
  };
  const t = themeClasses[theme] || themeClasses.default;

  if (displayItems.length === 0) {
    return (
      <section className="w-full py-10">
        <div className="container max-w-5xl mx-auto px-4">
          <p className="text-center text-text-light-gray text-sm">注目記事がありません</p>
        </div>
      </section>
    );
  }

  return (
    <section className="w-full py-10">
      <div className="container max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        {sectionTitle && (
          <h2 className={`text-xl sm:text-2xl font-bold mb-6 ${t.text}`}>{sectionTitle}</h2>
        )}
        <div className="space-y-8">
          {displayItems.map((item, idx) => {
            const Wrapper = item.isManual ? 'a' : Link;
            return (
              <Wrapper
                key={`${item.slug}-${idx}`}
                href={item.slug}
                className={`block rounded-2xl overflow-hidden border ${t.border} shadow-sm hover:shadow-lg transition-all group`}
              >
                <div className="grid grid-cols-1 md:grid-cols-2">
                  {/* Image */}
                  <div className="relative aspect-[16/10] md:aspect-auto overflow-hidden">
                    {item.cardImage ? (
                      <img
                        src={item.cardImage}
                        alt={item.title}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                      />
                    ) : (
                      <div className="w-full h-full bg-slate-200 flex items-center justify-center min-h-[200px]">
                        <span className="text-slate-400 text-sm">📷</span>
                      </div>
                    )}
                    {item.category && (
                      <span className={`absolute top-4 left-4 px-3 py-1.5 text-xs font-bold rounded-md ${t.badge}`}>
                        {item.category}
                      </span>
                    )}
                  </div>

                  {/* Content */}
                  <div className="p-6 sm:p-8 flex flex-col justify-center">
                    <div className="flex items-center gap-3 mb-3">
                      <span className={`text-xs font-bold uppercase tracking-wider ${t.accent}`}>最新記事</span>
                      {item.publishedAt && (
                        <span className="flex items-center gap-1 text-xs text-text-light-gray">
                          <Clock className="w-3.5 h-3.5" />
                          {new Date(item.publishedAt).toLocaleDateString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit' })}
                        </span>
                      )}
                    </div>
                    <h3 className={`text-lg sm:text-xl md:text-2xl font-bold leading-tight mb-3 ${t.text}`}>
                      {item.title}
                    </h3>
                    {item.metaDescription && (
                      <p className={`text-sm leading-relaxed line-clamp-3 mb-4 ${t.sub}`}>
                        {item.metaDescription}
                      </p>
                    )}
                    <span className={`inline-flex items-center gap-1.5 text-sm font-semibold ${t.link} group-hover:underline`}>
                      続きを読む <ArrowRight className="w-4 h-4" />
                    </span>
                  </div>
                </div>
              </Wrapper>
            );
          })}
        </div>
      </div>
    </section>
  );
}
