// app.jsx — router principal com auth Supabase real

const { useState: usApp, useEffect: ueApp } = React;

const PAGE_META = {
  'dashboard':      { crumbs: ['Dashboard'] },
  'sync':           { crumbs: ['Sincronizações'] },
  'logs':           { crumbs: ['Logs de execução'] },
  'billing':        { crumbs: ['Plano & cobrança'] },
  'settings':       { crumbs: ['Conexões'] },
  'admin':          { crumbs: ['Plataforma', 'Visão geral'] },
  'admin-tenants':  { crumbs: ['Plataforma', 'Tenants'] },
  'admin-plans':    { crumbs: ['Plataforma', 'Planos'] },
  'onboarding':     { crumbs: ['Configuração inicial'] },
};

const DEFAULT_PREFS = {
  theme: 'dark',
  density: 'comfortable',
  nav: 'side',
  dashLayout: 'cards',
  logsView: 'table',
};

function App() {
  const [session, setSession]       = usApp(null);
  const [profile, setProfile]       = usApp(null);
  const [tenant, setTenant]         = usApp(null);
  const [loading, setLoading]       = usApp(true);
  const [route, setRoute]           = usApp('dashboard');
  const [tweaksOpen, setTweaksOpen] = usApp(false);
  const [prefs, setPrefs] = usApp(() => {
    try { return { ...DEFAULT_PREFS, ...JSON.parse(localStorage.getItem('sb_prefs') || '{}') }; }
    catch { return DEFAULT_PREFS; }
  });

  // ── Auth ──────────────────────────────────────────────────────────────────
  ueApp(() => {
    SB.getSession().then(s => {
      setSession(s);
      if (s) loadUserData();
      else setLoading(false);
    });

    const { data: { subscription } } = SB.client.auth.onAuthStateChange((_ev, s) => {
      setSession(s);
      if (s) loadUserData();
      else { setProfile(null); setTenant(null); setLoading(false); }
    });
    return () => subscription.unsubscribe();
  }, []);

  async function loadUserData() {
    try {
      const [pRes, tRes] = await Promise.allSettled([SB.getProfile(), SB.getTenant()]);
      const prof = pRes.status === 'fulfilled' ? pRes.value : null;
      let   ten  = tRes.status === 'fulfilled' ? tRes.value  : null;
      setProfile(prof);

      // Se tem tenant_id na URL (vindo do OAuth callback), tentar vincular ao usuário
      const urlParams = new URLSearchParams(location.search);
      const urlTenantId = urlParams.get('tenant_id');
      if (urlTenantId && !ten) {
        try {
          const user = await SB.getUser();
          if (user?.id) {
            await SB.client.from('tenants')
              .update({ owner_user_id: user.id })
              .eq('id', urlTenantId)
              .is('owner_user_id', null);
            const { data } = await SB.client.from('tenants').select('*').eq('id', urlTenantId).maybeSingle();
            ten = data;
          }
        } catch (e) { console.warn('tenant link:', e); }
      }

      setTenant(ten);

      const role  = prof?.role ?? 'user';
      const saved = localStorage.getItem('sb_route');

      if (role === 'super_admin') {
        setRoute(saved?.startsWith('admin') ? saved : 'admin');
      } else if (!ten?.nuvemshop_store_id || ten?.status === 'pending') {
        setRoute('onboarding');
      } else {
        setRoute(saved && !saved.startsWith('admin') ? saved : 'dashboard');
      }
    } catch (e) {
      console.error('loadUserData:', e);
    } finally {
      setLoading(false);
    }
  }

  // ── Persistência ──────────────────────────────────────────────────────────
  ueApp(() => { localStorage.setItem('sb_route', route); }, [route]);
  ueApp(() => { localStorage.setItem('sb_prefs', JSON.stringify(prefs)); }, [prefs]);
  ueApp(() => {
    document.documentElement.setAttribute('data-theme', prefs.theme);
    document.documentElement.setAttribute('data-density', prefs.density);
  }, [prefs.theme, prefs.density]);

  // ── Tweaks shortcut (T) ───────────────────────────────────────────────────
  ueApp(() => {
    const h = e => {
      if ((e.key === 't' || e.key === 'T') && !['INPUT','TEXTAREA'].includes(document.activeElement?.tagName))
        setTweaksOpen(o => !o);
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, []);

  function handleLogout() {
    SB.signOut().then(() => {
      localStorage.removeItem('sb_route');
      setProfile(null); setTenant(null); setSession(null);
    });
  }

  // ── Estados de carregamento / não autenticado ─────────────────────────────
  if (loading) return <SplashScreen />;
  if (!session) return <PageLogin onLogin={loadUserData} />;

  const role      = profile?.role ?? 'user';
  const meta      = PAGE_META[route] || { crumbs: ['SyncBridge'] };
  const storeName = tenant?.store_name ?? 'Minha Loja';
  const crumbs    = route.startsWith('admin') ? meta.crumbs : [storeName, ...meta.crumbs];

  return (
    <>
      <div className="app" data-nav={prefs.nav}>
        {prefs.nav === 'top' && <TopNav route={route} setRoute={setRoute} role={role} />}
        {prefs.nav === 'side' && <Sidebar route={route} setRoute={setRoute} role={role} tenant={tenant} />}
        <div className="main">
          <Topbar
            crumbs={crumbs}
            role={role}
            profile={profile}
            onTweaks={() => setTweaksOpen(o => !o)}
            onLogout={handleLogout}
          />
          <div className="content" key={route + role}>
            {route === 'onboarding' && (
              <PageOnboarding tenant={tenant} session={session}
                onComplete={t => { setTenant(t); setRoute('dashboard'); }} />
            )}
            {role !== 'super_admin' && route === 'dashboard' && (
              <PageDashboard prefs={prefs} tenant={tenant} />
            )}
            {role !== 'super_admin' && route === 'sync' && (
              <PageSync tenant={tenant} />
            )}
            {route === 'logs' && (
              <PageLogs prefs={prefs} role={role} tenant={tenant} />
            )}
            {role !== 'super_admin' && route === 'billing' && (
              <PageBilling tenant={tenant} />
            )}
            {route === 'settings' && (
              <PageSettings tenant={tenant} profile={profile} onTenantUpdate={setTenant} />
            )}
            {role === 'super_admin' && route.startsWith('admin') && (
              <PageAdmin route={route} setRoute={setRoute} />
            )}
          </div>
        </div>
      </div>
      <TweaksPanel open={tweaksOpen} setOpen={setTweaksOpen} prefs={prefs} setPrefs={setPrefs} />
    </>
  );
}

function SplashScreen() {
  return (
    <div style={{
      height: '100vh', display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center', gap: 16,
      background: 'var(--bg-base)',
    }}>
      <div className="brand-mark" style={{ width: 48, height: 48, fontSize: 20, borderRadius: 14 }}>S</div>
      <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>Carregando…</div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);