/* global React, window */
const { useState: useStateB } = React;

const BoardroomView = () => {
  const [tab, setTab] = useStateB('milestones');
  return (
    <>
      <div className="subbar">
        <div className="subbar__path">Boardroom & Audit Vault <span className="sep">/</span> <span style={{fontWeight:400, color:'var(--text-2)'}}>Fiduciary oversight</span></div>
        <div className="subbar__kpis">
          <Kpi label="Open ratifications" value="3" delta="1 closes in 11h" deltaKind="neg" />
          <Kpi label="Dispute window" value="1" delta="OWF2 · 18h 05m" />
          <Kpi label="Your seniority units" value="900" delta="65% vested · 1,385d" />
          <Kpi label="Signing role" value="Legal" delta="3-of-3 oracle" />
        </div>
      </div>

      <div className="canvas">
        <div style={{marginBottom:16}}>
          <Tabs value={tab} onChange={setTab} items={[
            {value:'milestones', label:'Milestone attestations', count: 5},
            {value:'proposals',  label:'Board resolutions',      count: 3},
            {value:'partners',   label:'Partnership registry',    count: window.PARTNERS.length},
          ]} />
        </div>

        {tab==='milestones' && <MilestonesTable />}
        {tab==='proposals'  && <Proposals />}
        {tab==='partners'   && <PartnersView />}
      </div>
    </>
  );
};

