/* ParallelOS Control Plane — Login + Shell */
const { useState:uS, useEffect:uE, useRef:uR } = React;

function PhantomLogo(){return(<svg className="pi" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="6" fill="#ab9ff2"/><path d="M19 12.2c0 3.9-3.2 6.8-7.4 6.8C7.9 19 5 16.4 5 12.4 5 8.6 8 6 11.8 6 15.7 6 19 8.6 19 12.2z" fill="#fff"/><circle cx="10" cy="12" r="1.1" fill="#534bb1"/><circle cx="14" cy="12" r="1.1" fill="#534bb1"/></svg>);}

function LoginGate(){
  const { update } = useApp();
  const [connecting,setConnecting]=uS(false);
  const bg=uR(null);
  uE(()=>{ if(window.initNetwork3D&&bg.current){const i=window.initNetwork3D(bg.current,{nodes:8,interactive:true});return ()=>i&&i.stop&&i.stop();} },[]);
  const connect=async()=>{
    setConnecting(true);
    const r=await connectPhantom();
    if(!r){ setConnecting(false); return; } /* user rejected */
    setTimeout(()=>update({wallet:r.address, demo:r.demo, balance:2450.75}), r.demo?1100:200);
  };
  return (
    <div className="login">
      <div className="login-3d" ref={bg}></div>
      <canvas ref={el=>{if(el&&!el._i){el._i=1;window.initParticleNet&&window.initParticleNet(el,{count:42,link:120});}}}></canvas>
      <div className="login-card">
        <div className="lmark"><img src="assets/logo-mark.png" alt=""/><b>Parallel<span>OS</span></b></div>
        <h1>Connect to the network</h1>
        <p>Sign in with your Solana wallet to access the control plane — deploy compute, monitor your jobs and manage your provider devices.</p>
        {connecting
          ? <div className="connecting"><span className="spinner"></span> Connecting to Phantom…</div>
          : <button className="phantom-btn" onClick={connect}><PhantomLogo/> Connect Phantom</button>}
        <div className="login-steps">
          <div className="login-step"><span className="n">1</span><div>Connect your wallet here to access the dashboard.</div></div>
          <div className="login-step"><span className="n">2</span><div>To <b style={{color:'var(--app-text)'}}>provide GPU</b>, install the ParallelOS Agent on your machine and pair it.</div></div>
          <div className="login-step"><span className="n">3</span><div>To <b style={{color:'var(--app-text)'}}>use compute</b>, deploy a container or template and collect results.</div></div>
        </div>
      </div>
      <div className="login-foot">Devnet · simulated environment · <a href="index.html">← Back to website</a></div>
    </div>
  );
}

const NAV=[
  {id:'overview',label:'Overview',icon:'grid'},
  {g:'Compute'},
  {id:'deployments',label:'Deployments',icon:'layers',count:'dep'},
  {id:'new',label:'New Deployment',icon:'plus'},
  {id:'marketplace',label:'Marketplace',icon:'store'},
  {g:'Provide'},
  {id:'devices',label:'Devices',icon:'server',count:'dev'},
  {id:'connect',label:'Connect Device',icon:'cpu'},
  {g:'Account'},
  {id:'earnings',label:'Earnings',icon:'coins'},
  {id:'billing',label:'Billing',icon:'card'},
  {id:'settings',label:'Settings',icon:'gear'},
];

function Sidebar({view,go}){
  const { state, update } = useApp();
  const counts={dep:state.deployments.length, dev:state.devices.length};
  const running=state.deployments.filter(d=>d.status==='running'||d.status==='provisioning').length;
  return (
    <aside className="side">
      <div className="side-brand"><img src="assets/logo-mark.png" alt=""/><b>Parallel<span>OS</span></b></div>
      <div className="side-net"><span className="dot"></span> Network healthy · 12,418 nodes</div>
      <nav className="side-nav">
        {NAV.map((n,i)=> n.g
          ? <div className="sg" key={'g'+i}>{n.g}</div>
          : <button key={n.id} className={'nav-item'+(view===n.id?' active':'')} onClick={()=>go(n.id)}>
              <Icon n={n.icon}/>{n.label}
              {n.count&&<span className="ct">{n.id==='deployments'&&running>0?running+' ●':counts[n.count]}</span>}
            </button>)}
      </nav>
      <div className="side-wallet">
        <div className="addr"><span className="pi"></span>{shortAddr(state.wallet)}<span className="cp" title="copy"><Icon n="copy"/></span></div>
        <div className="bal"><span className="n">{state.balance.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2})}</span><span className="t">$PLOS</span></div>
        {state.demo && <div style={{fontFamily:'var(--f-mono)',fontSize:10,color:'var(--warn)',marginTop:7}}>● demo wallet</div>}
        <button className="disc" onClick={()=>update({wallet:null,balance:0})}>Disconnect</button>
      </div>
    </aside>
  );
}

function Topbar({crumbs,action}){
  return (
    <div className="topbar">
      <div className="crumb">
        {crumbs.map((c,i)=> i<crumbs.length-1
          ? <React.Fragment key={i}><span className="bc" onClick={c.go}>{c.label}</span><span style={{color:'var(--app-faint)'}}>/</span></React.Fragment>
          : <h2 key={i}>{c.label}</h2>)}
      </div>
      <div className="tact">{action}</div>
    </div>
  );
}

Object.assign(window,{LoginGate,Sidebar,Topbar,PhantomLogo});