/* ParallelOS Control Plane — Billing + Settings */
const { useState:aS } = React;

function fmtDate(ts){return new Date(ts).toLocaleDateString('en-US',{month:'short',day:'numeric'});}

/* ============ BILLING ============ */
function Billing(){
  const { state, update } = useApp();
  const toast=useToast();
  const [modal,setModal]=aS(false);
  const [amt,setAmt]=aS(1000);
  const spend=[42,68,31,90,54,77,48]; const maxS=Math.max(...spend);
  const deposit=()=>{ update(p=>({...p,balance:+(p.balance+amt).toFixed(2),invoices:p.invoices})); toast({kind:'ok',msg:'Deposit confirmed',sub:amt.toLocaleString()+' PLOS added'}); setModal(false); };
  const toggleAuto=()=>update(p=>({...p,autoReload:{...p.autoReload,on:!p.autoReload.on}}));
  return (
    <div className="view">
      <div className="grid g3" style={{marginBottom:16}}>
        <div className="metric"><div className="ml"><Icon n="wallet"/>Balance</div><div className="mv">{state.balance.toLocaleString('en-US',{maximumFractionDigits:0})}<span className="u">PLOS</span></div><button className="b b-pri b-sm" style={{marginTop:12}} onClick={()=>setModal(true)}><Icon n="plus"/>Add funds</button></div>
        <div className="metric"><div className="ml"><Icon n="chart"/>Spend (7d)</div><div className="mv">410<span className="u">PLOS</span></div><div className="mt">≈ $172 USD</div></div>
        <div className="metric"><div className="ml"><Icon n="refresh"/>Auto-reload</div><div style={{display:'flex',alignItems:'center',gap:12,marginTop:6}}><div className={'toggle'+(state.autoReload.on?' on':'')} onClick={toggleAuto} style={{position:'relative',width:44,height:25,borderRadius:13,background:state.autoReload.on?'rgba(0,208,245,.2)':'var(--app-elev)',border:'1px solid '+(state.autoReload.on?'var(--accent)':'var(--app-border-2)'),cursor:'pointer',flex:'0 0 auto'}}><i style={{position:'absolute',top:2,left:state.autoReload.on?21:2,width:19,height:19,borderRadius:'50%',background:state.autoReload.on?'var(--accent)':'var(--app-faint)',transition:'.25s'}}></i></div><div style={{fontSize:12,color:'var(--app-dim)'}}>{state.autoReload.on?`+${state.autoReload.amount} when < ${state.autoReload.threshold}`:'off'}</div></div></div>
      </div>

      <div className="cols">
        <div className="panel">
          <div className="panel-h"><h3>Usage · last 7 days</h3><span className="sub">PLOS / day</span></div>
          <div className="panel-b">
            <div style={{display:'flex',alignItems:'flex-end',gap:10,height:150,padding:'6px 0'}}>
              {spend.map((v,i)=>(<div key={i} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:8,height:'100%',justifyContent:'flex-end'}}>
                <div style={{width:'100%',maxWidth:34,height:(v/maxS*100)+'%',background:'linear-gradient(180deg,var(--accent),var(--accent-dim))',borderRadius:'5px 5px 0 0',minHeight:4}}></div>
                <span style={{fontFamily:'var(--f-mono)',fontSize:10.5,color:'var(--app-faint)'}}>{['Mon','Tue','Wed','Thu','Fri','Sat','Sun'][i]}</span>
              </div>))}
            </div>
          </div>
        </div>
        <div className="panel"><div className="panel-b">
          <div className="sectitle" style={{margin:'0 0 12px'}}>Payment method</div>
          <div style={{display:'flex',alignItems:'center',gap:12,padding:'12px 14px',border:'1px solid var(--app-border)',borderRadius:9,background:'var(--app-panel-2)'}}>
            <span className="fic" style={{width:34,height:34,borderRadius:8,background:'var(--app-elev)',display:'grid',placeItems:'center',color:'#ab9ff2'}}><PhantomLogo/></span>
            <div style={{flex:1}}><div style={{fontSize:13.5,color:'var(--app-text)',fontWeight:600}}>Phantom · Solana</div><div style={{fontFamily:'var(--f-mono)',fontSize:11.5,color:'var(--app-faint)'}}>{shortAddr(state.wallet||'')}</div></div>
            <span className="s s-ok"><span className="d"></span>Connected</span>
          </div>
          <p style={{fontSize:12,color:'var(--app-faint)',marginTop:12,lineHeight:1.6}}>Compute is billed per second in $PLOS and settled from your balance. Top up manually or enable auto-reload.</p>
        </div></div>
      </div>

      <div className="panel" style={{marginTop:16}}>
        <div className="panel-h"><h3>Invoices</h3></div>
        <table className="tbl"><thead><tr><th>Invoice</th><th>Date</th><th>Description</th><th style={{textAlign:'right'}}>Amount</th><th></th></tr></thead><tbody>
          {state.invoices.map(iv=>(<tr key={iv.id} style={{cursor:'default'}}><td className="mc">{iv.id}</td><td className="mc">{fmtDate(iv.date)}</td><td>{iv.desc}</td><td className="mc" style={{textAlign:'right'}}>{iv.amt.toFixed(2)} PLOS</td><td style={{textAlign:'right'}}><button className="b b-ghost b-sm" onClick={()=>toast({kind:'info',msg:'Invoice downloaded',sub:iv.id+'.pdf'})}><Icon n="download"/></button></td></tr>))}
        </tbody></table>
      </div>

      {modal && <div className="modal-bg" onClick={e=>{if(e.target.className==='modal-bg')setModal(false);}}>
        <div className="modal" style={{width:'min(440px,96vw)'}}>
          <div className="modal-h"><h3>Add funds</h3><button className="modal-x" onClick={()=>setModal(false)}>×</button></div>
          <div className="modal-b">
            <div className="field"><label>Amount (PLOS)</label><input className="inp" type="number" value={amt} onChange={e=>setAmt(+e.target.value||0)}/></div>
            <div className="seg" style={{marginBottom:14}}>{[250,1000,5000].map(a=><button key={a} className={amt===a?'on':''} onClick={()=>setAmt(a)}>{a.toLocaleString()}</button>)}</div>
            <div style={{display:'flex',justifyContent:'space-between',fontSize:13,color:'var(--app-dim)',padding:'8px 0',borderTop:'1px solid var(--app-border)'}}><span>≈ USD</span><span className="mc">${(amt*0.42).toLocaleString('en-US',{maximumFractionDigits:2})}</span></div>
          </div>
          <div className="modal-f"><button className="b b-sec" onClick={()=>setModal(false)}>Cancel</button><button className="b b-pri" onClick={deposit}><PhantomLogo/>Confirm in Phantom</button></div>
        </div>
      </div>}
    </div>
  );
}

