'use client';
import React from 'react';
import { Clock, ArrowRight, Star } from 'lucide-react';
import { useEditorData } from '@/hooks/useEditorData';
import type { Article } from '@/lib/utils/db';

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

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

export function FeaturedArticleHeroEditor({
  theme = 'default',
  dataMode = 'auto',
  manualItems = [],
}: FeaturedArticleHeroEditorProps) {
  const isManual = dataMode === 'manual';
  const manualItem = manualItems?.[0];
  const hasManualData = isManual && manualItem && manualItem.title;

  const { data: autoArticle, loading } = useEditorData<Article>({
    type: 'featured',
    skip: isManual,
  });

  const themeColors: Record<string, { gradient: string; badge: string; btn: string }> = {
    default: { gradient: 'from-[#1D3557]/60 to-[#1D3557]/20', badge: 'bg-[#E53935]', btn: 'bg-[#E53935]' },
    warm: { gradient: 'from-orange-500/60 to-orange-300/20', badge: 'bg-orange-500', btn: 'bg-orange-600' },
    professional: { gradient: 'from-slate-700/70 to-slate-500/20', badge: 'bg-slate-600', btn: 'bg-amber-400 text-slate-900' },
    ocean: { gradient: 'from-blue-600/60 to-indigo-400/20', badge: 'bg-blue-500', btn: 'bg-blue-600' },
    forest: { gradient: 'from-emerald-600/60 to-teal-400/20', badge: 'bg-emerald-500', btn: 'bg-emerald-600' },
  };
  const tc = themeColors[theme] || themeColors.default;

  // Determine what to display
  const display = hasManualData
    ? { image: manualItem!.image, title: manualItem!.title!, category: manualItem!.category, excerpt: manualItem!.excerpt, readingTime: manualItem!.readingTime, href: manualItem!.linkUrl || '#' }
    : autoArticle
    ? { image: autoArticle.cardImage, title: autoArticle.title, category: autoArticle.category, excerpt: autoArticle.excerpt, readingTime: autoArticle.readingTime, href: autoArticle.slug }
    : null;

  return (
    <section className="w-full py-10 relative">
      <div className="container max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="relative rounded-2xl overflow-hidden shadow-lg">
          {loading && !isManual ? (
            /* Loading skeleton */
            <div className={`w-full bg-gradient-to-br ${tc.gradient} animate-pulse flex items-center relative`} style={{ height: '300px' }}>
              <div className="p-6 sm:p-8 w-full space-y-3 relative z-10">
                <div className="h-5 bg-white/30 rounded w-24" />
                <div className="h-8 bg-white/30 rounded w-2/3" />
                <div className="h-4 bg-white/20 rounded w-1/2" />
              </div>
            </div>
          ) : display ? (
            /* Real data (auto or manual) */
            <div className="w-full relative" style={{ height: '300px' }}>
              {display.image ? (
                <img src={display.image} alt={display.title} className="absolute inset-0 w-full h-full object-cover" />
              ) : (
                <div className={`absolute inset-0 w-full h-full bg-gradient-to-br ${tc.gradient}`} />
              )}
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
              <div className="absolute inset-0 flex flex-col justify-center p-6 sm:p-8 z-10">
                <div className="flex items-center gap-2 mb-3">
                  <Star className="w-4 h-4 text-yellow-400" />
                  {display.category && (
                    <span className={`text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full ${tc.badge} text-white`}>
                      {display.category}
                    </span>
                  )}
                </div>
                <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">
                  <a href={display.href} className={`inline-flex items-center gap-2 px-5 py-2 rounded-full ${tc.btn} text-white text-sm font-semibold`}>
                    記事を読む <ArrowRight className="w-4 h-4" />
                  </a>
                  {display.readingTime && (
                    <span className="flex items-center gap-1 text-white/70 text-xs">
                      <Clock className="w-3.5 h-3.5" /> {display.readingTime}分
                    </span>
                  )}
                </div>
              </div>
            </div>
          ) : isManual ? (
            /* Manual mode — no data entered */
            <div className="w-full flex items-center justify-center bg-slate-100 border-2 border-dashed border-slate-300" style={{ height: '300px' }}>
              <p className="text-sm text-slate-500">「Manual Item」にタイトルと画像を入力してください</p>
            </div>
          ) : (
            /* Auto mode — no featured article in DB */
            <div className="w-full flex items-center justify-center bg-slate-100 border-2 border-dashed border-slate-300" style={{ height: '300px' }}>
              <div className="text-center">
                <p className="text-sm font-medium text-slate-600 mb-1">注目記事が見つかりません</p>
                <p className="text-xs text-slate-400">記事の「featured」フラグを有効にしてください</p>
              </div>
            </div>
          )}
        </div>
        <p className="absolute bottom-2 w-full text-center text-xs text-slate-400 italic left-0">
          {isManual ? '※ 手動モード — 上記の内容が公開ページに表示されます' : '※ 自動モード — DBの注目記事を表示中'}
        </p>
      </div>
    </section>
  );
}
