'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/primitives/Button/Button';
import { useT } from '@/lib/i18n/react';
import { getCsrfToken } from '@/lib/csrf';
import { fetchWithRefresh } from '@/lib/api/refresh-on-401';
import { captureCaught } from '@/lib/observability/capture';

type DispatchState = 'idle' | 'dispatching' | 'dispatched' | 'error';

interface WoltDispatchButtonProps {
  shipmentId: string;
  existingTrackingNumber?: string | null;
  existingTrackingUrl?: string | null;
  onDispatched?: () => void;
  variant?: 'primary' | 'secondary' | 'ghost';
}

export function WoltDispatchButton({
  shipmentId,
  existingTrackingNumber,
  existingTrackingUrl,
  onDispatched,
  variant = 'secondary',
}: WoltDispatchButtonProps) {
  const t = useT('vendor_shipping');
  const [state, setState] = useState<DispatchState>(existingTrackingNumber ? 'dispatched' : 'idle');
  const [trackingUrl, setTrackingUrl] = useState<string>(existingTrackingUrl ?? '');
  const [errorMsg, setErrorMsg] = useState<string>('');

  async function dispatch() {
    setState('dispatching');
    setErrorMsg('');
    try {
      const res = await fetchWithRefresh(`/api/vendor/shipments/${shipmentId}/buy-label`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'x-csrf-token': getCsrfToken() },
        body: JSON.stringify({ carrier: 'wolt_drive' }),
        credentials: 'same-origin',
      });

      if (res.status === 201) {
        const data = (await res.json()) as { trackingUrl?: string };
        setTrackingUrl(data.trackingUrl ?? '');
        setState('dispatched');
        onDispatched?.();
        return;
      }

      if (res.status === 409) {
        const data = (await res.json()) as { trackingUrl?: string };
        if (data.trackingUrl) setTrackingUrl(data.trackingUrl);
        setState('dispatched');
        return;
      }

      const data = (await res.json()) as { code?: string };
      if (data.code === 'WOLT_MISSING_COORDINATES') {
        setErrorMsg(t('wolt_missing_coords'));
      } else {
        setErrorMsg(t('wolt_dispatch_error'));
      }
      setState('error');
    } catch (err) {
      captureCaught(err, { scope: 'wolt-dispatch-button' });
      setErrorMsg(t('wolt_dispatch_error'));
      setState('error');
    }
  }

  if (state === 'dispatched') {
    return trackingUrl ? (
      <a
        href={trackingUrl}
        target="_blank"
        rel="noopener noreferrer"
        className="text-brand-primary-700 text-sm font-medium underline"
      >
        {t('wolt_dispatched')}
      </a>
    ) : (
      <span className="text-brand-primary-700 text-sm">{t('wolt_dispatched')}</span>
    );
  }

  if (state === 'error') {
    return (
      <div className="flex flex-col gap-1">
        <span className="text-danger-700 text-sm" role="alert">
          {errorMsg}
        </span>
        <Button size="sm" variant="secondary" onClick={dispatch}>
          {t('wolt_dispatch')}
        </Button>
      </div>
    );
  }

  return (
    <Button
      size="sm"
      variant={variant}
      onClick={dispatch}
      disabled={state === 'dispatching'}
      loading={state === 'dispatching'}
      aria-busy={state === 'dispatching'}
    >
      {t('wolt_dispatch')}
    </Button>
  );
}