'use client';

/**
 * TrackingEntryForm
 *
 * Allows a buyer to enter their return shipment carrier and tracking number
 * after a return is approved. Submits to POST /api/returns/:id/tracking.
 */

import { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import type { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@/components/ui/primitives/Button';
import { Input } from '@/components/ui/primitives/Input';
import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
} from '@/components/ui/primitives/Select';
import { FormField } from '@/components/ui/primitives/FormField';
import { useT } from '@/lib/i18n/react';
import { getCsrfToken } from '@/lib/csrf';
import { trackingSchema } from '@/server/schemas/returns';

const CARRIERS = trackingSchema.shape.carrier.options;

type TrackingFormValues = z.infer<typeof trackingSchema>;

interface TrackingEntryFormProps {
  returnId: string;
  onSuccess?: () => void;
  className?: string;
}

type CarrierValue = (typeof CARRIERS)[number];

export function TrackingEntryForm({ returnId, onSuccess, className }: TrackingEntryFormProps) {
  const t = useT('returns');
  const carrierLabels = t('carrier') as unknown as Record<CarrierValue, string>;
  const [submitError, setSubmitError] = useState<string | null>(null);

  const {
    register,
    handleSubmit,
    control,
    formState: { errors, isSubmitting },
  } = useForm<TrackingFormValues>({
    resolver: zodResolver(trackingSchema),
    defaultValues: { carrier: 'israel-post', trackingNumber: '' },
  });

  async function onSubmit(values: TrackingFormValues) {
    setSubmitError(null);
    const res = await fetch(`/api/returns/${returnId}/tracking`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-csrf-token': getCsrfToken(),
      },
      body: JSON.stringify(values),
    });
    if (res.ok) {
      onSuccess?.();
    } else {
      setSubmitError(t('trackingSubmitError') as unknown as string);
    }
  }

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className={['space-y-4', className].filter(Boolean).join(' ')}
      aria-label={t('trackingFormTitle')}
      noValidate
    >
      <h3 className="text-text-primary text-sm font-semibold">{t('trackingFormTitle')}</h3>

      <FormField
        label={t('carrierLabel')}
        htmlFor="return-carrier"
        error={errors.carrier?.message}
        required
      >
        <Controller
          name="carrier"
          control={control}
          render={({ field }) => (
            <Select value={field.value} onValueChange={field.onChange}>
              <SelectTrigger id="return-carrier" aria-invalid={!!errors.carrier}>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {CARRIERS.map((carrier) => (
                  <SelectItem key={carrier} value={carrier}>
                    {carrierLabels[carrier]}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}
        />
      </FormField>

      <FormField
        label={t('trackingNumberLabel')}
        htmlFor="return-tracking-number"
        error={errors.trackingNumber?.message}
        hint={t('trackingNumberHelp') as unknown as string}
        required
      >
        <Input
          id="return-tracking-number"
          type="text"
          autoComplete="off"
          autoCapitalize="characters"
          placeholder={t('trackingNumberPlaceholder') as unknown as string}
          invalid={!!errors.trackingNumber}
          {...register('trackingNumber')}
        />
      </FormField>

      {submitError && (
        <p role="alert" className="text-danger-600 text-sm">
          {submitError}
        </p>
      )}

      <Button
        type="submit"
        variant="primary"
        loading={isSubmitting}
        aria-busy={isSubmitting}
        className="w-full"
      >
        {t('submitTracking')}
      </Button>
    </form>
  );
}