import React from 'react';
import Link from 'next/link';
import { TrendingUp, BookOpen, Clock } from 'lucide-react';
import { getTrendingArticles, getMostReadArticles } from '@/lib/utils/db';

interface ManualTrendItem {
  title?: string;
  linkUrl?: string;
}

interface ManualMostReadItem {
  title?: string;
  image?: string;
  linkUrl?: string;
}

interface TwoColumnLayoutProps {
  trendTitle?: string;
  mostReadTitle?: string;
  theme?: string;
  trendDataMode?: string;
  mostReadDataMode?: string;
  manualTrendItems?: ManualTrendItem[];
  manualMostReadItems?: ManualMostReadItem[];
}

export async function TwoColumnLayout({
  trendTitle = 'トレンド記事',
  mostReadTitle = 'よく読まれている記事',
  theme = 'default',
  trendDataMode = 'auto',
  mostReadDataMode = 'auto',
  manualTrendItems = [],
  manualMostReadItems = [],
}: TwoColumnLayoutProps) {
  const useManualTrend = trendDataMode === 'manual' && manualTrendItems.length > 0;
  const useManualMostRead = mostReadDataMode === 'manual' && manualMostReadItems.length > 0;

  const [trending, mostRead] = await Promise.all([
    useManualTrend ? Promise.resolve([]) : getTrendingArticles(5),
    useManualMostRead ? Promise.resolve([]) : getMostReadArticles(5),
  ]);

  const trendDisplay = useManualTrend
    ? manualTrendItems.map((item) => ({
        title: item.title || '', slug: item.linkUrl || '#', isManual: true,
      }))
    : trending.map((a) => ({
        title: a.title, slug: `/post/${a.slug}`, isManual: false,
      }));

  const mostReadDisplay = useManualMostRead
    ? manualMostReadItems.map((item) => ({
        title: item.title || '', slug: item.linkUrl || '#', cardImage: item.image || '', readingTime: null, isManual: true,
      }))
    : mostRead.map((a) => ({
        title: a.title, slug: `/post/${a.slug}`, cardImage: a.cardImage || '', readingTime: a.readingTime || null, isManual: false,
      }));

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

  return (
    <section className={`w-full py-10 ${t.bg}`}>
      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* Trending Widget */}
          <div className={`${t.card} border ${t.border} rounded-2xl p-6 shadow-sm`}>
            <div className="flex items-center gap-2 mb-5">
              <TrendingUp className={`w-5 h-5 ${t.accent}`} />
              <h3 className={`font-bold text-lg ${t.text}`}>{trendTitle}</h3>
            </div>
            <div className="space-y-3">
              {trendDisplay.map((item, i) => {
                return (
                  <Link
                    key={`t-${i}`}
                    href={item.slug}
                    className={`flex items-center gap-3 p-2.5 rounded-lg hover:bg-black/5 transition-colors group`}
                  >
                    <span className={`text-lg font-black ${t.accent} opacity-30 w-6 text-center`}>{i + 1}</span>
                    <div className="flex-1 min-w-0">
                      <h4 className={`text-sm font-medium line-clamp-2 leading-snug ${t.text}`}>{item.title}</h4>
                    </div>
                  </Link>
                );
              })}
              {trendDisplay.length === 0 && <p className={`text-sm ${t.sub} text-center py-2`}>記事がありません</p>}
            </div>
          </div>

          {/* Most Read Widget */}
          <div className={`${t.card} border ${t.border} rounded-2xl p-6 shadow-sm`}>
            <div className="flex items-center gap-2 mb-5">
              <BookOpen className={`w-5 h-5 ${t.accent}`} />
              <h3 className={`font-bold text-lg ${t.text}`}>{mostReadTitle}</h3>
            </div>
            <div className="space-y-3">
              {mostReadDisplay.map((item, i) => {
                return (
                  <Link
                    key={`m-${i}`}
                    href={item.slug}
                    className={`flex items-center gap-3 p-2.5 rounded-lg hover:bg-black/5 transition-colors group`}
                  >
                    {item.cardImage && (
                      <img src={item.cardImage} alt={item.title} className="w-14 h-10 object-cover rounded-md shrink-0" />
                    )}
                    <div className="flex-1 min-w-0">
                      <h4 className={`text-sm font-medium line-clamp-2 leading-snug ${t.text}`}>{item.title}</h4>
                      {item.readingTime && (
                        <span className={`text-xs ${t.sub} flex items-center gap-1 mt-0.5`}>
                          <Clock className="w-3 h-3" /> {item.readingTime}分
                        </span>
                      )}
                    </div>
                  </Link>
                );
              })}
              {mostReadDisplay.length === 0 && <p className={`text-sm ${t.sub} text-center py-2`}>記事がありません</p>}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
