/**
 * FieldsCoupon — COUPON-specific fields:
 * launch mode picker, duration picker, delivery method, pickup details.
 *
 * Extracted from AddDealShell as part of arch spec 06.
 */
'use client';
import { ErrorState } from '@/components/ui/feedback/ErrorState';
import { Button } from '@/components/ui/primitives/Button';

import { Controller, type UseFormReturn } from 'react-hook-form';
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@/components/ui/primitives/Select';
import { FormField } from '@/components/ui/primitives/FormField';
import { DealDurationPicker } from '@/components/ui/domain/DealDurationPicker';
import { PickupAddressSelector } from '@/components/ui/domain/PickupAddressSelector';
import { PickupHoursField } from '@/components/ui/domain/PickupHoursField';
import { LaunchModePicker } from '@/components/ui/primitives/LaunchModePicker';
import type { LaunchMode } from '@/components/ui/primitives/LaunchModePicker';
import { useQuery } from '@tanstack/react-query';
import { useT } from '@/lib/i18n/react';
import type { AddDealFormValues } from '../useAddDeal';
import type { BusinessHoursSnapshot } from '../types';

export interface FieldsCouponProps {
  form: UseFormReturn<AddDealFormValues>;
  launchMode: LaunchMode;
  onLaunchModeChange: (mode: LaunchMode) => void;
  businessHours: BusinessHoursSnapshot | null | undefined;
}

export function FieldsCoupon({
  form,
  launchMode,
  onLaunchModeChange,
  businessHours,
}: FieldsCouponProps) {
  const t = useT('vendor_add_deal');
  const tCommon = useT('common');
  const {
    data: vendorProfile,
    isError,
    refetch,
  } = useQuery<{ selfPickup?: boolean | null }>({
    queryKey: ['vendor-profile'],
    queryFn: async () => {
      const res = await fetch('/api/vendor/profile', { credentials: 'same-origin' });
      if (!res.ok) throw new Error('Failed');
      const json = (await res.json()) as { ok: boolean; vendor?: { selfPickup?: boolean | null } };
      return json.vendor ?? {};
    },
    staleTime: 30_000,
  });
  const selfPickup = vendorProfile?.selfPickup ?? false;
  const {
    watch,
    formState: { errors },
  } = form;
  const delivery = watch('delivery');

  if (isError) {
    return (
      <ErrorState
        title={tCommon('error_loading')}
        action={
          <Button variant="secondary" size="sm" onClick={() => refetch()}>
            {tCommon('retry')}
          </Button>
        }
      />
    );
  }
  return (
    <>
      {/* Launch + Duration */}
      <div className="flex flex-col gap-2">
        {/* Launch mode toggle */}
        <div className="flex flex-col gap-1.5">
          <span className="text-text-primary text-sm font-medium">{t('launch_mode_label')}</span>
          <LaunchModePicker
            value={launchMode}
            onChange={(mode) => {
              onLaunchModeChange(mode);
              // When switching back to "now", clear any stale windowStart
              // so the schema refinement doesn't fire on the old value.
              if (mode === 'now') {
                form.setValue('windowStart', undefined);
                form.clearErrors('windowStart');
              }
            }}
            nowLabel={t('launch_mode_now')}
            scheduledLabel={t('launch_mode_scheduled')}
            ariaLabel={t('launch_mode_label')}
          />
        </div>

        {/* "Starts immediately" label shown when launch-now mode */}
        {launchMode === 'now' && (
          <p className="text-text-secondary text-sm">{t('launch_mode_starts_immediately')}</p>
        )}

        {/* Duration picker — always shown for end-date, start input only in scheduled mode */}
        <Controller
          name="windowStart"
          control={form.control}
          render={({ field: startField }) => (
            <Controller
              name="windowEnd"
              control={form.control}
              render={({ field: endField }) => (
                <DealDurationPicker
                  startValue={launchMode === 'now' ? undefined : startField.value}
                  endValue={endField.value}
                  onStartChange={(v) => {
                    startField.onChange(v);
                  }}
                  onEndChange={endField.onChange}
                  businessHours={businessHours ?? null}
                  hideStartInput={launchMode === 'now'}
                  error={
                    errors.windowEnd?.message ??
                    (launchMode === 'scheduled' ? errors.windowStart?.message : undefined)
                  }
                />
              )}
            />
          )}
        />
      </div>

      {/* Delivery method (shown first to control pickup visibility) */}
      <FormField htmlFor="deal-delivery" label={t('delivery_method')}>
        <Controller
          name="delivery"
          control={form.control}
          render={({ field }) => (
            <>
              <Select value={field.value ?? ''} onValueChange={field.onChange}>
                <SelectTrigger id="deal-delivery">
                  <SelectValue placeholder={t('delivery_method_placeholder')} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="PICKUP_ONLY" disabled={!selfPickup}>
                    {t('delivery_pickup_only')}
                  </SelectItem>
                  <SelectItem value="DELIVERY">{t('delivery_delivery')}</SelectItem>
                  <SelectItem value="BOTH" disabled={!selfPickup}>
                    {t('delivery_both')}
                  </SelectItem>
                </SelectContent>
              </Select>
              {!selfPickup && (
                <p className="text-text-muted mt-1 text-xs">
                  {t('pickup_disabled_helper')}
                  <a href="/vendor/settings#pickup" className="text-brand-primary-600 underline">
                    {t('pickup_disabled_settings_link')}
                  </a>
                  {t('pickup_disabled_helper_suffix')}
                </p>
              )}
            </>
          )}
        />
      </FormField>

      {/* Pickup details group — only when method includes pickup */}
      {delivery !== 'DELIVERY' && (
        <div className="border-border-default flex flex-col gap-3 rounded-xl border p-3">
          <p className="text-text-primary text-sm font-semibold">{t('pickup_details_section')}</p>

          {/* Pickup address */}
          <Controller
            name="pickupAddress"
            control={form.control}
            render={({ field }) => (
              <FormField label={t('pickup_address')} htmlFor="deal-address">
                <PickupAddressSelector value={field.value ?? ''} onChange={field.onChange} />
              </FormField>
            )}
          />

          {/* Pickup hours — split into pickupStart + pickupEnd to
              match server `createDealBodySchema` (HH:MM each). */}
          <div className="flex flex-col gap-1">
            <p className="text-text-secondary text-sm">{t('pickup_hours')}</p>
            <Controller
              name="pickupStart"
              control={form.control}
              render={({ field: startField }) => (
                <Controller
                  name="pickupEnd"
                  control={form.control}
                  render={({ field: endField }) => (
                    <PickupHoursField
                      startValue={startField.value ?? ''}
                      endValue={endField.value ?? ''}
                      onStartChange={startField.onChange}
                      onEndChange={endField.onChange}
                    />
                  )}
                />
              )}
            />
            {(errors.pickupStart || errors.pickupEnd) && (
              <p role="alert" className="text-danger-600 text-xs">
                {errors.pickupStart?.message ?? errors.pickupEnd?.message}
              </p>
            )}
          </div>
        </div>
      )}
    </>
  );
}