/* ============ SETTINGS ============ */
function maskKey(k){return k.slice(0,12)+'•'.repeat(16)+k.slice(-4);}
function Settings(){
  const { state, update } = useApp();
  const toast=useToast();
  const [reveal,setReveal]=aS({});
  const [modal,setModal]=aS(false);
  const [kname,setKname]=aS('');
  const genKey=()=>{ if(!kname.trim())return; const key={id:'k_'+uid(4),name:kname.trim(),key:'plos_sk_live_'+uid(8)+uid(8),created:Date.now(),last:null}; update(p=>({...p,apiKeys:[...p.apiKeys,key]})); toast({kind:'ok',msg:'API key created',sub:kname}); setKname(''); setModal(false); };
  const revoke=(id)=>{ update(p=>({...p,apiKeys:p.apiKeys.filter(k=>k.id!==id)})); toast({kind:'info',msg:'API key revoked'}); };
  return (
    <div className="view">
      <div className="cols">
        <div style={{display:'grid',gap:16}}>
          <div className="panel">
            <div className="panel-h"><h3>API keys</h3><button className="b b-pri b-sm" onClick={()=>setModal(true)}><Icon n="plus"/>New key</button></div>
            <table className="tbl"><thead><tr><th>Name</th><th>Key</th><th>Last used</th><th></th></tr></thead><tbody>
              {state.apiKeys.map(k=>(<tr key={k.id} style={{cursor:'default'}}>
                <td className="nm">{k.name}<div className="id">created {fmtDate(k.created)}</div></td>
                <td className="mc" style={{fontSize:11.5}}>{reveal[k.id]?k.key:maskKey(k.key)} <span style={{cursor:'pointer',color:'var(--app-faint)',marginLeft:6}} onClick={()=>setReveal(r=>({...r,[k.id]:!r[k.id]}))}>{reveal[k.id]?'hide':'show'}</span></td>
                <td className="mc">{k.last?ago(k.last):'never'}</td>
                <td style={{textAlign:'right',whiteSpace:'nowrap'}}><button className="b b-ghost b-sm" onClick={()=>toast({kind:'info',msg:'Key copied'})}><Icon n="copy"/></button><button className="b b-danger b-sm" onClick={()=>revoke(k.id)}><Icon n="trash"/></button></td>
              </tr>))}
            </tbody></table>
          </div>

          <div className="panel">
            <div className="panel-h"><h3>SDK quickstart</h3><span className="sub">python</span></div>
            <div className="panel-b">
              <div className="codeblk"><span className="c"># pip install parallelos</span><br/><span className="k">from</span> parallelos <span className="k">import</span> Client<br/><br/>client = <span className="n">Client</span>(api_key=<span className="s">"plos_sk_live_…"</span>)<br/>job = client.deployments.<span className="n">create</span>(<br/>&nbsp;&nbsp;image=<span className="s">"docker.io/parallelos/comfyui:2.4"</span>,<br/>&nbsp;&nbsp;gpu=<span className="s">"RTX 4090"</span>, count=<span className="n">2</span>,<br/>&nbsp;&nbsp;inputs=<span className="s">"ipfs://…/refs.zip"</span>,<br/>)<br/><span className="k">print</span>(job.<span className="n">wait</span>().results)  <span className="c"># → output artifacts</span></div>
              <div style={{display:'flex',gap:10,marginTop:14}}><a href="docs.html#api" className="b b-sec b-sm"><Icon n="doc"/>API reference</a><button className="b b-ghost b-sm" onClick={()=>toast({kind:'info',msg:'Snippet copied'})}><Icon n="copy"/>Copy</button></div>
            </div>
          </div>
        </div>

        <div style={{display:'grid',gap:16}}>
          <div className="panel"><div className="panel-b">
            <div className="sectitle" style={{margin:'0 0 12px'}}>Account</div>
            <div className="kv">
              <div className="k">Wallet</div><div className="v">{shortAddr(state.wallet||'')}</div>
              <div className="k">Network</div><div className="v">Solana · devnet</div>
              <div className="k">Token</div><div className="v">$PLOS (SPL)</div>
              <div className="k">Plan</div><div className="v">Pay-as-you-go</div>
            </div>
          </div></div>
          <div className="panel"><div className="panel-b">
            <div className="sectitle" style={{margin:'0 0 12px'}}>Notifications</div>
            {[['Deployment completed',true],['Deployment failed',true],['Low balance',true],['Device offline',false]].map(([l,on])=>(
              <div key={l} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'9px 0',borderBottom:'1px solid var(--app-border)'}}><span style={{fontSize:13,color:'var(--app-dim)'}}>{l}</span>
                <div style={{position:'relative',width:40,height:23,borderRadius:12,background:on?'rgba(0,208,245,.2)':'var(--app-elev)',border:'1px solid '+(on?'var(--accent)':'var(--app-border-2)')}}><i style={{position:'absolute',top:2,left:on?19:2,width:17,height:17,borderRadius:'50%',background:on?'var(--accent)':'var(--app-faint)'}}></i></div></div>))}
          </div></div>
        </div>
      </div>

      {modal && <div className="modal-bg" onClick={e=>{if(e.target.className==='modal-bg')setModal(false);}}>
        <div className="modal" style={{width:'min(440px,96vw)'}}>
          <div className="modal-h"><h3>Create API key</h3><button className="modal-x" onClick={()=>setModal(false)}>×</button></div>
          <div className="modal-b"><div className="field" style={{marginBottom:0}}><label>Key name</label><input className="inp" autoFocus value={kname} onChange={e=>setKname(e.target.value)} placeholder="e.g. production"/></div></div>
          <div className="modal-f"><button className="b b-sec" onClick={()=>setModal(false)}>Cancel</button><button className="b b-pri" disabled={!kname.trim()} onClick={genKey}>Create key</button></div>
        </div>
      </div>}
    </div>
  );
}
Object.assign(window,{Billing,Settings});