const { Icon:ECIcon, Badge:ECBadge } = window.KKPMarineDigitalDesignSystem_4fef83;

const EC_LOCATIONS = [
  {id:'jateng',label:'Jawa Tengah · area contoh',lat:-7.15,lon:110.25},
  {id:'kaltim',label:'Kalimantan Timur · area contoh',lat:-1.1,lon:117.25},
  {id:'papuabarat',label:'Papua Barat · area contoh',lat:-1.4,lon:132.6},
];

function ecWmsLayer(WebTileLayerCtor, base, layerName, title){
  const C=WebTileLayerCtor.createSubclass({properties:{layerName:null,base:null},getTileUrl:function(level,row,col){return window.tileToWmsUrl(this.base,this.layerName,level,row,col,this.tileInfo.size[0]);}});
  const lods=[];for(let i=0;i<20;i++){const resolution=156543.03392804097/Math.pow(2,i);lods.push({level:i,resolution,scale:resolution*3779.5275590551185});}
  return new C({title,layerName,base,urlTemplate:base+'?tile',tileInfo:{size:[256,256],dpi:96,format:'png32',origin:{x:-20037508.342787,y:20037508.342787},spatialReference:{wkid:102100},lods},fullExtent:{xmin:9000000,ymin:-1700000,xmax:17200000,ymax:1050000,spatialReference:{wkid:102100}},spatialReference:{wkid:102100}});
}

