'use client';

import { useState } from 'react';
import { ExternalLink } from 'lucide-react';
import { getCsrfToken } from '@/lib/csrf';
import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { Stack } from '@/components/ui/layout/Stack';
import { VendorShell } from '@/components/ui/layout/VendorShell';
import { captureCaught } from '@/lib/observability';
import { HydratedIsland } from '@/components/HydratedIsland';
import { VendorSettingsRouteNav } from '@/features/vendor-settings/VendorSettingsRouteNav';

interface Props {
  vendorId: string;
  businessName: string;
  contactEmail: string;
  contactPhone: string;
  stripeAccountId: string | null;
  stripeChargesEnabled: boolean;
  stripeDetailsSubmitted: boolean;
  stripeOnboardingState: string | null;
}

export function StripePaymentsIsland(props: Props) {
  const t = useT('vendor_payments_page');
  const [loading, setLoading] = useState<'onboard' | 'refresh' | 'dashboard' | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function handleOnboard() {
    setLoading('onboard');
    setError(null);
    try {
      const res = await fetch('/api/vendor/stripe/onboard', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-csrf-token': getCsrfToken(),
        },
        body: JSON.stringify({
          vendorId: props.vendorId,
          businessName: props.businessName,
          contactEmail: props.contactEmail,
          contactPhone: props.contactPhone,
        }),
      });
      const json = (await res.json()) as {
        ok?: boolean;
        hostedOnboardingUrl?: string;
        error?: { message?: string };
      };
      if (!res.ok || !json.ok) {
        setError(json.error?.message ?? t('error_generic'));
        return;
      }
      if (json.hostedOnboardingUrl) {
        window.location.assign(json.hostedOnboardingUrl);
      }
    } catch (err) {
      captureCaught(err, { scope: 'vendor.stripe.onboard', severity: 'error' });
      setError(t('error_generic'));
    } finally {
      setLoading(null);
    }
  }

  async function handleRefresh() {
    setLoading('refresh');
    setError(null);
    try {
      const res = await fetch('/api/vendor/stripe/refresh', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-csrf-token': getCsrfToken(),
        },
        body: JSON.stringify({ vendorId: props.vendorId }),
      });
      const json = (await res.json()) as {
        ok?: boolean;
        hostedOnboardingUrl?: string;
        error?: { message?: string };
      };
      if (!res.ok || !json.ok) {
        setError(json.error?.message ?? t('error_generic'));
        return;
      }
      if (json.hostedOnboardingUrl) {
        window.location.assign(json.hostedOnboardingUrl);
      }
    } catch (err) {
      captureCaught(err, { scope: 'vendor.stripe.refresh', severity: 'error' });
      setError(t('error_generic'));
    } finally {
      setLoading(null);
    }
  }

  async function handleDashboard() {
    setLoading('dashboard');
    setError(null);
    try {
      const res = await fetch('/api/vendor/stripe/dashboard-link', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-csrf-token': getCsrfToken(),
        },
      });
      const json = (await res.json()) as {
        ok?: boolean;
        data?: { url?: string };
        error?: { message?: string };
      };
      if (!res.ok || !json.ok) {
        setError(json.error?.message ?? t('error_generic'));
        return;
      }
      if (json.data?.url) {
        window.open(json.data.url, '_blank', 'noopener');
      }
    } catch (err) {
      captureCaught(err, { scope: 'vendor.stripe.dashboard', severity: 'error' });
      setError(t('error_generic'));
    } finally {
      setLoading(null);
    }
  }

  return (
    <HydratedIsland>
      <VendorShell variant="dashboard" currentPath="/vendor/settings/payments">
        <div className="flex flex-col gap-6 p-4 lg:p-6">
          <VendorSettingsRouteNav activeId="payments" className="mb-2 lg:hidden" />
          <div className="hidden lg:block">
            <VendorSettingsRouteNav activeId="payments" className="mb-4" />
          </div>
          <header className="flex flex-col gap-1">
            <h1 className="text-text-primary text-2xl font-bold">{t('page_heading')}</h1>
            <p className="text-text-secondary text-sm">{t('page_subtitle')}</p>
          </header>
          <Stack gap="4">
            {error && (
              <p role="alert" className="text-semantic-error-600 text-sm">
                {error}
              </p>
            )}

            {props.stripeChargesEnabled ? (
              <div className="border-semantic-success-200 bg-semantic-success-50 rounded-lg border p-4">
                <p className="text-semantic-success-700 font-semibold">
                  {t('stripe_charges_enabled_title')}
                </p>
                <p className="text-text-secondary mt-1 text-sm">
                  {t('stripe_charges_enabled_body')}
                </p>
                <p className="text-text-secondary mt-2 text-sm">
                  {t('active_payout_hint')}{' '}
                  <a
                    href="/vendor/earnings"
                    className="text-brand-primary-700 underline-offset-2 hover:underline"
                  >
                    {t('view_earnings')}
                  </a>
                </p>
                {props.stripeAccountId && (
                  <p className="text-text-tertiary mt-2 text-xs">
                    <span className="font-medium">{t('account_id_label')}:</span>{' '}
                    <span className="font-mono">{props.stripeAccountId}</span>
                  </p>
                )}
                <Button
                  variant="secondary"
                  size="sm"
                  className="mt-3 min-w-[12ch]"
                  disabled={loading !== null}
                  aria-busy={loading === 'dashboard'}
                  onClick={handleDashboard}
                >
                  {loading === 'dashboard' ? (
                    t('loading_button')
                  ) : (
                    <>
                      {t('stripe_dashboard')}
                      <ExternalLink className="ms-1 size-4" aria-hidden />
                    </>
                  )}
                </Button>
              </div>
            ) : props.stripeAccountId && props.stripeDetailsSubmitted ? (
              <div className="border-semantic-warning-200 bg-semantic-warning-50 rounded-lg border p-4">
                <p className="text-semantic-warning-700 font-semibold">
                  {t('stripe_charges_pending_title')}
                </p>
                <p className="text-text-secondary mt-1 text-sm">
                  {t('stripe_charges_pending_body')}
                </p>
                <Button
                  variant="secondary"
                  size="sm"
                  className="mt-3 min-w-[12ch]"
                  disabled={loading !== null}
                  aria-busy={loading === 'refresh'}
                  onClick={handleRefresh}
                >
                  {loading === 'refresh' ? t('loading_button') : t('submit_resume')}
                </Button>
              </div>
            ) : (
              <div className="border-border-default bg-surface-raised rounded-lg border p-4">
                <p className="text-text-primary font-semibold">{t('form_section_title')}</p>
                <p className="text-text-secondary mt-1 text-sm">{t('form_section_desc')}</p>
                <Button
                  variant="primary"
                  size="sm"
                  className="mt-3 min-w-[12ch]"
                  disabled={loading !== null}
                  aria-busy={loading === 'onboard'}
                  onClick={handleOnboard}
                >
                  {loading === 'onboard' ? t('loading_button') : t('submit_start')}
                </Button>
                <p className="text-text-secondary mt-2 text-xs">{t('submit_start_hint')}</p>
              </div>
            )}
          </Stack>
        </div>
      </VendorShell>
    </HydratedIsland>
  );
}