// Event editor modal — add/edit/delete with all standard fields.
// Layout: title, then category+location, all-day, starts/start time/ends/end time grid,
// repeats + repeat until, notes. Cancel/Save in footer.

const { useState: eUseState, useEffect: eUseEffect, useRef: eUseRef } = React;

function EventEditor({ open, initial, defaultDate, onSave, onDelete, onClose, categories }) {
  const isEdit = !!(initial && initial.id);
  const [form, setForm] = eUseState(() => makeForm(initial, defaultDate));
  const [titleError, setTitleError] = eUseState(false);
  const titleRef = eUseRef(null);

  eUseEffect(() => {
    setForm(makeForm(initial, defaultDate));
    setTitleError(false);
  }, [initial, defaultDate, open]);

  // Autofocus the title when opening for a new event
  eUseEffect(() => {
    if (open && !isEdit && titleRef.current) {
      const t = setTimeout(() => titleRef.current.focus(), 50);
      return () => clearTimeout(t);
    }
  }, [open, isEdit]);

  function makeForm(init, dflt) {
    if (init && init.id) {
      return {
        title: init.title || "",
        location: init.location || "",
        date: init.date || dflt || "",
        endDate: init.endDate || init.date || dflt || "",
        allDay: !!init.allDay,
        start: init.start || "09:00",
        end: init.end || "10:00",
        cat: init.cat || "personal",
        notes: init.notes || "",
        recur: init.recur ? init.recur.freq : "none",
        recurUntil: init.recur && init.recur.until ? init.recur.until : "",
      };
    }
    return {
      title: "",
      location: "",
      date: dflt || "",
      endDate: dflt || "",
      allDay: false,
      start: "09:00",
      end: "10:00",
      cat: "personal",
      notes: "",
      recur: "none",
      recurUntil: "",
    };
  }

  if (!open) return null;

  function set(k, v) { setForm(prev => ({ ...prev, [k]: v })); }

  function handleSave(e) {
    e && e.preventDefault();
    if (!form.title.trim()) {
      setTitleError(true);
      titleRef.current && titleRef.current.focus();
      return;
    }
    if (!form.date) return;

    const payload = {
      title: form.title.trim(),
      date: form.date,
      cat: form.cat,
    };
    if (form.location && form.location.trim()) payload.location = form.location.trim();
    if (form.notes && form.notes.trim()) payload.notes = form.notes.trim();

    if (form.allDay) {
      payload.allDay = true;
      if (form.endDate && form.endDate > form.date) payload.endDate = form.endDate;
    } else {
      payload.start = form.start;
      payload.end = form.end;
      // For timed events that span days, support endDate too
      if (form.endDate && form.endDate > form.date) payload.endDate = form.endDate;
    }
    if (form.recur !== "none") {
      const r = { freq: form.recur };
      if (form.recurUntil) r.until = form.recurUntil;
      else r.count = 12; // fallback
      payload.recur = r;
    }
    onSave(payload);
  }

  return (
    <div className="ev-backdrop" onClick={onClose}>
      <form className="ev-modal" onClick={(e) => e.stopPropagation()} onSubmit={handleSave}>
        <header className="ev-head">
          <h3 className="ev-title">{isEdit ? "Edit event" : "New event"}</h3>
          <button type="button" className="ev-x" onClick={onClose} aria-label="Close">×</button>
        </header>

        <div className="ev-body">
          {/* Title — full width */}
          <div className="ev-field">
            <label className="ev-flabel" htmlFor="ev-title">Title</label>
            <input
              ref={titleRef}
              id="ev-title"
              className={`ev-text ev-text-lg ${titleError ? "ev-text-error" : ""}`}
              placeholder="Event title"
              value={form.title}
              onChange={(e) => { set("title", e.target.value); if (titleError) setTitleError(false); }}
            />
          </div>

          {/* Category + Location */}
          <div className="ev-grid ev-grid-2">
            <div className="ev-field">
              <label className="ev-flabel" htmlFor="ev-cat">Category</label>
              <div className="ev-select-wrap">
                <select
                  id="ev-cat"
                  className="ev-text"
                  value={form.cat}
                  onChange={(e) => set("cat", e.target.value)}
                >
                  {Object.entries(categories).map(([id, c]) => (
                    <option key={id} value={id}>{c.label}</option>
                  ))}
                </select>
                <span className="ev-cat-dot-fixed" style={{ background: categories[form.cat]?.dot }} />
              </div>
            </div>
            <div className="ev-field">
              <label className="ev-flabel" htmlFor="ev-loc">Location</label>
              <input
                id="ev-loc"
                className="ev-text"
                placeholder="(optional)"
                value={form.location}
                onChange={(e) => set("location", e.target.value)}
              />
            </div>
          </div>

          {/* All day checkbox */}
          <div className="ev-field-inline">
            <label className="ev-checkbox">
              <input
                type="checkbox"
                checked={form.allDay}
                onChange={(e) => set("allDay", e.target.checked)}
              />
              <span className="ev-cbox-square" aria-hidden="true" />
              <span>All day</span>
            </label>
          </div>

          {/* Date/time grid: Starts | Start time | Ends | End time */}
          <div className={`ev-grid ${form.allDay ? "ev-grid-2" : "ev-grid-4"}`}>
            <div className="ev-field">
              <label className="ev-flabel" htmlFor="ev-starts">Starts</label>
              <input
                id="ev-starts"
                type="date"
                className="ev-text"
                value={form.date}
                onChange={(e) => {
                  set("date", e.target.value);
                  if (!form.endDate || form.endDate < e.target.value) set("endDate", e.target.value);
                }}
              />
            </div>
            {!form.allDay && (
              <div className="ev-field">
                <label className="ev-flabel" htmlFor="ev-stime">Start time</label>
                <input
                  id="ev-stime"
                  type="time"
                  className="ev-text"
                  value={form.start}
                  onChange={(e) => set("start", e.target.value)}
                />
              </div>
            )}
            <div className="ev-field">
              <label className="ev-flabel" htmlFor="ev-ends">Ends</label>
              <input
                id="ev-ends"
                type="date"
                className="ev-text"
                value={form.endDate || form.date}
                onChange={(e) => set("endDate", e.target.value)}
              />
            </div>
            {!form.allDay && (
              <div className="ev-field">
                <label className="ev-flabel" htmlFor="ev-etime">End time</label>
                <input
                  id="ev-etime"
                  type="time"
                  className="ev-text"
                  value={form.end}
                  onChange={(e) => set("end", e.target.value)}
                />
              </div>
            )}
          </div>

          {/* Repeats + Repeat until */}
          <div className="ev-grid ev-grid-2">
            <div className="ev-field">
              <label className="ev-flabel" htmlFor="ev-rep">Repeats</label>
              <select
                id="ev-rep"
                className="ev-text"
                value={form.recur}
                onChange={(e) => set("recur", e.target.value)}
              >
                <option value="none">Does not repeat</option>
                <option value="daily">Daily</option>
                <option value="weekly">Weekly</option>
                <option value="monthly">Monthly</option>
                <option value="yearly">Yearly</option>
              </select>
            </div>
            <div className="ev-field">
              <label className="ev-flabel" htmlFor="ev-runtil">Repeat until</label>
              <input
                id="ev-runtil"
                type="date"
                className="ev-text"
                placeholder="dd/mm/yyyy"
                value={form.recurUntil}
                onChange={(e) => set("recurUntil", e.target.value)}
                disabled={form.recur === "none"}
              />
            </div>
          </div>

          {/* Notes */}
          <div className="ev-field">
            <label className="ev-flabel" htmlFor="ev-notes">Notes</label>
            <textarea
              id="ev-notes"
              className="ev-text ev-textarea"
              rows="3"
              placeholder="(optional)"
              value={form.notes}
              onChange={(e) => set("notes", e.target.value)}
            />
          </div>
        </div>

        <footer className="ev-foot">
          {isEdit && (
            <button type="button" className="ev-btn ev-danger" onClick={() => onDelete(initial.id)}>
              Delete
            </button>
          )}
          <div className="ev-foot-right">
            <button type="button" className="ev-btn" onClick={onClose}>Cancel</button>
            <button type="submit" className="ev-btn ev-primary">{isEdit ? "Save changes" : "Save"}</button>
          </div>
        </footer>
      </form>
    </div>
  );
}

window.EventEditor = EventEditor;