import { useT } from '@/lib/i18n/react';
import type { Locale } from '@/lib/i18n';
import { Button } from '@/components/ui/primitives/Button';
import { HydratedIsland } from '@/components/HydratedIsland';
import { useMutation, useQuery } from '@tanstack/react-query';
import { authenticatedFetch } from '@/lib/authenticated-fetch';

type ConnectStatus = {
  stripeStatus: 'none' | 'pending' | 'restricted' | 'enabled' | 'rejected';
  stripePayoutsEnabled: boolean;
  stripeAccountId: string | null;
};

type StatusKind = 'verified' | 'pending' | 'action_required' | 'loading';

function resolveStatus(data: ConnectStatus | undefined): StatusKind {
  if (!data) return 'loading';
  if (data.stripePayoutsEnabled && data.stripeStatus === 'enabled') return 'verified';
  if (data.stripeStatus === 'pending') return 'pending';
  if (data.stripeStatus === 'restricted' || data.stripeStatus === 'rejected') {
    return 'action_required';
  }
  if (data.stripeStatus === 'none' && data.stripeAccountId) return 'pending';
  return 'action_required';
}

function AffiliateConnectReturnContent() {
  const t = useT('affiliate_landing');
  const tCommon = useT('common');

  const { data, isLoading } = useQuery<ConnectStatus>({
    queryKey: ['affiliate-connect-status'],
    queryFn: async () => {
      const res = await fetch('/api/affiliate/connect/status');
      if (!res.ok) throw new Error(await res.text());
      const json = (await res.json()) as { data?: ConnectStatus } & ConnectStatus;
      return json.data ?? json;
    },
  });

  const onboard = useMutation({
    mutationFn: async () => {
      const res = await authenticatedFetch('/api/affiliate/connect/onboard', { method: 'POST' });
      const json = (await res.json()) as { data?: { url: string }; url?: string };
      const url = json.data?.url ?? json.url;
      if (!url) throw new Error('Missing onboarding URL');
      window.location.href = url;
    },
  });

  const status = resolveStatus(data);

  const statusLabel =
    status === 'verified'
      ? t('connect_return_status_verified')
      : status === 'pending'
        ? t('connect_return_status_pending')
        : status === 'action_required'
          ? t('connect_return_status_action_required')
          : tCommon('loading');

  return (
    <div className="flex flex-col items-center gap-4">
      {isLoading ? (
        <p role="status" className="text-sm text-(--color-text-muted)">
          {tCommon('loading')}
        </p>
      ) : (
        <p
          role="status"
          className={`rounded-full px-4 py-1.5 text-sm font-medium ${
            status === 'verified'
              ? 'bg-(--color-success-surface) text-(--color-success)'
              : status === 'pending'
                ? 'bg-(--color-warning-surface) text-(--color-warning-text)'
                : 'bg-(--color-error-surface) text-(--color-error-text)'
          }`}
        >
          {statusLabel}
        </p>
      )}

      {status === 'action_required' && (
        <Button
          variant="primary"
          size="md"
          loading={onboard.isPending}
          onClick={() => onboard.mutate()}
        >
          {t('connect_return_status_cta')}
        </Button>
      )}

      <a
        href="/affiliate"
        className="text-sm font-medium text-(--color-primary) underline-offset-4 hover:underline"
      >
        {t('connect_back_to_dashboard')}
      </a>
    </div>
  );
}

export function AffiliateConnectReturn({ locale }: { locale: Locale }) {
  return (
    <HydratedIsland locale={locale}>
      <AffiliateConnectReturnContent />
    </HydratedIsland>
  );
}