// @design-system: domain/HoursRow
/**
 * HoursRow — single day row for opening hours editor.
 *
 * Renders: [day name] [open toggle] [from time input] [until time input]
 * Follows time formatting law: HH:mm only (no seconds).
 *
 * Tokens: `--color-surface-raised`, `--color-border`, `--color-text-*`,
 *          `--color-brand-primary-*`
 */

'use client';

import { useId } from 'react';
import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';

export type DayKey = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';

export interface HoursRowProps {
  /** Day of week. */
  day: DayKey;
  /** Whether the business is open on this day. */
  isOpen: boolean;
  /** Opening time — HH:mm format. */
  openFrom?: string;
  /** Closing time — HH:mm format. */
  openUntil?: string;
  /** Called when open toggle changes. */
  onToggleOpen: (isOpen: boolean) => void;
  /** Called when openFrom changes. */
  onChangeFrom: (time: string) => void;
  /** Called when openUntil changes. */
  onChangeUntil: (time: string) => void;
  /** Extra class names. */
  className?: string;
}

const dayLabelKeys: Record<
  DayKey,
  'day_sun' | 'day_mon' | 'day_tue' | 'day_wed' | 'day_thu' | 'day_fri' | 'day_sat'
> = {
  sun: 'day_sun',
  mon: 'day_mon',
  tue: 'day_tue',
  wed: 'day_wed',
  thu: 'day_thu',
  fri: 'day_fri',
  sat: 'day_sat',
};

/**
 * HoursRow
 *
 * Controlled component — caller owns the isOpen/openFrom/openUntil state.
 * Time inputs show HH:mm only (time formatting law).
 */
export function HoursRow({
  day,
  isOpen,
  openFrom = '',
  openUntil = '',
  onToggleOpen,
  onChangeFrom,
  onChangeUntil,
  className,
}: HoursRowProps) {
  const t = useT('hours_row');
  const baseId = useId();
  const toggleId = `${baseId}-toggle`;
  const fromId = `${baseId}-from`;
  const untilId = `${baseId}-until`;

  // Enforce HH:mm — strip seconds if present
  const displayFrom = openFrom.slice(0, 5);
  const displayUntil = openUntil.slice(0, 5);

  return (
    <div className={cn('grid items-center gap-3 py-2', 'grid-cols-[7rem_auto_1fr_1fr]', className)}>
      {/* Day name */}
      <span className="text-text-primary text-sm font-medium">{t(dayLabelKeys[day])}</span>

      {/* Open toggle */}
      <div className="flex items-center gap-2">
        <input
          id={toggleId}
          type="checkbox"
          checked={isOpen}
          onChange={(e) => onToggleOpen(e.target.checked)}
          className={cn(
            'border-border text-mode-vendor-600 h-4 w-4 rounded',
            'focus-visible:ring-brand-primary-500 focus-visible:ring-2',
          )}
          aria-label={`${t(dayLabelKeys[day])} ${t('open_label')}`}
        />
        <label htmlFor={toggleId} className="text-text-muted select-none text-xs">
          {isOpen ? t('open_label') : t('closed')}
        </label>
      </div>

      {/* From time */}
      <div className="flex flex-col gap-0.5">
        <label htmlFor={fromId} className="sr-only">
          {t('open_from')} {t(dayLabelKeys[day])}
        </label>
        <input
          id={fromId}
          type="time"
          value={displayFrom}
          disabled={!isOpen}
          onChange={(e) => onChangeFrom(e.target.value)}
          className={cn(
            'border-border h-8 rounded-md border px-2 text-sm font-[var(--font-en)]',
            'bg-surface-base text-text-primary',
            'focus-visible:ring-brand-primary-500 focus-visible:outline-none focus-visible:ring-2',
            'disabled:cursor-not-allowed disabled:opacity-40',
          )}
        />
      </div>

      {/* Until time */}
      <div className="flex flex-col gap-0.5">
        <label htmlFor={untilId} className="sr-only">
          {t('open_until')} {t(dayLabelKeys[day])}
        </label>
        <input
          id={untilId}
          type="time"
          value={displayUntil}
          disabled={!isOpen}
          onChange={(e) => onChangeUntil(e.target.value)}
          className={cn(
            'border-border h-8 rounded-md border px-2 text-sm font-[var(--font-en)]',
            'bg-surface-base text-text-primary',
            'focus-visible:ring-brand-primary-500 focus-visible:outline-none focus-visible:ring-2',
            'disabled:cursor-not-allowed disabled:opacity-40',
          )}
        />
      </div>
    </div>
  );
}