/* ============================================================
   CRUIG — App root + navigation
   ============================================================ */
// admin.cruig.com.br tem seu próprio fluxo de login/painel, isolado do site principal
const IS_ADMIN_HOST = location.hostname.startsWith('admin.');

function App(){
  // view: landing | creator | company | admin
  const [view, setView] = useState(IS_ADMIN_HOST ? 'admin' : 'landing');
  const [checkout, setCheckout] = useState(null); // {role, planId}
  const [loginOpen, setLoginOpen] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);
  const [authChecked, setAuthChecked] = useState(false);
  const [toast, showToast] = useToast();

  const go = (v)=>{ setView(v); window.scrollTo(0,0); const sc=document.querySelector('.app-scroll'); if(sc) sc.scrollTop=0; };

  // Restaura sessão real (cookie do Worker) — se já houver login, abre direto o painel do usuário
  useEffect(()=>{
    CruigAPI.get('/auth/me').then(({user})=>{
      if(user){
        setCurrentUser(user);
        if(!IS_ADMIN_HOST) go(user.role);
      }
    }).catch(()=>{}).finally(()=> setAuthChecked(true));
  },[]);

  const logout = async ()=>{
    try{ await CruigAPI.post('/auth/logout'); } catch{}
    setCurrentUser(null);
    go(IS_ADMIN_HOST ? 'admin' : 'landing');
  };

  // ---------- admin.cruig.com.br: site isolado (login próprio + painel admin) ----------
  if(IS_ADMIN_HOST){
    if(!authChecked) return null;
    if(currentUser?.role !== 'admin'){
      return <AdminLogin onLogin={(user)=>setCurrentUser(user)} onExit={()=>{}}/>;
    }
    return (
      <div className="app-scroll" style={{minHeight:'100vh'}}>
        <AdminPanel go={go} showToast={showToast}/>
        <RoleSwitch view="admin" go={go} currentUser={currentUser} onLogout={logout} adminOnly/>
      </div>
    );
  }

  // ---------- site principal: cada usuário logado só acessa o próprio painel ----------
  const safeGo = (v)=>{
    if(currentUser && ['creator','company'].includes(currentUser.role) && ['creator','company','admin'].includes(v)){
      go(currentUser.role); // bloqueia navegação para painéis de outro perfil
      return;
    }
    go(v);
  };

  return (
    <div className="app-scroll" style={{minHeight:'100vh'}}>
      {view==='landing' && <Landing onEnter={safeGo} onLogin={()=>setLoginOpen(true)}/>}
      {view==='creator' && <CreatorPanel go={safeGo} showToast={showToast} onUpgrade={(planId)=>setCheckout({role:'creator',planId:planId||'s'})}/>}
      {view==='company' && <CompanyPanel go={safeGo} showToast={showToast} onUpgrade={(planId)=>setCheckout({role:'company',planId:planId||'s'})}/>}

      {/* Demo: explorar painéis sem login real */}
      {view!=='landing' && !currentUser && <RoleSwitch view={view} go={safeGo} currentUser={currentUser} onLogout={logout}/>}
      {view!=='landing' && currentUser && <RoleSwitch view={view} go={safeGo} currentUser={currentUser} onLogout={logout} lockToCurrent/>}
      {view==='landing' && <DemoLauncher go={safeGo}/>}

      {checkout && <Checkout role={checkout.role} planId={checkout.planId} onClose={()=>setCheckout(null)}
        onDone={()=>{ setCheckout(null); showToast('Assinatura ativada com sucesso!'); }}/>}
      {loginOpen && <LoginModal onClose={()=>setLoginOpen(false)} go={(v)=>{setLoginOpen(false); CruigAPI.get('/auth/me').then(({user})=>{ if(user) setCurrentUser(user); }).catch(()=>{}); go(v);}}/>}
      {toast}
    </div>
  );
}

