/* planner-editor.jsx — block editor side panel */

function PlannerEditor({ open, block, settings, focusTitle, onClose, onUpdate, onDuplicate, onDelete, onFocused }) {
  const { BLOCK_TYPES, PALETTE, DAY_NAMES, DAY_SHORT, minsToInput, inputToMins, snapMin, blockDays } = window.PLANNER_DATA;
  const [local, setLocal] = React.useState(block);
  const [timeDraft, setTimeDraft] = React.useState(() => ({
    start: block ? minsToInput(block.start) : "08:00",
    end: block ? minsToInput(block.end) : "09:00"
  }));
  const titleRef = React.useRef(null);

  React.useEffect(() => {
    setLocal(block);
    if (block) {
      setTimeDraft({ start: minsToInput(block.start), end: minsToInput(block.end) });
    }
  }, [block && block.id]);

  React.useEffect(() => {
    if (open && focusTitle && titleRef.current) {
      const id = requestAnimationFrame(() => {
        if (titleRef.current) {
          titleRef.current.focus();
          titleRef.current.select();
        }
        if (onFocused) onFocused();
      });
      return () => cancelAnimationFrame(id);
    }
  }, [open, focusTitle, block && block.id]);

  if (!block || !local) {
    return (
      <>
        <div className={"editor-backdrop" + (open ? " open" : "")} onClick={onClose}/>
        <aside className={"editor" + (open ? " open" : "")}>
          <button className="close-btn" onClick={onClose}><window.Icon.close/></button>
          <p className="e-eyebrow">No block selected</p>
          <h2>Pick a card</h2>
          <p style={{color:"var(--ink-soft)", marginTop:8}}>Click any colourful card on the board, or double-click empty space on a day to add a new lesson.</p>
        </aside>
      </>
    );
  }

  const includeWeekend = settings.includeWeekend || local.dayIndex >= 5;
  const dayCount = includeWeekend ? 7 : 5;
  const selectedDays = blockDays(local).filter(day => day < dayCount);

  const commit = (patch) => {
    const next = { ...local, ...patch };
    setLocal(next);
    onUpdate(block.id, patch);
  };

  const commitTime = (field) => {
    const raw = timeDraft[field];
    const parsedRaw = inputToMins(raw);
    if (!raw || Number.isNaN(parsedRaw)) {
      setTimeDraft(t => ({ ...t, [field]: minsToInput(local[field]) }));
      return;
    }
    const snapped = snapMin(parsedRaw);
    if (field === "start") {
      const minEnd = snapped + 15;
      const nextEnd = local.end < minEnd ? minEnd : local.end;
      commit({ start: snapped, end: nextEnd });
      setTimeDraft({ start: minsToInput(snapped), end: minsToInput(nextEnd) });
    } else {
      const minEnd = local.start + 15;
      const nextEnd = snapped < minEnd ? minEnd : snapped;
      commit({ end: nextEnd });
      setTimeDraft(t => ({ ...t, end: minsToInput(nextEnd) }));
    }
  };

  const onTimeKey = (e, field) => {
    if (e.key === "Enter") {
      e.preventDefault();
      commitTime(field);
      e.currentTarget.blur();
    } else if (e.key === "Escape") {
      setTimeDraft(t => ({ ...t, [field]: minsToInput(local[field]) }));
      e.currentTarget.blur();
    }
  };

  const setActivity = (i, patch) => {
    const acts = local.activities.slice();
    acts[i] = { ...acts[i], ...patch };
    commit({ activities: acts });
  };
  const addActivity = () => commit({ activities: [...local.activities, { name: "Activity", minutes: 10, detail: "" }] });
  const removeActivity = (i) => commit({ activities: local.activities.filter((_,idx) => idx !== i) });
  const toggleRepeatDay = (day) => {
    const nextDays = selectedDays.includes(day)
      ? selectedDays.filter(d => d !== day)
      : selectedDays.concat(day).sort((a, b) => a - b);
    const safeDays = nextDays.length ? nextDays : [local.dayIndex];
    commit({
      dayIndex: safeDays[0],
      repeatDays: safeDays.length > 1 ? safeDays : []
    });
  };
  const setWeekdays = () => commit({ dayIndex: 0, repeatDays: [0, 1, 2, 3, 4] });
  const setSingleDay = (day) => commit({ dayIndex: day, repeatDays: [] });

  return (
    <>
      <div className={"editor-backdrop" + (open ? " open" : "")} onClick={onClose}/>
      <aside className={"editor" + (open ? " open" : "")}>
        <button className="close-btn" onClick={onClose} title="Close"><window.Icon.close/></button>
        <p className="e-eyebrow">Lesson block</p>
        <h2 style={{display:"flex", alignItems:"center", gap:10}}>
          <span style={{width:14, height:14, borderRadius:"50%", background: local.color, border:"3px solid var(--ink)"}}/>
          {local.title || "New block"}
        </h2>

        <div className="field">
          <label>Title</label>
          <input ref={titleRef} type="text" value={local.title} maxLength={80}
            onChange={(e) => commit({ title: e.target.value })} placeholder="What are we doing?"/>
        </div>

        <div className="field-row">
          <div className="field">
            <label>Day</label>
            <select value={local.dayIndex} onChange={(e) => setSingleDay(Number(e.target.value))}>
              {DAY_NAMES.slice(0, dayCount).map((n, i) => <option key={i} value={i}>{n}</option>)}
            </select>
          </div>
          <div className="field">
            <label>Subject</label>
            <select value={local.typeId} onChange={(e) => commit({ typeId: e.target.value })}>
              {BLOCK_TYPES.map(t => <option key={t.id} value={t.id}>{t.label}</option>)}
            </select>
          </div>
        </div>

        <div className="field">
          <label>Repeats on</label>
          <div className="repeat-row">
            {DAY_SHORT.slice(0, dayCount).map((name, day) => (
              <button
                key={day}
                type="button"
                className={"repeat-chip" + (selectedDays.includes(day) ? " selected" : "")}
                onClick={() => toggleRepeatDay(day)}
              >
                {name}
              </button>
            ))}
          </div>
          <div className="repeat-actions">
            <button type="button" onClick={setWeekdays}>Mon-Fri</button>
            <button type="button" onClick={() => setSingleDay(local.dayIndex)}>One day</button>
          </div>
        </div>

        <div className="field-row">
          <div className="field">
            <label>Starts</label>
            <input type="time" step="300" value={timeDraft.start}
              onChange={(e) => setTimeDraft(t => ({ ...t, start: e.target.value }))}
              onBlur={() => commitTime("start")}
              onKeyDown={(e) => onTimeKey(e, "start")}/>
          </div>
          <div className="field">
            <label>Ends</label>
            <input type="time" step="300" value={timeDraft.end}
              onChange={(e) => setTimeDraft(t => ({ ...t, end: e.target.value }))}
              onBlur={() => commitTime("end")}
              onKeyDown={(e) => onTimeKey(e, "end")}/>
          </div>
        </div>

        <div className="field-row">
          <div className="field">
            <label>Group</label>
            <input type="text" value={local.group} maxLength={64}
              onChange={(e) => commit({ group: e.target.value })} placeholder="Class / room"/>
          </div>
          <div className="field">
            <label>Color</label>
            <div className="swatches">
              {PALETTE.map(c => (
                <button key={c} className={"swatch" + (local.color === c ? " selected" : "")}
                  style={{ "--c": c }} onClick={() => commit({ color: c })} title={c}/>
              ))}
            </div>
          </div>
        </div>

        <div className="field">
          <label>Learning target</label>
          <textarea rows="2" value={local.objective}
            onChange={(e) => commit({ objective: e.target.value })}
            placeholder="What should kids know or do by the end?"/>
        </div>

        <div className="field">
          <label>Lesson activities</label>
          {local.activities.map((a, i) => (
            <div key={i} className="activity-row">
              <input type="text" value={a.name} placeholder="Activity"
                onChange={(e) => setActivity(i, { name: e.target.value })}/>
              <input type="text" inputMode="numeric" value={a.minutes}
                onChange={(e) => setActivity(i, { minutes: Number(e.target.value)||0 })}
                title="Minutes"/>
              <button className="remove-act" onClick={() => removeActivity(i)} title="Remove">
                <window.Icon.trash/>
              </button>
              <textarea rows="2" value={a.detail} placeholder="Teacher moves / student actions"
                onChange={(e) => setActivity(i, { detail: e.target.value })}/>
            </div>
          ))}
          <button className="add-activity" onClick={addActivity}>
            <window.Icon.plus/> Add activity
          </button>
        </div>

        <div className="field">
          <label>Materials</label>
          <textarea rows="2" value={local.materials}
            onChange={(e) => commit({ materials: e.target.value })}
            placeholder="Books, manipulatives, slides…"/>
        </div>

        <div className="field">
          <label>Notes</label>
          <textarea rows="2" value={local.notes}
            onChange={(e) => commit({ notes: e.target.value })}
            placeholder="Differentiation, reminders, reflections"/>
        </div>

        <div className="editor-actions">
          <button className="btn-primary" onClick={onClose}>
            <window.Icon.check/> Done
          </button>
          <button className="btn-secondary" onClick={() => onDuplicate(block.id)}>
            <window.Icon.copy/> Duplicate
          </button>
          <button className="btn-danger" onClick={() => onDelete(block.id)}>
            <window.Icon.trash/> Delete
          </button>
        </div>
      </aside>
    </>
  );
}

window.PlannerEditor = PlannerEditor;