function OmsEvikaCarbon({go,initialMode='carbon',singleApp=false}){
  const mapRef=React.useRef(null), arc=React.useRef({});
  const [mode,setMode]=React.useState(initialMode);
  // Muat dua layer inti saja saat pertama dibuka. Layer WMS lain tetap tersedia
  // tetapi baru meminta tile saat user mengaktifkannya.
  const [layers,setLayers]=React.useState({mangrove:true,seagrass:false,coral:false,mpa:true,province:false});
  const [rows,setRows]=React.useState([]);
  const [locationId,setLocationId]=React.useState('jateng');
  const [analysis,setAnalysis]=React.useState(null);
  const [analysisState,setAnalysisState]=React.useState('idle');
  const [analysisError,setAnalysisError]=React.useState('');
  const [selectedEvika,setSelectedEvika]=React.useState(null);
  const [query,setQuery]=React.useState('');
  const [mapReady,setMapReady]=React.useState(false);

  React.useEffect(()=>{
    let active=true;
    const timeout=setTimeout(()=>{if(active&&!rows.length)setRows([]);},7000);
    window.fetchEvikaAreaValue(2025).then(r=>{if(active)setRows(r||[]);}).catch(()=>{if(active)setRows([]);}).finally(()=>clearTimeout(timeout));
    return()=>{active=false;clearTimeout(timeout);};
  },[]);
  React.useEffect(()=>{
    if(!mapRef.current||!window.require)return;let cancelled=false;
    window.require(['esri/Map','esri/views/MapView','esri/layers/WebTileLayer','esri/layers/GraphicsLayer','esri/Graphic'],(Map,MapView,WebTileLayer,GraphicsLayer,Graphic)=>{
      if(cancelled)return;
      const base=window.SIDAKO_GIS_BASE+'/oceanaccounts/wms';
      const wms={
        mangrove:ecWmsLayer(WebTileLayer,base,window.ECOSYSTEM_LAYERS.mangrove[2025],'Mangrove 2025 · SIDAKO'),
        seagrass:ecWmsLayer(WebTileLayer,base,window.ECOSYSTEM_LAYERS.seagrass[2025],'Lamun 2025 · SIDAKO'),
        coral:ecWmsLayer(WebTileLayer,base,window.ECOSYSTEM_LAYERS.coral[2025],'Terumbu 2025 · SIDAKO'),
        mpa:ecWmsLayer(WebTileLayer,window.SIDAKO_GIS_BASE+'/konservasi/wms','konservasi:data_kk_2025','Kawasan Konservasi 2025'),
        province:ecWmsLayer(WebTileLayer,base,'oceanaccounts:administrative_provinces','Batas Provinsi'),
      };
      Object.keys(wms).forEach(k=>wms[k].visible=layers[k]);
      const aoiLayer=new GraphicsLayer({title:'Area analisis'});
      const map=new Map({basemap:'satellite',layers:[wms.province,wms.mpa,wms.coral,wms.seagrass,wms.mangrove,aoiLayer]});
      const view=new MapView({container:mapRef.current,map,center:[118,-2.5],zoom:5,constraints:{snapToZoom:false},popupEnabled:false});view.ui.remove('zoom');
      view.when(()=>!cancelled&&setMapReady(true));arc.current={view,wms,aoiLayer,Graphic};
    });
    return()=>{cancelled=true;arc.current.view?.destroy();arc.current={};};
  },[]);
  React.useEffect(()=>{if(!mapReady)return;Object.keys(layers).forEach(k=>{if(arc.current.wms[k])arc.current.wms[k].visible=layers[k];});},[layers,mapReady]);

  const runAnalysis=async()=>{
    const loc=EC_LOCATIONS.find(x=>x.id===locationId),box=window.sampleBoxAround(loc.lat,loc.lon,.4);
    setAnalysisState('submitting');setAnalysisError('');setAnalysis(null);
    const a=arc.current;a.aoiLayer?.removeAll();
    if(a.Graphic){a.aoiLayer.add(new a.Graphic({geometry:{type:'polygon',rings:[box.ring]},symbol:{type:'simple-fill',color:[175,212,34,.13],outline:{color:[175,212,34],width:2}}}));a.view.goTo({target:{type:'polygon',rings:[box.ring]},zoom:9},{duration:700});}
    try{
      const submitted=await window.submitBlueCarbonAnalysis(box.geojson);setAnalysisState('processing');
      const job=await window.pollBlueCarbonJob(submitted.job_id,{maxTries:25,intervalMs:1800});
      const payload=job.result||job.partial_result;if(job.status==='failed'||!payload)throw new Error(job.error||'SIDAKO tidak mengembalikan hasil.');
      const year=payload.primary_year||Object.keys(payload.baselines||{})[0],baseline=(payload.baselines||{})[year]||{};
      setAnalysis({year,location:loc.label,mangrove:baseline.mangrove||{},seagrass:baseline.seagrass||{},coral:baseline.coral||{},raw:payload});setAnalysisState('done');
    }catch(e){setAnalysisState('error');setAnalysisError(e.message||String(e));}
  };

  const counts=rows.reduce((o,r)=>(o[r.status]=(o[r.status]||0)+1,o),{});
  const avg=rows.length?rows.reduce((n,r)=>n+r.score,0)/rows.length:0;
  const top=[...rows].sort((a,b)=>b.score-a.score).slice(0,6);
  const filtered=rows.filter(r=>!query||r.name.toLowerCase().includes(query.toLowerCase())).sort((a,b)=>b.score-a.score).slice(0,40);
  const mg=analysis?.mangrove||{},sg=analysis?.seagrass||{};
  const total=(mg.total_carbon_tc||0)+(sg.total_carbon_tc||0);

  const appTitle=mode==='evika'?'Dashboard EVIKA':'Blue Carbon Intelligence';
  const appSubtitle=mode==='evika'?'Efektivitas pengelolaan kawasan konservasi · SIDAKO KKP':'Akuntansi ekosistem karbon biru · SIDAKO Ocean Accounts';
  return <div className="calcite-mode-dark" style={{height:'calc(100vh - 60px)',position:'relative',overflow:'hidden',background:'#061827',color:'#fff'}}>
    <div ref={mapRef} style={{position:'absolute',inset:'58px 360px 190px 282px'}}/>
    <header style={ecHeader()}><button onClick={()=>go('apps')} style={ecIconButton()} aria-label="Kembali ke galeri aplikasi"><ECIcon name="chevron-left" size={15} style={{filter:'invert(1)'}}/></button><div style={{width:30,height:30,borderRadius:'50%',display:'grid',placeItems:'center',background:mode==='evika'?'linear-gradient(135deg,#e8c84c,#c98254)':'linear-gradient(135deg,#afd422,#009ee8)',color:'#071827',fontSize:10,fontWeight:900}}>{mode==='evika'?'EV':'BC'}</div><div><b style={{fontSize:14}}>{appTitle}</b><div style={{fontSize:9,color:'rgba(255,255,255,.48)'}}>{appSubtitle}</div></div>{!singleApp&&<div style={{display:'flex',gap:4,marginLeft:20}}>{[['carbon','Blue Carbon'],['evika','EVIKA 2025']].map(([id,l])=><button key={id} onClick={()=>setMode(id)} style={ecModeButton(mode===id)}>{l}</button>)}</div>}<span style={{marginLeft:'auto',fontSize:8.5,color:'#82e1ad'}}>● SIDAKO layers connected</span><ECBadge tone="neutral">ArcGIS Maps SDK 4.30</ECBadge></header>

    <aside style={{...ecPanel(),left:12,top:70,bottom:12,width:258}}><div style={ecPanelHead()}><b>Map layers</b><small>Data sumber resmi</small></div><div style={{padding:10,overflow:'auto'}}>{[['mangrove','Mangrove 2025','#3ad07f'],['seagrass','Lamun 2025','#39b7d8'],['coral','Terumbu 2025','#ff7752'],['mpa','Kawasan konservasi 2025','#d1ea61'],['province','Batas provinsi','#fff']].map(([id,l,c])=><label key={id} style={{display:'flex',alignItems:'center',gap:8,padding:'7px 0',fontSize:9.5,cursor:'pointer'}}><input type="checkbox" checked={layers[id]} onChange={()=>setLayers(s=>({...s,[id]:!s[id]}))}/><span style={{width:10,height:10,borderRadius:2,background:c}}/><span>{l}</span></label>)}<div style={ecSection()}>Sumber</div><SourceCard title="SIDAKO GeoServer" detail="WMS oceanaccounts & konservasi" status="live"/><SourceCard title="SIDAKO Ocean Accounts" detail="Analisis karbon per poligon" status="on demand"/><SourceCard title="EVIKA" detail={'Snapshot '+window.EVIKA_SNAPSHOT_DATE} status="127 kawasan"/><div style={{marginTop:12,padding:9,borderRadius:6,background:'rgba(89,189,232,.08)',fontSize:8,lineHeight:1.5,color:'rgba(255,255,255,.52)'}}>Peta menampilkan layer SIDAKO aktual. Nilai Blue Carbon baru muncul setelah analisis area selesai; tidak ada KPI sintetis.</div></div></aside>

    <aside style={{...ecPanel(),right:12,top:70,bottom:12,width:336}}>{mode==='carbon'?<CarbonPanel analysis={analysis} state={analysisState} error={analysisError} locationId={locationId} setLocationId={setLocationId} run={runAnalysis} total={total} mg={mg} sg={sg}/>:<EvikaPanel rows={filtered} counts={counts} avg={avg} query={query} setQuery={setQuery} selected={selectedEvika} setSelected={setSelectedEvika}/>}</aside>

    <section style={{position:'absolute',left:282,right:360,bottom:12,height:164,display:'grid',gridTemplateColumns:mode==='carbon'?'1.25fr 1fr 1fr':'1.2fr 1fr',gap:8}}>{mode==='carbon'?<React.Fragment><ChartCard title="Komposisi stok karbon" subtitle={analysis?analysis.location:'Menunggu analisis'}><CarbonBars mg={mg} sg={sg}/></ChartCard><ChartCard title="Luas habitat terdeteksi" subtitle={analysis?'Baseline '+analysis.year:'SIDAKO Ocean Accounts'}><AreaBars mg={mg} sg={sg}/></ChartCard><ChartCard title="Keterlacakan data" subtitle="Tidak ada estimasi buatan"><Trace analysis={analysis} state={analysisState}/></ChartCard></React.Fragment>:<React.Fragment><ChartCard title="Distribusi status EVIKA" subtitle={'127 kawasan · snapshot '+window.EVIKA_SNAPSHOT_DATE}><EvikaDistribution counts={counts}/></ChartCard><ChartCard title="Peringkat nasional" subtitle="Nilai akhir EVIKA 2025"><TopEvika rows={top}/></ChartCard></React.Fragment>}</section>
  </div>;
}

