/**
 * Legacy Category Route (/categories/[slug])
 *
 * Preserves SEO and backwards compatibility with dynamic OpenGraph metadata,
 * server-side data hydration, and seamless rendering via unified <ServiceDiscovery />.
 */

import { type Metadata } from 'next';
import { notFound } from 'next/navigation';
import { getCategories, getServices, slugify } from '@/lib/api/client';
import { createLocalizedMetadata } from '@/lib/seo/metadata';
import { CategoryClient } from '@/components/category/CategoryClient';
import { ServiceDiscovery } from '@/components/ServiceDiscovery';
import { type Locale } from '@/i18n';

interface CategoryPageProps {
  params: Promise<{ locale: Locale; slug: string }>;
}

export const revalidate = 60;

export async function generateStaticParams() {
  const result = await getCategories();
  if (!result.ok) return [];

  const params: { locale: Locale; slug: string }[] = [];
  result.data.forEach((category) => {
    const slug = category.slug || slugify(category.name);
    params.push({ locale: 'en', slug });
    params.push({ locale: 'ar', slug });
  });

  return params;
}

export async function generateMetadata({ params }: CategoryPageProps): Promise<Metadata> {
  const { locale, slug } = await params;
  const categoriesResult = await getCategories();

  if (!categoriesResult.ok) {
    return { title: 'Category Not Found' };
  }

  const targetSlug = slug.toLowerCase().trim();
  const category = categoriesResult.data.find((c) => {
    const cSlug = c.slug?.toLowerCase().trim();
    const cNameSlug = slugify(c.name);
    return (
      cSlug === targetSlug ||
      cNameSlug === targetSlug ||
      cSlug?.replace(/-/g, '') === targetSlug.replace(/-/g, '') ||
      cNameSlug.replace(/-/g, '') === targetSlug.replace(/-/g, '')
    );
  });

  if (!category) {
    return { title: 'Category Not Found' };
  }

  const isAr = locale === 'ar';
  const categoryTitle = isAr
    ? `خدمات ${category.name} الفاخرة في دبي | ShineCode`
    : `Premium ${category.name} in Dubai`;
  const description =
    category.description ||
    (isAr
      ? `تصفحي أرقى علاجات وخدمات ${category.name} المنزلية في دبي. معايير تعقيم طبية، نخبة الخبراء، وراحة تامة في منزلك.`
      : `Browse professional ${category.name.toLowerCase()} services at home in Dubai. Expert verified professionals, hospital-grade sterilization, transparent pricing.`);

  return createLocalizedMetadata({
    locale,
    title: categoryTitle,
    description,
    path: `/categories/${slug}`,
    image: category.category_image || undefined,
  });
}

export default async function CategoryPage({ params }: CategoryPageProps) {
  const { locale, slug } = await params;

  const [categoriesResult, servicesResult] = await Promise.all([
    getCategories(),
    getServices(),
  ]);

  if (!categoriesResult.ok) {
    notFound();
  }

  const categories = categoriesResult.data;
  const services = servicesResult.ok ? servicesResult.data : [];

  const targetSlug = slug.toLowerCase().trim();
  const category = categories.find((c) => {
    const cSlug = c.slug?.toLowerCase().trim();
    const cNameSlug = slugify(c.name);
    return (
      cSlug === targetSlug ||
      cNameSlug === targetSlug ||
      cSlug?.replace(/-/g, '') === targetSlug.replace(/-/g, '') ||
      cNameSlug.replace(/-/g, '') === targetSlug.replace(/-/g, '')
    );
  });

  if (!category) {
    notFound();
  }

  const matchedSlug = category.slug || slugify(category.name);
  const isAr = locale === 'ar';

  const categoryServices = services.filter((s) => s.category_id === category.id);

  // Breadcrumb Schema
  const breadcrumbJsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      {
        '@type': 'ListItem',
        position: 1,
        name: isAr ? 'الرئيسية' : 'Home',
        item: `https://shinecode.ae/${locale}`,
      },
      {
        '@type': 'ListItem',
        position: 2,
        name: isAr ? 'الخدمات' : 'Services',
        item: `https://shinecode.ae/${locale}/services`,
      },
      {
        '@type': 'ListItem',
        position: 3,
        name: category.name,
        item: `https://shinecode.ae/${locale}/categories/${matchedSlug}`,
      },
    ],
  };

  // CollectionPage / ItemList Schema
  const collectionJsonLd = {
    '@context': 'https://schema.org',
    '@type': 'CollectionPage',
    name: isAr ? `خدمات ${category.name}` : `${category.name} Services`,
    description: category.description || `${category.name} services in Dubai, Sharjah, and Ajman`,
    url: `https://shinecode.ae/${locale}/categories/${matchedSlug}`,
    mainEntity: {
      '@type': 'ItemList',
      itemListElement: categoryServices.slice(0, 10).map((s, idx) => ({
        '@type': 'ListItem',
        position: idx + 1,
        name: s.name,
        url: `https://shinecode.ae/${locale}/services/${s.slug}`,
      })),
    },
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionJsonLd) }}
      />
      <CategoryClient categoryId={category.id} categoryName={category.name} />
      <ServiceDiscovery
        initialServices={services}
        categories={categories}
        activeCategorySlug={matchedSlug}
        locale={locale}
      />
    </>
  );
}