// Onboarding / login / 2FA / setup wizard for Superadmin

function LoginScreen({ onLogin }) {
  const [step, setStep] = React.useState('login'); // login | twofa
  const [email, setEmail] = React.useState('andrej@clickinpms.com');
  const [pw, setPw] = React.useState('••••••••••••');
  const [code, setCode] = React.useState(['','','','','','']);
  const refs = React.useRef([]);

  const submitLogin = (e)=>{ e && e.preventDefault(); setStep('twofa'); setTimeout(()=>refs.current[0]?.focus(),100); };
  const handleCode = (i,v)=>{
    if(!/^\d?$/.test(v)) return;
    const next=[...code]; next[i]=v; setCode(next);
    if(v && i<5) refs.current[i+1]?.focus();
    if(next.every(d=>d)) setTimeout(onLogin, 400);
  };

  return (
    <div style={{
      position:'fixed', inset:0, display:'flex',
      background:'#0F1419', zIndex:1000, overflow:'hidden',
    }}>
      {/* Left — brand panel */}
      <div style={{
        flex:'0 0 44%', position:'relative', overflow:'hidden',
        background:'linear-gradient(135deg,#0097A7 0%, #006064 50%, #0D47A1 100%)',
        display:'flex', flexDirection:'column', padding:'48px 56px', color:'#fff',
      }}>
        <div style={{position:'absolute', inset:0, opacity:.5, background:`
          radial-gradient(circle at 20% 20%, rgba(77,208,225,.4), transparent 40%),
          radial-gradient(circle at 80% 60%, rgba(33,150,243,.35), transparent 45%)
        `}}/>
        <div style={{position:'absolute', top:-100, right:-100, width:400, height:400, borderRadius:'50%',
          background:'radial-gradient(circle, rgba(0,188,212,.4), transparent 70%)', filter:'blur(40px)'}}/>

        <img src="assets/logo-clickinpms-inverse.svg" style={{height:32, position:'relative', zIndex:1}}/>

        <div style={{marginTop:'auto', position:'relative', zIndex:1, maxWidth:460}}>
          <div style={{fontSize:12, fontWeight:700, letterSpacing:'.2em', textTransform:'uppercase', color:'#4DD0E1', marginBottom:16}}>SUPERADMIN KONZOLA</div>
          <h1 style={{fontFamily:'var(--font-display)', fontSize:44, fontWeight:800, lineHeight:1.1, letterSpacing:'-0.02em', margin:0, color:'#fff'}}>
            Platforma, ki skrbi za<br/>vse slovenske hotele.
          </h1>
          <p style={{fontSize:15, lineHeight:1.6, opacity:.9, marginTop:20, color:'#fff'}}>
            Pregled celotnega omrežja clickinPMS — 12 organizacij, 1.005 sob, 14 aktivnih uporabnikov in rast MRR-a 5,6 % mesečno.
          </p>
          <div style={{display:'flex', gap:24, marginTop:40}}>
            {[['12','Organizacij'],['99,94%','Uptime 30 dni'],['€ 6.950','MRR']].map(([v,l])=>(
              <div key={l}>
                <div style={{fontFamily:'var(--font-display)', fontSize:28, fontWeight:700, color:'#fff'}}>{v}</div>
                <div style={{fontSize:11, opacity:.8, letterSpacing:'.08em', textTransform:'uppercase', marginTop:2, color:'#fff'}}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{marginTop:48, fontSize:11, opacity:.6, position:'relative', zIndex:1}}>
          © 2026 clickinPMS d.o.o. · Podatki EU · GDPR / ZVOP-2
        </div>
      </div>

      {/* Right — form */}
      <div style={{flex:1, background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', padding:40}}>
        <div style={{width:'100%', maxWidth:380}}>
          {step==='login' && (
            <>
              <div style={{fontSize:12, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'#2196F3', marginBottom:10}}>Prijava</div>
              <h2 style={{fontFamily:'var(--font-display)', fontSize:30, fontWeight:700, letterSpacing:'-0.015em', margin:0, color:'#1A1A1A'}}>Dobrodošli nazaj</h2>
              <p style={{color:'#707070', fontSize:14, marginTop:8}}>Prijavite se v superadmin konzolo platforme.</p>

              <form onSubmit={submitLogin} style={{marginTop:28, display:'flex', flexDirection:'column', gap:14}}>
                <div>
                  <label style={{fontSize:12, fontWeight:600, color:'#4D4D4D', display:'block', marginBottom:6}}>E-pošta</label>
                  <input type="email" value={email} onChange={e=>setEmail(e.target.value)} style={inpStyle}/>
                </div>
                <div>
                  <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:6}}>
                    <label style={{fontSize:12, fontWeight:600, color:'#4D4D4D'}}>Geslo</label>
                    <a style={{fontSize:12, color:'#2196F3', textDecoration:'none', fontWeight:500}} href="#">Pozabljeno geslo?</a>
                  </div>
                  <input type="password" value={pw} onChange={e=>setPw(e.target.value)} style={inpStyle}/>
                </div>
                <label style={{display:'flex', alignItems:'center', gap:8, fontSize:13, color:'#4D4D4D', cursor:'pointer'}}>
                  <input type="checkbox" defaultChecked/> Zaupanja vredna naprava (30 dni)
                </label>
                <button type="submit" style={{
                  marginTop:6, background:'#2196F3', color:'#fff', border:'none',
                  padding:'13px 20px', borderRadius:12, fontSize:15, fontWeight:600,
                  fontFamily:'inherit', cursor:'pointer',
                  boxShadow:'0 6px 18px rgba(33,150,243,.28)',
                }}>Prijava →</button>
              </form>

              <div style={{display:'flex', alignItems:'center', gap:14, margin:'28px 0 18px', color:'#C8C8C8', fontSize:11}}>
                <div style={{flex:1, height:1, background:'#E5E5E5'}}/>ALI<div style={{flex:1, height:1, background:'#E5E5E5'}}/>
              </div>
              <button style={{
                width:'100%', padding:'12px', background:'#fff', color:'#333',
                border:'1px solid #E5E5E5', borderRadius:12, fontSize:14, fontWeight:500,
                fontFamily:'inherit', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:10,
              }}>
                <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#4285f4" d="M22.5 12.2c0-.7-.1-1.4-.2-2H12v3.8h5.9c-.3 1.4-1 2.5-2.2 3.3v2.7h3.5c2.1-1.9 3.3-4.7 3.3-7.8z"/><path fill="#34a853" d="M12 23c3 0 5.5-1 7.3-2.7l-3.5-2.7c-1 .6-2.2 1-3.8 1-2.9 0-5.4-2-6.3-4.6H1.9v2.8C3.7 20.5 7.5 23 12 23z"/><path fill="#fbbc04" d="M5.7 14c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V7.2H1.9C1.2 8.7.8 10.3.8 12s.4 3.3 1.1 4.8z"/><path fill="#ea4335" d="M12 5.4c1.6 0 3.1.5 4.2 1.6l3.1-3.1C17.5 2 14.9 1 12 1 7.5 1 3.7 3.5 1.9 7.2l3.8 2.8C6.6 7.4 9.1 5.4 12 5.4z"/></svg>
                Nadaljuj z Google Workspace
              </button>
              <div style={{fontSize:12, color:'#9A9A9A', marginTop:24, textAlign:'center', lineHeight:1.5}}>
                Dostop je omejen na clickinPMS osebje. Vsi dogodki so zabeleženi.
              </div>
            </>
          )}

          {step==='twofa' && (
            <>
              <div style={{width:56, height:56, borderRadius:16, background:'linear-gradient(135deg,#00BCD4,#2196F3)',
                display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', marginBottom:20}}>
                <Icon name="shield" size={28}/>
              </div>
              <h2 style={{fontFamily:'var(--font-display)', fontSize:30, fontWeight:700, letterSpacing:'-0.015em', margin:0, color:'#1A1A1A'}}>Dvostopenjska preverba</h2>
              <p style={{color:'#707070', fontSize:14, marginTop:8, lineHeight:1.5}}>
                Vnesite 6-mestno kodo iz aplikacije Google Authenticator, registrirane na napravi<br/>
                <span style={{color:'#1A1A1A', fontWeight:500}}>iPhone 15 Pro · Andrejev</span>.
              </p>
              <div style={{display:'flex', gap:8, marginTop:28, justifyContent:'center'}}>
                {code.map((d,i)=>(
                  <input key={i} ref={el=>refs.current[i]=el}
                    value={d} onChange={e=>handleCode(i, e.target.value)}
                    onKeyDown={e=>{ if(e.key==='Backspace' && !d && i>0) refs.current[i-1]?.focus(); }}
                    maxLength={1} inputMode="numeric"
                    style={{
                      width:48, height:58, textAlign:'center',
                      fontSize:24, fontWeight:700, fontFamily:'var(--font-display)',
                      border:'1px solid #E5E5E5', borderRadius:12, outline:'none',
                      background:'#fff', color:'#1A1A1A',
                    }}/>
                ))}
              </div>
              <div style={{fontSize:12, color:'#9A9A9A', marginTop:20, textAlign:'center'}}>Koda poteče čez <span style={{color:'#FF9800', fontWeight:600}}>28 s</span></div>
              <div style={{display:'flex', gap:10, marginTop:28}}>
                <button onClick={()=>setStep('login')} style={{
                  flex:1, padding:'12px', background:'#fff', color:'#4D4D4D',
                  border:'1px solid #E5E5E5', borderRadius:12, fontSize:14, fontWeight:500, cursor:'pointer', fontFamily:'inherit',
                }}>← Nazaj</button>
                <button onClick={onLogin} style={{
                  flex:2, padding:'12px', background:'#2196F3', color:'#fff',
                  border:'none', borderRadius:12, fontSize:14, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
                }}>Potrdi kodo</button>
              </div>
              <div style={{fontSize:12, color:'#2196F3', marginTop:20, textAlign:'center', cursor:'pointer', fontWeight:500}}>
                Uporabi varnostni ključ · SMS kodo namesto aplikacije
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

const inpStyle = {
  width:'100%', padding:'12px 14px', fontSize:14,
  border:'1px solid #E5E5E5', borderRadius:10,
  fontFamily:'inherit', color:'#1A1A1A', outline:'none',
  transition:'border-color 120ms, box-shadow 120ms',
  boxSizing:'border-box',
};

function WelcomeTour({ onDone, dark }) {
  const [step, setStep] = React.useState(0);
  const steps = [
    {
      title:'Dobrodošli v clickinPMS Superadmin',
      body:'Od tu upravljate celotno platformo: organizacije, uporabnike, naročnine, podporo in sistemsko zdravje. Hitra predstavitev traja 40 sekund.',
      icon:'dashboard', tone:'#2196F3',
    },
    {
      title:'Pregled vseh organizacij',
      body:'V zavihku Organizacije vidite 12 aktivnih hotelov z razporeditvijo po paketu, lokaciji in zasedenosti. Klik na vrstico odpre detajl z možnostjo impersonacije.',
      icon:'building', tone:'#00BCD4',
    },
    {
      title:'Podpora — prednostna obravnava',
      body:'Trenutno je 5 odprtih prijav. Najvišje prioritete (T-2846, Grand Union) se samodejno prikažejo v obvestilih in na nadzorni plošči.',
      icon:'headset', tone:'#FF9800',
    },
    {
      title:'Dnevnik in varnost',
      body:'Vsa dejanja — vaša in sistemska — so zabeležena v dnevniku dogodkov. Impersonacija ima poseben označevalnik in je vidna lastniku organizacije.',
      icon:'shield', tone:'#9C27B0',
    },
  ];
  const s = steps[step];
  return (
    <div style={{
      position:'fixed', inset:0, background:'rgba(0,0,0,.6)',
      display:'flex', alignItems:'center', justifyContent:'center', zIndex:999,
      backdropFilter:'blur(4px)',
    }}>
      <div style={{
        width:520, background:'#fff', borderRadius:20, overflow:'hidden',
        boxShadow:'0 30px 80px rgba(0,0,0,.5)',
      }}>
        <div style={{height:140, background:`linear-gradient(135deg, ${s.tone} 0%, ${s.tone}99 100%)`,
          position:'relative', overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center'}}>
          <div style={{position:'absolute', inset:0, background:'radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), transparent 60%)'}}/>
          <div style={{width:72, height:72, borderRadius:20, background:'rgba(255,255,255,.2)',
            backdropFilter:'blur(10px)', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff'}}>
            <Icon name={s.icon} size={36}/>
          </div>
        </div>
        <div style={{padding:32}}>
          <div style={{display:'flex', gap:6, marginBottom:20}}>
            {steps.map((_,i)=>(
              <div key={i} style={{flex:1, height:4, borderRadius:999, background:i<=step?s.tone:'#E5E5E5', transition:'background 200ms'}}/>
            ))}
          </div>
          <h2 style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:700, letterSpacing:'-0.01em', margin:0, color:'#1A1A1A'}}>{s.title}</h2>
          <p style={{fontSize:15, lineHeight:1.6, color:'#4D4D4D', marginTop:12}}>{s.body}</p>
          <div style={{display:'flex', gap:10, marginTop:24, alignItems:'center'}}>
            <div style={{fontSize:12, color:'#9A9A9A'}}>{step+1} / {steps.length}</div>
            <div style={{marginLeft:'auto', display:'flex', gap:8}}>
              <button onClick={onDone} style={{
                background:'transparent', color:'#707070', border:'none', padding:'10px 14px',
                fontSize:14, fontFamily:'inherit', cursor:'pointer', fontWeight:500,
              }}>Preskoči</button>
              {step>0 && <button onClick={()=>setStep(step-1)} style={{
                background:'#fff', color:'#333', border:'1px solid #E5E5E5',
                padding:'10px 18px', borderRadius:10, fontSize:14, fontWeight:600, fontFamily:'inherit', cursor:'pointer',
              }}>← Nazaj</button>}
              <button onClick={()=>step<steps.length-1 ? setStep(step+1) : onDone()} style={{
                background:s.tone, color:'#fff', border:'none',
                padding:'10px 22px', borderRadius:10, fontSize:14, fontWeight:600, fontFamily:'inherit', cursor:'pointer',
              }}>{step<steps.length-1?'Naprej →':'Začni'}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen, WelcomeTour });