/* Screens part 2: Works, Pieces, Contributors, Assets manager */
const D2 = window.OO_DATA;

/* ── Works list & detail ─────────────────────────────── */
function WorksList({ setRoute }) {
  const [kind, setKind] = useState("all");
  const list = D2.WORKS.filter(w => kind === "all" || w.kind === kind);
  return <div>
    <PageHeader eyebrow="Catalogo · Opere" title="Works"
      subtitle="Il container editoriale sopra i pieces. Una sola collection, branch opera | vocal."
      actions={<><button className="btn"><Icon name="download" /> Esporta</button><button className="btn opera"><Icon name="plus" /> Nuovo work</button></>}
    />
    <div className="tabs" style={{ marginBottom: 14 }}>
      <div className={"tab " + (kind==="all"?"active":"")} onClick={()=>setKind("all")}>Tutti<span className="count">{D2.WORKS.length}</span></div>
      <div className={"tab " + (kind==="opera"?"active":"")} onClick={()=>setKind("opera")}>Opera<span className="count">{D2.WORKS.filter(w=>w.kind==="opera").length}</span></div>
      <div className={"tab " + (kind==="vocal"?"active":"")} onClick={()=>setKind("vocal")}>Vocal<span className="count">{D2.WORKS.filter(w=>w.kind==="vocal").length}</span></div>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14 }}>
      {list.map(w => {
        const c = D2.contribById(w.composer);
        const lib = w.librettist ? D2.contribById(w.librettist) : null;
        return <div key={w.id} className="card" style={{ cursor: "pointer", display: "flex" }} onClick={()=>setRoute({page:"works", id:w.id})}>
          <div className="cover lg" style={{ borderRadius: "10px 0 0 10px", height: "auto", width: 110, background: `linear-gradient(160deg, oklch(0.55 0.08 ${w.year%360}), oklch(0.30 0.08 ${(w.year+30)%360}))` }}>
            <div className="lbl">{w.kind}</div>
          </div>
          <div style={{ padding: 16, flex: 1, minWidth: 0 }}>
            <div className="row between" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
              <div style={{ minWidth: 0 }}>
                <div className="eyebrow" style={{ color: w.kind==="opera"?"var(--opera)":"var(--blue)" }}>{w.kind === "opera" ? w.operaType : w.vocalType} · {w.year}</div>
                <h3 style={{ margin: "4px 0", fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.15 }}>{w.title}</h3>
                <div className="muted" style={{ fontSize: 12 }}>{c?.name}{lib ? ` · libretto: ${lib.name.split(" ").slice(-1)[0]}` : ""}</div>
              </div>
              <StatusPill status={w.status} />
            </div>
            <div className="divider"></div>
            <div className="row" style={{ justifyContent: "space-between", fontSize: 11.5, color: "var(--ink-3)" }}>
              <span>{w.pieces} pieces</span>
              <span>·</span>
              <span>{w.localeCoverage}/11 lingue</span>
              <span>·</span>
              <span className="mono">{D2.catalogById(w.catalog).slug}</span>
            </div>
          </div>
        </div>;
      })}
    </div>
  </div>;
}

