// Auth + session + roles + Team settings + command palette.

const ADMIN_ACCOUNTS = [
  { name:'D. Sessoms',  email:'owner@tuepac.com', initials:'DS', role:'owner',    last:'now' },
  { name:'M. Whitaker', email:'ops@tuepac.com',   initials:'MW', role:'operator', last:'2h ago' },
  { name:'R. Okafor',   email:'ro@tuepac.com',    initials:'RO', role:'operator', last:'yesterday' },
  { name:'C. Reyes',    email:'cr@tuepac.com',    initials:'CR', role:'operator', last:'3d ago' },
  { name:'Board seat',  email:'board@tuepac.com', initials:'BD', role:'viewer',   last:'last week' },
];
const DEMO_PASSWORD = 'tuepac';

function getAdminSession(){
  try { return JSON.parse(localStorage.getItem('tuepac_admin_session')); } catch(e){ return null; }
}
function setAdminSession(acct){
  localStorage.setItem('tuepac_admin_session', JSON.stringify({name:acct.name,email:acct.email,initials:acct.initials,role:acct.role,at:Date.now()}));
  window.dispatchEvent(new Event('tuepac-auth'));
}
function clearAdminSession(){
  localStorage.removeItem('tuepac_admin_session');
  window.dispatchEvent(new Event('tuepac-auth'));
}
function roleAllows(role, routeId){
  if(role==='owner') return true;
  if(role==='operator') return !['acq','team'].includes(routeId);
  return ['dash','pubintel','rev'].includes(routeId); // viewer: read-only reports
}

// ---------- login ----------
function AdminLogin(){
  const [mode, setMode]   = React.useState('magic');   // magic | password
  const [stage, setStage] = React.useState('form');    // form | sent
  const [email, setEmail] = React.useState('');
  const [pw, setPw]       = React.useState('');
  const [err, setErr]     = React.useState(null);
  const [fails, setFails] = React.useState(0);
  const acct = ADMIN_ACCOUNTS.find(a=>a.email.toLowerCase()===email.trim().toLowerCase());
  const limited = fails>=3;

  function submit(){
    if(limited) return;
    setErr(null);
    if(!/\S+@\S+\.\S+/.test(email.trim())) return setErr('Enter a valid email address.');
    if(!acct) return setErr('No account for that address. Ask an owner to invite you.');
    if(mode==='magic'){ setStage('sent'); return; }
    if(pw===DEMO_PASSWORD){ setAdminSession(acct); return; }
    const n = fails+1; setFails(n);
    setErr(n>=3 ? 'Too many attempts · locked for a moment. Use a magic link instead.' : 'Wrong password. Try again, or use a magic link.');
  }

  return (
    <div className="login">
      <div className="login-card">
        <div className="mono" style={{fontSize:9.5,letterSpacing:'.22em',color:'var(--gold)',textTransform:'uppercase'}}>Operator console</div>
        <div className="serif" style={{fontSize:44,fontWeight:800,letterSpacing:'-.015em',lineHeight:.95,margin:'10px 0 4px',color:'var(--ivory)'}}>TUEPAC</div>
        <div className="rule-accent"><i style={{background:'var(--red)'}}></i><i style={{background:'var(--gold)'}}></i><i style={{background:'var(--green)'}}></i><i style={{background:'var(--navy-2)'}}></i></div>

        {stage==='form' ? <>
          <div style={{marginTop:26}}>
            <div className="eyebrow" style={{color:'#8fa5c4',marginBottom:6}}>EMAIL</div>
            <input className="login-inp" autoFocus value={email} onChange={e=>{setEmail(e.target.value);setErr(null);}} onKeyDown={e=>{if(e.key==='Enter')submit();}} placeholder="you@tuepac.com"/>
          </div>
          {mode==='password' && (
            <div style={{marginTop:14}}>
              <div className="eyebrow" style={{color:'#8fa5c4',marginBottom:6}}>PASSWORD</div>
              <input className="login-inp" type="password" value={pw} onChange={e=>{setPw(e.target.value);setErr(null);}} onKeyDown={e=>{if(e.key==='Enter')submit();}} placeholder="••••••••"/>
            </div>
          )}
          {err && <div className="login-err">{err}</div>}
          <button className="login-go" onClick={submit} style={{opacity:limited?.4:1}}>
            {mode==='magic' ? 'Email me a sign-in link →' : 'Sign in →'}
          </button>
          <button className="login-alt" onClick={()=>{setMode(mode==='magic'?'password':'magic');setErr(null);}}>
            {mode==='magic' ? 'Use a password instead' : 'Use a magic link instead'}
          </button>
        </> : <>
          <div style={{marginTop:30,padding:'18px 16px',border:'1px solid var(--rule)',background:'rgba(179,25,66,.05)'}}>
            <div className="mono" style={{fontSize:10,letterSpacing:'.16em',color:'var(--gold)',textTransform:'uppercase'}}>✓ Check your email</div>
            <div style={{fontSize:13,color:'#c6d2e2',marginTop:8,lineHeight:1.55}}>We sent a sign-in link to <b style={{color:'var(--ivory)'}}>{email.trim()}</b>. It expires in 15 minutes.</div>
          </div>
          <button className="login-go" onClick={()=>acct && setAdminSession(acct)}>(demo) Open the magic link →</button>
          <button className="login-alt" onClick={()=>setStage('form')}>← Different address</button>
        </>}

        <div className="login-foot">
          <div>DEMO ACCOUNTS · PASSWORD “{DEMO_PASSWORD}”</div>
          {ADMIN_ACCOUNTS.filter(a=>['owner@tuepac.com','ops@tuepac.com','board@tuepac.com'].includes(a.email)).map(a=>(
            <a key={a.email} onClick={()=>{setEmail(a.email);setErr(null);setStage('form');}}>{a.email} · {a.role.toUpperCase()}</a>
          ))}
        </div>
      </div>
      <div className="login-strap mono">ONE CONSOLE · ROLE-BASED ACCESS · NO SHARED TOKENS · <a href="TUEPAC Network.html" style={{color:'var(--gold)'}}>PUBLIC SITE →</a></div>
    </div>
  );
}

