import { JalaliDatePicker } from './JalaliDatePicker';
import { formatPersianTime } from '@/lib/persianDate';

type Props = {
  label?: string;
  /** مقدار «YYYY-MM-DDTHH:MM» — همان فرمت datetime-local که بک‌اند می‌پذیرد. */
  value: string;
  onChange: (value: string) => void;
  error?: string;
};

/** تاریخ جلالی + ساعت — خروجی همان فرمت datetime-local سابق. */
export function JalaliDateTimePicker({ label, value, onChange, error }: Props) {
  const [datePart, timeRaw] = value ? value.split('T') : ['', ''];
  const timePart = (timeRaw || '').slice(0, 5);

  const setDate = (iso: string) => {
    if (!iso) {
      onChange('');
      return;
    }
    onChange(`${iso}T${timePart || '08:00'}`);
  };

  const setTime = (time: string) => {
    if (!datePart || !time) return;
    onChange(`${datePart}T${time}`);
  };

  return (
    <div className="form-field">
      {label && <span>{label}</span>}
      <div className="jdtp-row">
        <JalaliDatePicker value={datePart} onChange={setDate} />
        <input
          type="time"
          className="jdtp-time"
          value={timePart}
          onChange={(event) => setTime(event.target.value)}
          disabled={!datePart}
          aria-label="ساعت"
          title={datePart ? 'ساعت' : 'اول تاریخ را انتخاب کنید'}
        />
        <span className="jdtp-period">{timePart ? formatPersianTime(timePart).split(' ').pop() : 'ق.ظ/ب.ظ'}</span>
      </div>
      {error && <span className="field-error">{error}</span>}
    </div>
  );
}