import { setRequestLocale } from 'next-intl/server';
import { Card } from '@/components/ui/card';
import { getT } from '@/i18n/t';
import { RetryButton } from './retry-button';

/**
 * What the service worker serves when a navigation cannot reach the network.
 *
 * It lives under `[locale]` like every other screen, so it inherits the shell: the
 * stylesheet, the font and the theme the reader chose. The worker caches one copy per
 * language the reader actually visits, so this is already in their language when it is
 * served (see src/lib/service-worker.js).
 *
 * Rendered per request so it carries a live CSP nonce. Prerendered, its scripts would be
 * stamped at build time and the policy would block them, leaving a page that renders but
 * never becomes interactive. The worker caches the response headers along with the body,
 * so the copy it serves offline stays self consistent.
 */
export const dynamic = 'force-dynamic';

export default async function OfflinePage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getT(locale);

  return (
    <main className="mx-auto flex min-h-dvh w-full max-w-md items-center px-5">
      <Card className="w-full space-y-3">
        <h1 className="text-xl font-semibold tracking-tight">{t('offline.title')}</h1>
        <p className="text-sm text-[var(--text-muted)] text-pretty">{t('offline.body')}</p>
        <RetryButton label={t('common.retry')} />
      </Card>
    </main>
  );
}