import Link from 'next/link';
import { notFound } from 'next/navigation';
import {
    getProducts, getCategoryBySlug, productImage, productCategory,
} from '@/lib/wp';
import { ProductCard, type ProductCardItem } from '@/components/product-card';
import { Button } from '@/components/ui/button';
import { Icon, WhatsappGlyph } from '@/components/icons';
import { waGeneralInquiry } from '@/lib/whatsapp';
import type { Metadata } from 'next';

export const revalidate = 600;

interface Props { params: Promise<{ slug: string }>; }

export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const { slug } = await params;
    const cat = await getCategoryBySlug(slug).catch(() => null);
    if (!cat) return { title: 'Category not found' };
    return {
        title: cat.name,
        description: cat.description || `Browse our full range of ${cat.name} — request a quote on WhatsApp or via the form.`,
    };
}

export default async function CategoryPage({ params }: Props) {
    const { slug } = await params;
    const cat = await getCategoryBySlug(slug);
    if (!cat) notFound();

    const products = await getProducts({ categorySlug: slug, perPage: 24 }).catch(() => []);
    const cards: ProductCardItem[] = products.map((p) => ({
        slug: p.slug,
        title: p.title.rendered.replace(/&amp;/g, '&'),
        image: productImage(p, 'medium_large'),
        category: productCategory(p),
        inStock: true,
    }));

    return (
        <>
            <section className="bg-mesh-orange bg-noise pt-16 pb-14 lg:pt-24 lg:pb-20 relative">
                <div className="container-jt relative z-10">
                    <nav className="text-xs font-mono uppercase tracking-widest text-steel-400 mb-5">
                        <Link href="/" className="hover:text-orange-500">Home</Link>
                        <span className="mx-2">/</span>
                        <Link href="/products" className="hover:text-orange-500">Shop</Link>
                        <span className="mx-2">/</span>
                        <span className="text-orange-500">{cat.name}</span>
                    </nav>
                    <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-orange-600/10 border border-orange-600/30 text-orange-400 font-mono text-xs tracking-widest uppercase mb-5">
                        Category
                    </span>
                    <h1 className="font-display text-white text-[clamp(2.25rem,5vw,4rem)] leading-[0.95] mb-4">{cat.name}</h1>
                    {cat.description && (
                        <p className="text-steel-300 text-lg max-w-2xl">{cat.description}</p>
                    )}
                    <div className="mt-7 inline-flex items-center gap-3">
                        <span className="font-mono text-sm text-steel-400">{products.length} product{products.length === 1 ? '' : 's'}</span>
                    </div>
                </div>
            </section>

            <section className="section-pad bg-ink-950">
                <div className="container-jt">
                    {cards.length === 0 ? (
                        <div className="glass rounded-2xl p-12 text-center">
                            <p className="text-steel-300 mb-5">No products listed yet in this category.</p>
                            <Button asChild variant="whatsapp" size="lg">
                                <a href={waGeneralInquiry()} target="_blank" rel="noopener">
                                    <WhatsappGlyph className="w-4 h-4" /> Ask on WhatsApp
                                </a>
                            </Button>
                        </div>
                    ) : (
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 sm:gap-5 lg:gap-6">
                            {cards.map((c, i) => <ProductCard key={c.slug} p={c} eager={i < 4} />)}
                        </div>
                    )}
                </div>
            </section>
        </>
    );
}