/* Screens part 3: Raccolte (curated collections), Tassonomie, Imports, Catalogs */
const D3 = window.OO_DATA;

function RaccolteList({ setRoute }) {
  return <div>
    <PageHeader eyebrow="Editoriale · Curatela" title="Raccolte"
      subtitle="Collezioni curate di catalog_entries — selezioni editoriali, playlist tematiche, repertori. Ordinabili a mano."
      actions={<><button className="btn"><Icon name="download" /> Esporta</button><button className="btn opera"><Icon name="plus" /> Nuova raccolta</button></>}
    />
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
      {D3.RACCOLTE.map(r => (
        <div key={r.id} className="card" style={{ cursor: "pointer", overflow: "hidden" }} onClick={()=>setRoute({page:"raccolte", id:r.id})}>
          <div style={{ height: 100, background: "linear-gradient(135deg, var(--paper-3), var(--card-edge))", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 56, position: "relative" }}>
            <span style={{ filter: "grayscale(0.2) sepia(0.3)" }}>{r.cover}</span>
            <span style={{ position: "absolute", top: 8, right: 8 }}><StatusPill status={r.status === "published" ? "published" : (r.status === "review" ? "review" : "draft")} /></span>
          </div>
          <div style={{ padding: 14 }}>
            <h3 style={{ margin: 0, fontFamily: "var(--serif)", fontSize: 18, lineHeight: 1.2 }}>{r.title}</h3>
            <p className="muted" style={{ fontSize: 12, margin: "4px 0 8px" }}>{r.subtitle}</p>
            <div className="row" style={{ justifyContent: "space-between", fontSize: 11, color: "var(--ink-3)" }}>
              <span><strong style={{ color: "var(--ink-2)" }}>{r.entries}</strong> brani</span>
              <span>{r.localeCoverage}/11 lingue</span>
              <span>{r.curator.split(" ")[0]}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>;
}

function RaccoltaDetail({ id, setRoute }) {
  const r = D3.RACCOLTE.find(x => x.id === id);
  if (!r) return <div className="empty"><h3>Raccolta non trovata</h3></div>;
  // Pick some entries for the playlist
  const items = D3.ENTRIES.filter(e => e.isEditorialMatch).slice(0, r.entries);
  return <div>
    <div style={{ display:"flex", gap: 10, marginBottom: 14 }}>
      <button className="btn ghost sm" onClick={()=>setRoute({page:"raccolte"})}>‹ Lista</button>
      <span style={{marginLeft:"auto"}}></span>
      <button className="btn sm"><Icon name="globe" /> Traduzioni titolo</button>
      <button className="btn sm"><Icon name="eye" /> Anteprima app</button>
      <button className="btn sm opera"><Icon name="publish" /> Pubblica</button>
    </div>
    <div className="page-h">
      <div className="cover xl" style={{ background: "linear-gradient(135deg, var(--paper-3), var(--card-edge))", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 64 }}>{r.cover}</div>
      <div className="titles">
        <div className="eyebrow">Raccolta editoriale · {r.entries} brani</div>
        <h1 style={{ fontSize: 36 }}>{r.title}</h1>
        <p>{r.subtitle}</p>
        <div className="row" style={{ gap: 8, marginTop: 8 }}>
          <StatusPill status={r.status === "published" ? "published" : r.status === "review" ? "review" : "draft"} />
          <span className="pill gray">curato da {r.curator}</span>
          <span className="pill opera">{r.localeCoverage}/11 lingue</span>
          <span className="pill gray">aggiornato {r.updatedAt}</span>
        </div>
      </div>
    </div>
    <div className="detail wide-aside">
      <div className="col">
        <div className="card"><div className="card-head"><h3>Brani della raccolta</h3><span className="sub">trascina per riordinare · {items.length} brani</span>
          <span style={{marginLeft:"auto"}}><button className="btn sm"><Icon name="plus" /> Aggiungi brano</button></span>
        </div>
          <table className="table">
            <thead><tr><th style={{width:30}}></th><th style={{width:30}}>#</th><th>Titolo</th><th>Work</th><th>Voce</th><th>Durata</th><th>Diff.</th><th></th></tr></thead>
            <tbody>{items.map((e, i) => (
              <tr key={e.id}>
                <td><span className="drag"><Icon name="drag" /></span></td>
                <td className="mono muted">{String(i+1).padStart(2,"0")}</td>
                <td>
                  <div className="row" style={{ gap: 10 }}>
                    <div className="cover" style={{ width: 28, height: 28, background: `linear-gradient(135deg, oklch(0.6 0.05 ${i*47}), oklch(0.32 0.08 ${i*47+30}))` }}></div>
                    <div><div style={{ fontFamily: "var(--serif)", fontSize: 13 }}>{e.title}</div><div className="muted mono" style={{ fontSize: 10.5 }}>{e.sourceItemId}</div></div>
                  </div>
                </td>
                <td className="muted" style={{ fontSize: 11.5 }}>{e.workTitle}</td>
                <td>{e.vocalParts.map(v => <span key={v} className="pill gray" style={{ marginRight: 4 }}>{D3.vocalPartById(v)?.name}</span>)}</td>
                <td className="mono muted">{D3.fmtDuration(e.duration)}</td>
                <td className="mono">{e.difficulty}/10</td>
                <td><div className="row" style={{ gap: 4 }}><button className="btn sm ghost"><Icon name="play" size={11} /></button><button className="btn sm ghost"><Icon name="trash" /></button></div></td>
              </tr>
            ))}</tbody>
          </table>
        </div>
      </div>
      <aside className="col">
        <div className="card"><div className="card-body">
          <div className="eyebrow">Descrizione editoriale</div>
          <p style={{ fontFamily: "var(--serif)", fontSize: 13.5, fontStyle: "italic", marginTop: 6, lineHeight: 1.5 }}>
            Una porta d'ingresso al repertorio operistico per chi si avvicina per la prima volta al canto lirico. Brani celebri, accessibili, con difficoltà media.
          </p>
          <button className="btn sm ghost"><Icon name="edit" /> Modifica</button>
        </div></div>
        <div className="card"><div className="card-body">
          <div className="eyebrow">Titolo localizzato</div>
          {D3.LOCALES.map(l => {
            const v = r.locTitle[l.code];
            return <div key={l.code} className="row" style={{ padding: "6px 0", borderBottom: "1px solid var(--rule)" }}>
              <span className="mono" style={{ width: 36, fontSize: 11 }}>{l.flag}</span>
              <span style={{ fontFamily: "var(--serif)", flex: 1, fontSize: 13 }}>{v || <span className="muted" style={{ fontStyle: "italic", fontFamily: "var(--sans)", fontSize: 11 }}>—</span>}</span>
              {v && <span className="pill green">ok</span>}
            </div>;
          })}
        </div></div>
        <div className="card"><div className="card-body">
          <div className="eyebrow">Statistiche</div>
          <dl className="kv" style={{ marginTop: 8 }}>
            <dt>Durata totale</dt><dd className="mono">{D3.fmtDuration(items.reduce((a,e)=>a+(e.duration||0),0))}</dd>
            <dt>Difficoltà media</dt><dd>{(items.reduce((a,e)=>a+(e.difficulty||0),0)/items.length || 0).toFixed(1)}/10</dd>
            <dt>Voci</dt><dd>{Array.from(new Set(items.flatMap(e => e.vocalParts).map(v => D3.vocalPartById(v)?.name))).filter(Boolean).join(", ")}</dd>
          </dl>
        </div></div>
      </aside>
    </div>
  </div>;
}

/* ── Tassonomie (vocal parts / profiles / characters) ─ */
function Taxonomies({ setRoute }) {
  const [tab, setTab] = useState("vocal-parts");
  return <div>
    <PageHeader eyebrow="Editoriale · Tassonomie" title="Vocal parts, profili & characters"
      subtitle="Le tassonomie editoriali del catalogo. Soltanto entità musicali, non contributors reali."
      actions={<><button className="btn opera"><Icon name="plus" /> Nuova voce</button></>}
    />
    <div className="tabs" style={{ marginBottom: 14 }}>
      {[["vocal-parts","Vocal parts", D3.VOCAL_PARTS.length],["vocal-profiles","Vocal profiles", D3.VOCAL_PROFILES.length],["characters","Characters", D3.CHARACTERS.length]].map(([k,l,c]) =>
        <div key={k} className={"tab "+(tab===k?"active":"")} onClick={()=>setTab(k)}>{l}<span className="count">{c}</span></div>)}
    </div>
    {tab === "vocal-parts" && <div className="card" style={{ overflow: "hidden" }}>
      <table className="table">
        <thead><tr><th>Nome</th><th>Localizzazioni</th><th>Profili associati</th><th>Lingue</th><th>Status</th><th></th></tr></thead>
        <tbody>{D3.VOCAL_PARTS.map(v => <tr key={v.id}>
          <td><span style={{ fontFamily: "var(--serif)", fontSize: 15, fontWeight: 500 }}>{v.name}</span></td>
          <td><div className="row" style={{ gap: 4 }}>{Object.entries(v.loc).slice(0,5).map(([k,val]) => <span key={k} className="pill gray"><span className="mono">{k.toUpperCase()}</span> {val}</span>)}</div></td>
          <td>{v.profiles > 0 ? <span className="pill opera">{v.profiles} profili</span> : <span className="muted">—</span>}</td>
          <td className="mono">{Object.keys(v.loc).length}/11</td>
          <td><StatusPill status="ready" /></td>
          <td><button className="btn sm ghost"><Icon name="more" /></button></td>
        </tr>)}</tbody>
      </table>
    </div>}
    {tab === "vocal-profiles" && <div className="card" style={{ overflow: "hidden" }}>
      <table className="table">
        <thead><tr><th>Profilo</th><th>Vocal part</th><th>Esempi celebri</th><th>Status</th></tr></thead>
        <tbody>{D3.VOCAL_PROFILES.map(p => {
          const v = D3.vocalPartById(p.part);
          const examples = D3.CONTRIBUTORS.filter(c => c.vocalProfile === p.name).map(c => c.name);
          return <tr key={p.id}>
            <td><span style={{ fontFamily: "var(--serif)", fontSize: 14 }}>{p.name}</span></td>
            <td><span className="pill opera">{v?.name}</span></td>
            <td className="muted" style={{ fontSize: 11.5 }}>{examples.join(", ") || <span style={{ fontStyle: "italic" }}>nessuno collegato</span>}</td>
            <td><StatusPill status="ready" /></td>
          </tr>;
        })}</tbody>
      </table>
    </div>}
    {tab === "characters" && <div className="card" style={{ overflow: "hidden" }}>
      <table className="table">
        <thead><tr><th>Personaggio</th><th>Opera</th><th>Vocal part di default</th><th>Pieces</th><th>Status</th></tr></thead>
        <tbody>{D3.CHARACTERS.map(c => {
          const v = D3.vocalPartById(c.defaultPart);
          const pieces = D3.PIECES.filter(p => p.characters.includes(c.id));
          return <tr key={c.id}>
            <td><span style={{ fontFamily: "var(--serif)", fontSize: 15 }}>{c.name}</span></td>
            <td><span style={{ fontFamily: "var(--serif)", fontStyle: "italic" }}>{c.work}</span></td>
            <td><span className="pill opera">{v?.name}</span></td>
            <td><span className="mono">{pieces.length}</span></td>
            <td><StatusPill status="ready" /></td>
          </tr>;
        })}</tbody>
      </table>
    </div>}
  </div>;
}

/* ── Imports ─────────────────────────────────────────── */
function ImportsList({ setRoute }) {
  return <div>
    <PageHeader eyebrow="Operations · Pipeline" title="Import batches"
      subtitle="Tracciato di ogni run di import dai cataloghi sorgente. Audit riga per riga in catalog_import_rows."
      actions={<><button className="btn"><Icon name="refresh" /> Aggiorna</button><button className="btn opera"><Icon name="upload" /> Nuovo import</button></>}
    />
    <div className="card" style={{ overflow: "hidden" }}>
      <table className="table">
        <thead><tr><th>File sorgente</th><th>Catalog</th><th>Tipo</th><th>Avanzamento</th><th>Errori</th><th>Operatore</th><th>Inizio</th><th>Status</th><th></th></tr></thead>
        <tbody>{D3.IMPORT_BATCHES.map(b => {
          const cat = D3.catalogById(b.catalog);
          const total = b.received || 1;
          const done = b.imported + b.updated + b.skipped + b.errors;
          const progress = b.status === "running" ? b.progress : done/total;
          return <tr key={b.id} onClick={()=>setRoute({page:"imports", id:b.id})}>
            <td><div className="row" style={{ gap: 8 }}>
              <div style={{ width: 28, height: 28, borderRadius: 4, background: "var(--ink)", color: "var(--paper)", fontFamily: "var(--mono)", fontSize: 9, display: "flex", alignItems: "center", justifyContent: "center" }}>{b.sourceType.toUpperCase()}</div>
              <div><div className="mono" style={{ fontSize: 11.5 }}>{b.source}</div><div className="muted" style={{ fontSize: 10.5 }}>{b.id}</div></div>
            </div></td>
            <td className="muted">{cat.name}</td>
            <td><span className="pill gray">{b.sourceType}</span></td>
            <td style={{ width: 220 }}>
              <div className="progress"><span style={{ width: (progress*100)+"%", background: b.status === "needs-review" ? "var(--warn)" : (b.status === "running" ? "var(--blue)" : "var(--green)") }}></span></div>
              <div className="mono muted" style={{ fontSize: 10.5, marginTop: 4 }}>
                <span style={{ color: "var(--green)" }}>{b.imported}</span> nuovi · <span style={{ color: "var(--blue)" }}>{b.updated}</span> aggiornati · <span style={{ color: "var(--ink-3)" }}>{b.skipped}</span> skip
              </div>
            </td>
            <td>{b.errors > 0 ? <span className="pill err dot">{b.errors}</span> : <span className="muted mono">0</span>}</td>
            <td className="muted" style={{ fontSize: 11.5 }}>{b.by}</td>
            <td className="mono muted" style={{ fontSize: 10.5 }}>{b.startedAt}</td>
            <td><StatusPill status={b.status} /></td>
            <td><button className="btn sm ghost"><Icon name="chevron" /></button></td>
          </tr>;
        })}</tbody>
      </table>
    </div>
  </div>;
}

function ImportDetail({ id, setRoute }) {
  const b = D3.IMPORT_BATCHES.find(x => x.id === id);
  if (!b) return <div className="empty"><h3>Import non trovato</h3></div>;
  const rows = D3.IMPORT_ROWS.filter(r => r.batch === id);
  return <div>
    <div style={{ display:"flex", gap: 10, marginBottom: 14 }}>
      <button className="btn ghost sm" onClick={()=>setRoute({page:"imports"})}>‹ Lista</button>
      <span style={{marginLeft:"auto"}}></span>
      <button className="btn sm"><Icon name="download" /> Scarica report</button>
      <button className="btn sm"><Icon name="refresh" /> Riprova righe in errore</button>
    </div>
    <PageHeader eyebrow={`Import · ${D3.catalogById(b.catalog).name}`}
      title={b.source}
      subtitle={`${b.received} righe ricevute · iniziato ${b.startedAt}${b.completedAt ? ` · completato ${b.completedAt}` : " · in esecuzione"}`}
      actions={<StatusPill status={b.status} />}
    />
    <div className="stats" style={{ gridTemplateColumns: "repeat(5, 1fr)" }}>
      <div className="stat"><div className="lbl">Ricevute</div><div className="val">{b.received}</div></div>
      <div className="stat"><div className="lbl">Importate</div><div className="val" style={{ color: "var(--green)" }}>{b.imported}</div></div>
      <div className="stat"><div className="lbl">Aggiornate</div><div className="val" style={{ color: "var(--blue)" }}>{b.updated}</div></div>
      <div className="stat"><div className="lbl">Saltate</div><div className="val" style={{ color: "var(--ink-3)" }}>{b.skipped}</div></div>
      <div className="stat"><div className="lbl">Errori</div><div className="val" style={{ color: "var(--err)" }}>{b.errors}</div></div>
    </div>
    <div className="card" style={{ marginTop: 18 }}>
      <div className="card-head"><h3>Righe sorgente</h3><span className="sub">audit a livello catalog_import_rows · {rows.length > 0 ? rows.length : b.received} righe</span>
        <span style={{marginLeft:"auto", display:"flex", gap:6}}>
          <span className="chip">parsing: tutti</span><span className="chip">normalization: tutti</span>
        </span>
      </div>
      {rows.length === 0 ? <div className="card-body muted">Audit non disponibile per questo import (placeholder).</div> :
      <table className="table">
        <thead><tr><th>sourceItemId</th><th>Parsing</th><th>Normalization</th><th>Warning · Errori</th><th>Riga sorgente</th><th></th></tr></thead>
        <tbody>{rows.map(r => <tr key={r.id}>
          <td className="mono">{r.sourceItemId}</td>
          <td>{r.parsing === "ok" ? <span className="pill green">ok</span> : <span className="pill err">error</span>}</td>
          <td>{r.normalization === "ok" ? <span className="pill green">ok</span> : (r.normalization === "warning" ? <span className="pill warn">warning</span> : <span className="pill gray">{r.normalization}</span>)}</td>
          <td>
            {r.warnings.map((w,i) => <div key={i} style={{ fontSize: 11.5, color: "var(--warn)" }}><Icon name="warning" /> <strong>{w.code}</strong> · {w.message}</div>)}
            {r.errors.map((er,i) => <div key={i} style={{ fontSize: 11.5, color: "var(--err)" }}><Icon name="error" /> <strong>{er.code}</strong> · {er.message}</div>)}
            {r.warnings.length === 0 && r.errors.length === 0 && <span className="muted">—</span>}
          </td>
          <td><span className="mono muted" style={{ fontSize: 10.5 }}>{JSON.stringify(r.rowRaw).slice(0, 60)}…</span></td>
          <td><div className="row" style={{ gap: 4 }}><button className="btn sm">Apri match</button></div></td>
        </tr>)}</tbody>
      </table>}
    </div>
  </div>;
}

/* ── Catalogs ────────────────────────────────────────── */
function CatalogsList({ setRoute }) {
  return <div>
    <PageHeader eyebrow="Operations · Sorgenti" title="Catalogs"
      subtitle="Linee editoriali sorgente. Ogni catalog ha la sua delivery (storage, CDN, prefisso) e locales supportate."
      actions={<><button className="btn opera"><Icon name="plus" /> Nuovo catalog</button></>}
    />
    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14 }}>
      {D3.CATALOGS.map(c => (
        <div className="card" key={c.id} style={{ cursor: "pointer" }} onClick={()=>setRoute({page:"catalogs", id:c.id})}>
          <div className="card-body">
            <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <div className="eyebrow">{c.provider}</div>
                <h3 style={{ margin: "4px 0", fontFamily: "var(--serif)", fontSize: 22 }}>{c.name}</h3>
                <div className="muted mono" style={{ fontSize: 11 }}>{c.slug}</div>
              </div>
              <StatusPill status={c.status} />
            </div>
            <p style={{ fontSize: 12.5, marginTop: 10 }}>{c.description}</p>
            <div className="divider"></div>
            <dl className="kv" style={{ fontSize: 11.5 }}>
              <dt>Entries</dt><dd className="mono">{c.entries.toLocaleString("it-IT")}</dd>
              <dt>Default locale</dt><dd className="mono">{c.defaultLocale}</dd>
              <dt>Storage</dt><dd className="mono">{c.delivery.storageProvider} · {c.delivery.bucketName}</dd>
              <dt>CDN base</dt><dd className="mono" style={{ fontSize: 10.5 }}>{c.delivery.cdnBaseUrl}</dd>
              <dt>Root prefix</dt><dd className="mono" style={{ fontSize: 10.5 }}>{c.delivery.rootPrefix}</dd>
            </dl>
          </div>
        </div>
      ))}
    </div>
  </div>;
}

function CatalogDetail({ id, setRoute }) {
  const c = D3.catalogById(id);
  if (!c) return <div className="empty"><h3>Catalog non trovato</h3></div>;
  return <div>
    <div style={{ display:"flex", gap: 10, marginBottom: 14 }}>
      <button className="btn ghost sm" onClick={()=>setRoute({page:"catalogs"})}>‹ Lista</button>
      <span style={{marginLeft:"auto"}}></span>
      <button className="btn sm"><Icon name="settings" /> Configura delivery</button>
    </div>
    <PageHeader eyebrow={c.provider} title={c.name}
      subtitle={c.description}
      actions={<StatusPill status={c.status} />}
    />
    <div className="detail wide-aside">
      <div className="col">
        <div className="card"><div className="card-head"><h3>Delivery</h3><span className="sub">storageProvider, CDN e prefisso applicati a tutti gli asset</span></div>
          <div className="card-body">
            <dl className="kv">
              <dt>storageProvider</dt><dd><span className="pill gray">{c.delivery.storageProvider}</span></dd>
              <dt>bucketName</dt><dd className="mono">{c.delivery.bucketName}</dd>
              <dt>cdnBaseUrl</dt><dd className="mono">{c.delivery.cdnBaseUrl}</dd>
              <dt>rootPrefix</dt><dd className="mono">{c.delivery.rootPrefix}</dd>
              <dt>resolverPolicy</dt><dd className="mono">oo_{c.slug.replace(/-/g,"_")}_cdn_main</dd>
            </dl>
          </div>
        </div>
        <div className="card"><div className="card-head"><h3>Locales</h3><span className="sub">11 lingue supportate · default {c.defaultLocale}</span></div>
          <div className="card-body" style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {D3.LOCALES.map(l => <span key={l.code} className={"pill " + (c.defaultLocale === l.code ? "opera" : "gray")}><span className="mono">{l.flag}</span> {l.label}</span>)}
          </div>
        </div>
      </div>
      <aside className="col">
        <div className="card"><div className="card-body">
          <div className="eyebrow">Statistiche</div>
          <dl className="kv" style={{ marginTop: 8 }}>
            <dt>Entries</dt><dd className="mono">{c.entries.toLocaleString("it-IT")}</dd>
            <dt>Works</dt><dd className="mono">{D3.WORKS.filter(w=>w.catalog===c.id).length}</dd>
            <dt>Pubblicati</dt><dd className="mono">{Math.round(c.entries*0.74).toLocaleString("it-IT")}</dd>
            <dt>Lingue medie</dt><dd className="mono">5.2/11</dd>
          </dl>
        </div></div>
      </aside>
    </div>
  </div>;
}

window.RaccolteList = RaccolteList;
window.RaccoltaDetail = RaccoltaDetail;
window.Taxonomies = Taxonomies;
window.ImportsList = ImportsList;
window.ImportDetail = ImportDetail;
window.CatalogsList = CatalogsList;
window.CatalogDetail = CatalogDetail;