// @feature: onboarding/OnboardingSheet
'use client';

import { useT } from '@/lib/i18n/react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from '@/components/ui/overlays/Dialog';
import { Pill } from '@/components/ui/primitives/Pill';
import { OnboardingForm } from './OnboardingForm';

export interface OnboardingSheetProps {
  open: boolean;
  emailVerifiedFlag: boolean;
  onComplete: () => void;
}

/**
 * OnboardingSheet — full-screen (mobile) / centered (desktop) blocking modal.
 *
 * BLOCKING: Esc disabled, backdrop dismiss disabled.
 * Only Save or Skip (via OnboardingForm.onComplete) closes it.
 *
 * Uses the project's Dialog primitive (Radix Dialog.Root → no vaul drag).
 * onEscapeKeyDown and onInteractOutside preventDefault on DialogContent.
 */
export function OnboardingSheet({ open, emailVerifiedFlag, onComplete }: OnboardingSheetProps) {
  const t = useT('onboarding');
  return (
    <Dialog
      open={open}
      onOpenChange={(isOpen) => {
        if (!isOpen) onComplete();
      }}
    >
      <DialogContent
        onEscapeKeyDown={(e: Event) => e.preventDefault()}
        onInteractOutside={(e: Event) => e.preventDefault()}
        className="inset-x-0 top-0 mx-auto flex max-h-screen w-full max-w-lg translate-y-0 flex-col overflow-y-auto rounded-none rounded-b-2xl sm:top-1/2 sm:max-h-[90vh] sm:-translate-y-1/2 sm:rounded-2xl"
      >
        <DialogHeader>
          <div className="flex flex-wrap items-center gap-3">
            <DialogTitle>{t('welcome_title')}</DialogTitle>
            {emailVerifiedFlag && (
              <Pill tone="success" size="sm">
                {t('email_verified_chip')}
              </Pill>
            )}
          </div>
          <DialogDescription>{t('subtitle')}</DialogDescription>
        </DialogHeader>
        <div className="px-6 pb-6">
          <OnboardingForm onComplete={onComplete} />
        </div>
      </DialogContent>
    </Dialog>
  );
}