import { notFound } from 'next/navigation';
import Link from 'next/link';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import ArticleCard from '@/components/ArticleCard';
import { listCategories, getCategoryArticles } from '@/lib/engine';

export const dynamic = 'force-dynamic';

const COLOR_MAP = {
  emerald: { bg: 'bg-emerald-50 dark:bg-emerald-950', text: 'text-emerald-700 dark:text-emerald-300', border: 'border-emerald-200 dark:border-emerald-800' },
  red:     { bg: 'bg-red-50 dark:bg-red-950',         text: 'text-red-700 dark:text-red-300',         border: 'border-red-200 dark:border-red-800' },
  amber:   { bg: 'bg-amber-50 dark:bg-amber-950',     text: 'text-amber-700 dark:text-amber-300',     border: 'border-amber-200 dark:border-amber-800' },
  blue:    { bg: 'bg-blue-50 dark:bg-blue-950',       text: 'text-blue-700 dark:text-blue-300',       border: 'border-blue-200 dark:border-blue-800' },
};

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const cats = await listCategories();
  const cat = cats.find(c => c.slug === slug);
  if (!cat) return { title: 'Категория не найдена' };
  return {
    title: `${cat.name} — ZeroPost`,
    description: cat.description,
    alternates: { canonical: `https://zeropost.ru/category/${slug}` },
  };
}

export default async function CategoryPage({ params }) {
  const { slug } = await params;
  const [cats, articles] = await Promise.all([
    listCategories(),
    getCategoryArticles(slug, { limit: 30 }),
  ]);
  const cat = cats.find(c => c.slug === slug);
  if (!cat) notFound();

  const colors = COLOR_MAP[cat.color] || COLOR_MAP.emerald;

  return (
    <>
      <Header />
      <div className="container-wide pt-8 pb-16">

        {/* Шапка категории */}
        <div className={`rounded-2xl border ${colors.border} ${colors.bg} px-6 py-8 mb-10`}>
          <div className="flex items-center gap-3 mb-3">
            <span className="text-3xl">{cat.icon}</span>
            <h1 className={`text-2xl sm:text-3xl font-bold ${colors.text}`}>{cat.name}</h1>
          </div>
          <p className="text-neutral-600 dark:text-neutral-400 max-w-xl">{cat.description}</p>
          <div className="mt-4 text-sm text-neutral-400">{articles.length} {articles.length === 1 ? 'статья' : articles.length < 5 ? 'статьи' : 'статей'}</div>
        </div>

        {/* Навигация по категориям */}
        <div className="flex flex-wrap gap-2 mb-8">
          {cats.map(c => (
            <Link
              key={c.slug}
              href={`/category/${c.slug}`}
              className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium border transition-colors ${
                c.slug === slug
                  ? `${(COLOR_MAP[c.color]||COLOR_MAP.emerald).bg} ${(COLOR_MAP[c.color]||COLOR_MAP.emerald).text} ${(COLOR_MAP[c.color]||COLOR_MAP.emerald).border}`
                  : 'bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:border-neutral-300'
              }`}
            >
              <span>{c.icon}</span> {c.name}
            </Link>
          ))}
        </div>

        {/* Статьи */}
        {articles.length > 0 ? (
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {articles.map(a => <ArticleCard key={a.id} article={a} />)}
          </div>
        ) : (
          <div className="text-center py-20">
            <div className="text-4xl mb-4">{cat.icon}</div>
            <h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Статей пока нет</h2>
            <p className="text-sm text-neutral-500">Скоро здесь появятся материалы по теме «{cat.name}»</p>
          </div>
        )}
      </div>
      <Footer />
    </>
  );
}