// v-auth.jsx — vendor auth/session UX: sign-in, session restore, expired session, role gate

// ─── Field ───────────────────────────────────────────────────────────
const AUTH_FLD = { width:'100%', boxSizing:'border-box', background:'rgba(255,255,255,0.07)', border:'1px solid rgba(255,255,255,0.16)', borderRadius:12, padding:'13px 15px', fontFamily:'var(--font-body)', fontSize:14, color:'var(--dust-cream)', outline:'none' };

// ─── Sign-in screen (signed-out state) ───────────────────────────────
// states: idle → signingin → error (denied) | success → session
function AuthScreen({ onSignIn, expired=false }) {
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [state, setState] = React.useState('idle'); // idle | signingin | error
  const [err, setErr] = React.useState(null);

  const knownRole = (em) => {
    const hit = Object.keys(ROLES).find(k => ROLES[k].email.toLowerCase() === em.trim().toLowerCase());
    return hit || null;
  };
  const submit = () => {
    if (state==='signingin') return;
    setErr(null); setState('signingin');
    setTimeout(()=>{
      const role = knownRole(email);
      if (!email.trim() || !pw.trim()) { setState('error'); setErr('Enter your email and password.'); return; }
      if (!role) { setState('error'); setErr('No vendor account for that email — access denied. Ask your owner for an invite.'); return; }
      onSignIn(role);
    }, 900);
  };

  return (
    <div style={{ position:'absolute', inset:0, zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', background:'linear-gradient(160deg, rgba(20,13,9,0.86), rgba(27,18,13,0.94))', backdropFilter:'blur(10px)', animation:'v-fade 240ms ease-out' }}>
      <div style={{ width:420, maxWidth:'calc(100vw - 48px)' }}>
        <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:26, justifyContent:'center' }}>
          <Bull size={40}/>
          <Wordmark size={22}/>
          <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'#9F8979', border:'1px solid rgba(255,255,255,0.16)', borderRadius:6, padding:'3px 8px' }}>Vendor</span>
        </div>

        <div style={{ background:'rgba(255,251,245,0.05)', border:'1px solid rgba(255,255,255,0.12)', borderRadius:22, padding:'28px 28px 24px', boxShadow:'0 40px 90px -30px rgba(0,0,0,0.8)', animation:'v-pop 280ms var(--ease-out)' }}>
          {expired && (
            <div style={{ display:'flex', gap:10, alignItems:'flex-start', padding:'11px 13px', background:'rgba(224,153,42,0.12)', border:'1px solid rgba(224,153,42,0.35)', borderRadius:12, marginBottom:18 }}>
              <I.clock c="#E0992A" s={16}/>
              <span style={{ fontFamily:'var(--font-body)', fontSize:12.5, lineHeight:1.5, color:'#D8CCC0' }}>Your session expired. Sign back in to keep managing orders — nothing was lost.</span>
            </div>
          )}
          <h1 style={{ margin:'0 0 4px', fontFamily:'var(--font-display)', fontWeight:900, fontSize:22, color:'var(--dust-cream)', letterSpacing:'-0.01em' }}>Sign in to your kitchen</h1>
          <p style={{ margin:'0 0 20px', fontFamily:'var(--font-body)', fontSize:13, color:'#9F8979' }}>Owner, manager and staff sign-ins each see what their role allows.</p>

          <label style={{ display:'block', marginBottom:12 }}>
            <span style={{ display:'block', fontFamily:'var(--font-display)', fontWeight:700, fontSize:10.5, letterSpacing:'0.08em', textTransform:'uppercase', color:'#9F8979', marginBottom:7 }}>Work email</span>
            <input value={email} onChange={e=>setEmail(e.target.value)} onKeyDown={e=>e.key==='Enter'&&submit()} placeholder="you@fireanddough.co.uk" autoComplete="email" style={AUTH_FLD}/>
          </label>
          <label style={{ display:'block', marginBottom:6 }}>
            <span style={{ display:'block', fontFamily:'var(--font-display)', fontWeight:700, fontSize:10.5, letterSpacing:'0.08em', textTransform:'uppercase', color:'#9F8979', marginBottom:7 }}>Password</span>
            <input value={pw} onChange={e=>setPw(e.target.value)} onKeyDown={e=>e.key==='Enter'&&submit()} type="password" placeholder="••••••••" autoComplete="current-password" style={AUTH_FLD}/>
          </label>
          <div style={{ textAlign:'right', marginBottom:16 }}>
            <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:12, color:'var(--sun-orange)', cursor:'pointer' }}>Forgot password?</span>
          </div>

          {state==='error' && err && (
            <div style={{ display:'flex', gap:9, alignItems:'flex-start', padding:'10px 13px', background:'rgba(193,59,31,0.14)', border:'1px solid rgba(193,59,31,0.4)', borderRadius:11, marginBottom:14, animation:'v-pop 200ms var(--ease-out)' }}>
              <I.alert c="#E07B5F" s={15}/>
              <span style={{ fontFamily:'var(--font-body)', fontSize:12.5, lineHeight:1.45, color:'#E8C4B8' }}>{err}</span>
            </div>
          )}

          <Btn kind="accent" full size="lg" onClick={submit} disabled={state==='signingin'}
            icon={state==='signingin' ? <span style={{ display:'inline-flex', animation:'v-spin 800ms linear infinite' }}><I.refresh c="#fff" s={16}/></span> : <I.arrow c="#fff" s={16}/>}>
            {state==='signingin' ? 'Signing in…' : 'Sign in'}
          </Btn>

          <div style={{ marginTop:18, paddingTop:16, borderTop:'1px solid rgba(255,255,255,0.1)' }}>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10.5, letterSpacing:'0.08em', textTransform:'uppercase', color:'#9F8979', marginBottom:9 }}>Demo accounts</div>
            <div style={{ display:'flex', gap:8 }}>
              {Object.keys(ROLES).map(k=>(
                <button key={k} onClick={()=>{ setEmail(ROLES[k].email); setPw('demo-pass'); }} style={{ flex:1, padding:'8px 6px', borderRadius:10, border:'1px solid rgba(255,255,255,0.14)', background:'rgba(255,255,255,0.05)', cursor:'pointer', textAlign:'center' }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:12, color:'var(--dust-cream)' }}>{ROLES[k].label}</div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:9.5, color:'#9F8979', marginTop:2 }}>{ROLES[k].name.split(' ')[0]}</div>
                </button>
              ))}
            </div>
          </div>
        </div>

        <div style={{ marginTop:16, textAlign:'center', fontFamily:'var(--font-body)', fontSize:11.5, color:'#8A786B' }}>
          New restaurant? <span style={{ color:'var(--sun-orange)', fontFamily:'var(--font-display)', fontWeight:700, cursor:'pointer' }}>Apply to join Lasso →</span>
        </div>
      </div>
    </div>
  );
}