function WorkDetail({ id, setRoute }) {
  const w = D2.workById(id);
  if (!w) return <div className="empty"><h3>Work non trovato</h3></div>;
  const composer = D2.contribById(w.composer);
  const lib = w.librettist ? D2.contribById(w.librettist) : null;
  const pieces = D2.PIECES.filter(p => p.workId === w.id);
  const [tab, setTab] = useState("overview");
  return <div>
    <div style={{ display:"flex", gap: 10, marginBottom: 14 }}>
      <button className="btn ghost sm" onClick={()=>setRoute({page:"works"})}>‹ Lista</button>
      <span className="muted mono" style={{ fontSize: 11, alignSelf: "center" }}>{w.id} · {D2.catalogById(w.catalog).slug}</span>
      <span style={{ marginLeft: "auto" }}></span>
      <button className="btn sm"><Icon name="globe" /> Traduzioni</button>
      <button className="btn sm opera"><Icon name="check" /> Marca ready</button>
    </div>
    <div className="page-h">
      <div className="cover xl" style={{ background: `linear-gradient(160deg, oklch(0.55 0.08 ${w.year%360}), oklch(0.30 0.08 ${(w.year+30)%360}))` }}><div className="lbl">{w.kind}</div></div>
      <div className="titles">
        <div className="eyebrow">{w.kind === "opera" ? "Opera" : "Ciclo vocale"} · {w.year} · {w.kind === "opera" ? w.operaType : w.vocalType}</div>
        <h1 style={{ fontSize: 36 }}>{w.title}</h1>
        <p>{composer.name}{lib ? ` — libretto di ${lib.name}` : ""}</p>
        <div className="row" style={{ marginTop: 8, gap: 8 }}>
          <StatusPill status={w.status} />
          <span className="pill gray">{pieces.length} pieces</span>
          <span className="pill opera">{w.localeCoverage}/11 lingue</span>
        </div>
      </div>
    </div>
    <div className="tabs" style={{ marginBottom: 18 }}>
      {[["overview","Panoramica"],["translations","Traduzioni",w.localeCoverage+"/11"],["pieces","Pieces",pieces.length],["synopsis","Sinossi"],["contributors","Crediti"]].map(([k,l,c])=>
        <div key={k} className={"tab "+(tab===k?"active":"")} onClick={()=>setTab(k)}>{l}{c!=null && <span className="count">{c}</span>}</div>)}
    </div>
    {tab === "overview" && <div className="detail wide-aside">
      <div className="col">
        <div className="card"><div className="card-head"><h3>Identità del work</h3></div><div className="card-body">
          <dl className="kv">
            <dt>workKind</dt><dd><span className="pill opera">{w.kind}</span></dd>
            <dt>{w.kind === "opera" ? "operaType" : "vocalType"}</dt><dd>{w.kind === "opera" ? w.operaType : w.vocalType}</dd>
            <dt>Anno</dt><dd>{w.year}</dd>
            <dt>Catalog</dt><dd>{D2.catalogById(w.catalog).name}</dd>
            <dt>Compositore</dt><dd><a onClick={()=>setRoute({page:"contributors",id:composer.id})} style={{cursor:"pointer", textDecoration:"underline dotted"}}>{composer.name}</a></dd>
            {lib && <><dt>Librettista</dt><dd><a onClick={()=>setRoute({page:"contributors",id:lib.id})} style={{cursor:"pointer", textDecoration:"underline dotted"}}>{lib.name}</a></dd></>}
          </dl>
        </div></div>
        <div className="card"><div className="card-head"><h3>Pieces nell'opera</h3><span className="sub">{pieces.length} brani</span></div>
          <table className="table"><thead><tr><th>#</th><th>Titolo</th><th>Tipo</th><th>Atto · Sc.</th><th>Voce</th><th>Difficoltà</th><th>Status</th></tr></thead>
            <tbody>{pieces.map((p, i) => <tr key={p.id} onClick={()=>setRoute({page:"pieces", id:p.id})}>
              <td className="mono muted">{String(i+1).padStart(2,"0")}</td>
              <td><span style={{ fontFamily: "var(--serif)", fontSize: 13.5 }}>{p.title}</span></td>
              <td><span className="pill gray">{p.pieceType}</span></td>
              <td className="mono">{p.act ? `${p.act}${p.scene?`.${p.scene}`:""}` : "—"}</td>
              <td>{p.vocalParts.map(v => D2.vocalPartById(v)?.name).join(", ")}</td>
              <td className="mono">{p.difficulty || "—"}/10</td>
              <td><StatusPill status={p.status} /></td>
            </tr>)}</tbody></table>
        </div>
      </div>
      <aside className="col">
        <div className="card"><div className="card-body">
          <div className="eyebrow">Sinossi del work</div>
          <p style={{ fontFamily: "var(--serif)", fontSize: 14, marginTop: 6, fontStyle: "italic", lineHeight: 1.5 }}>
            {w.id === "w_forza" && "Un duello accidentale apre un dramma di vendetta che attraversa la Spagna del Settecento, intrecciando i destini di Leonora, Don Carlo e Alvaro."}
            {w.id === "w_rigoletto" && "Il buffone gobbo Rigoletto, schernito dai cortigiani del Duca, si trova vittima della sua stessa maledizione quando la figlia Gilda viene rapita."}
            {w.id === "w_traviata" && "La cortigiana Violetta sacrifica il proprio amore per Alfredo davanti alle pressioni sociali, in un melodramma intimo costruito sulla malattia e sul perdono."}
            {!["w_forza","w_rigoletto","w_traviata"].includes(w.id) && "Sinossi editoriale del work — da tradurre nelle lingue supportate. Spiega trama, contesto storico e nuclei drammatici."}
          </p>
          <button className="btn sm ghost" style={{ marginTop: 8 }}><Icon name="edit" /> Modifica sinossi</button>
        </div></div>
        <div className="card"><div className="card-body">
          <div className="eyebrow">Copertura traduzioni</div>
          <div style={{ marginTop: 10, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }}>
            {D2.LOCALES.map(l => {
              const has = !!w.locTitle[l.code];
              return <div key={l.code} style={{ padding: "6px 4px", textAlign: "center", borderRadius: 4, background: has ? "var(--green-soft)" : "var(--paper-2)", color: has ? "var(--green)" : "var(--ink-3)", fontSize: 10.5, fontFamily: "var(--mono)" }}>{l.flag}</div>;
            })}
          </div>
        </div></div>
      </aside>
    </div>}
    {tab === "translations" && <TranslationsTab work={w} />}
    {tab !== "overview" && tab !== "translations" && <div className="card" style={{ padding: 24 }}><div className="muted">Vista <strong>{tab}</strong> · placeholder per la sezione.</div></div>}
  </div>;
}

