import { notFound } from "next/navigation";
import Link from "next/link";
import { getContinentBySlug, getCountryBySlug, getCategoryMeta, CATEGORIES } from "@/lib/continents";
import { getCountryPosts, getTrendingPosts } from "@/lib/wordpress";
import PostCard from "@/components/PostCard";
import Sidebar from "@/components/Sidebar";
import CategoryBadge from "@/components/CategoryBadge";
import type { Metadata } from "next";

export const revalidate = 300;

export async function generateMetadata({ params }: {
  params: { continent: string; country: string; category: string }
}): Promise<Metadata> {
  const country  = getCountryBySlug(params.continent, params.country);
  const catMeta  = getCategoryMeta(params.category);
  if (!country) return {};
  return {
    title: `${country.name} ${catMeta?.name ?? params.category} News`,
  };
}

export default async function CountryCategoryPage({ params }: {
  params: { continent: string; country: string; category: string }
}) {
  const continent = getContinentBySlug(params.continent);
  const country   = getCountryBySlug(params.continent, params.country);
  const catMeta   = getCategoryMeta(params.category);
  if (!continent || !country || !catMeta) notFound();

  const [{ data: posts }, trending] = await Promise.all([
    getCountryPosts(params.country, 1, params.category).catch(() => ({ data: [] })),
    getTrendingPosts().catch(() => []),
  ]);

  return (
    <div className="max-w-screen-xl mx-auto px-4 py-8">

      {/* Breadcrumb */}
      <div className="flex items-center gap-2 text-sm text-gray-500 mb-6 flex-wrap">
        <Link href="/" className="hover:text-white">Home</Link>
        <span>/</span>
        <Link href={`/${continent.slug}`} className="hover:text-white">{continent.name}</Link>
        <span>/</span>
        <Link href={`/${continent.slug}/${country.slug}`} className="hover:text-white">{country.name}</Link>
        <span>/</span>
        <span className={catMeta.color}>{catMeta.name}</span>
      </div>

      {/* Header */}
      <div className="flex items-center gap-4 mb-8">
        <div className={`w-2 h-14 rounded-full ${catMeta.bg}`} />
        <div>
          <div className="flex items-center gap-2 mb-1">
            <span className="text-2xl">{country.flag}</span>
            <CategoryBadge category={catMeta.name} size="md" />
          </div>
          <h1 className="text-white text-3xl font-display font-bold">
            {country.name} — {catMeta.name}
          </h1>
          <p className="text-gray-400 text-sm mt-0.5">{continent.name}</p>
        </div>
      </div>

      {/* Other categories for this country */}
      <div className="flex items-center gap-2 mb-6 overflow-x-auto pb-1">
        {CATEGORIES.map(cat => (
          <Link key={cat.slug} href={`/${continent.slug}/${country.slug}/${cat.slug}`}
            className={`shrink-0 text-xs px-3 py-1.5 rounded-full border transition-colors
              ${cat.slug === catMeta.slug
                ? `${catMeta.bg} text-white border-transparent`
                : "border-white/10 text-gray-400 hover:text-white hover:bg-white/5"}`}>
            {cat.name}
          </Link>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2">
          {posts.length === 0 ? (
            <div className="text-center py-20 text-gray-500">
              <div className="text-5xl mb-4">{country.flag}</div>
              <p className="text-lg">No {catMeta.name} posts yet for {country.name}.</p>
              <p className="text-sm mt-2">Run the crawler to fetch articles.</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {posts.map(post => <PostCard key={post.id} post={post} />)}
            </div>
          )}
        </div>
        <Sidebar trendingPosts={trending.length ? trending : posts.slice(0, 6)} />
      </div>
    </div>
  );
}