const MilestonesTable = () => {
  const [sel, setSel] = useStateB('gate-0341');
  const m = window.MILESTONES.find(x => x.id === sel);
  return (
    <div className="grid grid--split">
      <div className="card card--pad0">
        <div className="card__head card__head--sticky">
          <div className="card__title"><h3 className="h3">Ratification queue</h3><Help/></div>
          <div className="card__actions">
            <button className="btn btn--sm">Filter</button>
            <button className="btn btn--sm">Sort · urgency</button>
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr><th>Gate</th><th>Cell</th><th>Title</th><th>Signers</th><th>Window</th><th>Stage</th></tr>
          </thead>
          <tbody>
            {window.MILESTONES.map(x => (
              <tr key={x.id} className="row--hover"
                  onClick={() => setSel(x.id)}
                  style={sel===x.id ? {background:'var(--bg-muted)'} : {}}>
                <td className="mono text-sm">{x.id}</td>
                <td className="bold">{x.cell}</td>
                <td className="text-sm">{x.title}</td>
                <td>
                  <div className="row" style={{gap:3}}>
                    {['legal','treasury','tech'].map(r => (
                      <span key={r} title={r} style={{width:10, height:10, borderRadius:2,
                        background: x[r]==='signed' ? 'var(--pos)' : 'var(--bg-sunk)',
                        border:'1px solid var(--border)',
                      }} />
                    ))}
                  </div>
                </td>
                <td className="mono text-sm">{x.window}</td>
                <td>
                  {x.stage==='Ratification' && <Pill kind="amber" dot>{x.stage}</Pill>}
                  {x.stage==='Evidence Posted' && <Pill kind="info" dot>{x.stage}</Pill>}
                  {x.stage==='Dispute Window' && <Pill kind="warn" dot>{x.stage}</Pill>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="card">
        <div className="row row--sb" style={{marginBottom:12}}>
          <div>
            <div className="eyebrow">Gate · {m.id}</div>
            <h3 className="h3" style={{marginTop:4}}>{m.title}</h3>
            <div className="row" style={{gap:8, marginTop:6}}>
              <Pill>{m.cell}</Pill>
              {m.stage==='Ratification' && <Pill kind="amber" dot>Closes in {m.window}</Pill>}
              {m.stage==='Dispute Window' && <Pill kind="warn" dot>Dispute · {m.window}</Pill>}
            </div>
          </div>
          <div style={{textAlign:'right'}}>
            <div className="eyebrow">Payout triggered</div>
            <div className="num bold" style={{fontSize:22}}>{fmtUSD(m.amount)}</div>
          </div>
        </div>

        <hr className="divider" />
        <div className="eyebrow" style={{marginBottom:10}}>Evidence bundle</div>
        <div className="card" style={{padding:12, background:'var(--bg-muted)'}}>
          <div className="row row--sb">
            <span className="mono text-sm">{m.evidence}</span>
            <button className="btn btn--sm">Open on Glass-Box <Icon name="external" size={11}/></button>
          </div>
          <div className="text-sm muted" style={{marginTop:8}}>
            SHA-256 · 7f3b…20ee  ·  posted by Oracle(Legal) at 16:01:59 UTC  ·  340 KB
          </div>
        </div>

        <hr className="divider" />
        <div className="eyebrow" style={{marginBottom:8}}>Attestations · 3-of-3</div>
        {['legal','treasury','tech'].map(r => (
          <div key={r} className="attest">
            <div>
              <div className="attest__role">{r}</div>
              <div className="attest__name">{r==='legal'?'R. Cheng':r==='treasury'?'S. Okafor':'L. Moreau'}</div>
              <div className="attest__addr">0x{r==='legal'?'8a42…e1ff':r==='treasury'?'b291…0c77':'3fb8…c220'}</div>
            </div>
            <div>
              {m[r]==='signed'
                ? <div className="row" style={{gap:6, color:'var(--pos)'}}><Icon name="check" size={14}/><span className="text-sm bold">Signed · 16:03:52 UTC</span></div>
                : <div className="muted text-sm">Awaiting signature</div>}
              <div className="text-sm muted" style={{marginTop:2}}>
                {m[r]==='signed' ? 'Sig 0x3fb8…c220 · verifiable' : `Hardware wallet required`}
              </div>
            </div>
            <div>
              {m[r]==='signed'
                ? <Pill kind="pos" dot>Signed</Pill>
                : <button className="btn btn--amber btn--sm">Sign <Icon name="lock" size={11}/></button>}
            </div>
          </div>
        ))}

        <hr className="divider" />
        <div className="row row--sb">
          <span className="muted text-sm">All three signatures release the payout and start the 48-hour dispute window.</span>
          <div className="row" style={{gap:6}}>
            <button className="btn btn--sm">Raise dispute</button>
            <button className="btn btn--amber">Ratify gate</button>
          </div>
        </div>
      </div>
    </div>
  );
};

const Proposals = () => (
  <div className="stack">
    {window.PROPOSALS.map(p => (
      <div key={p.id} className="card">
        <div className="row row--sb" style={{marginBottom:10}}>
          <div>
            <div className="row" style={{gap:10}}>
              <span className="mono text-sm muted">{p.id}</span>
              <Pill kind={p.tier==='Fundamental'?'amber':'info'} dot>{p.tier} · {p.tier==='Fundamental'?'75%':'51%'}</Pill>
            </div>
            <h3 className="h3" style={{marginTop:6}}>{p.title}</h3>
          </div>
          <div className="row" style={{gap:8}}>
            <button className="btn btn--sm">Discuss</button>
            <button className="btn btn--sm">Vote yes</button>
            <button className="btn btn--sm">Vote no</button>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 140px', gap:16, alignItems:'center'}}>
          <div>
            <div className="row row--sb text-sm"><span className="muted">Yes</span><span className="num bold pos">{p.yes}%</span></div>
            <div className="bar" style={{marginTop:4}}><div className="bar__fill" style={{width:`${p.yes}%`, background:'var(--pos)'}}/></div>
            <div className="row row--sb text-sm" style={{marginTop:8}}><span className="muted">No</span><span className="num bold neg">{p.no}%</span></div>
            <div className="bar" style={{marginTop:4}}><div className="bar__fill" style={{width:`${p.no}%`, background:'var(--neg)'}}/></div>
          </div>
          <div>
            <div className="eyebrow">Quorum target</div>
            <div style={{marginTop:6, position:'relative', height:8, background:'var(--bg-sunk)', borderRadius:999}}>
              <div style={{width:`${p.quorum}%`, position:'absolute', top:-3, left:`${p.quorum-0.5}%`, height:14, width:2, background:'var(--text-1)'}}/>
              <div style={{height:'100%', width:`${p.yes+p.no}%`, background:'var(--amber)', borderRadius:999}}/>
            </div>
            <div className="text-sm muted" style={{marginTop:6}}>{p.yes+p.no}% of {p.quorum}% quorum · staked SHARD returned on adoption</div>
          </div>
          <div style={{textAlign:'right'}}>
            <div className="eyebrow">Closes</div>
            <div className="display-2" style={{marginTop:4}}>{p.ends}</div>
          </div>
        </div>
      </div>
    ))}
  </div>
);

const PartnersView = () => (
  <div className="card card--pad0">
    <div className="card__head card__head--sticky">
      <div className="card__title"><h3 className="h3">Partnership registry · modified lockstep</h3><Help/></div>
      <div className="card__actions">
        <button className="btn btn--sm">Add partner</button>
        <button className="btn btn--sm btn--ghost">Export</button>
      </div>
    </div>
    <table className="tbl">
      <thead><tr><th>Partner</th><th>Role</th><th className="num">Seniority</th><th className="num">Units</th><th>Vesting</th><th>Status</th></tr></thead>
      <tbody>
        {window.PARTNERS.map(p => (
          <tr key={p.name}>
            <td>
              <div className="row" style={{gap:10}}>
                <div style={{width:32, height:32, borderRadius:'50%', background:'var(--bg-muted)',
                  display:'grid', placeItems:'center', fontFamily:'var(--font-display)', fontWeight:600}}>
                  {p.name.split(' ')[1][0]}
                </div>
                <div>
                  <div className="bold">{p.name}</div>
                  <div className="mono text-sm muted">0x{p.name.length.toString(16)}a…{p.seniority}c7</div>
                </div>
              </div>
            </td>
            <td className="text-sm">{p.role}</td>
            <td className="num">{p.seniority}y</td>
            <td className="num">{p.units}</td>
            <td><div style={{width:120}}><VestCurve vested={p.vested}/></div></td>
            <td><Pill kind={p.vested>0.8?'pos':'info'} dot>{(p.vested*100).toFixed(0)}% vested</Pill></td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

window.BoardroomView = BoardroomView;