'use client';

import { useState, useEffect, useRef, useCallback } from 'react';
import { getCsrfToken } from '@/lib/csrf';
import { useT } from '@/lib/i18n/react';
import { captureCaught } from '@/lib/observability';
import { Button } from '@/components/ui/primitives/Button';

export interface StripeOnboardingStepProps {
  businessName: string;
  businessEmail: string;
}

export function StripeOnboardingStep({ businessName, businessEmail }: StripeOnboardingStepProps) {
  const t = useT('vendor_upgrade');
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const startedRef = useRef(false);
  const startHostedOnboarding = useCallback(async () => {
    setError(null);
    setLoading(true);
    try {
      const res = await fetch('/api/vendor/stripe/onboard', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-csrf-token': getCsrfToken(),
        },
        body: JSON.stringify({ businessName, contactEmail: businessEmail }),
      });
      const data = (await res.json()) as {
        ok?: boolean;
        hostedOnboardingUrl?: string;
        error?: { code: string; message: string };
      };
      if (!data.ok || !data.hostedOnboardingUrl) {
        throw new Error(data.error?.message ?? 'onboard-failed');
      }
      window.location.assign(data.hostedOnboardingUrl);
    } catch (err) {
      captureCaught(err, {
        scope: 'features.vendor-onboarding.StripeOnboardingStep',
        severity: 'warning',
      });
      setError(t('stripe_setup_error'));
      setLoading(false);
    }
  }, [businessName, businessEmail, t]);

  useEffect(() => {
    if (startedRef.current) return;
    startedRef.current = true;
    void startHostedOnboarding();
  }, [startHostedOnboarding]);

  return (
    <div className="flex flex-col gap-4">
      {/* Hebrew context note — Stripe form is in English */}
      <div className="bg-surface-raised rounded-lg p-4">
        <p className="text-text-primary text-sm font-semibold">{t('stripe_pre_title')}</p>
        <p className="text-text-secondary mt-1 text-sm">{t('stripe_pre_body')}</p>
      </div>

      {loading && (
        <p className="text-text-secondary text-sm" role="status" aria-live="polite">
          {t('stripe_setup_loading')}
        </p>
      )}

      {error && (
        <>
          <p role="alert" className="text-danger-600 text-sm">
            {error}
          </p>
          <Button
            type="button"
            variant="primary"
            size="lg"
            className="w-full"
            onClick={() => void startHostedOnboarding()}
          >
            {t('stripe_setup_error_cta')}
          </Button>
        </>
      )}
    </div>
  );
}