// Revenue ledger — gross / ops / publisher / network-fund splits.

function Revenue({setRoute}){
  const l = window.LEDGER;
  const tot = l.reduce((acc,x)=>({gross:acc.gross+x.gross, ops:acc.ops+x.ops, pub:acc.pub+x.pub, fund:acc.fund+x.fund}),{gross:0,ops:0,pub:0,fund:0});
  const fmt = n => '$'+n.toLocaleString();

  return (
    <AdminShell route="rev" setRoute={setRoute} title="Revenue ledger" breadcrumb="COMMERCE · LEDGER + PAYOUTS"
      actions={<>
        <button className="btn gh">Export CSV</button>
        <button className="btn k">Generate statements</button>
        <button className="btn g">Run payout batch →</button>
      </>}>

      <div className="split-4" style={{marginBottom:18}}>
        <Stat n={fmt(tot.gross)}  l="Gross · period" d="May 02 – May 19"/>
        <Stat n={fmt(tot.pub)}    l="Publisher share · 65%" d="+18% vs Apr" up={true}/>
        <Stat n={fmt(tot.ops)}    l="Ops · 25%" d="—"/>
        <Stat n={fmt(tot.fund)}   l="Network fund · 10%" d="reserved for legacy"/>
      </div>

      <Card title="Ledger entries" meta={`${l.length} · May`}
        actions={<>
          <Seg value="All" onChange={()=>{}} options={['All','Paid','Pending','Refunded']}/>
        </>}>
        <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
          <thead><tr><th>DATE</th><th>DESCRIPTION</th><th>PUBLISHERS</th><th className="r">GROSS</th><th className="r">OPS · 25%</th><th className="r">PUBLISHER · 65%</th><th className="r">FUND · 10%</th><th>STATUS</th></tr></thead>
          <tbody>
            {l.map((x,i)=>(
              <tr key={i}>
                <td className="mono num" style={{fontSize:10.5,letterSpacing:'.04em'}}>{x.date}</td>
                <td style={{fontSize:12.5,fontWeight:500}}>{x.desc}</td>
                <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em',color:'var(--ink-2)'}}>{x.pubName}</td>
                <td className="r num" style={{fontWeight:600}}>{fmt(x.gross)}</td>
                <td className="r num" style={{color:'var(--mute)'}}>{fmt(x.ops)}</td>
                <td className="r num" style={{color:'var(--green)',fontWeight:600}}>{fmt(x.pub)}</td>
                <td className="r num" style={{color:'var(--gold-2)'}}>{fmt(x.fund)}</td>
                <td><Pill k={x.status==='Paid'?'live':'warn'}>{x.status}</Pill></td>
              </tr>
            ))}
            <tr style={{background:'var(--canvas)'}}>
              <td colSpan={3} className="mono" style={{fontWeight:700,fontSize:11,letterSpacing:'.14em',color:'var(--mute)'}}>TOTAL · {l.length} ENTRIES</td>
              <td className="r num" style={{fontWeight:700}}>{fmt(tot.gross)}</td>
              <td className="r num" style={{fontWeight:700,color:'var(--mute)'}}>{fmt(tot.ops)}</td>
              <td className="r num" style={{fontWeight:700,color:'var(--green)'}}>{fmt(tot.pub)}</td>
              <td className="r num" style={{fontWeight:700,color:'var(--gold-2)'}}>{fmt(tot.fund)}</td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </Card>

      <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:18,marginTop:18}}>
        <Card title="Publisher payouts · upcoming">
          <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
            <thead><tr><th>PUBLISHER</th><th className="r">STORIES · MO</th><th className="r">SHARE · DUE</th><th className="r">METHOD</th><th>NEXT</th></tr></thead>
            <tbody>
              {[
                ['cp', 14, 8420, 'ACH', 'Jun 01'],
                ['tt', 11, 4280, 'ACH', 'Jun 01'],
                ['cf', 8,  3160, 'ACH', 'Jun 01'],
                ['pe', 7,  2640, 'CHECK', 'Jun 01'],
                ['wj', 5,  2280, 'ACH', 'Jun 01'],
                ['qcq',5,  1960, 'ACH', 'Jun 01'],
                ['cb', 3,  1180, 'ACH', 'Jun 01'],
                ['rc', 3,  920,  'CHECK', 'Jun 01'],
              ].map(([id,n,s,m,d],i)=>{
                const p = window.PUB_BY_ID[id];
                return (
                  <tr key={i}>
                    <td><span style={{display:'flex',alignItems:'center',gap:6}}><span style={{width:18,height:18,background:`var(--${p.color})`,color:p.color==='gold'?'var(--black)':'var(--ivory)',fontFamily:'var(--serif)',fontWeight:800,fontSize:10,display:'flex',alignItems:'center',justifyContent:'center'}}>{p.short[0]}</span>{p.name}</span></td>
                    <td className="r num">{n}</td>
                    <td className="r num" style={{color:'var(--green)',fontWeight:600}}>${s.toLocaleString()}</td>
                    <td className="r mono" style={{fontSize:10,color:'var(--mute)',letterSpacing:'.06em'}}>{m}</td>
                    <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em'}}>{d}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>

        <Card title="Split policy" meta="default">
          <div style={{padding:'6px 0'}}>
            <div className="eyebrow">REVENUE WATERFALL</div>
            <div style={{display:'flex',height:32,marginTop:10,border:'1px solid var(--rule-line)'}}>
              <div style={{width:'65%',background:'var(--green)',color:'var(--ivory)',display:'flex',alignItems:'center',justifyContent:'center'}} className="mono">PUBLISHER · 65%</div>
              <div style={{width:'25%',background:'var(--navy)',color:'var(--ivory)',display:'flex',alignItems:'center',justifyContent:'center'}} className="mono">OPS · 25%</div>
              <div style={{width:'10%',background:'var(--gold)',color:'var(--black)',display:'flex',alignItems:'center',justifyContent:'center'}} className="mono">FUND · 10%</div>
            </div>
            <ul style={{listStyle:'none',padding:0,margin:'14px 0 0',fontSize:12,color:'var(--ink-2)',lineHeight:1.7}}>
              <li>· <b>Publisher</b> share routes monthly per attributable story.</li>
              <li>· <b>Ops</b> covers ingest, sales, editorial review, hosting.</li>
              <li>· <b>Network fund</b> capitalizes legacy preservation + pilot publishers.</li>
              <li>· Override per contract — Wilmington Journal at 70% on archive revenue.</li>
            </ul>
          </div>
        </Card>
      </div>
    </AdminShell>
  );
}

window.Revenue = Revenue;