'use client';

/**
 * MockCardForm — synthetic card form for mock payment provider.
 *
 * Renders visual-only card fields (values are ignored).
 * On submit, calls onToken('mock_tok_<scenario>') without any real charge.
 *
 * Used by <PaymentForm> when config.provider === 'mock'.
 */

import { useId, type SubmitEvent } from 'react';
import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { Input } from '@/components/ui/primitives/Input';
import { FormField } from '@/components/ui/primitives/FormField';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import type { MockScenario } from '@/server/payments/mock/scenarios';

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

export interface MockCardFormProps {
  /**
   * The active mock scenario. The synthetic token will be `mock_tok_<scenario>`.
   * Defaults to 'success' if not provided.
   */
  scenario: MockScenario;
  /**
   * Called with the synthetic single-use token once the user clicks Pay.
   */
  onToken: (singleUseToken: string) => void;
  /** Whether a charge is in progress (disables the form). */
  isProcessing?: boolean;
  /** Optional extra error message to display. */
  externalError?: string;
}

// ─── Component ───────────────────────────────────────────────────────────────

/**
 * MockCardForm — visual-only card form that produces a synthetic token.
 *
 * No external scripts, no real card validation.
 * On submit, fires `onToken('mock_tok_<scenario>')`.
 *
 * @example
 * ```tsx
 * <MockCardForm scenario="success" onToken={(tok) => postCharge(tok)} />
 * ```
 */
export function MockCardForm({
  scenario,
  onToken,
  isProcessing = false,
  externalError,
}: MockCardFormProps) {
  const t = useT('checkout_mock');
  const cardId = useId();
  const expiryId = useId();
  const cvvId = useId();

  function handleSubmit(e: SubmitEvent<HTMLFormElement>) {
    e.preventDefault();
    onToken(`mock_tok_${scenario}`);
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      <div className="flex flex-col gap-4">
        {/* Mock notice */}
        <InlineNotice tone="warning" description={t('mock_notice')} />

        {/* Card number */}
        <FormField label={t('card_label')} htmlFor={cardId}>
          <Input
            id={cardId}
            type="text"
            inputMode="numeric"
            autoComplete="cc-number"
            placeholder="0000 0000 0000 0000"
            maxLength={19}
            disabled={isProcessing}
          />
        </FormField>

        {/* Expiry + CVV row */}
        <div className="grid grid-cols-2 gap-3">
          <FormField label={t('expiry_label')} htmlFor={expiryId}>
            <Input
              id={expiryId}
              type="text"
              inputMode="numeric"
              autoComplete="cc-exp"
              placeholder="MM/YY"
              maxLength={5}
              disabled={isProcessing}
            />
          </FormField>

          <FormField label={t('cvv_label')} htmlFor={cvvId}>
            <Input
              id={cvvId}
              type="text"
              inputMode="numeric"
              autoComplete="cc-csc"
              placeholder="000"
              maxLength={4}
              disabled={isProcessing}
            />
          </FormField>
        </div>

        {/* External error */}
        {externalError && <InlineNotice tone="danger" description={externalError} />}

        {/* Submit */}
        <Button
          type="submit"
          variant="primary"
          size="lg"
          className="w-full"
          loading={isProcessing}
          disabled={isProcessing}
        >
          {t('pay_button')}
        </Button>
      </div>
    </form>
  );
}