/* Pipeline — Prompt Builder, My Work, Review, Entities, Library, Sync, Members */
const { useState: useMiS } = React;

/* ---------------- Prompt Builder (axes + NORMAL/SECTIONS) ---------------- */
function BuilderView({ state, actions }) {
  const C = window.CL;
  const [preset, setPreset] = useMiS("feature");
  const [mode, setMode] = useMiS("sections");
  const [subject, setSubject] = useMiS(C.sectionText.subject);
  const [env, setEnv] = useMiS(C.sectionText.environment);
  const [axisVals, setAxisVals] = useMiS(() => {
    const o = {}; C.axes.forEach((a) => (o[a.key] = a.value)); return o;
  });
  const filled = C.axes.filter((a) => axisVals[a.key]).length;

  function setAxis(k, v) { setAxisVals((s) => ({ ...s, [k]: v })); }

  // build section list
  const sections = [
    { key: "subject", label: "Subject", text: subject },
    { key: "environment", label: "Environment", text: env },
    ...C.axes.map((a) => ({ key: a.key, label: a.name, text: axisVals[a.key] ? C.sectionText[a.key] : "" }))
  ];
  const fullText = sections.filter((s) => s.text).map((s) => s.text).join(", ");
  const words = fullText.split(/\s+/).filter(Boolean).length;

  return (
    <div className="cl-pb">
      {/* axes */}
      <div className="pb-axes">
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--txt-3)", marginBottom: 10 }}>Style presets</div>
        <div className="pb-presets">
          {C.presets.map((p) => (
            <div key={p.id} className={"pb-preset" + (preset === p.id ? " on" : "")} onClick={() => { setPreset(p.id); actions.toast("Loaded preset · " + p.name); }}>
              <span className="pthumb" style={window.frameStyle(p.id, p.hue)} />
              <div><div className="pn">{p.name}</div>{p.locked && <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: ".1em", color: "var(--amber-2)" }}>LOCKED</div>}</div>
            </div>
          ))}
        </div>
        <button className="btn pb-save"><window.CIcon name="plus" size={13} /> Save current</button>

        <div className="pb-axhead"><span>Axes</span><span>{filled}/{C.axes.length}</span></div>
        {C.axes.map((a) => (
          <div className="pb-ax" key={a.key}>
            <div className="axn">{a.name}</div>
            <div className="pb-chips">
              {axisVals[a.key]
                ? <span className="pb-chip on" onClick={() => setAxis(a.key, "")}>+ {axisVals[a.key]}</span>
                : <span className="pb-chip pick" onClick={() => setAxis(a.key, defaultFor(a.key))}>+ pick</span>}
            </div>
          </div>
        ))}
      </div>

      {/* main */}
      <div className="pb-main">
        <div className="pb-subj">
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--txt-3)", marginBottom: 8 }}>Subject</div>
            <textarea className="pb-ta" value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="Who / what is in the shot…" />
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--txt-3)", marginBottom: 8 }}>Environment</div>
            <textarea className="pb-ta" value={env} onChange={(e) => setEnv(e.target.value)} placeholder="Where it happens…" />
          </div>
        </div>

        <div className="pb-preview">
          <div className="pb-pv-h">
            <span className="lab">Prompt preview</span>
            <div className="cl-seg">
              <button className={mode === "normal" ? "on" : ""} onClick={() => setMode("normal")}>Normal</button>
              <button className={mode === "sections" ? "on" : ""} onClick={() => setMode("sections")} style={mode === "sections" ? { background: "var(--amber)", color: "#1A1206" } : {}}>Sections</button>
            </div>
            <span className="count">{words} words · {fullText.length} chars</span>
          </div>

          {mode === "sections" ? (
            sections.map((s) => (
              <div className={"pb-sec" + (s.text ? "" : " empty")} key={s.key}>
                <div className="sk">{s.label}</div>
                <div className="sv">{s.text || "describe " + s.label.toLowerCase() + "…"}</div>
              </div>
            ))
          ) : (
            <div className="pb-normal">{sections.filter((s) => s.text).map((s, i) => (
              <span key={s.key}><span className="hl">{s.text}</span>{i < sections.filter((x) => x.text).length - 1 ? ", " : ""}</span>
            ))}</div>
          )}
        </div>

        <div style={{ display: "flex", gap: 10, marginTop: 16, flexWrap: "wrap" }}>
          <button className="btn" onClick={() => actions.toast("Prompt copied to clipboard")}><window.CIcon name="link" size={14} /> Copy prompt</button>
          <button className="btn mint" onClick={() => actions.toast("Sent to generation queue")}><window.CIcon name="sparkle" size={14} /> Send to Generate</button>
        </div>
        <p style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--txt-3)", marginTop: 16, lineHeight: 1.6 }}>
          The operator keys the Subject &amp; action — style and look are pre-loaded from the locked preset, so the prompt comes out on-look every time. <b style={{ color: "var(--txt-2)" }}>Sections</b> view feeds segmented prompting; <b style={{ color: "var(--txt-2)" }}>Normal</b> flattens it for copy-paste into any model.
        </p>
      </div>
    </div>
  );
}
function defaultFor(k) {
  const d = { lens: "Anamorphic prime", filmstock: "Kodak Vision3 500T", angle: "Eye-level", multiangle: "Coverage: wide + CU", filter: "Subtle film grain" };
  return d[k] || "Custom";
}

