'use client';

/**
 * VendorActions
 *
 * Status-driven action panel for the vendor on a return-request detail page.
 *
 * Status transitions:
 *   requested   → approve | deny (w/ reason)
 *   approved    → (waiting for buyer shipment — no action)
 *   in_transit  → confirm receipt
 *   received    → inspect approve | inspect dispute (w/ reason)
 *   terminal statuses (refunded, denied, cancelled, expired) → no actions shown
 */

import { useState } from 'react';
import { Button } from '@/components/ui/primitives/Button/Button';
import { Textarea } from '@/components/ui/primitives/Textarea/Textarea';
import { useT } from '@/lib/i18n/react';
import { getCsrfToken } from '@/lib/csrf';
import { captureCaught } from '@/lib/observability';
import type { ReturnStatus } from './ReturnTimeline';

interface VendorActionsProps {
  returnId: string;
  status: ReturnStatus;
}

const MIN_REASON_LENGTH = 3;

export function VendorActions({ returnId, status }: VendorActionsProps) {
  const t = useT('returns');
  const [denyReason, setDenyReason] = useState('');
  const [disputeReason, setDisputeReason] = useState('');
  const [showDenyForm, setShowDenyForm] = useState(false);
  const [showDisputeForm, setShowDisputeForm] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const post = async (path: string, body?: object) => {
    setBusy(true);
    setError(null);
    try {
      const headers: Record<string, string> = { 'content-type': 'application/json' };
      const csrf = getCsrfToken();
      if (csrf) headers['x-csrf-token'] = csrf;
      const res = await fetch(path, {
        method: 'POST',
        headers,
        body: JSON.stringify(body ?? {}),
        credentials: 'same-origin',
      });
      if (!res.ok) {
        const j = await res.json().catch((err) => {
          captureCaught(err, { scope: 'features.returns.VendorActions.parseError' });
          return {};
        });
        throw new Error((j as { error?: string }).error || `HTTP ${res.status}`);
      }
      // Reload so the new status + timeline are SSR-fresh.
      location.reload();
    } catch (err) {
      captureCaught(err, { scope: 'features.returns.VendorActions.post' });
      setError(t('vendorActionError'));
    } finally {
      setBusy(false);
    }
  };

  const handleApprove = () => post(`/api/returns/${returnId}/approve`);
  const handleDeny = () => post(`/api/returns/${returnId}/deny`, { reason: denyReason });
  const handleReceipt = () => post(`/api/returns/${returnId}/receipt`);
  const handleInspectApprove = () =>
    post(`/api/returns/${returnId}/inspect`, { outcome: 'approve' });
  const handleInspectDispute = () =>
    post(`/api/returns/${returnId}/inspect`, { outcome: 'dispute', reason: disputeReason });

  // Terminal statuses — nothing to do.
  const isTerminal: ReturnStatus[] = ['refunded', 'denied', 'cancelled', 'expired'];
  if (isTerminal.includes(status)) return null;

  // Approved = waiting for buyer to ship — vendor cannot act yet.
  if (status === 'approved') return null;

  return (
    <section
      aria-label={t('vendorActionsAria')}
      className="border-border-subtle bg-surface-raised space-y-4 rounded-lg border p-4"
    >
      {error && (
        <p role="alert" className="text-danger-700 text-sm">
          {error}
        </p>
      )}

      {/* requested → approve or deny */}
      {status === 'requested' && (
        <div className="space-y-4">
          <Button
            variant="primary"
            size="md"
            disabled={busy}
            loading={busy}
            onClick={handleApprove}
          >
            {t('vendorApprove')}
          </Button>

          {!showDenyForm ? (
            <Button
              variant="secondary"
              size="md"
              disabled={busy}
              onClick={() => setShowDenyForm(true)}
            >
              {t('vendorDenyDisclosure')}
            </Button>
          ) : (
            <div className="space-y-2">
              <label
                htmlFor="vendor-deny-reason"
                className="text-text-secondary block text-sm font-medium"
              >
                {t('vendorDenyReasonLabelShort')}
              </label>
              <Textarea
                id="vendor-deny-reason"
                rows={3}
                value={denyReason}
                onChange={(e) => setDenyReason(e.target.value)}
                disabled={busy}
                aria-describedby="vendor-deny-reason-hint"
              />
              <p id="vendor-deny-reason-hint" className="text-text-muted text-xs">
                {t('vendorDenyReasonHint')}
              </p>
              <Button
                variant="danger"
                size="md"
                disabled={busy || denyReason.trim().length < MIN_REASON_LENGTH}
                loading={busy}
                onClick={handleDeny}
              >
                {t('vendorDeny')}
              </Button>
            </div>
          )}
        </div>
      )}

      {/* in_transit → confirm receipt */}
      {status === 'in_transit' && (
        <Button variant="primary" size="md" disabled={busy} loading={busy} onClick={handleReceipt}>
          {t('vendorConfirmReceipt')}
        </Button>
      )}

      {/* received → inspect approve or dispute */}
      {status === 'received' && (
        <div className="space-y-4">
          <Button
            variant="primary"
            size="md"
            disabled={busy}
            loading={busy}
            onClick={handleInspectApprove}
          >
            {t('vendorInspectApprove')}
          </Button>

          {!showDisputeForm ? (
            <Button
              variant="secondary"
              size="md"
              disabled={busy}
              onClick={() => setShowDisputeForm(true)}
            >
              {t('vendorDisputeDisclosure')}
            </Button>
          ) : (
            <div className="space-y-2">
              <label
                htmlFor="vendor-dispute-reason"
                className="text-text-secondary block text-sm font-medium"
              >
                {t('vendorDisputeReasonLabelShort')}
              </label>
              <Textarea
                id="vendor-dispute-reason"
                rows={3}
                value={disputeReason}
                onChange={(e) => setDisputeReason(e.target.value)}
                disabled={busy}
                aria-describedby="vendor-dispute-reason-hint"
              />
              <p id="vendor-dispute-reason-hint" className="text-text-muted text-xs">
                {t('vendorDisputeReasonHint')}
              </p>
              <Button
                variant="danger"
                size="md"
                disabled={busy || disputeReason.trim().length < MIN_REASON_LENGTH}
                loading={busy}
                onClick={handleInspectDispute}
              >
                {t('vendorInspectDispute')}
              </Button>
            </div>
          )}
        </div>
      )}
    </section>
  );
}