"use client";

import { useMemo } from "react";
import { normalizeClockTime } from "../datetime/clock";

const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));

const selectClass =
  "rounded-xl border border-[var(--border)] bg-white px-2.5 py-2.5 text-sm outline-none transition focus:border-primary focus:ring-2 ring-primary";

/**
 * 24-hour time picker (`HH:mm`). Prefer this over native `type="time"` under `lang="fa"`,
 * which often renders a 12-hour AM/PM UI on Windows.
 */
export function TimeInput({
  value = "",
  onChange,
  disabled,
  invalid,
  className = "",
  id,
  name,
  required,
}: {
  value?: string;
  onChange?: (value: string) => void;
  disabled?: boolean;
  invalid?: boolean;
  className?: string;
  id?: string;
  name?: string;
  required?: boolean;
}) {
  const normalized = useMemo(() => normalizeClockTime(value) || "00:00", [value]);
  const [hour, minute] = normalized.split(":");

  const emit = (nextHour: string, nextMinute: string) => {
    onChange?.(`${nextHour}:${nextMinute}`);
  };

  return (
    <div
      className={`flex items-center gap-1.5 ${className}`}
      dir="ltr"
      lang="en-GB"
      title="ساعت ۲۴ ساعته"
    >
      {name ? <input type="hidden" name={name} value={normalized} readOnly /> : null}
      <select
        id={id}
        className={`${selectClass} ${invalid ? "border-red-400" : ""}`}
        value={hour}
        disabled={disabled}
        required={required}
        aria-invalid={invalid || undefined}
        aria-label="ساعت"
        onChange={(e) => emit(e.target.value, minute)}
      >
        {HOURS.map((h) => (
          <option key={h} value={h}>
            {h}
          </option>
        ))}
      </select>
      <span className="text-sm font-semibold text-[var(--muted)]" aria-hidden>
        :
      </span>
      <select
        className={`${selectClass} ${invalid ? "border-red-400" : ""}`}
        value={minute}
        disabled={disabled}
        required={required}
        aria-invalid={invalid || undefined}
        aria-label="دقیقه"
        onChange={(e) => emit(hour, e.target.value)}
      >
        {MINUTES.map((m) => (
          <option key={m} value={m}>
            {m}
          </option>
        ))}
      </select>
    </div>
  );
}