'use client';

/**
 * DateTimePicker — label + date / hour / minute / AM-PM all on one row.
 *
 * Value contract:
 *   value   : "YYYY-MM-DDTHH:mm"  (24-hr, EAT local)
 *   onChange: called with the same shape whenever any part changes
 */

interface DateTimePickerProps {
  value: string;
  onChange: (v: string) => void;
  required?: boolean;
  label?: string;
}

const HOURS = Array.from({ length: 12 }, (_, i) => String(i === 0 ? 12 : i).padStart(2, '0'));
const MINUTES = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];

function parse(value: string) {
  if (!value) return { date: '', h24: 0, min: 0 };
  const [datePart, timePart] = value.split('T');
  const [hStr, mStr] = (timePart ?? '00:00').split(':');
  return { date: datePart ?? '', h24: parseInt(hStr ?? '0'), min: parseInt(mStr ?? '0') };
}

function build(date: string, h24: number, min: number): string {
  if (!date) return '';
  return `${date}T${String(h24).padStart(2, '0')}:${String(min).padStart(2, '0')}`;
}

export default function DateTimePicker({ value, onChange, required, label }: DateTimePickerProps) {
  const { date, h24, min } = parse(value);

  const isPM = h24 >= 12;
  const h12 = h24 % 12 === 0 ? 12 : h24 % 12;
  const minStr = String(min).padStart(2, '0');

  const emit = (newDate: string, newH24: number, newMin: number) =>
    onChange(build(newDate, newH24, newMin));

  const handleHour = (v: string) => {
    const h = parseInt(v);
    const next24 = isPM ? (h === 12 ? 12 : h + 12) : (h === 12 ? 0 : h);
    emit(date, next24, min);
  };

  const handleAmPm = (v: string) => {
    const pm = v === 'PM';
    let next24 = h24;
    if (pm && h24 < 12) next24 = h24 + 12;
    if (!pm && h24 >= 12) next24 = h24 - 12;
    emit(date, next24, min);
  };

  return (
    <div>
      {label && (
        <label className="label">
          {label}
        </label>
      )}
      <div className="flex items-center gap-2">
        {/* Date */}
        <input
          type="date"
          className="input text-sm w-36 shrink-0"
          value={date}
          required={required}
          onChange={(e) => emit(e.target.value, h24, min)}
        />
        {/* Hour */}
        <select
          className="input text-sm w-16 shrink-0"
          value={String(h12).padStart(2, '0')}
          onChange={(e) => handleHour(e.target.value)}
        >
          {HOURS.map((h) => <option key={h} value={h}>{h}</option>)}
        </select>
        <span className="text-muted-foreground font-bold shrink-0">:</span>
        {/* Minute */}
        <select
          className="input text-sm w-16 shrink-0"
          value={minStr}
          onChange={(e) => emit(date, h24, parseInt(e.target.value))}
        >
          {MINUTES.map((m) => <option key={m} value={m}>{m}</option>)}
        </select>
        {/* AM / PM */}
        <select
          className="input text-sm w-16 shrink-0"
          value={isPM ? 'PM' : 'AM'}
          onChange={(e) => handleAmPm(e.target.value)}
        >
          <option value="AM">AM</option>
          <option value="PM">PM</option>
        </select>
      </div>
    </div>
  );
}
