"use client";

interface HourSelectProps {
  value: number; // 0..23
  onChange: (hour: number) => void;
  ariaPrefix: string;
}

const HOURS_12H = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
type Period = "AM" | "PM";

/** Convert a 0..23 24-hour value to its 12-hour + period form. */
export function to12Hour(h: number): { hour12: number; period: Period } {
  if (h === 0) return { hour12: 12, period: "AM" };
  if (h === 12) return { hour12: 12, period: "PM" };
  if (h < 12) return { hour12: h, period: "AM" };
  return { hour12: h - 12, period: "PM" };
}

/** Convert a 12-hour + period pair back to a 0..23 24-hour value. */
export function from12Hour(hour12: number, period: Period): number {
  if (period === "AM") return hour12 === 12 ? 0 : hour12;
  return hour12 === 12 ? 12 : hour12 + 12;
}

const SELECT_CLASS =
  "h-9 min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:bg-input/30";

/**
 * Two side-by-side <select> menus: one picks the 12-hour value
 * (1..12), the other picks AM/PM. They emit a single 0..23 value
 * so callers don't have to think about the conversion.
 */
export function HourSelect({ value, onChange, ariaPrefix }: HourSelectProps) {
  const { hour12, period } = to12Hour(value);

  return (
    <div className="flex items-center gap-1">
      <select
        aria-label={`${ariaPrefix} hour`}
        value={hour12}
        onChange={(e) => onChange(from12Hour(Number(e.target.value), period))}
        className={SELECT_CLASS}
      >
        {HOURS_12H.map((h) => (
          <option key={h} value={h}>
            {h}
          </option>
        ))}
      </select>
      <select
        aria-label={`${ariaPrefix} period`}
        value={period}
        onChange={(e) => onChange(from12Hour(hour12, e.target.value as Period))}
        className={SELECT_CLASS}
      >
        <option value="AM">AM</option>
        <option value="PM">PM</option>
      </select>
    </div>
  );
}