(function() {
  const { useState, useEffect } = React;

  // URL routing: /listings/edit/abc123, /articles/new, etc.
  function parseURL() {
    const parts = window.location.pathname.replace(/^\//, '').split('/');
    const page = parts[0] || 'dashboard';
    const action = parts[1] || null; // edit, new, etc.
    const id = parts[2] || null;
    return { page, action, id };
  }

  function buildURL(page, action, id) {
    let url = '/' + (page === 'dashboard' ? '' : page);
    if (action) url += '/' + action;
    if (id) url += '/' + id;
    return url;
  }

  const validPages = ['dashboard','executive','listings','npl','submissions','brokers','owners','investors','users','articles','leads','privacy','audit','system'];

  // สิทธิ์เข้าถึงแต่ละหน้าตาม role (ตรงกับเมนูใน Sidebar) — กันเข้า URL ตรงข้ามสิทธิ์
  const PAGE_ROLES = {
    dashboard: ['super_admin','admin'], executive: ['super_admin'],
    listings: ['super_admin','admin','marketing'], npl: ['super_admin','admin','marketing'], submissions: ['super_admin','admin'],
    brokers: ['super_admin','admin'], owners: ['super_admin','admin'], investors: ['super_admin','admin'],
    users: ['super_admin'], articles: ['super_admin','marketing'],
    leads: ['super_admin','admin'], privacy: ['super_admin'], audit: ['super_admin'],
    system: ['super_admin'],
  };
  const homePage = (role) => role === 'marketing' ? 'articles' : 'dashboard';
  const canAccess = (pg, role) => (PAGE_ROLES[pg] || ['super_admin']).includes(role);

  function App() {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const [route, setRouteState] = useState(() => parseURL());
    const [navOpen, setNavOpen] = useState(false); // เมนูมือถือ (drawer)
    const [counts, setCounts] = useState({}); // ตัวเลขแจ้งเตือนบนเมนู (ของใหม่/ต้องรีวิว)
    const { lang, setLang, t } = window.useAdminLang();

    function refreshCounts() {
      window.api.get('/admin/notifications/counts').then(d => setCounts(d.counts || {})).catch(() => {});
    }

    const page = validPages.includes(route.page) ? route.page : 'dashboard';

    function setPage(p) {
      const r = { page: p, action: null, id: null };
      setRouteState(r);
      window.history.pushState(r, '', buildURL(p));
    }

    function navigate(p, action, id) {
      const r = { page: p, action: action || null, id: id || null };
      setRouteState(r);
      window.history.pushState(r, '', buildURL(p, action, id));
    }

    useEffect(() => {
      const onPop = () => setRouteState(parseURL());
      window.addEventListener('popstate', onPop);
      return () => window.removeEventListener('popstate', onPop);
    }, []);

    // เปลี่ยนหน้า → เลื่อนเนื้อหาขึ้นบนสุดเสมอ (เนื้อหา scroll ใน .admin-main)
    useEffect(() => {
      const m = document.querySelector('.admin-main');
      if (m) m.scrollTo(0, 0);
      window.scrollTo(0, 0);
      setNavOpen(false); // เปลี่ยนหน้า → ปิด drawer มือถือ
    }, [route.page, route.action, route.id]);

    // กันเข้าหน้าเกินสิทธิ์ (พิมพ์ URL ตรง / หน้า default) → เด้งไปหน้าแรกของ role (marketing → บทความ)
    useEffect(() => {
      if (user && !canAccess(page, user.role)) setPage(homePage(user.role));
    }, [user, page]);

    useEffect(() => {
      window.firebaseAuth.onAuthStateChanged(async (firebaseUser) => {
        if (firebaseUser) {
          try {
            const token = await firebaseUser.getIdToken();
            const res = await fetch(window.ADMIN_CONFIG.apiUrl + '/auth/me', {
              headers: { Authorization: `Bearer ${token}` }
            });
            const data = await res.json();
            if (window.ADMIN_ROLES.includes(data.user?.role)) {
              setUser(data.user);
            } else {
              await window.firebaseAuth.signOut();
            }
          } catch(e) { await window.firebaseAuth.signOut(); }
        }
        setLoading(false);
      });
    }, []);

    // โหลดตัวเลขแจ้งเตือน: ตอน login, ทุก 60 วิ, และทุกครั้งที่เปลี่ยนหน้า (จัดการเสร็จ ตัวเลขลดทันที)
    useEffect(() => {
      if (!user) return;
      refreshCounts();
      const iv = setInterval(refreshCounts, 60000);
      return () => clearInterval(iv);
    }, [user]);
    useEffect(() => { if (user) refreshCounts(); }, [route.page, route.action]);

    function logout() { window.firebaseAuth.signOut(); setUser(null); }

    if (loading) return <div className="splash">{t('loading')}</div>;
    if (!user) return <LoginPage onLogin={setUser} lang={lang} t={t} />;

    const p = { t, lang, navigate, route, user };
    const pageMap = {
      dashboard: <DashboardPage {...p} />,
      executive: <ExecutivePage {...p} />,
      listings: <window.ListingsPage {...p} kind="normal" />,
      npl: <window.ListingsPage {...p} kind="npl" />,
      submissions: <window.SubmissionsPage {...p} />,
      brokers: <BrokersPage {...p} />,
      owners: <OwnersPage {...p} />,
      investors: <InvestorsPage user={user} {...p} />,
      users: <UsersPage user={user} {...p} />,
      articles: <ArticlesPage {...p} />,
      leads: <LeadsPage {...p} />,
      privacy: <window.PrivacyRequestsPage {...p} />,
      audit: <window.AuditLogsPage {...p} />,
      system: <SystemHub {...p} />,
    };

    return (
      <div className="admin-layout">
        <Sidebar page={page} setPage={setPage} user={user} onLogout={logout} t={t} lang={lang} setLang={setLang} navOpen={navOpen} counts={counts} />
        <div className={'admin-overlay' + (navOpen ? ' show' : '')} onClick={() => setNavOpen(false)} />
        <div className="admin-content">
          <window.AdminTopBar user={user} t={t} lang={lang} setLang={setLang} onLogout={logout} setPage={setPage} onMenu={() => setNavOpen(o => !o)} />
          <main className="admin-main" key={page}>
            {/* wrapper จัดกึ่งกลาง — ทุกหน้ากว้างเท่ากัน อยู่กลางจอ */}
            <div className="admin-page-wrap">
              {/* แสดงหน้าตามสิทธิ์เสมอ (กัน flash หน้าที่เข้าไม่ได้ก่อน effect เด้ง) */}
              {(canAccess(page, user.role) ? pageMap[page] : pageMap[homePage(user.role)]) || <ArticlesPage {...p} />}
            </div>
          </main>
        </div>
      </div>
    );
  }

  window.AdminApp = App;
})();