/* Dump — booking.jsx: the booking hand-off modal.
   Fires when a "book/schedule … appointment" task is completed. Booking was the
   task; the appointment itself is an exact-time commitment — the one thing that
   belongs on the calendar. Opt-in: "No, all done" adds nothing. */

function fmtBookingDay(iso) {
  try {
    const d = DumpUtil.calParse ? DumpUtil.calParse(iso) : new Date(iso + 'T00:00:00');
    const today = DumpUtil.todayISO();
    const dow = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()];
    const mon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()];
    return (iso === today ? 'Today · ' : '') + dow + ' ' + d.getDate() + ' ' + mon;
  } catch (e) { return iso; }
}

function BookingModal({ booking }) {
  const [title, setTitle] = React.useState(booking.title || '');
  const [date, setDate] = React.useState(DumpUtil.todayISO());
  const [time, setTime] = React.useState('');

  const skip = () => { DumpAPI.dismissBooking(); DumpAPI.toast('All done — nothing added to the calendar.'); };
  const add = () => {
    if (!title.trim()) { DumpAPI.toast('Give the appointment a few words first.'); return; }
    if (!time) { DumpAPI.toast('An appointment needs a time.'); return; }
    DumpAPI.addAppointment(title.trim(), date, time);
  };

  return (
    <div className="enough-scrim" onClick={skip}>
      <div className="enough-card book-card" onClick={(e) => e.stopPropagation()}>
        <p className="book-kicker">{Icons.check(14)} Booked — nice one</p>
        <h3 className="enough-title">Add the appointment to your calendar?</h3>
        <p className="enough-sub book-sub">
          Booking it was the task. The appointment itself has a real time — that’s
          what belongs on your calendar.
        </p>

        <div className="book-field">
          <label className="book-label">What is it?</label>
          <input className="book-input" value={title} autoFocus
            onChange={(e) => setTitle(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter' && time) add(); }} />
        </div>

        <div className="book-field">
          <label className="book-label">When?</label>
          <div className="book-when">
            <input type="date" className="book-input book-date" value={date}
              onChange={(e) => setDate(e.target.value || DumpUtil.todayISO())} />
            <input type="time" className="book-input book-time" value={time}
              onChange={(e) => setTime(e.target.value)} />
          </div>
          <p className="book-daynote">{fmtBookingDay(date)}{time ? ' · ' + time : ''}</p>
        </div>

        <div className="enough-actions book-actions">
          <button className="enough-primary" onClick={add}>Add to calendar</button>
          <button className="enough-dismiss" onClick={skip}>No, all done</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BookingModal });