const { BrandLock, Button, IconButton, Badge, StatusDot, Icon, Input } = window.KKPMarineDigitalDesignSystem_4fef83;

const STEPS = [
  { id:'intent', label:'Autentikasi & intent', screens:['landing'] },
  { id:'retrieve', label:'Pencarian & konteks', screens:['assistant','search'] },
  { id:'deliver', label:'Data · Analisis · 3D', screens:['dataset'] },
  { id:'guardrail', label:'Persetujuan (§8.3)', screens:['approval'] },
];

function FlowRail({ screen }){
  const activeIndex = STEPS.findIndex(s=>s.screens.includes(screen));
  return (
    <div style={{display:'flex',alignItems:'center',gap:'var(--space-2)',overflow:'hidden'}}>
      {STEPS.map((s,i)=>{
        const done = i < activeIndex, active = i === activeIndex;
        return (
          <React.Fragment key={s.id}>
            {i ? <span style={{width:18,height:1,background:done?'var(--kkp-azure-500)':'var(--border-default)',flex:'none'}}></span> : null}
            <span style={{display:'flex',alignItems:'center',gap:6,padding:'4px 10px',borderRadius:'var(--radius-pill)',flex:'none',
              background:active?'var(--surface-accent-soft)':'transparent',
              color:active?'var(--kkp-azure-800)':done?'var(--kkp-azure-700)':'var(--text-muted)',
              fontSize:'var(--type-caption-size)',fontWeight:active?700:600}}>
              <span style={{width:16,height:16,borderRadius:'var(--radius-pill)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:9,fontWeight:700,
                background:done?'var(--kkp-azure-700)':active?'var(--kkp-azure-500)':'var(--kkp-ink-200)',color:'#fff'}}>{done?'✓':i+1}</span>
              {s.label}
            </span>
          </React.Fragment>
        );
      })}
    </div>
  );
}

const PAGE_BANNERS = {
  assistant:{title:'Asisten AI kelautan dan perikanan',description:'Temukan data, jalankan analisis spasial, dan bangun konteks kerja dari sumber resmi KKP.'},
  search:{title:'Katalog data kelautan dan perikanan',description:'Jelajahi dataset, layanan peta, dan metadata resmi untuk kebutuhan analisis Anda.'},
  apps:{title:'Aplikasi digital kelautan dan perikanan',description:'Satu direktori untuk seluruh aplikasi dan layanan digital KKP yang dapat diakses sesuai peran Anda.'},
};

function PageBanner({banner}){
  if(!banner)return null;
  return <section className="oms-page-banner" style={{height:112,position:'relative',overflow:'hidden',color:'#fff',backgroundColor:'#06324a',backgroundImage:"linear-gradient(90deg,rgba(3,30,51,.94) 0%,rgba(3,41,65,.79) 52%,rgba(3,28,49,.66) 100%),url('https://images.unsplash.com/photo-1546026423-cc4642628d2b?auto=format&fit=crop&w=1800&q=85')",backgroundPosition:'center 48%',backgroundSize:'cover',borderBottom:'1px solid rgba(255,255,255,.15)'}}>
    <div style={{position:'relative',height:'100%',maxWidth:1440,margin:'0 auto',padding:'0 52px',display:'flex',alignItems:'center'}}>
      <div>
      <h1 style={{margin:0,fontSize:24,lineHeight:1.2,fontWeight:750,letterSpacing:'-.01em',color:'#fff',textShadow:'0 2px 8px rgba(0,0,0,.62)'}}>{banner.title}</h1>
      <p style={{margin:'8px 0 0',fontSize:11,fontWeight:600,color:'#fff',maxWidth:740,textShadow:'0 2px 7px rgba(0,0,0,.72)'}}>{banner.description}</p>
      </div>
    </div>
  </section>;
}

