import { useEffect, useRef } from 'react';
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 } from '@tanstack/react-query';
import { authenticatedFetch } from '@/lib/authenticated-fetch';

function AffiliateConnectRefreshContent() {
  const t = useT('affiliate_landing');

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

  const autoStarted = useRef(false);
  useEffect(() => {
    if (autoStarted.current) return;
    autoStarted.current = true;
    startOnboarding();
  }, [startOnboarding]);

  return (
    <div className="flex flex-col items-center gap-4">
      <Button variant="primary" size="md" loading={isPending} onClick={() => startOnboarding()}>
        {t('connect_refresh_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 AffiliateConnectRefresh({ locale }: { locale: Locale }) {
  return (
    <HydratedIsland locale={locale}>
      <AffiliateConnectRefreshContent />
    </HydratedIsland>
  );
}