/**
 * Services Catalog Page (/services)
 *
 * Full service menu with dynamic category filters,
 * real-time search, and sorting.
 */

import { Metadata } from 'next';
import { getCategories, getServices } from '@/lib/api/client';
import { ServiceDiscovery } from '@/components/ServiceDiscovery';
import { type Locale } from '@/i18n';

interface ServicesPageProps {
  params: Promise<{ locale: Locale }>;
}

export const revalidate = 60;

export async function generateMetadata({ params }: ServicesPageProps): Promise<Metadata> {
  const { locale } = await params;
  const isAr = locale === 'ar';

  return {
    title: isAr
      ? 'دليل الخدمات والعلاجات المنزلية | ShineCode دبي'
      : 'All Services & At-Home Treatments | ShineCode Dubai',
    description: isAr
      ? 'تصفح قائمة خدمات التجميل والمساج والعناية بالأظافر والشعر في منزلك في دبي والشارقة وعجمان.'
      : 'Explore our full menu of luxury at-home beauty, nails, hair, facials, and massage treatments across Dubai.',
    alternates: {
      canonical: `https://shinecode.ae/${locale}/services`,
      languages: {
        en: `https://shinecode.ae/en/services`,
        ar: `https://shinecode.ae/ar/services`,
        'x-default': `https://shinecode.ae/en/services`,
      },
    },
    openGraph: {
      title: isAr
        ? 'دليل الخدمات والعلاجات المنزلية | ShineCode دبي'
        : 'All Services & At-Home Treatments | ShineCode Dubai',
      description: isAr
        ? 'تصفح قائمة خدمات التجميل والمساج والعناية بالأظافر والشعر في منزلك في دبي.'
        : 'Explore our full menu of luxury at-home beauty, nails, hair, facials, and massage treatments across Dubai.',
      url: `https://shinecode.ae/${locale}/services`,
      siteName: 'ShineCode',
      images: ['https://shinecode.ae/images/frontend/socialP.webp'],
      locale: isAr ? 'ar_AE' : 'en_AE',
    },
  };
}

export default async function ServicesPage({ params }: ServicesPageProps) {
  const { locale } = await params;

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

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

  return (
    <ServiceDiscovery
      initialServices={services}
      categories={categories}
      activeCategorySlug="all"
      locale={locale}
    />
  );
}