function CarbonPanel({analysis,state,error,locationId,setLocationId,run,total,mg,sg}){const busy=['submitting','processing'].includes(state);return <div style={{height:'100%',display:'flex',flexDirection:'column'}}><div style={ecPanelHead()}><b>Blue Carbon Analysis</b><small>Analisis poligon on-demand</small></div><div style={{padding:11,overflow:'auto'}}><label style={{fontSize:8,color:'rgba(255,255,255,.45)'}}>AREA CONTOH ANALISIS</label><select value={locationId} onChange={e=>setLocationId(e.target.value)} style={ecSelect()}>{EC_LOCATIONS.map(x=><option key={x.id} value={x.id}>{x.label}</option>)}</select><button disabled={busy} onClick={run} style={{width:'100%',border:0,borderRadius:16,padding:8,background:busy?'#52626d':'var(--kkp-lime-500)',color:'#111747',fontWeight:800,fontSize:9,cursor:busy?'wait':'pointer'}}>{busy?(state==='submitting'?'Mengirim ke SIDAKO…':'Memproses baseline…'):'Analisis area melalui SIDAKO'}</button>{error&&<div style={{marginTop:8,padding:8,borderRadius:5,background:'rgba(255,92,92,.1)',fontSize:8,color:'#ffadad'}}>{error}</div>}<div style={ecSection()}>Key indicators</div><div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:7}}><Kpi label="Total stok karbon" value={analysis?fmt(total):'—'} unit="tC" color="#afd422"/><Kpi label="Tahun baseline" value={analysis?analysis.year:'—'} unit="SIDAKO" color="#59bde8"/><Kpi label="Mangrove" value={analysis?fmt(mg.total_area_ha||0):'—'} unit="ha" color="#45ce82"/><Kpi label="Lamun" value={analysis?fmt(sg.total_area_ha||0):'—'} unit="ha" color="#39b7d8"/></div>{analysis&&<React.Fragment><div style={ecSection()}>Rincian hasil</div><DataRow k="Karbon mangrove" v={fmt(mg.total_carbon_tc||0)+' tC'}/><DataRow k="Biomassa mangrove" v={fmt(mg.biomass_carbon_tc||0)+' tC'}/><DataRow k="Karbon tanah" v={fmt(mg.soil_carbon_tc||0)+' tC'}/><DataRow k="Karbon lamun" v={fmt(sg.total_carbon_tc||0)+' tC'}/></React.Fragment>}<div style={{marginTop:11,fontSize:7.8,lineHeight:1.5,color:'rgba(255,255,255,.4)'}}>Area contoh adalah kotak ±0,4° untuk demonstrasi workflow, bukan batas administratif. Hasil numerik dihitung langsung oleh SIDAKO.</div></div></div>}

