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

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

interface FeaturedArticleHeroProps {
  theme?: string;
  dataMode?: string;
  manualItems?: ManualItem[];
}

export async function FeaturedArticleHero({
  theme = 'default',
  dataMode = 'auto',
  manualItems = [],
}: FeaturedArticleHeroProps) {
  const manualItem = manualItems?.[0];
  const useManual = dataMode === 'manual' && manualItem && manualItem.title;
  const article = useManual ? null : await getFeaturedArticle();

  const display = useManual
    ? {
        slug: manualItem!.linkUrl || '#',
        title: manualItem!.title || '',
        cardImage: manualItem!.image || '',
        excerpt: manualItem!.excerpt || '',
        category: manualItem!.category || '',
        readingTime: manualItem!.readingTime || null,
        isManual: true,
      }
    : article
      ? {
          slug: `/post/${article.slug}`,          // updated prefix to /post/
          title: article.title,
          cardImage: article.cardImage || '',
          excerpt: article.excerpt || '',
          category: article.category || '',
          readingTime: article.readingTime || null,
          isManual: false,
        }
      : null;

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

  if (!display) {
    return (
      <section className="w-full py-10">
        <div className="container max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-dark-gray rounded-2xl border border-soft-gray-border/20 p-12 text-center">
            <p className="text-text-light-gray">注目記事がまだ設定されていません。記事の「featured」フラグを有効にしてください。</p>
          </div>
        </div>
      </section>
    );
  }

  const Wrapper = display.isManual ? 'a' : Link;

  return (
    <section className="w-full py-10">
      <div className="container max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <Wrapper
          href={display.slug}
          className="block relative rounded-2xl overflow-hidden group shadow-lg hover:shadow-xl transition-shadow"
        >
          {/* Background Image & Content Container */}
          <div className="w-full relative" style={{ height: '300px' }}>
            {display.cardImage ? (
              <img
                src={display.cardImage}
                alt={display.title}
                className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
              />
            ) : (
              <div className="absolute inset-0 w-full h-full bg-slate-300" />
            )}
            
            {/* Gradient Overlays */}
            <div className={`absolute inset-0 bg-gradient-to-br ${t.gradient} mix-blend-multiply opacity-60`} />
            <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />

            {/* Content */}
            <div className="absolute inset-0 flex flex-col justify-center p-6 sm:p-8 z-10">
              {display.category && (
                <span className={`text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full ${t.badge} text-white w-fit mb-3`}>
                  {display.category}
                </span>
              )}
              <h2 className="text-white text-2xl sm:text-3xl font-bold leading-tight line-clamp-2 mb-2">
                {display.title}
              </h2>
              {display.excerpt && (
                <p className="text-white/80 text-sm line-clamp-2 mb-4 max-w-2xl">
                  {display.excerpt}
                </p>
              )}
              <div className="flex items-center gap-4 mt-2">
                <span className={`inline-flex items-center gap-2 px-5 py-2 rounded-full text-sm font-semibold ${t.cta} text-white transition-colors shadow-sm`}>
                  記事を読む <ArrowRight className="w-4 h-4" />
                </span>
                {display.readingTime && (
                  <span className="flex items-center gap-1 text-white/70 text-xs font-medium">
                    <Clock className="w-3.5 h-3.5" /> {display.readingTime}分
                  </span>
                )}
              </div>
            </div>
          </div>
        </Wrapper>
      </div>
    </section>
  );
}