// ─── Session restore splash ──────────────────────────────────────────
function SessionRestoring() {
  return (
    <div style={{ position:'absolute', inset:0, zIndex:200, display:'flex', flexDirection:'column', gap:16, alignItems:'center', justifyContent:'center', background:'var(--dark-chocolate)' }}>
      <Bull size={52}/>
      <div style={{ display:'flex', alignItems:'center', gap:9, fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, color:'#9F8979' }}>
        <span style={{ display:'inline-flex', animation:'v-spin 800ms linear infinite' }}><I.refresh c="var(--brand-orange)" s={15}/></span>
        Restoring your session…
      </div>
    </div>
  );
}

// ─── Expired-session overlay (kept context, re-auth in place) ────────
function SessionExpiredOverlay({ onSignBackIn, onSignOut }) {
  const [busy, setBusy] = React.useState(false);
  const go = () => { setBusy(true); setTimeout(onSignBackIn, 800); };
  return (
    <div style={{ position:'fixed', inset:0, zIndex:940, background:'rgba(12,8,6,0.6)', backdropFilter:'blur(7px)', display:'flex', alignItems:'center', justifyContent:'center', animation:'v-fade 200ms ease-out' }}>
      <div style={{ width:400, maxWidth:'calc(100vw - 48px)', background:'var(--dark-chocolate)', color:'var(--dust-cream)', borderRadius:20, border:'1px solid rgba(255,255,255,0.14)', padding:'26px 26px 22px', boxShadow:'0 40px 90px -20px rgba(0,0,0,0.8)', animation:'v-pop 240ms var(--ease-out)' }}>
        <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:12 }}>
          <div style={{ width:42, height:42, borderRadius:12, background:'rgba(224,153,42,0.18)', display:'flex', alignItems:'center', justifyContent:'center' }}><I.clock c="#E0992A" s={20}/></div>
          <div style={{ fontFamily:'var(--font-display)', fontWeight:900, fontSize:17 }}>Session expired</div>
        </div>
        <p style={{ margin:'0 0 18px', fontFamily:'var(--font-body)', fontSize:13, lineHeight:1.55, color:'#B6A595' }}>For security you've been signed out after inactivity. Sign back in to continue exactly where you left off — the kitchen queue is untouched.</p>
        <Btn kind="accent" full onClick={go} disabled={busy}
          icon={busy ? <span style={{ display:'inline-flex', animation:'v-spin 800ms linear infinite' }}><I.refresh c="#fff" s={15}/></span> : <I.lock c="#fff" s={15}/>}>
          {busy ? 'Signing back in…' : 'Sign back in'}
        </Btn>
        <button onClick={onSignOut} style={{ display:'block', width:'100%', marginTop:10, padding:'9px', background:'transparent', border:'none', cursor:'pointer', fontFamily:'var(--font-display)', fontWeight:700, fontSize:12.5, color:'#9F8979' }}>Switch account</button>
      </div>
    </div>
  );
}

// ─── Role-denied gate (mirrors RLS expectations) ─────────────────────
function RoleDenied({ page, session }) {
  const r = ROLES[session.role];
  return (
    <div style={{ maxWidth:620, margin:'60px auto 0' }}>
      <Card pad={0} style={{ overflow:'hidden' }}>
        <div style={{ padding:'32px 32px 26px', textAlign:'center' }}>
          <div style={{ width:56, height:56, borderRadius:16, background:'var(--bg-warm)', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 16px' }}>
            <I.lock c="var(--brand-orange)" s={25}/>
          </div>
          <h2 style={{ margin:'0 0 8px', fontFamily:'var(--font-display)', fontWeight:900, fontSize:20, color:'var(--fg-primary)' }}>Your role can't open this</h2>
          <p style={{ margin:'0 auto', maxWidth:420, fontFamily:'var(--font-body)', fontSize:13.5, lineHeight:1.55, color:'var(--warm-stone)' }}>
            You're signed in as <strong style={{ color:'var(--fg-primary)' }}>{r.name}</strong> ({r.label} — {r.access.toLowerCase()}). Ask your owner to upgrade your role if you need access here.
          </p>
        </div>
        <div style={{ padding:'13px 32px', borderTop:'1px solid var(--soft-line)', background:'var(--bg-app)', display:'flex', alignItems:'center', justifyContent:'center', gap:8 }}>
          <I.shield c="var(--warm-stone)" s={14}/>
          <span style={{ fontFamily:'var(--font-body)', fontSize:11.5, color:'var(--warm-stone)' }}>Access is enforced server-side by row-level security — this screen mirrors it.</span>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { AuthScreen, SessionRestoring, SessionExpiredOverlay, RoleDenied });