function EvikaPanel({rows,counts,avg,query,setQuery,selected,setSelected}){return <div style={{height:'100%',display:'flex',flexDirection:'column'}}><div style={ecPanelHead()}><b>EVIKA 2025</b><small>Efektivitas pengelolaan kawasan</small></div><div style={{padding:10,borderBottom:'1px solid rgba(255,255,255,.08)'}}><div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:6}}><Kpi label="Rata-rata" value={avg.toFixed(1)} unit="skor" color="#afd422"/><Kpi label="Berkelanjutan" value={counts.berkelanjutan||0} unit="kawasan" color="#e8c84c"/><Kpi label="Total" value={Object.values(counts).reduce((a,b)=>a+b,0)} unit="kawasan" color="#59bde8"/></div><input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Cari kawasan konservasi" style={{...ecSelect(),boxSizing:'border-box'}}/></div><div style={{padding:8,overflow:'auto'}}>{rows.map((r,i)=><button key={r.id} onClick={()=>setSelected(selected?.id===r.id?null:r)} style={{width:'100%',display:'grid',gridTemplateColumns:'22px 1fr auto',gap:7,alignItems:'center',border:selected?.id===r.id?'1px solid rgba(175,212,34,.5)':'1px solid rgba(255,255,255,.07)',background:selected?.id===r.id?'rgba(175,212,34,.08)':'rgba(255,255,255,.025)',color:'#fff',borderRadius:5,padding:8,marginBottom:5,textAlign:'left',cursor:'pointer'}}><span style={{fontSize:8,color:'rgba(255,255,255,.4)'}}>{i+1}</span><span><b style={{display:'block',fontSize:8.5,lineHeight:1.3}}>{r.name}</b><small style={{fontSize:7.3,color:statusColor(r.status)}}>{window.EVIKA_STATUS_LABEL[r.status]} · {fmt(r.luasHa)} ha</small></span><b style={{fontSize:11,color:statusColor(r.status)}}>{r.score.toFixed(1)}</b></button>)}</div></div>}