/* ---------------- My Work ---------------- */
function MyWorkView({ state, actions }) {
  const mine = state.shots.filter((s) => s.assignee === state.current);
  const todo = mine.filter((s) => s.status === "notstarted" || s.status === "inprogress").length;
  const changes = mine.filter((s) => s.status === "changes").length;
  const review = mine.filter((s) => s.status === "review").length;
  const appr = mine.filter((s) => s.status === "approved").length;
  return (
    <div className="cl-pad">
      <div className="cl-h"><div><h1>My Work</h1><div className="sub">{window.memberById(state.current).name} · your assigned shots</div></div></div>
      <div className="cl-tiles">
        <div className="cl-tile"><div className="n amber">{todo}</div><div className="l">To generate</div></div>
        <div className="cl-tile"><div className="n red">{changes}</div><div className="l">Needs changes</div></div>
        <div className="cl-tile"><div className="n">{review}</div><div className="l">In review</div></div>
        <div className="cl-tile"><div className="n mint">{appr}</div><div className="l">Approved</div></div>
      </div>
      <div className="cl-table">
        <div className="cl-thead"><div>Label</div><div>Description</div><div>Status</div><div>Duration</div><div>Action</div></div>
        {mine.map((sh) => (
          <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} /></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 onClick={(e) => e.stopPropagation()}><button className="btn amber sm" onClick={() => actions.openShot(sh.label)}><window.CIcon name="wand" size={12} /> Open</button></div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- Review (director) ---------------- */
function ReviewView({ state, actions }) {
  const [noteFor, setNoteFor] = useMiS(null);
  const [noteText, setNoteText] = useMiS("");
  return (
    <div className="cl-pad">
      <div className="cl-h"><div><h1>Review</h1><div className="sub">{state.submissions.length} pending · approve, return with a note, or dismiss</div></div></div>
      {state.submissions.length === 0 ? (
        <div className="cl-empty"><div className="big">Queue clear</div>New submissions land here with a notification.</div>
      ) : (
        <div className="cl-rev">
          {state.submissions.map((sub) => {
            const by = window.memberById(sub.by);
            return (
              <div className="cl-revcard" key={sub.id}>
                <window.Frame seed={sub.shot + "rev"} className="rt">
                  <span className="dur-tag" style={{ position: "relative", zIndex: 2 }}><window.CIcon name="play" size={9} /> Take {sub.take}</span>
                  <span className="badge-appr" style={{ position: "relative", zIndex: 2, background: "#1F2024", color: "#fff" }}>{sub.shot}</span>
                </window.Frame>
                <div className="rb">
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6, flexWrap: "wrap" }}>
                    <strong style={{ fontSize: 15 }}>{sub.title}</strong>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12, color: "var(--txt-2)", fontSize: 13 }}>
                    <window.Avt m={by} size="s22" /> {by.name} <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--txt-3)" }}>· +{sub.alternates} alternates</span>
                  </div>
                  <div className="cl-note"><div className="nh">Artist note</div>{sub.note}</div>
                  {noteFor === sub.id ? (
                    <div style={{ marginTop: 12 }}>
                      <textarea className="cl-ta" placeholder="What needs to change…" value={noteText} onChange={(e) => setNoteText(e.target.value)} />
                      <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
                        <button className="btn amber sm" onClick={() => { actions.requestChanges(sub, noteText); setNoteFor(null); setNoteText(""); }}><window.CIcon name="plane" size={12} /> Send change note</button>
                        <button className="btn ghost sm" onClick={() => setNoteFor(null)}>Cancel</button>
                      </div>
                    </div>
                  ) : (
                    <div style={{ display: "flex", gap: 9, marginTop: 14, flexWrap: "wrap" }}>
                      <button className="btn mint sm" onClick={() => actions.approveSub(sub)}><window.CIcon name="check" size={13} /> Approve</button>
                      <button className="btn sm" onClick={() => { setNoteFor(sub.id); setNoteText(""); }}><window.CIcon name="review" size={13} /> Send note</button>
                      <button className="btn ghost sm" onClick={() => actions.dismissSub(sub.id)}><window.CIcon name="x" size={13} /> Dismiss</button>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}
      {state.decisions.length > 0 && (
        <div style={{ marginTop: 26 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--txt-3)", marginBottom: 12 }}>Recent decisions — visible to the artist</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {state.decisions.slice().reverse().map((d, i) => (
              <div key={i} className={"cl-note " + (d.kind === "approved" ? "mint" : "red")}>
                <div className="nh">{d.kind === "approved" ? "Approved" : "Changes requested"} · {d.shot} → {window.memberById(d.to).name}</div>{d.text}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------------- Team (progress) ---------------- */
function TeamView({ state }) {
  const C = window.CL;
  const total = state.shots.length;
  const counts = { approved: 0, review: 0, inprogress: 0, notstarted: 0, changes: 0 };
  state.shots.forEach((s) => counts[s.status]++);
  const seg = [
    { k: "approved", c: "var(--mint)", n: counts.approved, l: "Approved" },
    { k: "review", c: "var(--amber)", n: counts.review, l: "In review" },
    { k: "inprogress", c: "var(--blue)", n: counts.inprogress, l: "In progress" },
    { k: "changes", c: "var(--red)", n: counts.changes, l: "Changes" },
    { k: "notstarted", c: "#34353A", n: counts.notstarted, l: "Not started" }
  ];
  let acc = 0; const stops = seg.map((s) => { const from = acc / total * 100; acc += s.n; const to = acc / total * 100; return `${s.c} ${from}% ${to}%`; }).join(", ");
  const pct = Math.round(counts.approved / total * 100);
  return (
    <div className="cl-pad">
      <div className="cl-h"><div><h1>Team</h1><div className="sub">{C.project.scene} · overall progress</div></div></div>
      <div className="cl-donut-wrap" style={{ marginBottom: 24 }}>
        <div className="cl-donut" style={{ background: `conic-gradient(${stops})` }}><div className="ctr"><span className="pc">{pct}%</span><span className="lb">Approved</span></div></div>
        <div className="cl-legend" style={{ flex: 1, minWidth: 220 }}>
          {seg.map((s) => (<div className="lr" key={s.k}><span className="sw" style={{ background: s.c }} /> {s.l} <span className="lv">{s.n}</span></div>))}
        </div>
      </div>
      <div className="cl-pad" style={{ padding: 0 }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--txt-3)", marginBottom: 16 }}>Per-artist progress</div>
        <div className="cl-bars">
          {C.members.map((m) => (
            <div className="cl-barrow" key={m.id}>
              <span className="who"><window.Avt m={m} size="s26" /> <span>{m.name}<br /><span className="rl">{m.role}</span></span></span>
              <span className="cl-track"><span className="fill" style={{ width: m.progress + "%" }} /></span>
              <span className="pct">{m.progress}%</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------------- Entities ---------------- */
function EntityView({ kind, state, actions }) {
  const C = window.CL;
  const map = { chars: { title: "Characters", data: C.chars, unit: "shots" }, env: { title: "Locations", data: C.envs, unit: "shots" }, assets: { title: "Assets", data: C.assets, unit: "shots" } };
  const cfg = map[kind];
  return (
    <div className="cl-pad">
      <div className="cl-h"><div><h1>{cfg.title}</h1><div className="sub">{cfg.data.length} locked · shared across the project</div></div>
        <button className="btn amber" onClick={() => actions.toast("New " + cfg.title.slice(0, -1).toLowerCase())}><window.CIcon name="plus" size={14} /> New</button></div>
      <div className="cl-egrid">
        {cfg.data.map((e) => (
          <div className="cl-ecard" key={e.id} onClick={() => actions.toast(e.name + " — opens entity detail")}>
            <window.Frame seed={e.id} hue={e.hue} className="ethumb">
              {kind === "chars" && <span className={"cl-ring " + (e.consistency >= 92 ? "good" : "warn")}>{e.consistency}%</span>}
            </window.Frame>
            <div className="ebody"><div className="en">{e.name}</div><div className="em">{e.count} {cfg.unit}{kind === "chars" ? " · LoRA trained" : ""}</div></div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- Library ---------------- */
function LibraryView({ state, actions }) {
  const folders = [
    { n: "Character LoRAs", c: "12 models" }, { n: "Reference Plates", c: "248 stills" }, { n: "Unreal Renders", c: "61 wide shots" },
    { n: "Audio / Offline", c: "6 parts" }, { n: "Env — The Hall", c: "34 assets" }, { n: "Approved Stills", c: "180 frames" }
  ];
  return (
    <div className="cl-pad">
      <div className="cl-h"><div><h1>Library</h1><div className="sub">All local assets you bring to the project</div></div>
        <button className="btn amber" onClick={() => actions.toast("Upload — drop an entire folder")}><window.CIcon name="plus" size={14} /> Upload folder</button></div>
      <div className="cl-folders">
        {folders.map((f) => (<div className="cl-folder" key={f.n}><div className="fi" /><div className="fn">{f.n}</div><div className="fc">{f.c}</div></div>))}
      </div>
      <div className="cl-analyze" style={{ marginTop: 16 }}><window.CIcon name="folder" size={22} className="" style={{ color: "var(--txt-3)" }} /><div className="sm" style={{ marginTop: 10 }}>Drag a folder here to upload — structure preserved. R&amp;D experiments live in their own space.</div></div>
    </div>
  );
}

/* ---------------- Sync ---------------- */
function SyncView({ state, actions }) {
  const files = ["DRP-S14-010_establishing_v3.exr", "DRP-S14-020_dice_cast_v1.exr", "DRP-S14-030_draupadi_summoned_v2.exr", "DRP_Part02_delivery_report.pdf"];
  return (
    <div className="cl-pad">
      <div className="cl-h"><div><h1>Sync &amp; Delivery</h1><div className="sub">Pull approved shots to your local drive — structured, correctly named</div></div></div>
      <div className="cl-syncbox">
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--txt-3)", marginBottom: 8 }}>Destination folder</div>
        <div style={{ display: "flex", gap: 10 }}><div className="cl-path">/Volumes/FHOA-RAID/Draupadi/Part_02/{state.syncPhase === "done" ? " ✓ synced" : "…"}</div><button className="btn">Choose…</button></div>
        <div style={{ display: "flex", gap: 10, marginTop: 14 }}>
          <button className="btn mint" disabled={state.syncPhase === "running"} onClick={actions.runSync}><window.CIcon name="sync" size={14} /> {state.syncPhase === "running" ? "Syncing…" : state.syncPhase === "done" ? "Re-sync" : "Sync approved shots"}</button>
          <button className="btn" disabled={state.syncPhase !== "done"} onClick={() => actions.toast("Delivery report exported (PDF)")}><window.CIcon name="download" size={14} /> Export delivery report</button>
        </div>
        {state.syncPhase !== "idle" && (
          <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 8 }}>
            {files.map((f, i) => (<div className="cl-syncrow" key={i}>{state.syncPhase === "done" ? <span className="tick"><window.CIcon name="check" size={13} /></span> : <span className="cl-spin" />}<span>{f}</span><span style={{ marginLeft: "auto", color: "var(--txt-3)" }}>{state.syncPhase === "done" ? "done" : "copying"}</span></div>))}
          </div>
        )}
      </div>
      {state.syncPhase === "done" && (
        <div style={{ marginTop: 26, maxWidth: 760 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--txt-3)", marginBottom: 12 }}>Client delivery report</div>
          <table className="cl-report">
            <thead><tr><th>Shot</th><th>Model</th><th>Prompt summary</th><th>Status</th></tr></thead>
            <tbody>
              <tr><td className="mono">DRP-S14-010</td><td>Seedance 2.0</td><td>Establishing — firelit assembly hall</td><td><window.Status s="approved" /></td></tr>
              <tr><td className="mono">DRP-S14-020</td><td>Nano Banana Pro</td><td>The dice are cast, ivory in firelight</td><td><window.Status s="approved" /></td></tr>
              <tr><td className="mono">DRP-S14-030</td><td>Unreal · fallback</td><td>Draupadi summoned (distortion route)</td><td><window.Status s="approved" /></td></tr>
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

/* ---------------- Members ---------------- */
function MembersView({ state, actions }) {
  const C = window.CL;
  return (
    <div className="cl-pad">
      <div className="cl-h"><div><h1>Members</h1><div className="sub">Invite collaborators and assign shots</div></div></div>
      <div style={{ background: "var(--panel)", border: "1px solid var(--line)", borderRadius: 12, padding: 20, marginBottom: 18, maxWidth: 620 }}>
        <div style={{ fontWeight: 650, marginBottom: 4 }}>Invite link</div>
        <div style={{ color: "var(--txt-2)", fontSize: 13, marginBottom: 14 }}>Anyone with the link joins as an AI Creator.</div>
        <div className="cl-invite"><div className="cl-path" style={{ flex: 1 }}>studio.app/join/drp-feature/x8K2-q…</div><button className="btn mint" onClick={() => actions.toast("Invite link copied")}><window.CIcon name="link" size={14} /> Copy link</button></div>
      </div>
      <div style={{ background: "var(--panel)", border: "1px solid var(--line)", borderRadius: 12, padding: "4px 8px" }}>
        {C.members.map((m) => (<div className="cl-memrow" key={m.id}><window.Avt m={m} size="s30" /><div><div className="nm">{m.name}</div><div className="em">{m.email}</div></div><span className="rl">{m.role}</span></div>))}
      </div>
    </div>
  );
}

Object.assign(window, { BuilderView, MyWorkView, ReviewView, TeamView, EntityView, LibraryView, SyncView, MembersView });