/* ===== Auth: OTP login + reusable OTP entry ===== */
const { useState:useStateA } = React;

// Covera wordmark
const Wordmark = ({light, size=30}) => (
  <div style={{display:'flex',alignItems:'center',gap:10}}>
    <div style={{width:size+8,height:size+8,borderRadius:size*0.3,background:light?'#fff':'linear-gradient(150deg,var(--navy-700),var(--navy-900))',display:'flex',alignItems:'center',justifyContent:'center',boxShadow:light?'none':'0 6px 16px rgba(30,58,138,.3)'}}>
      <Icon name="shieldCheck" size={size*0.62} c={light?'var(--navy-800)':'#fff'} sw={2}/>
    </div>
    <span style={{fontSize:size,fontWeight:800,letterSpacing:'-.03em',color:light?'#fff':'var(--navy-900)'}}>
      Covera<span style={{color:'var(--gold)'}}>.</span>
    </span>
  </div>
);

// reusable OTP entry with keypad
const OtpEntry = ({len=6, onComplete, accent='var(--navy-700)'}) => {
  const [code,setCode]=useStateA('');
  const press=d=>{ if(code.length>=len) return; const n=code+d; setCode(n); if(n.length===len){ setTimeout(()=>onComplete(n),250); } };
  const del=()=>setCode(code.slice(0,-1));
  return (
    <div>
      <div className="otp-wrap">
        {Array.from({length:len}).map((_,i)=>(
          <div key={i} className={"otp-cell"+(code[i]?" filled":"")+(i===code.length?" cursor":"")} style={code[i]?{borderColor:accent,color:accent}:null}>
            {code[i]||''}
          </div>
        ))}
      </div>
      <div className="keypad" style={{marginTop:30}}>
        {[1,2,3,4,5,6,7,8,9].map(n=>(<button key={n} className="key" onClick={()=>press(''+n)}>{n}</button>))}
        <div className="key blank"/>
        <button className="key" onClick={()=>press('0')}>0</button>
        <button className="key" onClick={del} style={{color:'var(--muted)'}}><Icon name="arrowL" size={24}/></button>
      </div>
    </div>
  );
};

// Screen: login email
const LoginEmail = ({go}) => {
  const [method,setMethod]=useStateA('email');
  const [email,setEmail]=useStateA('agent@covera.co.th');
  const [phone,setPhone]=useStateA('081-234-5678');
  const dest = method==='email'?email:phone;
  return (
    <div className="screen" style={{background:'linear-gradient(180deg,#f8fafc 0%, #eef2ff 100%)'}}>
      <StatusBar/>
      <div className="scroll web-center">
        <div className="pad form-col" style={{paddingTop:40,paddingBottom:40}}>
          <div className="slide-up"><Wordmark/></div>
          <div style={{marginTop:54}} className="slide-up">
            <div style={{fontSize:30,fontWeight:800,letterSpacing:'-.02em'}}>ยินดีต้อนรับ</div>
            <div style={{fontSize:16,color:'var(--muted)',marginTop:6,lineHeight:1.5}}>
              ผู้ช่วยตัวแทนประกันชีวิต<br/>เข้าสู่ระบบด้วยรหัส OTP ทางอีเมล
            </div>
          </div>

          <div className="card slide-up" style={{marginTop:34,padding:24,animationDelay:'.06s'}}>
            <div className="seg" style={{marginBottom:16}}>
              <button className={"opt"+(method==='email'?" active":"")} onClick={()=>setMethod('email')}><Icon name="mail" size={17}/> อีเมล</button>
              <button className={"opt"+(method==='phone'?" active":"")} onClick={()=>setMethod('phone')}><Icon name="phone" size={17}/> เบอร์โทร</button>
            </div>
            {method==='email' ? (
              <div className="field" style={{marginBottom:8}}>
                <label>อีเมลของคุณ</label>
                <div style={{position:'relative'}}>
                  <Icon name="mail" size={20} c="var(--muted-2)" style={{position:'absolute',left:15,top:17}}/>
                  <input className="input" style={{paddingLeft:46}} value={email} onChange={e=>setEmail(e.target.value)} placeholder="you@email.com" type="email"/>
                </div>
              </div>
            ) : (
              <div className="field" style={{marginBottom:8}}>
                <label>เบอร์โทรศัพท์มือถือ</label>
                <div style={{position:'relative'}}>
                  <Icon name="phone" size={20} c="var(--muted-2)" style={{position:'absolute',left:15,top:17}}/>
                  <input className="input" style={{paddingLeft:46}} value={phone} onChange={e=>setPhone(e.target.value)} placeholder="08x-xxx-xxxx" inputMode="tel"/>
                </div>
              </div>
            )}
            <button className="btn btn-primary block" style={{marginTop:18}} onClick={()=>go('otp',{method,dest})}>
              ขอรหัส OTP <Icon name="arrowR" size={20}/>
            </button>
            <div style={{display:'flex',alignItems:'center',gap:8,justifyContent:'center',marginTop:18,color:'var(--muted)',fontSize:13}}>
              <Icon name="lock" size={15}/> เข้าระบบปลอดภัยด้วย OTP — ไม่มีรหัสผ่าน
            </div>
          </div>

          <div style={{display:'flex',gap:10,marginTop:22,justifyContent:'center'}} className="slide-up">
            {['ปลอดภัยตาม PDPA','เข้ารหัสข้อมูล','รับรองมาตรฐาน'].map(t=>(
              <span key={t} className="chip gray" style={{height:28}}><Icon name="shield" size={13}/> {t}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// Screen: OTP verify
const LoginOTP = ({go, back, params}) => {
  const [sec,setSec]=useStateA(42);
  React.useEffect(()=>{ const t=setInterval(()=>setSec(s=>s>0?s-1:0),1000); return ()=>clearInterval(t); },[]);
  return (
    <div className="screen" style={{background:'linear-gradient(180deg,#f8fafc 0%, #eef2ff 100%)'}}>
      <StatusBar/>
      <AppBar onBack={back} title="" />
      <div className="scroll web-center">
        <div className="pad form-col" style={{paddingTop:8,paddingBottom:40}}>
          <div className="slide-up">
            <div style={{fontSize:28,fontWeight:800,letterSpacing:'-.02em'}}>กรอกรหัส OTP</div>
            <div style={{fontSize:15.5,color:'var(--muted)',marginTop:8,lineHeight:1.5}}>
              เราส่งรหัส 6 หลักไปที่<br/><b style={{color:'var(--ink-2)'}}>{params.dest||params.email}</b>
            </div>
          </div>
          <div className="card slide-up" style={{marginTop:26,padding:'30px 22px',animationDelay:'.05s'}}>
            <OtpEntry onComplete={()=>go('app')}/>
            <div className="center" style={{marginTop:24,fontSize:14,color:'var(--muted)'}}>
              {sec>0 ? <>ขอรหัสใหม่ได้ใน <b className="navy-t">0:{String(sec).padStart(2,'0')}</b></>
                     : <button className="navy-t" style={{fontWeight:700,fontSize:14}} onClick={()=>setSec(42)}>ส่งรหัสอีกครั้ง</button>}
            </div>
          </div>
          <div className="center slide-up" style={{marginTop:18,fontSize:13,color:'var(--muted-2)'}}>
            <span className="chip gray" style={{height:30}}><Icon name="info" size={14}/> เดโม: กดเลขอะไรก็ได้ 6 หลัก</span>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Wordmark, OtpEntry, LoginEmail, LoginOTP });