import DocsLayout from '@/components/layout/DocsLayout';
import DocsContentClient from '@/components/docs/DocsContentClient';
import { DEFAULT_DOC_SLUG } from '@/lib/docs-types';
import { docsNavigation } from '@/docs/navigation';
import { getTranslations } from 'next-intl/server';
import type { Metadata } from 'next';
import type { DocsLocale } from '@/docs/navigation';


const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'https://quaros.network';

type PageProps = {
  params: Promise<{
    locale: DocsLocale;
    slug?: string[];
  }>;
};

function findDocBySlug(slug: string, locale: DocsLocale) {
  for (const group of docsNavigation) {
    const item = group.items.find((item) => item.slug === slug);
    if (item) {
      return {
        title: item.label[locale],
        category: group.label[locale],
      };
    }
  }
  return null;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { locale, slug } = await params;
  const slugPath = slug && slug.length > 0 ? slug.join('/') : DEFAULT_DOC_SLUG;
  const t = await getTranslations({ locale, namespace: 'Docs' });

  const docInfo = findDocBySlug(slugPath, locale);
  const title = docInfo
    ? `${docInfo.title} | ${t('title')}`
    : t('title');
  const description = docInfo
    ? `${docInfo.category}: ${docInfo.title} - ${t('intro')}`
    : t('intro');

  return {
    title,
    description,
    alternates: {
      canonical: `/${locale}/docs/${slugPath}`,
      languages: {
        'en': `/en/docs/${slugPath}`,
        'vi': `/vi/docs/${slugPath}`,
      },
    },
    openGraph: {
      title,
      description,
      url: `${baseUrl}/${locale}/docs/${slugPath}`,
      type: 'article',
      locale: locale,
      images: [
        {
          url: `${baseUrl}/og-image.png`,
          width: 1200,
          height: 630,
          alt: title,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title,
      description,
      images: [`${baseUrl}/og-image.png`],
    },
  };
}

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

  const slugPath = slug && slug.length > 0 ? slug.join('/') : DEFAULT_DOC_SLUG;
  const docInfo = findDocBySlug(slugPath, locale);

  return (
    <>
      {docInfo && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              '@context': 'https://schema.org',
              '@type': 'Article',
              headline: docInfo.title,
              description: docInfo.category,
              author: {
                '@type': 'Organization',
                name: 'Goodgo Documentation',
              },
              publisher: {
                '@type': 'Organization',
                name: 'Goodgo Documentation',
                logo: {
                  '@type': 'ImageObject',
                  url: `${baseUrl}/logo.png`,
                },
              },
              mainEntityOfPage: {
                '@type': 'WebPage',
                '@id': `${baseUrl}/${locale}/docs/${slugPath}`,
              },
            }),
          }}
        />
      )}
      <DocsLayout locale={locale} currentSlug={slugPath} docsNavigation={docsNavigation}>
        <DocsContentClient locale={locale} slug={slugPath} />
      </DocsLayout>

    </>
  );
}

