// @design-system: domain/PickupHoursField

'use client';

import { useId } from 'react';
import { Label } from '@/components/ui/primitives/Label';
import { TimeSpinner } from '@/components/ui/domain/HoursEditor/HoursEditor';
import { useT } from '@/lib/i18n/react';

export interface PickupHoursFieldProps {
  /** Pickup start time in "HH:mm" format (or empty string for unset). */
  startValue: string;
  /** Pickup end time in "HH:mm" format (or empty string for unset). */
  endValue: string;
  /** Called when start time changes. */
  onStartChange: (v: string) => void;
  /** Called when end time changes. */
  onEndChange: (v: string) => void;
  disabled?: boolean;
}

/**
 * PickupHoursField - two `TimeSpinner`s (start + end) for the pickup window
 * (FDS §5.4 vendor deal form). The server requires `pickupStart` /
 * `pickupEnd` as separate HH:MM strings — keep them split end-to-end (no
 * string concatenation, no client-side parsing on submit).
 */
export function PickupHoursField({
  startValue,
  endValue,
  onStartChange,
  onEndChange,
  disabled,
}: PickupHoursFieldProps) {
  const t = useT('vendor_add_deal');
  const fromId = useId();
  const toId = useId();
  const fromLabel = t('pickup_hours_from');
  const toLabel = t('pickup_hours_to');

  return (
    <div className="flex items-end gap-3">
      <div className="flex flex-col gap-1">
        <Label htmlFor={fromId}>{fromLabel}</Label>
        <div id={fromId} aria-disabled={disabled || undefined}>
          <TimeSpinner
            value={startValue || '00:00'}
            onChange={(v) => {
              if (!disabled) onStartChange(v);
            }}
            ariaLabel={fromLabel}
          />
        </div>
      </div>
      <span className="text-text-muted pb-2 text-sm" aria-hidden>
        –
      </span>
      <div className="flex flex-col gap-1">
        <Label htmlFor={toId}>{toLabel}</Label>
        <div id={toId} aria-disabled={disabled || undefined}>
          <TimeSpinner
            value={endValue || '00:00'}
            onChange={(v) => {
              if (!disabled) onEndChange(v);
            }}
            ariaLabel={toLabel}
          />
        </div>
      </div>
    </div>
  );
}