/* ParallelOS Control Plane — New Deployment (payload builder) */
const { useState:nS, useMemo:nM } = React;

function NewDeployment({go,openDep,prefill}){
  const { state, update } = useApp();
  const toast=useToast();
  const clone=prefill&&prefill.clone;
  const ptpl=prefill&&prefill.tplId&&TEMPLATES.find(t=>t.id===prefill.tplId);
  const [src,setSrc]=nS(clone?'custom':'template');
  const [tpl,setTpl]=nS(ptpl?ptpl.id:TEMPLATES[0].id);
  const [name,setName]=nS(clone?clone.name+'-copy':ptpl?ptpl.id+'-run':'');
  const [image,setImage]=nS(clone?clone.image:ptpl?ptpl.image:TEMPLATES[0].image);
  const [cmd,setCmd]=nS(clone?clone.cmd:ptpl?ptpl.cmd:TEMPLATES[0].cmd);
  const [gpu,setGpu]=nS(clone?clone.gpu:ptpl?ptpl.minGpu:'RTX 4090');
  const [count,setCount]=nS(clone?clone.gpuCount:1);
  const [region,setRegion]=nS(clone?clone.region:'us-east');
  const [maxH,setMaxH]=nS(clone?clone.maxH:2);
  const [budget,setBudget]=nS(clone?clone.budget:30);
  const [envText,setEnvText]=nS(clone?(clone.env||[]).map(e=>e.k+'='+e.v).join('\n'):'STEPS=30\nCFG=7.5');
  const [inputs,setInputs]=nS(clone?clone.inputs:'ipfs://bafy…/dataset.zip');

  const pickTpl=(id)=>{ const t=TEMPLATES.find(x=>x.id===id); setTpl(id); setImage(t.image); setCmd(t.cmd); setGpu(t.minGpu); if(!name)setName(t.id+'-run'); };

  const rate=(GPUS.find(g=>g.id===gpu)||GPUS[0]).rate;
  const estCompute=+(rate*count*maxH).toFixed(2);
  const netFee=+(estCompute*0.05).toFixed(2);
  const estMax=+(estCompute+netFee).toFixed(2);
  const env=envText.split('\n').map(l=>l.trim()).filter(Boolean).map(l=>{const i=l.indexOf('=');return{k:l.slice(0,i),v:l.slice(i+1)};});
  const draft={name:name||'untitled',image,cmd,gpu,gpuCount:count,region,maxH,budget,env,inputs};
  const valid=name.trim()&&image.trim()&&cmd.trim()&&state.balance>=netFee;

  const deploy=()=>{
    if(!valid)return;
    const id='dep_'+uid();
    const dep={...draft,id,tpl:src==='template'?tpl:null,status:'provisioning',progress:0,units:count*64,unitsDone:0,
      createdAt:Date.now(),node:null,cost:0,exitCode:null,results:null,
      logs:[{t:'00:00:01',lv:'info',msg:'manifest accepted · validating spec'}],metrics:{gpu:0,vram:'—',thr:'—'}};
    update(p=>({...p,deployments:[...p.deployments,dep],
      activity:[{ic:'layers',k:'',t:`Deployment <b>${dep.name}</b> submitted`,ts:Date.now()},...p.activity]}));
    toast({kind:'ok',msg:'Deployment submitted',sub:id+' · scheduling…'});
    openDep(id);
  };

  return (
    <div className="view">
      <div style={{display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:20,alignItems:'start'}} className="ndgrid">
        <div>
          <div className="panel"><div className="panel-b">
            <div className="field">
              <label>Source</label>
              <div className="choice" style={{gridTemplateColumns:'1fr 1fr',display:'grid'}}>
                <div className={'choice-c'+(src==='template'?' on':'')} onClick={()=>setSrc('template')}><span className="ci"><Icon n="cube"/></span><div className="cm"><h5>Template</h5><p>Pre-built app</p></div></div>
                <div className={'choice-c'+(src==='custom'?' on':'')} onClick={()=>setSrc('custom')}><span className="ci"><Icon n="terminal"/></span><div className="cm"><h5>Custom image</h5><p>Your Docker image</p></div></div>
              </div>
            </div>

            {src==='template' && <div className="field">
              <label>Template</label>
              <div className="choice">
                {TEMPLATES.map(t=>(<div key={t.id} className={'choice-c'+(tpl===t.id?' on':'')} onClick={()=>pickTpl(t.id)}>
                  <span className="ci"><Icon n={t.icon}/></span><div className="cm"><h5>{t.name}</h5><p>{t.cat} · {t.minGpu}+</p></div><span className="cr">{t.price} PLOS/h</span></div>))}
              </div>
            </div>}

            <div className="field"><label>Deployment name</label><input className="inp" value={name} onChange={e=>setName(e.target.value)} placeholder="my-render-job"/></div>
            <div className="field"><label>Container image</label><input className="inp" value={image} onChange={e=>setImage(e.target.value)} placeholder="docker.io/org/image:tag"/></div>
            <div className="field"><label>Command <span className="hint">— container entrypoint</span></label><input className="inp" value={cmd} onChange={e=>setCmd(e.target.value)}/></div>

            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
              <div className="field"><label>GPU type</label><select className="sel" value={gpu} onChange={e=>setGpu(e.target.value)}>{GPUS.map(g=><option key={g.id}>{g.id}</option>)}</select></div>
              <div className="field"><label>Region</label><select className="sel" value={region} onChange={e=>setRegion(e.target.value)}>{REGIONS.map(r=><option key={r}>{r}</option>)}</select></div>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14}}>
              <div className="field"><label>GPU count</label><div className="seg">{[1,2,4,8].map(c=><button key={c} className={count===c?'on':''} onClick={()=>setCount(c)}>{c}</button>)}</div></div>
              <div className="field"><label>Max runtime (h)</label><input className="inp" type="number" min="1" max="48" value={maxH} onChange={e=>setMaxH(+e.target.value||1)}/></div>
              <div className="field"><label>Max budget (PLOS)</label><input className="inp" type="number" min="1" value={budget} onChange={e=>setBudget(+e.target.value||1)}/></div>
            </div>
            <div className="field"><label>Input data <span className="hint">— IPFS / URL mounted at /inputs</span></label><input className="inp" value={inputs} onChange={e=>setInputs(e.target.value)}/></div>
            <div className="field" style={{marginBottom:0}}><label>Environment variables <span className="hint">— KEY=VALUE per line</span></label><textarea className="ta" value={envText} onChange={e=>setEnvText(e.target.value)}></textarea></div>
          </div></div>
        </div>

        <div style={{position:'sticky',top:80,display:'grid',gap:14}}>
          <div className="panel">
            <div className="panel-h"><h3>Manifest</h3><span className="sub">payload</span></div>
            <div className="panel-b" style={{padding:14}}><div className="codeblk" style={{maxHeight:300,fontSize:11.5}} dangerouslySetInnerHTML={{__html:manifestYaml(draft)}}></div></div>
          </div>
          <div className="panel"><div className="panel-b">
            <div className="sectitle" style={{margin:'0 0 12px'}}>Cost estimate</div>
            <div style={{display:'flex',justifyContent:'space-between',fontSize:13,padding:'7px 0',color:'var(--app-dim)'}}><span>{gpu} ×{count} · {maxH}h max</span><span className="mc">{estCompute.toFixed(2)}</span></div>
            <div style={{display:'flex',justifyContent:'space-between',fontSize:13,padding:'7px 0',color:'var(--app-dim)',borderBottom:'1px solid var(--app-border)'}}><span>Network fee (5%)</span><span className="mc">{netFee.toFixed(2)}</span></div>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',padding:'12px 0 0'}}><span style={{fontWeight:600}}>Max cost</span><span style={{fontFamily:'var(--f-display)',fontWeight:700,fontSize:20,color:'var(--accent)'}}>{estMax.toFixed(2)} <span style={{fontSize:11,color:'var(--app-dim)'}}>PLOS</span></span></div>
            <button className="b b-pri b-sm" style={{width:'100%',marginTop:16,justifyContent:'center',padding:'11px'}} disabled={!valid} onClick={deploy}>{state.balance<netFee?'Insufficient balance':'Deploy to network'}</button>
            <p style={{fontSize:11.5,color:'var(--app-faint)',textAlign:'center',marginTop:10,fontFamily:'var(--f-mono)'}}>Billed per second · capped at max budget</p>
          </div></div>
        </div>
      </div>
      <style>{`@media(max-width:980px){.ndgrid{grid-template-columns:1fr!important}.ndgrid>div:last-child{position:static!important}}`}</style>
    </div>
  );
}
Object.assign(window,{NewDeployment});