/* Floating switcher — em modo demo permite trocar de painel; com login real, só mostra a conta + sair */
function RoleSwitch({view, go, currentUser, onLogout, lockToCurrent, adminOnly}){
  const [open,setOpen] = useState(false);
  const roles = [['creator','Criador','users'],['company','Empresa','grid'],['admin','Admin','chart'],['landing','Landing','bolt']];

  // Logado de verdade: sem opção de trocar de painel, só conta + sair
  if(lockToCurrent || adminOnly){
    const label = {creator:'Criador', company:'Empresa', admin:'Administrador'}[currentUser?.role] || '';
    return (
      <div style={{position:'fixed', right:18, bottom:18, zIndex:90, display:'flex', flexDirection:'column', alignItems:'flex-end', gap:10}}>
        {open && (
          <div className="card pop" style={{padding:8, boxShadow:'var(--sh-lg)', display:'flex', flexDirection:'column', gap:4, minWidth:200}}>
            <div className="faint" style={{fontSize:11, fontWeight:700, padding:'6px 10px 2px', textTransform:'uppercase', letterSpacing:'.08em'}}>Conta ({label})</div>
            <div style={{padding:'4px 11px 8px', fontSize:14, fontWeight:600, color:'var(--ink)'}}>{currentUser?.email}</div>
            <button onClick={()=>{ onLogout(); setOpen(false); }} style={{display:'flex', alignItems:'center', gap:10, padding:'9px 11px', borderRadius:10, color:'var(--danger)', fontWeight:600, fontSize:14, textAlign:'left', borderTop:'1px solid var(--line)', marginTop:4}}>
              <Icon name="close" size={17}/>Sair
            </button>
          </div>
        )}
        <button className="btn btn-dark" onClick={()=>setOpen(o=>!o)} style={{borderRadius:'var(--r-pill)', boxShadow:'var(--sh-lg)', padding:'12px 18px'}}>
          <Icon name={open?'close':'users'} size={18}/>{open?'Fechar':'Minha conta'}
        </button>
      </div>
    );
  }

  return (
    <div style={{position:'fixed', right:18, bottom:18, zIndex:90, display:'flex', flexDirection:'column', alignItems:'flex-end', gap:10}}>
      {open && (
        <div className="card pop" style={{padding:8, boxShadow:'var(--sh-lg)', display:'flex', flexDirection:'column', gap:4, minWidth:170}}>
          <div className="faint" style={{fontSize:11, fontWeight:700, padding:'6px 10px 2px', textTransform:'uppercase', letterSpacing:'.08em'}}>Ver protótipo como</div>
          {roles.map(([k,l,ic])=>(
            <button key={k} onClick={()=>{ go(k); setOpen(false);}} style={{display:'flex', alignItems:'center', gap:10, padding:'9px 11px', borderRadius:10,
              background: view===k?'var(--lime-100)':'transparent', color: view===k?'var(--lime-700)':'var(--ink)', fontWeight:600, fontSize:14, textAlign:'left'}}>
              <Icon name={ic} size={17}/>{l}
            </button>
          ))}
        </div>
      )}
      <button className="btn btn-dark" onClick={()=>setOpen(o=>!o)} style={{borderRadius:'var(--r-pill)', boxShadow:'var(--sh-lg)', padding:'12px 18px'}}>
        <Icon name={open?'close':'grid'} size={18}/>{open?'Fechar':'Trocar painel'}
      </button>
    </div>
  );
}

function DemoLauncher({go}){
  const [open,setOpen]=useState(false);
  const roles=[['creator','Criador de conteúdo','users','Perfil, campanhas, afiliados'],['company','Empresa','grid','Busca, filtros, campanhas'],['admin','Administrador','chart','Métricas, MRR, CRM']];
  return (
    <div style={{position:'fixed', right:18, bottom:18, zIndex:90}}>
      {open && (
        <div className="card pop" style={{padding:10, boxShadow:'var(--sh-lg)', marginBottom:10, width:280}}>
          <div className="faint" style={{fontSize:11, fontWeight:700, padding:'6px 10px', textTransform:'uppercase', letterSpacing:'.08em'}}>Explorar painéis (demo)</div>
          {roles.map(([k,l,ic,d])=>(
            <button key={k} onClick={()=>{go(k); setOpen(false);}} style={{display:'flex', alignItems:'center', gap:12, padding:'11px', borderRadius:12, width:'100%', textAlign:'left'}}
              onMouseEnter={e=>e.currentTarget.style.background='var(--beige-deep)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
              <span style={{width:38,height:38,borderRadius:11,background:'var(--lime-100)',color:'var(--lime-700)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><Icon name={ic} size={19}/></span>
              <span><span style={{display:'block',fontWeight:700,fontSize:14,color:'var(--green-dark)'}}>{l}</span><span className="faint" style={{fontSize:12}}>{d}</span></span>
            </button>
          ))}
        </div>
      )}
      <button className="btn btn-dark" onClick={()=>setOpen(o=>!o)} style={{borderRadius:'var(--r-pill)', boxShadow:'var(--sh-lg)', padding:'13px 20px'}}>
        <Icon name={open?'close':'play'} size={18} fill={!open}/>{open?'Fechar':'Explorar protótipo'}
      </button>
    </div>
  );
}

window.App = App;