import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { useMutation } from '@tanstack/react-query';
import { type AffiliateConnectStatusOrNull } from '@/lib/enums/affiliate-connect-status';
import { authenticatedFetch } from '@/lib/authenticated-fetch';

type Props = {
  connectStatus: AffiliateConnectStatusOrNull;
};

export function AffiliateKycBanner({ connectStatus }: Props) {
  const t = useT('affiliate');

  const onboard = useMutation({
    mutationFn: async () => {
      const res = await authenticatedFetch('/api/affiliate/connect/onboard', { method: 'POST' });
      const json = (await res.json()) as { data: { url: string } };
      window.location.href = json.data.url;
    },
  });

  if (connectStatus === 'active') return null;

  if (connectStatus === null) {
    return (
      <div
        role="status"
        className="rounded-lg border border-(--color-warning-border) bg-(--color-warning-surface) p-4"
      >
        <p className="font-medium text-(--color-warning-text)">{t('kyc_connect_title')}</p>
        <p className="mt-1 text-sm text-(--color-text-muted)">{t('kyc_connect_body')}</p>
        <Button
          variant="primary"
          size="sm"
          className="mt-3"
          loading={onboard.isPending}
          onClick={() => onboard.mutate()}
        >
          {t('kyc_connect_cta')}
        </Button>
      </div>
    );
  }

  if (connectStatus === 'pending') {
    return (
      <div
        role="status"
        className="rounded-lg border border-(--color-warning-border) bg-(--color-warning-surface) p-4"
      >
        <p className="font-medium text-(--color-warning-text)">{t('kyc_pending_title')}</p>
        <p className="mt-1 text-sm text-(--color-text-muted)">{t('kyc_pending_body')}</p>
      </div>
    );
  }

  return (
    <div
      role="alert"
      className="rounded-lg border border-(--color-error-border) bg-(--color-error-surface) p-4"
    >
      <p className="font-medium text-(--color-error-text)">{t('kyc_restricted_title')}</p>
      <p className="mt-1 text-sm text-(--color-text-muted)">{t('kyc_restricted_body')}</p>
      <Button
        variant="primary"
        size="sm"
        className="mt-3"
        loading={onboard.isPending}
        onClick={() => onboard.mutate()}
      >
        {t('kyc_restricted_cta')}
      </Button>
    </div>
  );
}