/* Pipeline — Shots table, Shot detail (gallery + prompt dock), Bible */
const { useState: useShS } = React;

function ShotsView({ state, actions }) {
  const C = window.CL;
  const [popFor, setPopFor] = useShS(null);
  return (
    <div className="cl-pad">
      <div className="cl-h">
        <div><h1>Shots</h1><div className="sub">{state.shots.length} of {state.shots.length} · {C.project.scene}</div></div>
        <button className="btn amber" onClick={() => actions.toast("New shot — opens the shot creator")}><window.CIcon name="plus" size={14}/> New shot</button>
      </div>

      <div className="cl-table">
        <div className="cl-thead">
          <div>Label</div><div>Description</div><div>Status</div><div>Duration</div><div>Assignees</div>
        </div>
        {state.shots.map((sh) => {
          const who = window.memberById(sh.assignee);
          return (
            <div className="cl-trow" key={sh.label} onClick={() => actions.openShot(sh.label)}>
              <div className="lbl">{sh.label}</div>
              <div className="desc">
                <div className="dt">{sh.title}</div>
                <div className="dd"><window.Mentions text={sh.desc} onClick={(e,k)=>actions.openEntity(k)} /></div>
              </div>
              <div><window.Status s={sh.status} /></div>
              <div><span className="dur"><window.CIcon name="clock" size={12}/> {sh.dur}s</span></div>
              <div className="cl-asg" onClick={(e) => e.stopPropagation()}>
                {who ? <window.Avt m={who} size="s22" /> : null}
                <button className="btn amber sm" onClick={() => setPopFor(popFor === sh.label ? null : sh.label)}>
                  <window.CIcon name="plus" size={12}/> Assign
                </button>
                {popFor === sh.label && <AssignPop members={C.members} current={sh.assignee} onSave={(id)=>{actions.assign(sh.label,id);setPopFor(null);}} onClose={()=>setPopFor(null)} />}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function AssignPop({ members, current, onSave, onClose }) {
  const [sel, setSel] = useShS(current ? [current] : []);
  function toggle(id) { setSel((s) => s.includes(id) ? s.filter((x)=>x!==id) : [...s, id]); }
  return (
    <div className="cl-pop" onClick={(e)=>e.stopPropagation()}>
      <div className="ph">Assign to <span className="x" onClick={onClose}><window.CIcon name="x" size={13}/></span></div>
      {members.map((m) => (
        <div key={m.id} className={"row" + (sel.includes(m.id) ? " on" : "")} onClick={()=>toggle(m.id)}>
          <span className="ck">{sel.includes(m.id) && <window.CIcon name="check" size={11}/>}</span>
          <window.Avt m={m} size="s22" />
          <div><div className="nm">{m.name}</div><div className="rl">{m.role}</div></div>
        </div>
      ))}
      <div className="foot"><span className="sel">{sel.length} selected</span>
        <button className="btn ghost sm" onClick={onClose}>Cancel</button>
        <button className="btn mint sm" onClick={()=>onSave(sel[0]||null)}><window.CIcon name="check" size={12}/> Save</button>
      </div>
    </div>
  );
}

/* ---------------- Shot detail ---------------- */
function ShotDetail({ state, actions }) {
  const sh = state.shots.find((s) => s.label === state.openShotLabel);
  const [filter, setFilter] = useShS("all");
  const [size, setSize] = useShS(2);
  const [gens, setGens] = useShS(() => buildGens(sh));
  const [genState, setGenState] = useShS("idle");
  const [dockOpen, setDockOpen] = useShS(true);
  if (!sh) return null;

  const who = window.memberById(sh.assignee);
  const approved = gens.filter((g) => g.approved).length;
  const favs = gens.filter((g) => g.fav).length;
  const shown = gens.filter((g) => filter === "all" ? true : filter === "approved" ? g.approved : g.fav);
  const cols = size <= 1 ? 4 : size === 2 ? 3 : 2;

  function generate() {
    setGenState("running");
    setTimeout(() => {
      const add = [0,1,2,3].map((i) => ({ id: gens.length + i, seed: sh.label + "-n" + (gens.length+i), approved: false, fav: false, aipick: i === 1 }));
      setGens((g) => [...add, ...g]); setGenState("idle");
      actions.toast("4 variations generated · " + sh.label);
    }, 1400);
  }
  function patchGen(id, p) { setGens((g) => g.map((x) => x.id === id ? { ...x, ...p } : x)); }

  return (
    <div className="cl-pad">
      <div className="cl-back" onClick={actions.backToShots}><window.CIcon name="back" size={13}/> All shots</div>
      <div className="cl-shot-h">
        <span className="id">{sh.label}</span><window.Status s={sh.status} />
        <span className="dur"><window.CIcon name="clock" size={12}/> {sh.dur}s</span>
        <span className="asg">{who ? <>1 assignee <window.Avt m={who} size="s22"/></> : "Unassigned"}</span>
      </div>
      <div className="cl-shot-title">{sh.title}</div>
      <div className="cl-shot-desc"><window.Mentions text={sh.desc} onClick={(e,k)=>actions.openEntity(k)} /></div>

      <div className="cl-gal-h">
        <span className="gt">Gallery</span>
        <span className="gc">{shown.length} OF {gens.length}</span>
        <div className="cl-gal-tools">
          <label className="cl-size">Size <input type="range" min="1" max="3" value={size} onChange={(e)=>setSize(+e.target.value)} /></label>
          <div className="cl-seg">
            <button className={filter==="all"?"on":""} onClick={()=>setFilter("all")}>All · {gens.length}</button>
            <button className={filter==="fav"?"on":""} onClick={()=>setFilter("fav")}>♥ {favs}</button>
            <button className={filter==="approved"?"on":""} onClick={()=>setFilter("approved")}>✓ {approved}</button>
          </div>
        </div>
      </div>

      {gens.length === 0 && genState === "idle" && (
        <div className="cl-empty"><div className="big">No generations yet</div>Write the prompt below and hit Generate to create the first variations.</div>
      )}
      <div className="cl-gallery" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
        {genState === "running" && [0,1,2,3].map((i) => (
          <div className="cl-gen" key={"sk"+i}><div className="frame" style={{background:"#141518"}}><span className="cl-spin" style={{margin:"auto"}} /></div></div>
        ))}
        {shown.map((g) => (
          <div className={"cl-gen" + (g.approved ? " appr" : "")} key={g.id}>
            <window.Frame seed={g.seed} className="frame">
              {g.approved ? <span className="badge-appr"><window.CIcon name="check" size={10}/> Approved</span>
                : g.aipick ? <span className="badge-appr" style={{background:"#1F2024",color:"var(--amber-2)"}}>AI pick</span> : <span/>}
              <span className="dur-tag"><window.CIcon name="play" size={9}/> {sh.dur}s</span>
              <div className="actions">
                <div className={"cl-gact" + (g.approved?" on":"")} title="Approve" onClick={()=>{patchGen(g.id,{approved:!g.approved}); actions.toast(g.approved?"Approval removed":"Generation approved");}}><window.CIcon name="check" size={15}/></div>
                <div className="cl-gact" title="Send to review" onClick={()=>actions.toast("Added to review submission")}><window.CIcon name="plane" size={14}/></div>
                <div className={"cl-gact heart" + (g.fav?" on":"")} title="Favorite" onClick={()=>patchGen(g.id,{fav:!g.fav})}><window.CIcon name="heart" size={14}/></div>
                <div className="cl-gact" title="Download" onClick={()=>actions.toast("Downloading…")}><window.CIcon name="download" size={14}/></div>
              </div>
            </window.Frame>
          </div>
        ))}
      </div>

      {/* prompt dock */}
      <div className="cl-dock">
        <div className="cl-dock-grip" style={{cursor:"pointer"}} onClick={()=>setDockOpen(!dockOpen)} />
        {dockOpen && (
          <div className="cl-dock-body">
            <div className="cl-prompt-area">
              <div><span className="ph"># Subject</span> &nbsp;<b>{sh.title}.</b> <window.Mentions text={sh.desc} /></div>
              <div style={{marginTop:8}}><span className="ph"># Style</span> &nbsp;stylized painterly animation, firelit, warm key / cool rim · <b>Feature Look (locked)</b> · 2.39:1 anamorphic, ARRI ALEXA 65</div>
            </div>
            <div className="cl-dock-bar">
              <span className="cl-opt"><window.CIcon name="bolt" size={13}/> Nano Banana Pro</span>
              <span className="cl-opt">21:9</span>
              <span className="cl-opt"># 4</span>
              <span className="cl-opt">2K</span>
              <span className="cl-opt">PNG</span>
              <span className="cl-opt"><window.CIcon name="refs" size={13}/> Refs</span>
              <span className="cl-opt" onClick={()=>actions.go("builder")}><window.CIcon name="timeline" size={13}/> Timeline</span>
              <button className="btn mint" style={{marginLeft:"auto"}} disabled={genState==="running"} onClick={generate}>
                <window.CIcon name="sparkle" size={14}/> {genState==="running" ? "Generating…" : "Generate (20)"}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
function buildGens(sh) {
  if (!sh || !sh.gens) return [];
  return Array.from({ length: sh.gens }).map((_, i) => ({
    id: i, seed: sh.label + "-" + i,
    approved: sh.status === "approved" ? (i === Math.max(sh.selected,0)) : false,
    fav: i === 0 && sh.gens > 2, aipick: i === Math.max(sh.selected,0)
  }));
}

/* ---------------- Bible ---------------- */
function BibleView({ state, actions }) {
  const C = window.CL;
  return (
    <div className="cl-pad">
      <div className="cl-h">
        <div><h1>Script Breakdown</h1><div className="sub">{C.project.scene} · detailed shot coverage</div></div>
        <button className="btn amber" onClick={()=>actions.toast("Re-analyze — re-runs script breakdown")}><window.CIcon name="sparkle" size={14}/> Analyze script</button>
      </div>

      <div className="cl-bible">
        <p style={{color:"var(--txt-2)",fontSize:14.5,maxWidth:760,marginTop:0}}>
          Generated from your offline. Shot coverage is broken into <b style={{color:"var(--txt)"}}>15-second beats</b> — sized for video models like Seedance 2.0. The <span className="cl-link char">marked words</span> are live links to characters, locations and assets.
        </p>
        {C.bible.map((ch) => (
          <div className="cl-chunk" key={ch.n}>
            <div className="cl-chunk-h"><span className="ct">Beat {ch.n}: {ch.title}</span><span className="tc">{ch.tc}</span></div>
            <div className="cl-chunk-env"><b>Location:</b> <span className="env cl-link env" onClick={()=>actions.openEntity("env")}>{ch.env}</span></div>
            {ch.shots.map((bs) => (
              <div className="cl-bshot" key={bs.id}>
                <span className="bdot" />
                <div className="btxt">
                  <span className="sid" onClick={()=>actions.openShot(bs.id)}>{bs.id}</span> <span className="tc">({bs.tc})</span>: <window.Mentions text={bs.txt} onClick={(e,k)=>actions.openEntity(k)} />
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ShotsView, ShotDetail, BibleView });