function SourceCard({title,detail,status}){return <div style={{padding:'7px 0',borderBottom:'1px solid rgba(255,255,255,.06)',display:'flex',justifyContent:'space-between',gap:6}}><span><b style={{display:'block',fontSize:9}}>{title}</b><small style={{fontSize:7.5,color:'rgba(255,255,255,.38)'}}>{detail}</small></span><span style={{fontSize:7.5,color:'#82e1ad'}}>{status}</span></div>}
function Kpi({label,value,unit,color}){return <div style={{padding:8,border:'1px solid rgba(255,255,255,.07)',borderRadius:6,background:'rgba(255,255,255,.035)'}}><small style={{display:'block',fontSize:7.3,color:'rgba(255,255,255,.43)'}}>{label}</small><b style={{display:'block',fontSize:15,color,marginTop:3}}>{value}</b><small style={{fontSize:7,color:'rgba(255,255,255,.38)'}}>{unit}</small></div>}
function DataRow({k,v}){return <div style={{display:'flex',justifyContent:'space-between',gap:8,padding:'6px 0',borderBottom:'1px solid rgba(255,255,255,.06)',fontSize:8.5}}><span style={{color:'rgba(255,255,255,.45)'}}>{k}</span><b>{v}</b></div>}
function ChartCard({title,subtitle,children}){return <div style={{border:'1px solid rgba(255,255,255,.1)',background:'rgba(6,24,39,.94)',borderRadius:7,padding:10,overflow:'hidden'}}><b style={{fontSize:9}}>{title}</b><small style={{display:'block',fontSize:7.5,color:'rgba(255,255,255,.38)',marginTop:2}}>{subtitle}</small>{children}</div>}
function CarbonBars({mg,sg}){const vals=[['Mangrove',mg.total_carbon_tc||0,'#45ce82'],['Lamun',sg.total_carbon_tc||0,'#39b7d8']],max=Math.max(1,...vals.map(x=>x[1]));return <div style={{marginTop:12}}>{vals.map(([l,v,c])=><div key={l} style={{marginBottom:10}}><div style={{display:'flex',justifyContent:'space-between',fontSize:8}}><span>{l}</span><b>{v?fmt(v)+' tC':'—'}</b></div><div style={{height:7,background:'rgba(255,255,255,.07)',borderRadius:4,marginTop:4}}><div style={{height:'100%',width:(v/max*100)+'%',background:c,borderRadius:4}}/></div></div>)}</div>}
function AreaBars({mg,sg}){const vals=[['Mangrove',mg.total_area_ha||0,'#45ce82'],['Lamun',sg.total_area_ha||0,'#39b7d8']],max=Math.max(1,...vals.map(x=>x[1]));return <div style={{marginTop:12}}>{vals.map(([l,v,c])=><div key={l} style={{marginBottom:10}}><div style={{display:'flex',justifyContent:'space-between',fontSize:8}}><span>{l}</span><b>{v?fmt(v)+' ha':'—'}</b></div><div style={{height:7,background:'rgba(255,255,255,.07)',borderRadius:4,marginTop:4}}><div style={{height:'100%',width:(v/max*100)+'%',background:c,borderRadius:4}}/></div></div>)}</div>}
function Trace({analysis,state}){return <div style={{marginTop:12}}>{[['WMS habitat','connected'],['Area-analysis API',state==='done'?'completed':state],['Baseline',analysis?String(analysis.year):'waiting']].map(([a,b])=><div key={a} style={{display:'flex',justifyContent:'space-between',padding:'7px 0',borderBottom:'1px solid rgba(255,255,255,.06)',fontSize:8}}><span>{a}</span><b style={{color:b==='completed'||b==='connected'?'#82e1ad':'#ffd65c'}}>{b}</b></div>)}</div>}
function EvikaDistribution({counts}){const total=Math.max(1,Object.values(counts).reduce((a,b)=>a+b,0));return <div style={{display:'flex',height:60,alignItems:'flex-end',gap:12,marginTop:15}}>{[['berkelanjutan','#e8c84c'],['optimum','#9ab8c9'],['minimum','#c98254']].map(([s,c])=><div key={s} style={{flex:1,textAlign:'center'}}><div style={{height:Math.max(3,(counts[s]||0)/total*120),background:c,borderRadius:'4px 4px 0 0'}}/><small style={{fontSize:7}}>{s}<br/><b>{counts[s]||0}</b></small></div>)}</div>}
function TopEvika({rows}){return <div style={{marginTop:8}}>{rows.slice(0,4).map((r,i)=><div key={r.id} style={{display:'grid',gridTemplateColumns:'16px 1fr auto',gap:6,padding:'5px 0',fontSize:7.5,borderBottom:'1px solid rgba(255,255,255,.05)'}}><span>{i+1}</span><span style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{r.name}</span><b style={{color:'#e8c84c'}}>{r.score.toFixed(1)}</b></div>)}</div>}
function fmt(v){return Number(v||0).toLocaleString('id-ID',{maximumFractionDigits:1});}
function statusColor(s){return s==='berkelanjutan'?'#e8c84c':s==='optimum'?'#b6cfdd':'#e2a477';}
function ecPanel(){return {position:'absolute',zIndex:7,display:'flex',flexDirection:'column',background:'rgba(6,24,39,.94)',border:'1px solid rgba(255,255,255,.11)',borderRadius:8,overflow:'hidden',boxShadow:'0 10px 30px rgba(0,0,0,.32)'};}
function ecPanelHead(){return {display:'flex',justifyContent:'space-between',alignItems:'center',padding:11,borderBottom:'1px solid rgba(255,255,255,.08)',fontSize:10};}
function ecHeader(){return {position:'absolute',zIndex:8,left:0,right:0,top:0,height:58,display:'flex',alignItems:'center',gap:11,padding:'0 14px',background:'rgba(6,24,39,.97)',borderBottom:'1px solid rgba(255,255,255,.11)'};}
function ecIconButton(){return {width:30,height:30,border:'1px solid rgba(255,255,255,.13)',background:'rgba(255,255,255,.06)',borderRadius:6,display:'grid',placeItems:'center',cursor:'pointer'};}
function ecModeButton(active){return {border:active?'1px solid rgba(175,212,34,.5)':'1px solid rgba(255,255,255,.1)',background:active?'rgba(175,212,34,.14)':'transparent',color:active?'#d9ef78':'rgba(255,255,255,.55)',borderRadius:14,padding:'6px 10px',fontSize:8.5,fontWeight:700,cursor:'pointer'};}
function ecSection(){return {fontSize:7.5,fontWeight:800,letterSpacing:'.09em',textTransform:'uppercase',color:'rgba(255,255,255,.38)',margin:'14px 0 6px'};}
function ecSelect(){return {width:'100%',margin:'6px 0 8px',padding:'7px 8px',border:'1px solid rgba(255,255,255,.12)',borderRadius:5,background:'#102b3c',color:'#fff',fontSize:8.5};}

Object.assign(window,{OmsEvikaCarbon});