/**
 * RegisterPage - phone-first registration shell.
 *
 * Outer scaffolding only. All registration logic lives in RegisterShell.
 */

'use client';

import { useT } from '@/lib/i18n/react';
import type { Locale } from '@/lib/i18n';
import { HydratedIsland } from '@/components/HydratedIsland';
import { AppShell } from '@/components/ui/layout/AppShell';
import { Container } from '@/components/ui/layout/Container';
import { SiteNav } from '@/components/ui/layout/SiteNav';
import { BottomNav, useCustomerNavItems } from '@/components/ui/layout/BottomNav';
import {
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
} from '@/components/ui/overlays/Toast';
import { useToast } from '@/components/ui/overlays/Toast/useToast';
import { RegisterShell } from './RegisterShell';

// ─── Props ────────────────────────────────────────────────────────────────────

export interface RegisterPageProps {
  redirectTo?: string;
  /** Server-resolved locale — threads to HydratedIsland so SSR + first hydration render use correct locale. */
  initialLocale?: Locale;
}

// ─── RegisterPageInner ────────────────────────────────────────────────────────

function RegisterPageInner({ redirectTo = '/' }: RegisterPageProps) {
  const t = useT('auth_flow');
  const { toasts, toast, dismiss } = useToast();
  const navItems = useCustomerNavItems('/register');

  return (
    <>
      <AppShell
        mode="customer"
        topBar={
          <SiteNav
            variant="mobile"
            title={t('register_title')}
            currentPath="/register"
            isGuest={true}
          />
        }
        bottomNav={<BottomNav items={navItems} />}
      >
        <Container maxWidth="sm">
          <div className="flex flex-col gap-6 py-8">
            <RegisterShell redirectTo={redirectTo} toast={toast} />
          </div>
        </Container>
      </AppShell>

      {toasts.map((item) => (
        <Toast
          key={item.id}
          tone={item.tone}
          duration={item.duration}
          onOpenChange={(open) => {
            if (!open) dismiss(item.id);
          }}
        >
          <div className="flex flex-1 flex-col gap-1">
            <ToastTitle>{item.title}</ToastTitle>
            {item.description && <ToastDescription>{item.description}</ToastDescription>}
          </div>
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </>
  );
}

// ─── RegisterPage ─────────────────────────────────────────────────────────────

export function RegisterPage({ redirectTo = '/', initialLocale }: RegisterPageProps) {
  return (
    <HydratedIsland locale={initialLocale}>
      <ToastProvider>
        <RegisterPageInner redirectTo={redirectTo} />
      </ToastProvider>
    </HydratedIsland>
  );
}