{draggable ? : null} {!isFilm && EP {ep?.n}} SC setNum(e.target.value)} onBlur={() => onUpdate({ scene: Number(num) || scene.scene })} /> setLoc(e.target.value)} onBlur={() => onUpdate({ slug: loc })} /> {menuOpen && (

e.stopPropagation()}>

)}

{scene.photos && scene.photos.length ? ( {scene.slug}

) : ( )} {showGroup && scene.group ? {scene.group} : null} {scene.comments.length > 0 ? ( {scene.comments.length} ) : null}

setAddr(e.target.value)} onBlur={() => onUpdate({ address: addr })} />

setDesc(e.target.value)}
          onBlur={() => onUpdate({ notes: desc })}
          rows={2}
        />
        <div className="foot">
          <div className="scriptday-edit">
            <span className="sd-lbl">SCRIPT DAY</span>
            <input
              value={scriptDay}
              placeholder="—"
              onClick={stop}
              onChange={e => setScriptDay(e.target.value)}
              onBlur={() => onUpdate({ shootDay: scriptDay.trim() === "" ? null : scriptDay })}
            />
          </div>
          <select
            className="status-select"
            value={scene.status}
            onClick={stop}
            onChange={e => onUpdate({ status: e.target.value })}
          >
            {Object.entries(STATUS).map(([k,v]) => (
              <option key={k} value={k}>{v.label}</option>
            ))}
          </select>
        </div>
      </div>
    </div>
  );
}

// ── Sidebar item ───────────────────────────────────────────
function SideItem({ active, onClick, children, count, dot, flag, onDelete }) {
  return (
    <div className={"side-item" + (active ? " active" : "")} onClick={onClick}>
      {flag ? <span className="flag">{flag}</span> : null}
      {dot ? <span className="dot" style={{ background: dot }}></span> : null}
      <span>{children}</span>
      {count != null ? <span className="count">{count}</span> : null}
      {onDelete ? (
        <button className="side-item-del" title="Delete group"
                onClick={e => { e.stopPropagation(); onDelete(); }}>
          <Icon name="trash" size={11}/>
        </button>
      ) : null}
    </div>
  );
}

// ── Scene row (compact list layout) ────────────────────────
function SceneRow({ scene, onOpen, onUpdate, isFilm, draggable, onDragStart, onDragOver, onDrop, onDragEnd, dragOver, onDuplicate, onDelete }) {
  const ep = window.STORY.EPISODES.find(e => e.id === scene.episode);
  const [loc, setLoc] = useState(scene.slug);
  const [addr, setAddr] = useState(scene.address);
  useEffect(() => { setLoc(scene.slug); setAddr(scene.address); }, [scene.id]);
  const stop = e => e.stopPropagation();

return (
    <div
      className={"row-item" + (dragOver ? " drag-over" : "") + (!scene.group ? " row-nogroup" : "")}
      draggable={draggable}
      onDragStart={onDragStart}
      onDragOver={onDragOver}
      onDrop={onDrop}
      onDragEnd={onDragEnd}
    >
      <span className="drag-handle" title="Drag to reorder"><Icon name="drag" size={13}/></span>
      <div className="row-thumb">
        {scene.photos && scene.photos.length ? (
          <img src={coverPhoto(scene)} alt="" style={{width:"100%",height:"100%",objectFit:"cover",display:"block"}}/>
        ) : (
          <Placeholder country={ep?.country} hint={scene.photoHint} aspect="16 / 9"/>
        )}
      </div>
      {!isFilm && <span className="row-ep">EP {ep?.n}</span>}
      <span className="row-sc">SC {String(scene.scene).padStart(2,"0")}</span>
      <select className={`tag ${tagCls(scene.intExt)} tag-select`} value={scene.intExt} onClick={stop}
              onChange={e => onUpdate({ intExt: e.target.value })}>
        <option value="INT">INT</option>
        <option value="EXT">EXT</option>
        <option value="I+E">I+E</option>
      </select>
      <select className={`tag ${tagCls(scene.dn)} tag-select`} value={scene.dn} onClick={stop}
              onChange={e => onUpdate({ dn: e.target.value })}>
        <option value="DAY">DAY</option>
        <option value="NIGHT">NIGHT</option>
        <option value="DUSK">DUSK</option>
        <option value="DAWN">DAWN</option>
      </select>
      <input className="row-loc" value={loc} onClick={stop}
             onChange={e => setLoc(e.target.value)}
             onBlur={() => onUpdate({ slug: loc })}/>
      <input className="row-addr" value={addr} onClick={stop}
             onChange={e => setAddr(e.target.value)}
             onBlur={() => onUpdate({ address: addr })}/>
      <span className="row-group">{scene.group || <span style={{color:"var(--ink-4)"}}>—</span>}</span>
      <select className="status-select row-status" value={scene.status} onClick={stop}
              onChange={e => onUpdate({ status: e.target.value })}>
        {Object.entries(STATUS).map(([k,v]) => <option key={k} value={k}>{v.label}</option>)}
      </select>
      <button className="card-expand-btn" title="Open full details" onClick={onOpen}><Icon name="eye" size={13}/></button>
      <button className="card-expand-btn" title="Duplicate" onClick={onDuplicate}><Icon name="copy" size={12}/></button>
      <button className="card-expand-btn" title="Delete" style={{color:"var(--danger)"}} onClick={onDelete}><Icon name="trash" size={12}/></button>
    </div>
  );
}

// ── Print sheets (A4, hidden on screen, shown via @media print) ─
function PrintSheets({ scenes, isFilm, perPage, computePrintPages }) {
  const { pages } = computePrintPages(scenes, perPage);
  return (
    <div className="print-sheets">
      {pages.map((page, pi) => {
        const groups = [...new Set(page.map(p => p.group))];
        const label = groups.length === 1 && groups[0] ? groups[0] : "Mixed scenes";
        const cols = page.length > 6 ? 3 : 2;
        return (
          <div className="print-page" key={pi}>
            <div className="print-page-head">
              <div>
                <div className="pp-title">The Camino</div>
                <div className="pp-sub">{label}</div>
              </div>
              <div className="pp-page-no">Page {pi + 1} / {pages.length}</div>
            </div>
            <div className="print-grid" style={{ "--pcols": cols }}>
              {page.map(({ scene: s }) => {
                const ep = window.STORY.EPISODES.find(e => e.id === s.episode);
                return (
                  <div className="print-card" key={s.id}>
                    <div className="print-img">
                      {s.photos && s.photos.length ? (
                        <img src={s.photos[0]} alt=""/>
                      ) : (
                        <Placeholder country={ep?.country} hint={s.photoHint} aspect="16 / 9"/>
                      )}
                    </div>
                    <div className="print-meta">
                      <div className="print-ribbon">
                        <span className={`tag ${tagCls(s.intExt)}`}>{s.intExt}</span>
                        <span className={`tag ${tagCls(s.dn)}`}>{s.dn}</span>
                        <span style={{marginLeft:"auto",fontFamily:"var(--mono)",fontSize:10}}>
                          {!isFilm && `EP ${ep?.n} · `}SC {String(s.scene).padStart(2,"0")}
                        </span>
                      </div>
                      <div className="print-name">{s.slug}</div>
                      <div className="print-addr">{s.address}</div>
                      {s.notes ? <div className="print-notes">{s.notes}</div> : null}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { Icon, Placeholder, StatusBadge, Avatar, SceneCard, SceneRow, PrintSheets, SideItem, STATUS });