import { getPageMarkdownUrl, getSource } from '@/lib/source';
import {
  DocsBody,
  DocsDescription,
  DocsPage,
  DocsTitle,
  MarkdownCopyButton,
  ViewOptionsPopover,
} from 'fumadocs-ui/layouts/docs/page';
import { notFound, redirect } from 'next/navigation';
import { getMDXComponents } from '@/components/mdx';
import type { Metadata } from 'next';
import { BadgeCheck } from 'lucide-react';
import Link from 'next/link';
import { createRelativeLink } from 'fumadocs-ui/mdx';
import { gitConfig } from '@/lib/shared';
import { i18n } from '@/lib/i18n';
import { getCurrentSession, getPermission } from '@/lib/session';

function loginUrl(lang: string, pathname: string) {
  const prefix = lang === i18n.defaultLanguage ? '' : `/${lang}`;

  return `${prefix}/login?next=${encodeURIComponent(pathname)}`;
}

export default async function Page(props: PageProps<'/[lang]/docs/[[...slug]]'>) {
  const params = await props.params;
  const session = await getCurrentSession();

  if (!session) {
    const prefix = params.lang === i18n.defaultLanguage ? '' : `/${params.lang}`;
    redirect(loginUrl(params.lang, `${prefix}/docs/${(params.slug ?? []).join('/')}`));
  }

  const source = getSource(await getPermission());
  const page = source.getPage(params.slug, params.lang);
  if (!page) notFound();

  const MDX = page.data.body;
  // Le journal vit à côté de la page, dans le dossier `log` du même sujet.
  const logUrl = `${page.url.split('/').slice(0, -1).join('/')}/log`;
  const markdownUrl = getPageMarkdownUrl(page).url;

  return (
    <DocsPage toc={page.data.toc} full={page.data.full}>
      {page.data.date ? (
        <p className="text-sm font-medium text-fd-muted-foreground">{page.data.date}</p>
      ) : null}
      <DocsTitle>{page.data.title}</DocsTitle>
      <DocsDescription className="mb-0 text-zinc-600 dark:text-zinc-300">
        {page.data.description}
      </DocsDescription>
      {page.data.verified ? (
        <p className="flex items-center gap-1.5 text-sm text-fd-muted-foreground">
          <BadgeCheck className="size-4 text-emerald-600 dark:text-emerald-400" aria-hidden />
          {page.data.verified}
          <Link href={logUrl} className="text-fd-primary hover:underline">
            See log
          </Link>
        </p>
      ) : null}
      <div className="flex flex-row gap-2 items-center border-b pb-6">
        <MarkdownCopyButton markdownUrl={markdownUrl} />
        <ViewOptionsPopover
          markdownUrl={markdownUrl}
          githubUrl={`https://github.com/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/content/docs/${page.path}`}
        />
      </div>
      <DocsBody>
        <MDX
          components={getMDXComponents({
            a: createRelativeLink(source, page),
          })}
        />
      </DocsBody>
    </DocsPage>
  );
}

export async function generateMetadata(
  props: PageProps<'/[lang]/docs/[[...slug]]'>,
): Promise<Metadata> {
  const params = await props.params;
  const page = getSource(await getPermission()).getPage(params.slug, params.lang);
  if (!page) notFound();

  return {
    title: page.data.title,
    description: page.data.description,
  };
}