import { getTranslations } from 'next-intl/server';
import { NarrowContainer } from '@/components/ui/layout';
import { themeApi } from '@/lib/api';
import type { Branding } from '@/types/api';

type FallbackSlug = 'faq' | 'contact' | 'how-it-works';

interface FallbackCmsPageProps {
  slug: FallbackSlug;
  locale: string;
}

export async function FallbackCmsPage({ slug, locale }: FallbackCmsPageProps) {
  const t = await getTranslations({ locale, namespace: 'p' });

  let branding: Branding | null = null;
  if (slug === 'contact') {
    try {
      branding = await themeApi.getBranding(locale);
    } catch {
      // branding fetch failed; render without support email
    }
  }

  const slugKey = slug === 'how-it-works' ? 'how_it_works' : slug;

  return (
    <NarrowContainer>
      <article className="py-10 md:py-16">
        <h1 className="font-heading text-3xl md:text-4xl font-bold text-neutral-900 text-start leading-tight">
          {t(`${slugKey}.title` as Parameters<typeof t>[0])}
        </h1>

        <div className="prose prose-neutral mt-8 max-w-none text-start">
          {slug === 'contact' ? (
            <p>
              {t('contact.body', {
                email: branding?.support_email ?? 'support@instaparty.app',
              } as Parameters<typeof t>[1])}
            </p>
          ) : (
            <p>{t(`${slugKey}.body` as Parameters<typeof t>[0])}</p>
          )}

          {slug === 'faq' && (
            <p className="mt-4 text-neutral-500">
              {t('faq.contact_prompt')}{' '}
              <a href={`/${locale}/p/contact`} className="text-primary-700 hover:underline">
                {t('contact.email_label')}
              </a>
            </p>
          )}
        </div>
      </article>
    </NarrowContainer>
  );
}