const { Button, Badge, Card, Icon, Tag, DataTable, StatusDot, KpiCard, Sparkline, BarChart, InsightCard, Checkbox, Input,
        ActionBar, ShellPanel, LayerList, Legend, MapPopup, MapScaleBar, CalciteNotice, FilterSlider, BasemapToggle } = window.KKPMarineDigitalDesignSystem_4fef83;

function ResultHeader({ eyebrow, title, badge, actions }){
  return (
    <div className="oms-result-header" style={{display:'flex',alignItems:'flex-end',justifyContent:'space-between',gap:'var(--space-6)',marginBottom:'var(--space-6)'}}>
      <div>
        <div style={{display:'flex',gap:'var(--space-3)',alignItems:'center'}}>
          <span className="kkp-eyebrow">{eyebrow}</span>{badge}
        </div>
        <h1 style={{margin:'6px 0 0'}}>{title}</h1>
      </div>
      <div style={{display:'flex',gap:'var(--space-3)'}}>{actions}</div>
    </div>
  );
}

/* ---------- data branch: dataset / answer with citation ---------- */
function OmsDataset({ go, request }){
  return (
    <div className="oms-workflow-page oms-dataset-page" style={{maxWidth:1180,margin:'0 auto',padding:'var(--space-8) var(--layout-gutter)'}}>
      <ResultHeader eyebrow="Keluaran · Data" badge={<Badge tone="good" dot>Bersitasi lengkap</Badge>}
        title={(request && request.title) || 'Kawasan konservasi & anomali SST — WPP 715'}
        actions={<>
          <Button variant="secondary" iconStart="share">Bagikan</Button>
          <Button variant="secondary" iconStart="download">Unduh CSV</Button>
          <Button variant="primary" iconEnd="chevron-right" onClick={()=>go('approval',{...request,kind:'data'})}>Lanjutkan ke pengiriman</Button>
        </>} />
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'var(--space-4)',marginBottom:'var(--space-4)'}}>
        <KpiCard label="Luas kawasan konservasi" value="4,12" unit="juta ha" trend={3.4} trendLabel="YoY" />
        <KpiCard label="Anomali SST rata-rata" value="+1,8" unit="°C" trend={0.6} trendLabel="8 pekan" tone="warn" series={[0.4,0.7,0.9,1.2,1.4,1.6,1.8]} />
        <KpiCard label="Cakupan citra valid" value="92" unit="%" tone="good" note="Tutupan awan <8%" />
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:'var(--space-4)'}}>
        <Card title="Tabel hasil — kawasan konservasi WPP 715" padded={false}
          footer="Sumber: Kawasan Konservasi Perairan Nasional 2026 (Ditjen Pengelolaan Kelautan), diperbarui 01/09/2026">
          <DataTable dense
            columns={[{key:'nama',label:'Kawasan'},{key:'kab',label:'Kabupaten'},{key:'luas',label:'Luas (ha)',align:'right'},{key:'sst',label:'Anomali SST',align:'right'},{key:'st',label:'Status',render:r=><StatusDot tone={r.tone} label={r.st} />}]}
            rows={[
              {nama:'TWP Kepulauan Togean',kab:'Tojo Una-Una',luas:'362.605',sst:'+2,1 °C',st:'Perhatian',tone:'warn'},
              {nama:'KKPD Teluk Tomini Utara',kab:'Parigi Moutong',luas:'148.220',sst:'+1,9 °C',st:'Perhatian',tone:'warn'},
              {nama:'TWP Kepulauan Banggai',kab:'Banggai Laut',luas:'246.100',sst:'+1,2 °C',st:'Normal',tone:'good'},
              {nama:'KKPD Morowali',kab:'Morowali',luas:'98.480',sst:'+0,8 °C',st:'Normal',tone:'good'}]} />
        </Card>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-4)'}}>
          <Card title="Sitasi & provenans">
            {[['Kawasan Konservasi Perairan Nasional 2026','Ditjen Pengelolaan Kelautan · vektor · 01/09/2026 · lisensi terbuka'],
              ['Anomali SST Harian (MODIS/Aqua)','Pusdatin KKP · raster 4 km · 17/09/2026 06:00 WIB'],
              ['Batas WPP-NRI','Pusdatin KKP · vektor · 12/08/2026']].map(([t,m],i)=>(
              <div key={t} style={{display:'flex',gap:'var(--space-3)',alignItems:'flex-start',paddingBottom:'var(--space-3)',marginBottom:'var(--space-3)',borderBottom:i<2?'1px solid var(--border-subtle)':'none'}}>
                <span style={{width:20,height:20,flex:'none',borderRadius:'var(--radius-xs)',background:'var(--kkp-indigo-100)',color:'var(--kkp-indigo-700)',fontSize:10,fontWeight:700,display:'flex',alignItems:'center',justifyContent:'center'}}>{i+1}</span>
                <span style={{fontSize:'var(--type-body-sm-size)'}}>
                  <a href="#" onClick={e=>e.preventDefault()} style={{fontWeight:600}}>{t}</a>
                  <span style={{display:'block',color:'var(--text-muted)',fontSize:'var(--type-caption-size)'}}>{m}</span>
                </span>
              </div>
            ))}
          </Card>
          <Card title="Format unduhan">
            <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)'}}>
              {[['CSV — tabel hasil','42 KB'],['GeoJSON — poligon kawasan','8,4 MB'],['GeoTIFF — raster anomali','126 MB'],['PDF — ringkasan bersitasi','1,2 MB']].map(([t,s])=>(
                <div key={t} style={{display:'flex',alignItems:'center',gap:'var(--space-3)',fontSize:'var(--type-body-sm-size)'}}>
                  <Icon name="download" size={15} />
                  <span style={{flex:1,color:'var(--text-body)'}}>{t}</span>
                  <span className="kkp-mono" style={{color:'var(--text-muted)'}}>{s}</span>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

/* ---------- guardrail: human approval (§8.3) ---------- */
function OmsApproval({ go, request, role }){
  const highImpact = !request || request.kind !== 'data';
  const [sent,setSent] = React.useState(false);
  return (
    <div className="oms-workflow-page oms-approval-page" style={{maxWidth:820,margin:'0 auto',padding:'var(--space-10) var(--layout-gutter)'}}>
      <ResultHeader eyebrow="Pagar pengaman §8.3" badge={highImpact?<Badge tone="warn" dot>Perlu persetujuan</Badge>:<Badge tone="good" dot>Tidak berdampak tinggi</Badge>}
        title={highImpact?'Keluaran berdampak tinggi atau publikasi turunan':'Keluaran dapat dikirim langsung'} />
      <Card title="Ringkasan permintaan">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'var(--space-4)'}}>
          {[['Judul',(request&&request.title)||'Kawasan konservasi & anomali SST — WPP 715'],
            ['Jenis keluaran',{data:'Dataset + jawaban bersitasi',analysis:'Analisis / geoprocessing',visualize:'Tampilan 3D / kembaran digital'}[(request&&request.kind)||'data']],
            ['Pemohon',(role?.name||'Analis Kelautan')+' · '+(role?.unit||'KKP')],
            ['Publikasi turunan',highImpact?'Ya — hasil disimpan ke katalog':'Tidak'],
            ['Sumber','3 dataset resmi, semua bersitasi'],
            ['Waktu','17/09/2026 09:44 WIB']].map(([k,v])=>(
            <div key={k}><span className="kkp-kpi__label">{k}</span><div style={{fontWeight:600,color:'var(--text-heading)',fontSize:'var(--type-body-size)'}}>{v}</div></div>
          ))}
        </div>
      </Card>

      {highImpact ? (
        <div className="kkp-card" style={{padding:'var(--space-6)',marginTop:'var(--space-4)'}}>
          <div className="kkp-eyebrow">Alur persetujuan</div>
          <div style={{display:'flex',flexDirection:'column',gap:'var(--space-4)',marginTop:'var(--space-4)'}}>
            {[['Pemeriksaan otomatis','Sitasi lengkap, akses peran valid, tidak ada data pribadi','good'],
              ['Peninjau teknis','Pusdatin KKP · menunggu',sent?'good':'warn'],
              ['Penyetuju kebijakan','Ditjen Pengelolaan Kelautan · belum mulai','neutral']].map(([t,d,tone])=>(
              <div key={t} style={{display:'flex',gap:'var(--space-4)',alignItems:'flex-start'}}>
                <span className="kkp-dot" style={{marginTop:6,width:10,height:10,background:tone==='good'?'var(--status-good)':tone==='warn'?'var(--status-warn)':'var(--status-neutral)'}}></span>
                <span>
                  <span style={{display:'block',fontWeight:700,color:'var(--text-heading)',fontSize:'var(--type-body-sm-size)'}}>{t}</span>
                  <span style={{display:'block',color:'var(--text-muted)',fontSize:'var(--type-caption-size)'}}>{d}</span>
                </span>
              </div>
            ))}
          </div>
          <div style={{marginTop:'var(--space-5)',paddingTop:'var(--space-5)',borderTop:'1px solid var(--border-subtle)'}}>
            <Input label="Catatan untuk peninjau" placeholder="Konteks singkat, tujuan penggunaan, batas distribusi" />
            <div style={{display:'flex',gap:'var(--space-3)',marginTop:'var(--space-4)'}}>
              <Button variant="secondary" onClick={()=>go((request&&request.kind)==='analysis'?'tool':(request&&request.kind)==='visualize'?'twin':'dataset',request)}>Kembali &amp; perbaiki</Button>
              <Button variant="primary" iconStart="check-circle" onClick={()=>{setSent(true);setTimeout(()=>go('delivered',request),600);}}>
                {sent?'Terkirim…':role?.canApprove?'Setujui & kirim':'Ajukan persetujuan'}
              </Button>
            </div>
          </div>
        </div>
      ) : (
        <div style={{display:'flex',gap:'var(--space-3)',marginTop:'var(--space-6)'}}>
          <Button variant="secondary" onClick={()=>go('dataset',request)}>Kembali</Button>
          <Button variant="primary" iconEnd="chevron-right" onClick={()=>go('delivered',request)}>Kirim hasil ke pengguna</Button>
        </div>
      )}
    </div>
  );
}

/* ---------- delivered ---------- */
function OmsDelivered({ go, request }){
  const kind = (request && request.kind) || 'data';
  const out = { data:['Dataset + jawaban bersitasi','download'], analysis:['Hasil analisis & statistik zonal','graph-bar'], visualize:['Tampilan 3D / kembaran digital','globe'] }[kind];
  return (
    <div className="oms-workflow-page oms-delivered-page" style={{maxWidth:820,margin:'0 auto',padding:'var(--space-16) var(--layout-gutter)',textAlign:'center'}}>
      <span style={{width:56,height:56,borderRadius:'var(--radius-pill)',background:'var(--status-good-soft)',display:'inline-flex',alignItems:'center',justifyContent:'center'}}>
        <Icon name="check-circle" size={26} />
      </span>
      <h1 style={{marginTop:'var(--space-5)',fontSize:'var(--type-display-3-size)'}}>Hasil telah dikirim</h1>
      <p style={{color:'var(--text-muted)',fontSize:'var(--type-body-lg-size)',maxWidth:560,margin:'0 auto var(--space-8)'}}>
        {(request && request.title) || 'Kawasan konservasi & anomali SST — WPP 715'} tersedia di ruang kerja Anda,
        lengkap dengan sitasi dan jejak audit.
      </p>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'var(--space-4)',textAlign:'left'}}>
        <div className="kkp-card" style={{padding:'var(--space-5)'}}>
          <Icon name={out[1]} size={20} />
          <div style={{fontWeight:700,color:'var(--text-heading)',marginTop:'var(--space-3)'}}>{out[0]}</div>
          <div style={{fontSize:'var(--type-caption-size)',color:'var(--text-muted)',marginTop:4}}>Siap diunduh atau dibagikan</div>
        </div>
        <div className="kkp-card" style={{padding:'var(--space-5)'}}>
          <Icon name="clipboard" size={20} />
          <div style={{fontWeight:700,color:'var(--text-heading)',marginTop:'var(--space-3)'}}>Jejak audit</div>
          <div style={{fontSize:'var(--type-caption-size)',color:'var(--text-muted)',marginTop:4}}>6 langkah tercatat · §8.3 terpenuhi</div>
        </div>
        <div className="kkp-card" style={{padding:'var(--space-5)'}}>
          <Icon name="speech-bubble" size={20} />
          <div style={{fontWeight:700,color:'var(--text-heading)',marginTop:'var(--space-3)'}}>Lanjutkan bertanya</div>
          <div style={{fontSize:'var(--type-caption-size)',color:'var(--text-muted)',marginTop:4}}>Perhalus permintaan pada percakapan yang sama</div>
        </div>
      </div>
      <div style={{display:'flex',gap:'var(--space-3)',justifyContent:'center',marginTop:'var(--space-8)'}}>
        <Button variant="secondary" iconStart="download">Unduh hasil</Button>
        <Button variant="primary" iconStart="speech-bubble" onClick={()=>go('assistant')}>Lanjutkan di asisten</Button>
      </div>
    </div>
  );
}
Object.assign(window, { OmsDataset, OmsApproval, OmsDelivered });