/* global React, window */

const PortfolioView = () => {
  const [tab, setTab] = React.useState('positions');
  const [selectedCell, setSelectedCell] = React.useState('cell-01');
  const pos = window.POSITIONS;
  const totalNav = pos.reduce((s,p) => s + p.nav, 0);
  const totalCost = pos.reduce((s,p) => s + p.cost, 0);
  const unrealized = totalNav - totalCost;
  const income = pos.reduce((s,p) => s + p.coupon, 0);

  return (
    <>
      {/* Sub-bar: breadcrumb + KPIs */}
      <div className="subbar">
        <div className="subbar__path">
          Portfolio & Registry
          <span className="sep">/</span>
          <span style={{fontWeight:400, color:'var(--text-2)'}}>Overview</span>
        </div>
        <div className="subbar__kpis">
          <Kpi label="Net Asset Value" value={fmtUSD(totalNav, true)} delta={'+' + fmtUSD(unrealized, true) + ' (+' + (unrealized/totalCost*100).toFixed(2) + '%)'} deltaKind="pos" />
          <Kpi label="Day Change" value="+$18,204" delta="+0.54%" deltaKind="pos" />
          <Kpi label="Scheduled Income" value={fmtUSD(income, true)} delta="next 30 days" deltaKind="pos" />
          <Kpi label="Standing" value="Registered" delta="ZK-KYC · tier 3" />
        </div>
      </div>

      <div className="canvas">
        {/* Top row: donuts */}
        <div className="grid grid--4" style={{marginBottom:16}}>
          <AllocCard title="Asset class" help data={window.ALLOC_CLASS} />
          <AllocCard title="Jurisdiction" help data={window.ALLOC_JX} />
          <AllocCard title="Maturity ladder" help data={window.ALLOC_MATURITY} />
          <StandingCard />
        </div>

        {/* Row 2: NAV history */}
        <div className="grid grid--split" style={{marginBottom:16}}>
          <div className="card">
            <CardHead
              title="NAV by asset class"
              help
              eyebrow="Historical · 18 months"
              actions={
                <>
                  <button className="btn btn--sm">Monthly</button>
                  <button className="btn btn--sm btn--ghost">Quarterly</button>
                  <button className="btn btn--sm btn--ghost">Download</button>
                </>
              }
            />
            <StackedBars data={window.NAV_HISTORY} />
            <div className="chart-legend" style={{marginTop:8}}>
              {[
                { k: 'Mining', c: 'var(--viz-1)' },
                { k: 'Real estate', c: 'var(--viz-4)' },
                { k: 'Commodities', c: 'var(--viz-3)' },
                { k: 'Pre-IPO', c: 'var(--viz-5)' },
              ].map((d,i) => (
                <div key={i} className="chart-legend__item">
                  <span className="chart-legend__dot" style={{background:d.c}} />{d.k}
                </div>
              ))}
            </div>
          </div>

          <CompliancePanel />
        </div>

        {/* Row 3: Positions table + distributions */}
        <div className="grid grid--split" style={{marginBottom:16}}>
          <div className="card card--pad0">
            <div className="card__head card__head--sticky">
              <div className="card__title">
                <h3 className="h3">Positions across SPV Cells</h3>
                <Help />
              </div>
              <div className="card__actions">
                <button className="btn btn--sm"><Icon name="filter" size={12}/>Filter</button>
                <button className="btn btn--sm"><Icon name="download" size={12}/>Audit PDF</button>
              </div>
            </div>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Cell · Symbol</th>
                  <th>Class</th>
                  <th>Jurisdiction</th>
                  <th className="num">Tokens</th>
                  <th className="num">NAV</th>
                  <th>Trend</th>
                  <th className="num">Yield</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {pos.map(p => (
                  <tr key={p.id} className="row--hover"
                      onClick={() => setSelectedCell(p.id)}
                      style={selectedCell === p.id ? { background: 'var(--bg-muted)' } : {}}>
                    <td>
                      <div className="bold">{p.symbol}</div>
                      <div className="muted text-sm">{p.name}</div>
                    </td>
                    <td>
                      <Pill dot>
                        <span className="dot" style={{background:
                          p.cls === 'Mining' ? 'var(--viz-1)' :
                          p.cls === 'Real Estate' ? 'var(--viz-4)' :
                          p.cls === 'Commodities' ? 'var(--viz-3)' : 'var(--viz-5)'
                        }} />
                        {p.cls}
                      </Pill>
                    </td>
                    <td className="text-sm muted">{p.jx}</td>
                    <td className="num">{fmtNum(p.tokens)}</td>
                    <td className="num">{fmtUSD(p.nav, true)}</td>
                    <td><Sparkline data={p.trend} /></td>
                    <td className="num">{p.yieldPct.toFixed(1)}%</td>
                    <td>
                      {p.status === 'Live' && <Pill kind="pos" dot>Live</Pill>}
                      {p.status === 'Dispute Window' && <Pill kind="warn" dot>Dispute 18h</Pill>}
                      {p.status === 'Subscription Open' && <Pill kind="info" dot>Subscribe</Pill>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <DistributionsCard />
        </div>

        {/* Row 4: Milestones + maturity exposure */}
        <div className="grid grid--split">
          <MilestonesRail />
          <ExposureCard />
        </div>
      </div>
    </>
  );
};

const AllocCard = ({ title, data, help }) => {
  const total = data.reduce((s,d) => s + d.v, 0);
  return (
    <div className="card">
      <CardHead title={title} help={help} />
      <div style={{display:'flex', alignItems:'center', justifyContent:'center', marginBottom:4}}>
        <Donut data={data} center={total.toFixed(1) + '%'} sub="allocation" />
      </div>
      <Legend data={data} />
    </div>
  );
};

const StandingCard = () => {
  return (
  <div className="card">
    <CardHead title="Registry standing" help />
    <div style={{display:'flex', flexDirection:'column', gap:12}}>
      <div className="row row--sb">
        <span className="muted text-sm">Accreditation</span>
        <Pill kind="pos" dot>Qualified · Tier 3</Pill>
      </div>
      <div className="row row--sb">
        <span className="muted text-sm">ZK-KYC credential</span>
        <Pill kind="info" dot>Valid · 143d left</Pill>
      </div>
      <div className="row row--sb">
        <span className="muted text-sm">Jurisdictions cleared</span>
        <span className="mono text-sm">MX · CO · KY · US-QI</span>
      </div>
      <hr className="divider" />
      <div>
        <div className="eyebrow" style={{marginBottom:8}}>SPV Cells reachable</div>
        <div className="cells" style={{gridTemplateColumns:'repeat(12, 1fr)'}}>
          {Array.from({length: 36}).map((_, i) => {
            const state = i < 20 ? 'active' : i < 24 ? 'pending' : i < 27 ? 'review' : '';
            return <div key={i} className={`cells__cell ${state ? 'cells__cell--'+state : ''}`} />;
          })}
        </div>
        <div className="row" style={{marginTop:10, gap:14, fontSize:11, color:'var(--text-3)'}}>
          <span className="row" style={{gap:6}}><span className="dot" style={{background:'var(--amber)'}}/>Reachable</span>
          <span className="row" style={{gap:6}}><span className="dot" style={{background:'var(--amber-soft)'}}/>Pending</span>
          <span className="row" style={{gap:6}}><span className="dot" style={{background:'var(--viz-4)'}}/>Review</span>
        </div>
      </div>
    </div>
  </div>
  );
};

function CompliancePanel() {
  var tiles = ['Mining','R.Estate','Commod.','Pre-IPO'];
  var colors = ['var(--viz-1)','var(--viz-4)','var(--viz-3)','var(--viz-5)'];
  var yields = [8.4, 7.1, 9.9, 12.0];
  var items = [];
  for (var i = 0; i < tiles.length; i++) {
    var k = tiles[i];
    var c = colors[i];
    items.push(
      React.createElement('div', {
        key: k,
        style: {
          padding: '10px 8px',
          borderRadius: 6,
          background: 'color-mix(in srgb, ' + c + ' 14%, transparent)',
          border: '1px solid color-mix(in srgb, ' + c + ' 35%, transparent)',
          textAlign: 'center'
        }
      },
        React.createElement('div', { className: 'eyebrow', style: { fontSize: 9 } }, k),
        React.createElement('div', { className: 'num bold', style: { fontSize: 15, marginTop: 2 } }, yields[i].toFixed(1) + '%'),
        React.createElement('div', { className: 'muted text-sm', style: { fontSize: 10 } }, 'wtd yield')
      )
    );
  }
  return (
    <div className="card">
      <CardHead
        title="Equity & bond maturity"
        help
        eyebrow="Concentration · ERC-3643"
        actions={<button className="btn btn--sm btn--ghost">Export</button>}
      />
      <HBars rows={window.ALLOC_MATURITY} />
      <hr className="divider" />
      <div className="eyebrow" style={{marginBottom:10}}>Risk tile · by class</div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:6}}>
        {items}
      </div>
    </div>
  );
}

const DistributionsCard = () => {
  const [filt, setFilt] = React.useState('all');
  const rows = window.DISTRIBUTIONS.filter(function(r){
    if (filt === 'all') return true;
    if (filt === 'scheduled') return r.status === 'Scheduled';
    return r.status === 'Settled';
  });
  return (
    <div className="card card--pad0">
      <div className="card__head card__head--sticky">
        <div className="card__title">
          <h3 className="h3">Programmatic distributions</h3>
          <Help />
        </div>
        <div className="card__actions">
          <Segmented value={filt} onChange={setFilt}
                     options={[{value:'all',label:'All'},{value:'scheduled',label:'Scheduled'},{value:'settled',label:'Settled'}]} />
        </div>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Date</th>
            <th>Cell</th>
            <th>Kind</th>
            <th className="num">Amount</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r,i) => (
            <tr key={i}>
              <td className="mono text-sm">{r.date}</td>
              <td className="bold">{r.cell}</td>
              <td className="muted text-sm">{r.kind}</td>
              <td className="num bold">{fmtUSD(r.amount)}</td>
              <td>
                {r.status === 'Settled'
                  ? <Pill kind="pos" dot>Settled</Pill>
                  : <Pill kind="warn" dot>Scheduled</Pill>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

const MilestonesRail = () => (
  <div className="card">
    <CardHead
      title="Milestone attestations"
      help
      eyebrow="Multi-sig oracle · 3-of-3"
      actions={<button className="btn btn--sm">Open signatory console <Icon name="external" size={11}/></button>}
    />
    <div className="stack">
      {window.MILESTONES.slice(0,3).map(m => (
        <div key={m.id} style={{
          padding:'14px',
          border:'1px solid var(--border)',
          borderRadius:'var(--r-md)',
          background: m.stage === 'Ratification' ? 'color-mix(in srgb, var(--amber) 5%, var(--bg-surface))' : 'var(--bg-surface)',
        }}>
          <div className="row row--sb" style={{marginBottom:8}}>
            <div>
              <div className="row" style={{gap:8}}>
                <span className="mono text-sm muted">{m.id}</span>
                <span className="bold">{m.cell}</span>
              </div>
              <div style={{fontSize:13, marginTop:2, color:'var(--text-1)'}}>{m.title}</div>
            </div>
            {m.stage === 'Ratification' && <Pill kind="amber" dot>Ratification · {m.window}</Pill>}
            {m.stage === 'Evidence Posted' && <Pill kind="info" dot>Evidence posted</Pill>}
            {m.stage === 'Dispute Window' && <Pill kind="warn" dot>Dispute · {m.window}</Pill>}
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8, marginTop:10}}>
            {['legal','treasury','tech'].map(r => (
              <div key={r} style={{
                padding:'8px 10px',
                borderRadius:4,
                background: m[r] === 'signed' ? 'color-mix(in srgb, var(--pos) 12%, transparent)' : 'var(--bg-muted)',
                border: `1px solid ${m[r] === 'signed' ? 'color-mix(in srgb, var(--pos) 30%, transparent)' : 'var(--border)'}`,
                fontSize:12,
                display:'flex', alignItems:'center', gap:6,
              }}>
                {m[r] === 'signed'
                  ? <span style={{color:'var(--pos)', display:'flex'}}><Icon name="check" size={12}/></span>
                  : <span className="dot" style={{background:'var(--text-3)'}} />}
                <span style={{textTransform:'capitalize', color: m[r] === 'signed' ? 'var(--pos)' : 'var(--text-3)'}}>{r}</span>
              </div>
            ))}
          </div>
          <div className="row" style={{marginTop:10, justifyContent:'space-between'}}>
            <span className="mono text-sm muted">{m.evidence}</span>
            <span className="num text-sm">{fmtUSD(m.amount)}</span>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const ExposureCard = () => {
  const rows = [
    { k: 'Sonora Lithium',         v: 35.9, c: 'var(--viz-1)' },
    { k: 'Medellín Park A-3',      v: 20.8, c: 'var(--viz-4)' },
    { k: 'Copper Prepay II',       v: 14.7, c: 'var(--viz-3)' },
    { k: 'Oaxaca Wind II',         v:  7.2, c: 'var(--viz-5)' },
    { k: 'Cash · USDC escrow',     v: 12.4, c: 'var(--viz-6)' },
    { k: 'SHARD · utility',        v:  3.1, c: 'var(--viz-8)' },
    { k: 'Pre-IPO pipeline',       v:  5.9, c: 'var(--viz-2)' },
  ];
  return (
    <div className="card">
      <CardHead
        title="Concentration by cell"
        help
        eyebrow="Top holdings"
        actions={<button className="btn btn--sm btn--ghost">All cells →</button>}
      />
      <HBars rows={rows} />
      <hr className="divider" />
      <div className="row row--sb">
        <div>
          <div className="eyebrow">Next distribution</div>
          <div className="display-2" style={{marginTop:4, fontSize:20}}>May 15 · SONLI</div>
          <div className="muted text-sm">23 days · $32,140 USDC</div>
        </div>
        <button className="btn btn--amber">Subscribe more <Icon name="arrow" size={12}/></button>
      </div>
    </div>
  );
};

window.PortfolioView = PortfolioView;