function TranslationsTab({ work }) {
  return <div className="card">
    <div className="card-head"><h3>Tabella delle traduzioni</h3><span className="sub">Tutti i campi localizzati del work, lingua per lingua</span>
      <span style={{marginLeft:"auto", display:"flex", gap:8}}><button className="btn sm"><Icon name="globe" /> Traduci con AI</button><button className="btn sm opera"><Icon name="check"/> Approva tutto</button></span>
    </div>
    <div style={{ overflow: "auto" }}>
      <table className="table">
        <thead><tr><th>Lingua</th><th>localizedTitle</th><th>localizedDescription</th><th>localizedSynopsis</th><th>localizedOperaType</th><th>Status</th></tr></thead>
        <tbody>
          {D2.LOCALES.map(l => {
            const hasT = !!work.locTitle[l.code];
            return <tr key={l.code}>
              <td><span className="mono">{l.flag}</span> {l.label}{l.code===work.composer ? <span className="pill ink" style={{marginLeft:6}}>sorgente</span> : null}</td>
              <td>{hasT ? <span style={{ fontFamily: "var(--serif)" }}>{work.locTitle[l.code]}</span> : <span className="muted" style={{ fontStyle: "italic" }}>Da tradurre</span>}</td>
              <td><span className="muted" style={{ fontStyle: "italic", fontSize: 11 }}>—</span></td>
              <td>{hasT && l.code==="it" ? <span style={{ fontSize: 11.5 }}>Sinossi sorgente disponibile</span> : <span className="muted" style={{ fontSize: 11, fontStyle: "italic" }}>—</span>}</td>
              <td>{hasT ? <span style={{ fontSize: 11.5 }}>{work.kind==="opera"?work.operaType:work.vocalType}</span> : <span className="muted">—</span>}</td>
              <td>{hasT ? (l.code === "it" ? <span className="pill ink">sorgente</span> : <span className="pill green">tradotto</span>) : <span className="pill warn">vuoto</span>}</td>
            </tr>;
          })}
        </tbody>
      </table>
    </div>
  </div>;
}

