const { Icon } = window.KKPMarineDigitalDesignSystem_4fef83;

function OmsLogin({go,role,onRoleChange,onAuthenticated,request}){
  // Prototype credentials are intentionally prefilled so reviewers can move
  // through the gated search/AI journey with one click.
  const [showPassword,setShowPassword]=React.useState(false),[nip,setNip]=React.useState('demo@kkp.go.id'),[password,setPassword]=React.useState('Demo123!'),[captcha,setCaptcha]=React.useState('4084'),[agreed,setAgreed]=React.useState(true),[error,setError]=React.useState('');
  const submit=e=>{e.preventDefault();if(!nip.trim()||!password||!captcha.trim()||!agreed){setError('Lengkapi identitas, kata sandi, kode acak, dan persetujuan layanan.');return;}onAuthenticated();go(request?.returnTo||'assistant',request?.payload||null);};
  const inputStyle={width:'100%',height:46,boxSizing:'border-box',border:'1px solid #d9dbe7',borderRadius:6,padding:'0 13px',fontFamily:'inherit',fontSize:13,color:'var(--text-body)',outline:'none',background:'#fff'};
  return <main className="oms-login-page" style={{minHeight:'100vh',display:'grid',placeItems:'center',position:'relative',overflow:'hidden',padding:'48px 20px',background:'#fafafa'}}>
    <div aria-hidden="true" style={{position:'absolute',width:280,height:250,left:'calc(50% - 370px)',top:105,borderRadius:28,background:'linear-gradient(145deg,#f1f1fb,#fafafa)',transform:'rotate(-3deg)'}}/>
    <div aria-hidden="true" style={{position:'absolute',width:285,height:260,left:'calc(50% + 40px)',bottom:-65,border:'2px dashed #ecebff',borderRadius:30}}><div style={{width:130,height:170,margin:'50px auto',borderRadius:25,background:'#f1f1fb'}}/></div>
    <button onClick={()=>go('landing')} style={{position:'absolute',left:26,top:24,border:0,background:'transparent',color:'var(--kkp-indigo-700)',fontWeight:700,cursor:'pointer',display:'flex',gap:7,alignItems:'center'}}><Icon name="chevron-left" size={14}/>Kembali ke OMS</button>
    <form className="oms-login-card" onSubmit={submit} style={{position:'relative',zIndex:1,width:'min(100%,510px)',boxSizing:'border-box',padding:'38px 36px 30px',borderRadius:8,background:'#fff',boxShadow:'0 12px 36px rgba(39,43,92,.13)',border:'1px solid #f0f1f5'}}>
      <img src="/assets/logo-kkp-stacked.webp" alt="Kementerian Kelautan dan Perikanan" style={{display:'block',height:106,maxWidth:190,objectFit:'contain',margin:'0 auto 24px'}}/>
      <h1 style={{fontSize:22,fontWeight:600,color:'#5a5872',margin:'0 0 10px'}}>SSO Kementerian Kelautan &amp; Perikanan</h1>
      <div style={{fontSize:11,color:'#77778d',marginBottom:22}}>Akun demo prototype sudah terisi. Klik Masuk untuk melanjutkan.</div>
      {request?.returnTo?<div style={{display:'flex',alignItems:'center',gap:9,padding:'10px 12px',margin:'-12px 0 22px',border:'1px solid rgba(0,158,232,.2)',borderRadius:6,background:'rgba(0,158,232,.06)',color:'#4f5b72',fontSize:11,lineHeight:1.45}}><Icon name="lock" size={15}/><span>Masuk diperlukan untuk melanjutkan ke <b>{request.returnTo==='assistant'?'Asisten AI':'Katalog Data'}</b>.</span></div>:null}
      <label style={{display:'block',fontSize:12,color:'#77778d',marginBottom:7}}>NIP / Email</label><input value={nip} onChange={e=>setNip(e.target.value)} autoComplete="username" style={{...inputStyle,borderColor:nip?'#7263ef':'#d9dbe7',boxShadow:nip?'0 5px 14px rgba(114,99,239,.12)':'none'}}/>
      <label style={{display:'block',fontSize:12,color:'#77778d',margin:'18px 0 7px'}}>Kata Sandi</label><div style={{position:'relative'}}><input value={password} onChange={e=>setPassword(e.target.value)} type={showPassword?'text':'password'} autoComplete="current-password" placeholder="••••••••" style={{...inputStyle,paddingRight:44}}/><button type="button" onClick={()=>setShowPassword(v=>!v)} aria-label={showPassword?'Sembunyikan kata sandi':'Tampilkan kata sandi'} style={{position:'absolute',right:5,top:5,width:36,height:36,border:0,background:'transparent',cursor:'pointer',color:'#77778d'}}><Icon name={showPassword?'view-hide':'view-visible'} size={16}/></button></div>
      <div className="oms-login-captcha" style={{display:'grid',gridTemplateColumns:'1fr 1.1fr',gap:24,alignItems:'end',marginTop:20}}><div aria-label="Kode captcha" style={{height:68,borderRadius:3,display:'grid',placeItems:'center',overflow:'hidden',background:'linear-gradient(105deg,#fbfff7,#f7f6ed)',position:'relative'}}><span style={{position:'absolute',width:'120%',height:1,background:'#75507d',transform:'rotate(-7deg)'}}/><b style={{fontFamily:'serif',fontSize:34,fontStyle:'italic',letterSpacing:6,color:'#8c4e91',transform:'rotate(-5deg)',textShadow:'2px 2px #d8bddb'}}>40 84</b></div><div><label style={{display:'block',fontSize:12,color:'#77778d',marginBottom:7}}>Kode Acak</label><input value={captcha} onChange={e=>setCaptcha(e.target.value)} inputMode="numeric" style={inputStyle}/></div></div>
      <label style={{display:'flex',gap:9,alignItems:'flex-start',marginTop:21,fontSize:13,lineHeight:1.45,color:'#77778d',cursor:'pointer'}}><input type="checkbox" checked={agreed} onChange={e=>setAgreed(e.target.checked)} style={{width:18,height:18,accentColor:'#7263ef',flex:'none'}}/><span>Saya menyetujui <span style={{color:'#d35454'}}>Ketentuan Penggunaan</span> dan <span style={{color:'#d35454'}}>Ketentuan Layanan BSrE</span></span></label>
      {error?<div style={{fontSize:11,color:'var(--status-critical)',marginTop:12}}>{error}</div>:null}
      <button type="submit" style={{width:'100%',height:46,border:0,borderRadius:5,background:'#7161ed',color:'#fff',fontFamily:'inherit',fontSize:14,fontWeight:600,cursor:'pointer',marginTop:22,boxShadow:'0 5px 12px rgba(113,97,237,.22)'}}>Masuk</button>
      <div style={{marginTop:23}}><h2 style={{fontSize:14,color:'#a52a2a',margin:'0 0 11px'}}>Service Desk Collaboration Office</h2><div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,color:'#858596',fontSize:12}}><div style={{display:'flex',gap:9,alignItems:'center'}}><Icon name="calendar" size={18}/><span>Senin–Jumat<br/>08.00–17.00 WIB</span></div><div style={{display:'flex',gap:9,alignItems:'center'}}><Icon name="speech-bubble" size={18}/><a href="tel:+6282211593987" style={{color:'#858596',textDecoration:'underline'}}>0822-1159-3987</a></div></div></div>
      <div style={{marginTop:25,paddingTop:18,borderTop:'1px solid #ececf2',display:'flex',alignItems:'center',justifyContent:'space-between'}}><span style={{fontSize:10,color:'#9999aa'}}>Terintegrasi dengan Balai Sertifikasi Elektronik</span><span style={{fontSize:11,fontWeight:800,color:'#159bd3',borderLeft:'3px solid #159bd3',paddingLeft:8}}>BSrE</span></div>
      <div style={{marginTop:15}}><div className="kkp-eyebrow" style={{fontSize:8}}>Peran prototype aktif</div><select value={role.id} onChange={e=>onRoleChange(e.target.value)} style={{...inputStyle,height:36,marginTop:6,fontSize:10}}>{window.OMS_ROLES.map(r=><option key={r.id} value={r.id}>{r.name} · {r.unit}</option>)}</select></div>
    </form>
  </main>;
}
window.OmsLogin=OmsLogin;