/* ParallelOS Control Plane — Provider views */
const { useState:pS, useEffect:pE, useRef:pR } = React;

const DEV_ST={online:['s-ok','Online'],hired:['s-hired','Hired'],offline:['s-off','Offline'],pending:['s-warn','Pending']};
function DevPill({s}){const[c,l]=DEV_ST[s]||['s-off',s];return <span className={'s '+c}><span className="d"></span>{l}</span>;}
function meterColor(v,kind){ if(kind==='temp')return v>80?'var(--err)':v>68?'var(--warn)':'var(--ok)'; return v>85?'var(--warn)':'var(--accent)'; }

/* ============ DEVICES ============ */
function Devices({go,openDev}){
  const { state } = useApp();
  return (
    <div className="view">
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16,flexWrap:'wrap',gap:10}}>
        <div style={{fontSize:13,color:'var(--app-dim)',maxWidth:540}}>Machines running the ParallelOS Agent. Telemetry streams live from each device.</div>
        <button className="b b-pri b-sm" onClick={()=>go('connect')}><Icon n="plus"/>Connect device</button>
      </div>
      <div className="dev-grid">
        {state.devices.map(d=>(
          <div className="dev" key={d.id} onClick={()=>openDev(d.id)}>
            <div className="dev-h"><span className="gi"><Icon n="cpu"/></span><div className="dm"><h4>{d.name}</h4><div className="dsub">{d.gpu} · {d.region}</div></div><DevPill s={d.status}/></div>
            <div className="dev-b">
              <div className="row"><span className="l">GPU util</span><div className="meter" style={{width:130}}><div className="bar"><i style={{width:d.util+'%',background:meterColor(d.util)}}></i></div><span className="v">{d.util}%</span></div></div>
              <div className="row"><span className="l">Temp</span><span className="mc">{d.temp}°C</span></div>
              <div className="row"><span className="l">Uptime</span><span className="mc">{d.status==='offline'?'—':Math.floor(d.uptimeH/24)+'d '+(d.uptimeH%24)+'h'}</span></div>
              <div className="row"><span className="l">Earned</span><span className="mc" style={{color:'var(--ok)'}}>{d.earned.toLocaleString('en-US',{maximumFractionDigits:1})} PLOS</span></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============ DEVICE DETAIL ============ */
function DeviceDetail({id,go}){
  const { state, update } = useApp();
  const toast=useToast();
  const d=state.devices.find(x=>x.id===id);
  if(!d) return <div className="view"><div className="empty"><Icon n="server"/>Device not found</div></div>;
  const toggle=()=>update(p=>({...p,devices:p.devices.map(x=>x.id===id?{...x,status:x.status==='offline'?'online':'offline',util:x.status==='offline'?6:0,power:x.status==='offline'?110:0,temp:x.status==='offline'?46:34}:x)}));
  const remove=()=>{update(p=>({...p,devices:p.devices.filter(x=>x.id!==id)}));toast({kind:'info',msg:'Device removed',sub:d.name});go('devices');};
  const gauges=[['GPU util',d.util,'%','util'],['Temp',d.temp,'°C','temp'],['Power',d.power,'W','pow'],['VRAM',d.status==='offline'?0:Math.round(d.util*0.9),'%','util']];
  return (
    <div className="view">
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:14,marginBottom:18,flexWrap:'wrap'}}>
        <div style={{display:'flex',alignItems:'center',gap:13}}><span className="dev-h" style={{padding:0}}><span className="gi"><Icon n="cpu"/></span></span><div><div style={{display:'flex',alignItems:'center',gap:11}}><h2 style={{fontFamily:'var(--f-display)',fontSize:21}}>{d.name}</h2><DevPill s={d.status}/></div><div className="id" style={{fontFamily:'var(--f-mono)',fontSize:12,color:'var(--app-faint)',marginTop:3}}>{d.id} · {d.gpu} · {d.region} · {d.ip}</div></div></div>
        <div style={{display:'flex',gap:10}}>
          <button className="b b-sec b-sm" onClick={toggle}>{d.status==='offline'?'Bring online':'Pause'}</button>
          <button className="b b-danger b-sm" onClick={remove}>Remove</button>
        </div>
      </div>

      <div className="grid g4" style={{marginBottom:16}}>
        {gauges.map(([l,v,u,k])=>(<div className="metric" key={l}><div className="ml">{l}</div><div className="mv" style={{fontSize:22}}>{v}<span className="u">{u}</span></div><div className="meter" style={{marginTop:10}}><div className="bar"><i style={{width:(k==='pow'?Math.min(v/4,100):v)+'%',background:meterColor(v,k)}}></i></div></div></div>))}
      </div>

      <div className="cols">
        <div className="panel">
          <div className="panel-h"><h3>Recent jobs on this device</h3><span className="sub">{d.jobs.toLocaleString()} lifetime</span></div>
          <table className="tbl"><thead><tr><th>Job</th><th>Type</th><th>Duration</th><th style={{textAlign:'right'}}>Reward</th></tr></thead><tbody>
            {[['job_9f2a','inference','12m 4s','3.20'],['job_7c81','batch','41m 18s','8.74'],['job_b3d0','render','1h 06m','14.10'],['job_44ef','embeddings','3m 52s','0.91']].map(j=>(
              <tr key={j[0]} style={{cursor:'default'}}><td className="id">{j[0]}</td><td className="mc" style={{textTransform:'capitalize'}}>{j[1]}</td><td className="mc">{j[2]}</td><td className="mc" style={{textAlign:'right',color:'var(--ok)'}}>+{j[3]}</td></tr>))}
          </tbody></table>
        </div>
        <div className="panel"><div className="panel-b">
          <div className="kv">
            <div className="k">Status</div><div className="v">{(DEV_ST[d.status]||[])[1]}</div>
            <div className="k">Reputation</div><div className="v">{d.rep}% · A</div>
            <div className="k">Uptime</div><div className="v">{d.status==='offline'?'—':Math.floor(d.uptimeH/24)+'d '+(d.uptimeH%24)+'h'}</div>
            <div className="k">Total earned</div><div className="v" style={{color:'var(--ok)'}}>{d.earned.toLocaleString('en-US',{maximumFractionDigits:1})} PLOS</div>
          </div>
          <div className="sectitle">Agent</div>
          <div className="codeblk" style={{fontSize:11.5}}><span className="c"># restart the agent on this host</span><br/><span className="k">parallelos</span> agent restart --device <span className="s">{d.id}</span></div>
        </div></div>
      </div>
    </div>
  );
}

/* ============ CONNECT DEVICE ============ */
const OS_CMD={
  Linux:`curl -fsSL https://get.parallelos.network | sh
parallelos agent start --token`,
  Windows:`irm https://get.parallelos.network/win | iex
parallelos agent start --token`,
  Docker:`docker run --gpus all -d parallelos/agent:latest \\
  --token`
};
function ConnectDevice({go}){
  const { update } = useApp();
  const toast=useToast();
  const [os,setOs]=pS('Linux');
  const [token]=pS(()=>'plos_'+uid(8)+'_'+uid(8));
  const [waiting,setWaiting]=pS(false);
  const connect=()=>{
    setWaiting(true);
    setTimeout(()=>{
      const id=uid(4)+'-'+uid(4);
      const dev={id,name:'gpu-node-'+id.slice(0,4),gpu:'RTX 4090',vram:24,region:'us-west',ip:'71.92.'+Math.floor(Math.random()*200)+'.'+Math.floor(Math.random()*200),status:'pending',util:0,temp:38,power:70,uptimeH:0,earned:0,jobs:0,rep:100};
      update(p=>({...p,devices:[...p.devices,dev],activity:[{ic:'cpu',k:'ok',t:`Device <b>${dev.name}</b> connected`,ts:Date.now()},...p.activity]}));
      toast({kind:'ok',msg:'Device connected',sub:dev.name+' · running benchmark'});
      go('devices');
    },3200);
  };
  return (
    <div className="view">
      <div className="pair">
        <div>
          <div className="pair-step"><span className="pn">1</span><div className="pb"><h4>Install the ParallelOS Agent</h4><p>Run the install command on the machine you want to contribute. The agent benchmarks your GPU and connects it to the network.</p>
            <div className="seg" style={{marginBottom:12}}>{Object.keys(OS_CMD).map(k=><button key={k} className={os===k?'on':''} onClick={()=>setOs(k)}>{k}</button>)}</div>
            <div className="codeblk" style={{whiteSpace:'pre-wrap'}}>{OS_CMD[os]} <span className="s">{token}</span></div>
          </div></div>
          <div className="pair-step"><span className="pn">2</span><div className="pb"><h4>Pair with your account</h4><p>The agent uses this one-time token to link the device to your wallet. It’s already included in the command above.</p>
            <div className="token-box"><span className="tk">{token}</span><button className="b b-ghost b-sm" onClick={()=>toast({kind:'info',msg:'Token copied'})}><Icon n="copy"/></button></div>
          </div></div>
          <div className="pair-step"><span className="pn">3</span><div className="pb"><h4>Requirements</h4><p style={{margin:0}}>NVIDIA GPU, 8GB+ VRAM · Docker + recent drivers · stable 50 Mbps+ connection. <a href="guide.html" style={{color:'var(--accent)'}}>Full guide →</a></p></div></div>
        </div>
        <div>
          <div className="waiting">
            <div className="radar"></div>
            <h4 style={{fontFamily:'var(--f-display)',fontSize:16,marginBottom:8}}>{waiting?'Detecting device…':'Waiting for your device'}</h4>
            <p style={{fontSize:13,color:'var(--app-dim)',margin:'0 0 18px',lineHeight:1.6}}>{waiting?'Handshake in progress · verifying GPU':'Run the command on your machine. This page updates automatically once the agent connects.'}</p>
            {!waiting && <button className="b b-pri b-sm" style={{justifyContent:'center'}} onClick={connect}>Simulate device connection</button>}
            {waiting && <div className="connecting" style={{padding:0}}><span className="spinner"></span> connecting…</div>}
          </div>
          <p style={{fontSize:11.5,color:'var(--app-faint)',textAlign:'center',marginTop:14,fontFamily:'var(--f-mono)'}}>The web app only monitors — compute runs on your hardware.</p>
        </div>
      </div>
    </div>
  );
}

/* ============ EARNINGS ============ */
function Earnings(){
  const { state, update } = useApp();
  const toast=useToast();
  const total=state.devices.reduce((a,d)=>a+d.earned,0);
  const claim=()=>{ if(total<=0)return; update(p=>({...p,balance:+(p.balance+total).toFixed(2),devices:p.devices.map(d=>({...d,earned:0})),activity:[{ic:'coins',k:'ok',t:`Claimed <b>${total.toLocaleString('en-US',{maximumFractionDigits:1})} PLOS</b> to wallet`,ts:Date.now()},...p.activity]})); toast({kind:'ok',msg:'Rewards claimed',sub:total.toLocaleString('en-US',{maximumFractionDigits:2})+' PLOS'}); };
  return (
    <div className="view">
      <div className="grid g3" style={{marginBottom:16}}>
        <div className="metric"><div className="ml"><Icon n="coins"/>Claimable now</div><div className="mv">{total.toLocaleString('en-US',{maximumFractionDigits:1})}<span className="u">PLOS</span></div><button className="b b-pri b-sm" style={{marginTop:12}} disabled={total<=0} onClick={claim}>Claim to wallet</button></div>
        <div className="metric"><div className="ml"><Icon n="chart"/>Earned (30d)</div><div className="mv">3,418<span className="u">PLOS</span></div><div className="mt up">▲ 12.4% vs prev</div></div>
        <div className="metric"><div className="ml"><Icon n="server"/>Earning devices</div><div className="mv">{state.devices.filter(d=>d.status!=='offline').length}<span className="u">/ {state.devices.length}</span></div><div className="mt">contributing</div></div>
      </div>
      <div className="panel" style={{marginBottom:16}}>
        <div className="panel-h"><h3>Earnings by device</h3></div>
        <table className="tbl"><thead><tr><th>Device</th><th>GPU</th><th>Status</th><th>Jobs</th><th style={{textAlign:'right'}}>Earned (PLOS)</th></tr></thead><tbody>
          {state.devices.map(d=>(<tr key={d.id} style={{cursor:'default'}}><td><div className="nm">{d.name}</div><div className="id">{d.id}</div></td><td className="mc">{d.gpu}</td><td><DevPill s={d.status}/></td><td className="mc">{d.jobs.toLocaleString()}</td><td className="mc" style={{textAlign:'right',color:'var(--ok)'}}>{d.earned.toLocaleString('en-US',{maximumFractionDigits:1})}</td></tr>))}
        </tbody></table>
      </div>
      <div className="panel">
        <div className="panel-h"><h3>Payout history</h3></div>
        <table className="tbl"><thead><tr><th>Date</th><th>Tx</th><th>Type</th><th style={{textAlign:'right'}}>Amount</th></tr></thead><tbody>
          {[['Jun 08','5tH…9kQ','Claim','+1,204.0'],['Jun 01','9aB…2mF','Claim','+982.5'],['May 24','3xK…7pL','Claim','+1,231.0']].map(r=>(
            <tr key={r[1]} style={{cursor:'default'}}><td className="mc">{r[0]}</td><td className="id">{r[1]}</td><td className="mc">{r[2]}</td><td className="mc" style={{textAlign:'right',color:'var(--ok)'}}>{r[3]}</td></tr>))}
        </tbody></table>
      </div>
    </div>
  );
}

Object.assign(window,{Devices,DeviceDetail,ConnectDevice,Earnings,DevPill});