/* ── Pieces list ─────────────────────────────────────── */
function PiecesList({ setRoute }) {
  return <div>
    <PageHeader eyebrow="Catalogo · Brani" title="Pieces"
      subtitle="L'unità musicale individuale dentro un work. Subtype: opera_piece | vocal_piece. Ogni piece può avere atto/scena, characters e vocal parts."
      actions={<><button className="btn opera"><Icon name="plus" /> Nuova piece</button></>}
    />
    <div className="card" style={{ overflow: "hidden" }}>
      <table className="table">
        <thead><tr><th>Titolo</th><th>Work</th><th>Type</th><th>Atto·Sc.</th><th>Lingua</th><th>Voce</th><th>Diff.</th><th>Durata</th><th>Locales</th><th>Status</th></tr></thead>
        <tbody>{D2.PIECES.map(p => {
          const w = D2.workById(p.workId);
          return <tr key={p.id} onClick={()=>setRoute({page:"pieces", id:p.id})}>
            <td><span style={{ fontFamily: "var(--serif)", fontSize: 13.5, fontWeight: 500 }}>{p.title}</span></td>
            <td className="muted">{w?.title}</td>
            <td><span className="pill gray">{p.pieceType}</span></td>
            <td className="mono">{p.act ? `${p.act}${p.scene?`.${p.scene}`:""}` : "—"}</td>
            <td><span className="mono">{p.language?.toUpperCase() || "—"}</span></td>
            <td>{p.vocalParts.map(v => D2.vocalPartById(v)?.name).join(", ")}</td>
            <td className="mono">{p.difficulty}/10</td>
            <td className="mono muted">{D2.fmtDuration(p.duration)}</td>
            <td><div className="mono" style={{fontSize:10.5}}>{p.localeCoverage}/11</div></td>
            <td><StatusPill status={p.status} /></td>
          </tr>;
        })}</tbody>
      </table>
    </div>
  </div>;
}

