/**
 * EmailOptionalStep — optional email capture step in the phone-first registration flow.
 *
 * Presentational. Two exits: onSubmit (email provided) and onSkip (no email).
 * Mirrors PhoneStep structure.
 */

'use client';

import { useEffect, useRef } from 'react';
import type { UseFormReturn } from 'react-hook-form';
import { Button } from '@/components/ui/primitives/Button';
import { Checkbox } from '@/components/ui/primitives/Checkbox';
import { Label } from '@/components/ui/primitives/Label';
import { FormField } from '@/components/ui/primitives/FormField';
import { Input } from '@/components/ui/primitives/Input';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { useT } from '@/lib/i18n/react';

export interface EmailOptionalStepValues {
  email: string;
  marketingConsent: boolean;
}

export interface EmailOptionalStepProps {
  form: UseFormReturn<EmailOptionalStepValues>;
  onSubmit: (values: EmailOptionalStepValues) => void | Promise<void>;
  onSkip: () => void;
  submitting: boolean;
  apiError: string | null;
}

export function EmailOptionalStep({
  form,
  onSubmit,
  onSkip,
  submitting,
  apiError,
}: EmailOptionalStepProps) {
  const t = useT('auth_flow');

  const emailInputRef = useRef<HTMLInputElement | null>(null);
  useEffect(() => {
    emailInputRef.current?.focus();
  }, []);
  const emailRegister = form.register('email');

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-col gap-1">
        <p className="text-text-secondary text-sm">{t('register_email_step_hint')}</p>
      </div>

      {apiError && <InlineNotice tone="danger" description={apiError} />}

      <form
        onSubmit={form.handleSubmit((v) => void onSubmit(v))}
        className="flex flex-col gap-4"
        noValidate
      >
        <FormField
          label={t('email_label')}
          error={form.formState.errors.email?.message}
          htmlFor="register-email-optional"
        >
          <Input
            id="register-email-optional"
            type="email"
            dir="ltr"
            autoComplete="email"
            inputMode="email"
            placeholder={t('email_placeholder')}
            {...emailRegister}
            ref={(el) => {
              emailRegister.ref(el);
              emailInputRef.current = el;
            }}
          />
        </FormField>

        <div className="flex items-start gap-2">
          <Checkbox
            id="marketing-consent"
            checked={form.watch('marketingConsent')}
            onCheckedChange={(checked) =>
              form.setValue('marketingConsent', checked === true)
            }
          />
          <Label
            htmlFor="marketing-consent"
            className="text-sm text-muted leading-snug cursor-pointer"
          >
            {t('marketing_consent_label')}
          </Label>
        </div>

        <Button
          type="submit"
          variant="primary"
          size="lg"
          loading={submitting}
          className="w-full"
        >
          {t('register_email_continue')}
        </Button>
      </form>

      <Button
        type="button"
        variant="ghost"
        size="sm"
        className="w-full"
        onClick={onSkip}
        disabled={submitting}
      >
        {t('register_email_skip')}
      </Button>
    </div>
  );
}