"use client";
import { useEffect, useRef } from "react";
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.css";

// FIX 1: Added label, value, onChange, required, disabled props
// FIX 2: id derived from label — was hardcoded "timepicker1"

interface CommonTimePickerProps {
  label?: string;
  value?: string;
  onChange?: (value: string) => void;
  required?: boolean;
  disabled?: boolean;
  placeholder?: string;
}

export default function CommonTimePicker({
  label = "Time", value, onChange,
  required = false, disabled = false, placeholder = "HH:MM",
}: CommonTimePickerProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const fpRef    = useRef<ReturnType<typeof flatpickr> | null>(null);
  const fieldId  = `timepicker-${label.toLowerCase().replace(/\s+/g, "-")}`;

  useEffect(() => {
    if (!inputRef.current) return;
    fpRef.current = flatpickr(inputRef.current, {
      disableMobile: true,
      dateFormat: "H:i",
      enableTime: true,
      noCalendar: true,
      defaultDate: value,
      onChange: ([date]) => {
        if (!date) return;
        const hh = String(date.getHours()).padStart(2, "0");
        const mm = String(date.getMinutes()).padStart(2, "0");
        onChange?.(`${hh}:${mm}`);
      },
    });
    return () => { (fpRef.current as any)?.destroy?.(); };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <div>
      <label className="form-label" htmlFor={fieldId}>{label}</label>
      <input
        ref={inputRef}
        className="form-control datetimepicker"
        id={fieldId}
        type="text"
        placeholder={placeholder}
        required={required}
        disabled={disabled}
        readOnly
      />
    </div>
  );
}