// ---------- command palette ----------
function CommandPalette({open, onClose, go}){
  const [q, setQ] = React.useState('');
  const [hi, setHi] = React.useState(0);
  React.useEffect(()=>{ if(open){ setQ(''); setHi(0);} }, [open]);
  if(!open) return null;
  const sess = getAdminSession() || {role:'viewer'};
  const items = (window.ADMIN_NAV||[]).flatMap(g=>g.items.map(it=>({...it, grp:g.label}))).concat(window.ADMIN_PAL_EXTRA||[])
    .filter(it=>roleAllows(sess.role, it.id))
    .filter(it=>!q.trim() || (it.label+' '+it.grp).toLowerCase().includes(q.trim().toLowerCase()));
  function key(e){
    if(e.key==='Escape') onClose();
    else if(e.key==='ArrowDown'){ e.preventDefault(); setHi(h=>Math.min(h+1, items.length-1)); }
    else if(e.key==='ArrowUp'){ e.preventDefault(); setHi(h=>Math.max(h-1, 0)); }
    else if(e.key==='Enter' && items[hi]){ go(items[hi].id); onClose(); }
  }
  return (
    <div className="cp-veil" onClick={onClose}>
      <div className="cp" onClick={e=>e.stopPropagation()}>
        <div className="cp-inp">
          <span className="mono" style={{fontSize:10,color:'var(--gold-2)',letterSpacing:'.14em'}}>GO TO</span>
          <input autoFocus value={q} onChange={e=>{setQ(e.target.value);setHi(0);}} onKeyDown={key} placeholder="type a section… pipeline, revenue, business"/>
          <span className="kbd">esc</span>
        </div>
        <div className="cp-list">
          {items.length===0 && <div className="cp-none mono">NO MATCH</div>}
          {items.map((it,i)=>(
            <button key={it.id} className={i===hi?'on':''} onMouseEnter={()=>setHi(i)} onClick={()=>{go(it.id);onClose();}}>
              <span>{it.label}</span>
              <span className="mono" style={{fontSize:9,letterSpacing:'.14em',color:'var(--mute)'}}>{it.grp}{it.badge?` · ${it.badge}`:''}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- team / settings (owner-only) ----------
function TeamSettings({setRoute}){
  const [members, setMembers] = React.useState(ADMIN_ACCOUNTS.map(a=>({...a, status:'active'})));
  const [invEmail, setInvEmail] = React.useState('');
  const [invRole, setInvRole]   = React.useState('operator');
  const [live, setLive] = React.useState(localStorage.getItem('tuepac_live_sending')==='1');
  const me = getAdminSession();

  function invite(){
    const e = invEmail.trim();
    if(!/\S+@\S+\.\S+/.test(e) || members.some(m=>m.email===e)) return;
    setMembers(prev=>[...prev, {name:e.split('@')[0], email:e, initials:e.slice(0,2).toUpperCase(), role:invRole, last:' · ', status:'invited'}]);
    setInvEmail('');
  }
  function setRole(email, role){ setMembers(prev=>prev.map(m=>m.email===email?{...m,role}:m)); }
  function revoke(email){ setMembers(prev=>prev.map(m=>m.email===email?{...m,status:'revoked'}:m)); }
  function toggleLive(){
    const v = !live; setLive(v);
    localStorage.setItem('tuepac_live_sending', v?'1':'0');
    window.dispatchEvent(new Event('tuepac-live'));
  }

  return (
    <AdminShell route="team" setRoute={setRoute} title="Team & access" breadcrumb="SETTINGS · ACCOUNTS + ROLES"
      actions={<button className="btn gh s">Audit log</button>}>

      <div className={'gate '+(live?'live':'dry')}>
        <div>
          <div className="mono" style={{fontSize:10,letterSpacing:'.16em',fontWeight:600}}>{live?'⚠ SENDING · LIVE':'SENDING · DRY-RUN'}</div>
          <div style={{fontSize:12.5,marginTop:4,opacity:.85}}>{live?'Invitations and campaign email go to real recipients.':'Invitations render + log but nothing is delivered. Flip only when ready.'}</div>
        </div>
        <button className={'btn s '+(live?'k':'r')} onClick={toggleLive}>{live?'Switch to dry-run':'Go live'}</button>
      </div>

      <div className="lay2" style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:18,alignItems:'flex-start'}}>
        <Card title="Members" meta={`${members.filter(m=>m.status!=='revoked').length} active`}>
          <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
            <thead><tr><th>PERSON</th><th>ROLE</th><th>LAST ACTIVE</th><th>STATUS</th><th className="r"></th></tr></thead>
            <tbody>
              {members.map(m=>(
                <tr key={m.email} style={{opacity:m.status==='revoked'?.45:1}}>
                  <td>
                    <div style={{display:'flex',alignItems:'center',gap:10}}>
                      <span className="av-s">{m.initials}</span>
                      <span><div style={{fontSize:12.5,fontWeight:600}}>{m.name}{me && m.email===me.email && <span className="mono" style={{fontSize:9,color:'var(--gold-2)',marginLeft:6,letterSpacing:'.1em'}}>YOU</span>}</div>
                      <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.04em'}}>{m.email.toUpperCase()}</div></span>
                    </div>
                  </td>
                  <td>
                    <select value={m.role} disabled={m.status==='revoked'||(me&&m.email===me.email)} onChange={e=>setRole(m.email, e.target.value)}
                      style={{padding:'4px 6px',border:'1px solid var(--rule-line)',background:'var(--bg)',fontSize:11,fontFamily:'var(--mono)',letterSpacing:'.06em',textTransform:'uppercase',outline:'none'}}>
                      <option value="owner">OWNER</option><option value="operator">OPERATOR</option><option value="viewer">VIEWER</option>
                    </select>
                  </td>
                  <td className="mono" style={{fontSize:10.5,color:'var(--mute)',letterSpacing:'.04em'}}>{m.last}</td>
                  <td><Pill k={m.status==='active'?'live':m.status==='invited'?'warn':'bad'}>{m.status}</Pill></td>
                  <td className="r">{(!me || m.email!==me.email) && m.status!=='revoked' && <button className="btn gh s" onClick={()=>revoke(m.email)}>Revoke</button>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        <div style={{display:'flex',flexDirection:'column',gap:18,minWidth:0}}>
          <Card title="Invite by email" meta="magic link · no passwords">
            <div className="eyebrow" style={{marginBottom:5}}>EMAIL</div>
            <input value={invEmail} onChange={e=>setInvEmail(e.target.value)} onKeyDown={e=>{if(e.key==='Enter')invite();}} placeholder="person@tuepac.com"
              style={{width:'100%',padding:'8px 10px',border:'1px solid var(--rule-line)',background:'var(--bg)',fontSize:12.5,outline:'none',display:'block'}}/>
            <div className="eyebrow" style={{margin:'12px 0 6px'}}>ROLE</div>
            <Seg value={invRole} onChange={setInvRole} options={['owner','operator','viewer']}/>
            <div style={{marginTop:14}}><button className="btn g s" onClick={invite} style={{opacity:/\S+@\S+\.\S+/.test(invEmail)?1:.4}}>Send invite →</button></div>
          </Card>
          <Card title="Roles" meta="what each can do">
            {[['OWNER','Everything · team, live-send gate, acquisition, settings.'],
              ['OPERATOR','Day-to-day: pipeline, publishers, content, commerce.'],
              ['VIEWER','Read-only dashboards and reports. No write actions.']].map(([r,d])=>(
              <div key={r} style={{display:'grid',gridTemplateColumns:'86px 1fr',gap:10,padding:'7px 0',borderBottom:'1px solid var(--rule-line)',alignItems:'baseline'}}>
                <span className="mono" style={{fontSize:9.5,letterSpacing:'.14em',color:'var(--gold-2)',fontWeight:600}}>{r}</span>
                <span style={{fontSize:12}}>{d}</span>
              </div>
            ))}
            <div style={{marginTop:12}}><button className="btn gh s">Rotate API credentials</button></div>
          </Card>
        </div>
      </div>
    </AdminShell>
  );
}

Object.assign(window, { AdminLogin, CommandPalette, TeamSettings, getAdminSession, setAdminSession, clearAdminSession, roleAllows });