// @design-system: domain/VendorRespondCard
/**
 * VendorRespondCard — form for vendor to submit an offer on a case.
 */

import { useState } from 'react';
import { useT } from '@/lib/i18n/react';
import type { StringBundle } from '@/lib/i18n/types';
import { Button } from '@/components/ui/primitives/Button';
import { FormField } from '@/components/ui/primitives/FormField';
import { Input } from '@/components/ui/primitives/Input';

export type VendorOfferOutcome = 'refund_full' | 'refund_partial' | 'replacement' | 'deny';

export interface VendorOfferFormValues {
  outcome: VendorOfferOutcome;
  amountCents: number | null;
  reason: string;
}

export interface VendorRespondCardProps {
  onSubmit: (values: VendorOfferFormValues) => Promise<void>;
  submitting?: boolean;
}

const OUTCOMES: VendorOfferOutcome[] = ['refund_full', 'refund_partial', 'replacement', 'deny'];

export function VendorRespondCard({ onSubmit, submitting = false }: VendorRespondCardProps) {
  const t = useT('cases');
  const tVendor = t('vendor') as unknown as StringBundle['cases']['vendor'];
  const tOpen = t('open') as unknown as StringBundle['cases']['open'];
  const [outcome, setOutcome] = useState<VendorOfferOutcome>('refund_full');

  function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const data = new FormData(form);
    const selectedOutcome = data.get('outcome') as VendorOfferOutcome;
    const amountRaw = data.get('amount') as string;
    const amountCents =
      selectedOutcome === 'refund_partial' && amountRaw
        ? Math.round(parseFloat(amountRaw) * 100)
        : null;
    const reason = (data.get('reason') as string).trim();
    onSubmit({ outcome: selectedOutcome, amountCents, reason });
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <FormField label={tVendor.offer_outcome_label} required htmlFor="vendor-respond-outcome">
        <select
          id="vendor-respond-outcome"
          name="outcome"
          required
          value={outcome}
          onChange={(e) => setOutcome(e.target.value as VendorOfferOutcome)}
          className="border-input bg-background focus-visible:ring-brand-primary-500 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
        >
          {OUTCOMES.map((o) => (
            <option key={o} value={o}>
              {tOpen.ask_outcome[o]}
            </option>
          ))}
        </select>
      </FormField>

      <FormField label={tVendor.offer_amount_label} htmlFor="vendor-respond-amount">
        <Input
          id="vendor-respond-amount"
          type="number"
          name="amount"
          min={0}
          step={0.01}
          placeholder="0.00"
          disabled={outcome !== 'refund_partial'}
        />
      </FormField>

      <FormField label={tVendor.offer_reason_label} htmlFor="vendor-respond-reason">
        <textarea
          id="vendor-respond-reason"
          name="reason"
          rows={3}
          className="border-input bg-background focus-visible:ring-brand-primary-500 w-full resize-none rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
        />
      </FormField>

      <Button type="submit" variant="primary" disabled={submitting}>
        {submitting ? tOpen.submitting : tVendor.offer_submit}
      </Button>
    </form>
  );
}