function OmsChrome({ screen, go, children, role, onRoleChange, onLogout, reduceTransparency, onToggleTransparency }){
  const [roleOpen,setRoleOpen]=React.useState(false);
  const [language,setLanguage]=React.useState(()=>localStorage.getItem('oms-language')||'ID');
  const toggleLanguage=()=>setLanguage(v=>{const next=v==='ID'?'EN':'ID';localStorage.setItem('oms-language',next);return next;});
  return (
    <div className="oms-shell" style={{minHeight:'100vh',maxWidth:'100%',overflowX:'hidden',display:'flex',flexDirection:'column','--oms-content-offset':PAGE_BANNERS[screen]?'172px':'60px'}}>
      <header className="oms-global-header" style={{position:'sticky',top:0,zIndex:'var(--z-sticky)',maxWidth:'100%',minWidth:0,overflow:'hidden',background:'#fff',borderBottom:'1px solid #d7dce2',display:'flex',alignItems:'center',gap:'var(--space-6)',padding:'0 var(--space-6)',height:60,flex:'none',color:'var(--text-heading)'}}>
        <a href="#" onClick={e=>{e.preventDefault();go('landing');}} style={{border:'none'}}>
          <BrandLock src={(window.__resources && window.__resources.logoMark) || '../../assets/logo-kkp-mark.png'} product="Kementerian Kelautan dan Perikanan" height={34} />
        </a>
        <nav className="oms-head-nav" style={{display:'flex',gap:2,marginLeft:'var(--space-4)'}}>
          {[['assistant','Ask AI'],['search','Katalog Data'],['apps','Katalog Aplikasi']].map(([id,l])=>(
            <button key={id} onClick={()=>go(id)}
              style={{background:screen===id?'#eef6fb':'transparent',border:'none',color:screen===id?'var(--kkp-azure-800)':'#5f6670',
                padding:'7px 14px',borderRadius:'var(--radius-sm)',font:'inherit',fontFamily:'var(--kkp-font-sans)',fontSize:13,fontWeight:600,cursor:'pointer'}}>{l}</button>
          ))}
        </nav>
        <div className="oms-header-actions" style={{marginLeft:'auto',display:'flex',alignItems:'center',gap:'var(--space-4)'}}>
          <span style={{position:'relative',display:'flex'}}>
            <IconButton icon="bell" label="Notifikasi" />
            <span style={{position:'absolute',top:2,right:2,width:7,height:7,borderRadius:'var(--radius-pill)',background:'var(--kkp-lime-500)',border:'1.5px solid #fff'}}></span>
          </span>
          <button onClick={toggleLanguage} aria-label="Ganti bahasa" title="Ganti bahasa" style={{border:'1px solid #d7dce2',background:'#fff',color:'#4d5660',borderRadius:7,padding:'7px 10px',fontFamily:'inherit',fontSize:11,fontWeight:700,cursor:'pointer',display:'flex',alignItems:'center',gap:5}}><span style={{fontSize:13}}>文</span>{language}<span style={{fontSize:9}}>⌄</span></button>
          <div style={{position:'relative'}}><button onClick={()=>setRoleOpen(v=>!v)} aria-label="Ganti peran pengguna" aria-expanded={roleOpen} style={{display:'flex',alignItems:'center',gap:8,border:'none',background:'transparent',color:'#303943',borderRadius:'var(--radius-pill)',padding:'4px 5px',cursor:'pointer',fontFamily:'inherit'}}><span style={{width:28,height:28,borderRadius:'50%',background:role.color,color:'#101540',display:'grid',placeItems:'center',fontWeight:800,fontSize:9}}>{role.initials}</span><span className="oms-head-meta" style={{textAlign:'left'}}><b style={{display:'block',fontSize:9.5}}>{role.name}</b><small style={{display:'block',fontSize:7.5,color:'#7a838d'}}>{role.unit}</small></span><span style={{fontSize:9}}>⌄</span></button>{roleOpen?<div style={{position:'absolute',right:0,top:42,width:285,padding:8,borderRadius:'var(--radius-md)',background:'#fff',border:'1px solid var(--border-subtle)',boxShadow:'var(--shadow-lg)',color:'var(--text-body)',zIndex:50}}><div className="kkp-eyebrow" style={{padding:'5px 7px'}}>Ganti peran prototype</div>{window.OMS_ROLES.map(r=><button key={r.id} onClick={()=>{onRoleChange(r.id);setRoleOpen(false);}} style={{width:'100%',display:'grid',gridTemplateColumns:'30px 1fr auto',gap:8,alignItems:'center',border:0,borderRadius:'var(--radius-sm)',background:r.id===role.id?'var(--surface-accent-soft)':'transparent',padding:'8px',cursor:'pointer',textAlign:'left',fontFamily:'inherit',color:'var(--text-body)'}}><span style={{width:28,height:28,borderRadius:'50%',background:r.color,color:'#101540',display:'grid',placeItems:'center',fontSize:8,fontWeight:800}}>{r.initials}</span><span><b style={{display:'block',fontSize:10}}>{r.name}</b><small style={{fontSize:8,color:'var(--text-muted)'}}>{r.unit}</small></span><span style={{fontSize:8,color:r.id===role.id?'var(--status-good)':'var(--text-muted)'}}>{r.id===role.id?'AKTIF':r.readOnly?'BACA':'PILIH'}</span></button>)}<button onClick={()=>{setRoleOpen(false);onLogout();}} style={{width:'100%',padding:'10px 8px',marginTop:5,border:'none',borderTop:'1px solid var(--border-subtle)',background:'transparent',color:'var(--status-critical)',fontFamily:'inherit',fontSize:11,fontWeight:700,textAlign:'left',cursor:'pointer'}}>Logout</button></div>:null}</div>
          <IconButton icon="home" label="Mulai ulang alur" onClick={()=>go('landing')} />
        </div>
      </header>
      <PageBanner banner={screen==='apps'?null:PAGE_BANNERS[screen]} />
      <div className="oms-page-content" style={{flex:1,minHeight:0}}>{children}</div>
    </div>
  );
}
Object.assign(window, { OmsChrome, FlowRail });