/* ── Contributors ────────────────────────────────────── */
function ContributorsList({ setRoute }) {
  const [kind, setKind] = useState("all");
  const list = D2.CONTRIBUTORS.filter(c => kind === "all" || c.types.includes(kind));
  return <div>
    <PageHeader eyebrow="Editoriale · Anagrafica" title="Contributors"
      subtitle="Persone reali ed entità collettive. Una sola collection, ruoli stabili in contributorTypes."
      actions={<><button className="btn"><Icon name="download" /> Esporta</button><button className="btn opera"><Icon name="plus" /> Nuovo contributor</button></>}
    />
    <div className="tabs" style={{ marginBottom: 14 }}>
      {["all","composer","librettist","singer","conductor","orchestra"].map(k => (
        <div key={k} className={"tab "+(kind===k?"active":"")} onClick={()=>setKind(k)}>{k==="all"?"Tutti":k}<span className="count">{k==="all"?D2.CONTRIBUTORS.length:D2.CONTRIBUTORS.filter(c=>c.types.includes(k)).length}</span></div>
      ))}
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
      {list.map(c => (
        <div key={c.id} className="card" style={{ cursor: "pointer", padding: 16, display: "flex", gap: 14 }} onClick={()=>setRoute({page:"contributors", id:c.id})}>
          <div style={{ width: 56, height: 56, borderRadius: 99, background: "linear-gradient(135deg, var(--gold), var(--opera))", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--serif)", fontSize: 20, flex: "none" }}>
            {c.name.split(" ").map(n => n[0]).slice(0,2).join("")}
          </div>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div className="row" style={{ justifyContent: "space-between" }}>
              <h3 style={{ margin: 0, fontFamily: "var(--serif)", fontSize: 16, lineHeight: 1.2 }}>{c.name}</h3>
              <StatusPill status={c.status} />
            </div>
            <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>
              {c.types.join(" · ")}{c.vocalProfile ? ` · ${c.vocalProfile}` : ""}
            </div>
            <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
              {c.nationality}{c.dob ? ` · ${c.dob.slice(0,4)}${c.dod ? `–${c.dod.slice(0,4)}` : ""}` : ""}
            </div>
            <div className="row" style={{ marginTop: 8, alignItems: "center", gap: 6 }}>
              <span style={{ fontSize: 10.5, color: "var(--ink-3)" }}>Bio:</span>
              <div style={{ display: "flex", gap: 1, flex: 1 }}>
                {Array.from({ length: 11 }).map((_, i) => <span key={i} style={{ flex: 1, height: 4, background: i < c.bioCoverage ? "var(--opera)" : "var(--paper-3)", borderRadius: 1 }}></span>)}
              </div>
              <span className="mono" style={{ fontSize: 10 }}>{c.bioCoverage}/11</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>;
}

function ContributorDetail({ id, setRoute }) {
  const c = D2.contribById(id);
  if (!c) return <div className="empty"><h3>Contributor non trovato</h3></div>;
  const works = D2.WORKS.filter(w => w.composer === id || w.librettist === id);
  const entries = D2.ENTRIES.filter(e => e.performers.includes(id) || e.composerId === id);
  return <div>
    <div style={{ display:"flex", gap:10, marginBottom: 14 }}>
      <button className="btn ghost sm" onClick={()=>setRoute({page:"contributors"})}>‹ Lista</button>
      <span style={{marginLeft:"auto"}}></span>
      <button className="btn sm"><Icon name="globe" /> Bio multilingua</button>
      <button className="btn sm opera"><Icon name="check" /> Marca ready</button>
    </div>
    <div className="page-h">
      <div style={{ width: 140, height: 140, borderRadius: 99, background: "linear-gradient(135deg, var(--gold), var(--opera))", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--serif)", fontSize: 56 }}>
        {c.name.split(" ").map(n => n[0]).slice(0,2).join("")}
      </div>
      <div className="titles">
        <div className="eyebrow">{c.types.join(" · ")}</div>
        <h1 style={{ fontSize: 38 }}>{c.name}</h1>
        <p>{c.nationality}{c.dob ? ` · ${c.dob}${c.dod ? ` — ${c.dod}` : ""}` : ""}</p>
        <div className="row" style={{ gap: 8, marginTop: 8 }}>
          <StatusPill status={c.status} />
          {c.vocalPart && <span className="pill opera">Vocal part: {c.vocalPart}</span>}
          {c.vocalProfile && <span className="pill gold">Profilo: {c.vocalProfile}</span>}
        </div>
      </div>
    </div>
    <div className="detail wide-aside">
      <div className="col">
        <div className="card"><div className="card-head"><h3>Biografia</h3><span className="sub">localizedBio · {c.bioCoverage}/11 lingue</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            <div className="locale-grid" style={{ margin: 14, gridTemplateColumns: "56px 1fr 90px" }}>
              <div className="h">Lingua</div><div className="h">Bio</div><div className="h">Stato</div>
              {D2.LOCALES.map(l => {
                const v = c.bio[l.code];
                return <React.Fragment key={l.code}>
                  <div className="c flag">{l.flag}</div>
                  <div className="c" style={{ fontFamily: "var(--serif)", fontSize: 13 }}>{v || <span className="muted" style={{ fontStyle: "italic", fontFamily: "var(--sans)" }}>Da scrivere…</span>}</div>
                  <div className="c" style={{ textAlign: "right" }}>{v ? <span className="pill green">scritta</span> : <span className="pill gray">vuota</span>}</div>
                </React.Fragment>;
              })}
            </div>
          </div>
        </div>
        <div className="card"><div className="card-head"><h3>Works collegati</h3><span className="sub">{works.length}</span></div>
          {works.length === 0 ? <div className="card-body muted">Nessun work attribuito.</div> : <table className="table">
            <thead><tr><th>Titolo</th><th>Anno</th><th>Tipo</th><th>Ruolo</th></tr></thead>
            <tbody>{works.map(w => <tr key={w.id} onClick={()=>setRoute({page:"works", id:w.id})}>
              <td><span style={{ fontFamily: "var(--serif)" }}>{w.title}</span></td>
              <td className="mono">{w.year}</td>
              <td><span className="pill gray">{w.kind}</span></td>
              <td>{w.composer === id ? "compositore" : (w.librettist === id ? "librettista" : "—")}</td>
            </tr>)}</tbody>
          </table>}
        </div>
        {entries.length > 0 && <div className="card"><div className="card-head"><h3>Entries con questo contributor</h3><span className="sub">{entries.length} performer credits</span></div>
          <table className="table"><thead><tr><th>Titolo</th><th>Work</th><th>Versione</th><th>Status</th></tr></thead>
            <tbody>{entries.slice(0,8).map(e => <tr key={e.id} onClick={()=>setRoute({page:"entries", id:e.id})}>
              <td><span style={{ fontFamily: "var(--serif)" }}>{e.title}</span></td>
              <td className="muted">{e.workTitle || "—"}</td>
              <td>{e.version}</td>
              <td><StatusPill status={e.status} /></td>
            </tr>)}</tbody></table>
        </div>}
      </div>
      <aside className="col">
        <div className="card"><div className="card-body">
          <div className="eyebrow">Identità</div>
          <dl className="kv" style={{ marginTop: 8 }}>
            <dt>Tipi stabili</dt><dd>{c.types.map(t => <span key={t} className="pill opera" style={{ marginRight: 4 }}>{t}</span>)}</dd>
            <dt>Nazionalità</dt><dd>{c.nationality || "—"}</dd>
            <dt>Nascita</dt><dd className="mono">{c.dob || "—"}</dd>
            <dt>Morte</dt><dd className="mono">{c.dod || "—"}</dd>
          </dl>
          {c.types.includes("singer") && <>
            <div className="divider"></div>
            <div className="eyebrow">Vocalità</div>
            <dl className="kv" style={{ marginTop: 8 }}>
              <dt>Vocal part</dt><dd>{c.vocalPart || "—"}</dd>
              <dt>Vocal profile</dt><dd>{c.vocalProfile || "—"}</dd>
            </dl>
          </>}
        </div></div>
      </aside>
    </div>
  </div>;
}

/* ── Assets manager ──────────────────────────────────── */
function AssetsScreen({ setRoute }) {
  const [tab, setTab] = useState("audio");
  const list = D2.ASSETS.filter(a => tab === "all" || a.assetType === tab);
  const totalSize = list.reduce((acc, a) => acc + (a.sizeBytes||0), 0);
  return <div>
    <PageHeader eyebrow="Catalogo · File" title="Assets"
      subtitle="File pubblicati e sorgenti collegati ai catalog entries. cdnUrl è esposto solo se isPublished."
      actions={<><button className="btn"><Icon name="refresh" /> Sincronizza CDN</button><button className="btn opera" disabled style={{ opacity: 0.5, cursor: "not-allowed" }} title="Disponibile in v2"><Icon name="upload" /> Carica asset</button></>}
    />
    <div style={{ background: "var(--paper-2)", border: "1px dashed var(--rule)", borderRadius: 6, padding: "12px 16px", marginBottom: 16, display: "flex", gap: 12, alignItems: "center", fontSize: 12.5 }}>
      <Icon name="warning" />
      <div>
        <strong>Upload asset — under update</strong> · in v1 puoi pubblicare/depubblicare gli asset esistenti, ma il caricamento di nuovi file è disponibile solo via pipeline di import. L'upload diretto dal portale arriverà in v2.
      </div>
    </div>
    <div className="stats" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
      <div className="stat"><div className="lbl">Asset totali</div><div className="val">{D2.ASSETS.length}</div></div>
      <div className="stat"><div className="lbl">Pubblicati su CDN</div><div className="val">{D2.ASSETS.filter(a=>a.isPublished).length}</div></div>
      <div className="stat"><div className="lbl">Audio MP3</div><div className="val">{D2.ASSETS.filter(a=>a.format==="mp3").length}</div></div>
      <div className="stat"><div className="lbl">Storage usato</div><div className="val mono" style={{ fontSize: 22 }}>{D2.fmtBytes(totalSize)}</div></div>
    </div>
    <div className="tabs" style={{ marginTop: 18 }}>
      {[["audio","Audio"],["score","Partiture"],["document","Documenti"],["all","Tutti"]].map(([k,l]) => <div key={k} className={"tab "+(tab===k?"active":"")} onClick={()=>setTab(k)}>{l}<span className="count">{D2.ASSETS.filter(a=>k==="all"||a.assetType===k).length}</span></div>)}
    </div>
    <div className="card" style={{ overflow: "hidden", marginTop: 0 }}>
      <table className="table">
        <thead><tr><th style={{width:30}}><span className="cb"></span></th><th>Filename</th><th>Variant</th><th>Format</th><th>objectKey</th><th>Size</th><th>Durata · Pag.</th><th>Lingua</th><th>Stato CDN</th><th></th></tr></thead>
        <tbody>{list.slice(0,18).map(a => {
          const e = D2.ENTRIES.find(x => x.id === a.catalogEntryId);
          return <tr key={a.id}>
            <td><span className="cb"></span></td>
            <td><div className="row" style={{ gap: 8 }}>
              <div style={{ width: 28, height: 28, borderRadius: 4, background: a.assetType==="audio"?"linear-gradient(135deg, var(--ink-2), var(--ink))":(a.assetType==="score"?"linear-gradient(135deg, var(--gold), #6B4F1A)":"var(--paper-3)"), color: "#fff", fontFamily: "var(--mono)", fontSize: 9, display: "flex", alignItems: "center", justifyContent: "center" }}>{a.format.toUpperCase()}</div>
              <div><div className="mono" style={{ fontSize: 11.5 }}>{a.filename}</div><div className="muted" style={{ fontSize: 10.5 }}>{e?.title}</div></div>
            </div></td>
            <td><span className="pill opera">{a.variant}</span></td>
            <td className="mono">{a.format}</td>
            <td><span className="mono muted" style={{ fontSize: 10.5 }}>{a.objectKey.slice(0,42)}…</span></td>
            <td className="mono muted">{D2.fmtBytes(a.sizeBytes)}</td>
            <td className="mono muted" style={{fontSize:11}}>{a.duration ? D2.fmtDuration(a.duration) : (a.pageCount ? `${a.pageCount} pag.` : "—")}</td>
            <td className="mono">{e?.language?.toUpperCase() || "—"}</td>
            <td>{a.isPublished ? <span className="pill green dot">Pubblicato</span> : <span className="pill gray dot">Privato</span>}</td>
            <td><div className="row" style={{ gap: 4 }}>
              {a.assetType==="audio" && <button className="btn sm ghost"><Icon name="play" size={11} /></button>}
              <button className="btn sm ghost"><Icon name="download" /></button>
              <button className="btn sm ghost"><Icon name="more" /></button>
            </div></td>
          </tr>;
        })}</tbody>
      </table>
    </div>
  </div>;
}

window.WorksList = WorksList;
window.WorkDetail = WorkDetail;
window.PiecesList = PiecesList;
window.ContributorsList = ContributorsList;
window.ContributorDetail = ContributorDetail;
window.AssetsScreen = AssetsScreen;