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

function PlannerEditor({ open, block, settings, onClose, onUpdate, onDuplicate, onDelete }) {
  const { BLOCK_TYPES, PALETTE, DAY_NAMES, minsToInput, inputToMins, snapMin } = window.PLANNER_DATA;
  const [local, setLocal] = React.useState(block);

  React.useEffect(() => { setLocal(block); }, [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 colorful card on the board, or tap the + button on a day to add a new lesson.</p>
        </aside>
      </>
    );
  }

  const includeWeekend = settings.includeWeekend || local.dayIndex >= 5;
  const dayCount = includeWeekend ? 7 : 5;

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

  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) });

  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 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) => commit({ dayIndex: 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-row">
          <div className="field">
            <label>Starts</label>
            <input type="time" step="900" value={minsToInput(local.start)}
              onChange={(e) => commit({ start: snapMin(inputToMins(e.target.value)) })}/>
          </div>
          <div className="field">
            <label>Ends</label>
            <input type="time" step="900" value={minsToInput(local.end)}
              onChange={(e) => commit({ end: snapMin(inputToMins(e.target.value)) })}/>
          </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;