// ============================================================
//  ROOT APP — Auth, Routing, Layout, Seed
// ============================================================

// ============================================================
//  SEED — Create demo users if table is empty
// ============================================================
const DEMO_USERS = [
  { id:'user-admin-001', username:'admin', password:'admin123', full_name:'Admin SEO', email:'admin@seosop.vn', role:'admin', status:'active', avatar:'AD' },
  { id:'user-member-001', username:'member1', password:'member123', full_name:'Nguyễn Văn Seo', email:'member1@seosop.vn', role:'member', status:'active', avatar:'NV' },
  { id:'user-member-002', username:'member2', password:'member456', full_name:'Trần Thị Content', email:'member2@seosop.vn', role:'member', status:'active', avatar:'TC' },
];

async function seedDemoData() {
  try {
    const res = await API.get('users', { limit:5 });
    if ((res.data||[]).length === 0) {
      for (const u of DEMO_USERS) {
        try { await API.post('users', u); } catch(e) {}
      }
    }
  } catch(e) {}
}

// ============================================================
//  APP COMPONENT
// ============================================================
function App() {
  const [user, setUser] = React.useState(null);
  const [page, setPage] = React.useState('dashboard');
  const [domainId, setDomainId] = React.useState(null);
  const [sidebarOpen, setSidebarOpen] = React.useState(false);
  const [unreadLogs, setUnreadLogs] = React.useState(0);
  const [seeded, setSeeded] = React.useState(false);
  const [appLoading, setAppLoading] = React.useState(true);

  // On mount — seed data
  React.useEffect(() => {
    seedDemoData().finally(() => {
      setAppLoading(false);
      setSeeded(true);
    });
  }, []);

  // Track store changes
  React.useEffect(() => {
    Store.on('currentPage', setPage);
    Store.on('currentDomainId', setDomainId);
    Store.on('currentUser', setUser);
  }, []);

  // Poll unread logs count for admin
  React.useEffect(() => {
    if (!user || user.role !== 'admin') return;
    const check = async () => {
      try {
        const r = await API.get('activity_logs', { limit:1 });
        setUnreadLogs(r.total || 0);
      } catch(e) {}
    };
    check();
    const t = setInterval(check, 60000);
    return () => clearInterval(t);
  }, [user]);

  const navigate = (target, id) => {
    if (target === 'domain-detail' && id) {
      Store.set('currentDomainId', id);
      setDomainId(id);
    }
    Store.set('currentPage', target);
    setPage(target);
    setSidebarOpen(false);
    window.scrollTo(0, 0);
  };

  const handleLogin = async (u) => {
    Store.set('currentUser', u);
    setUser(u);
    await logAction('login', `Đăng nhập hệ thống`);
    navigate('dashboard');
  };

  const handleLogout = async () => {
    await logAction('logout', `Đăng xuất hệ thống`);
    Store.set('currentUser', null);
    setUser(null);
    setPage('dashboard');
  };

  const renderPage = () => {
    switch(page) {
      case 'dashboard':    return <DashboardPage user={user} onNavigate={navigate}/>;
      case 'domains':      return <DomainsPage user={user} onNavigate={navigate}/>;
      case 'domain-detail':return <DomainDetailPage domainId={domainId || Store.get('currentDomainId')} onNavigate={navigate}/>;
      case 'keywords':     return <KeywordsPage user={user} onNavigate={navigate}/>;
      case 'users':
        if (user?.role !== 'admin') { navigate('dashboard'); return null; }
        return <UsersPage/>;
      case 'progress':
        if (user?.role !== 'admin') { navigate('dashboard'); return null; }
        return <ProgressPage onNavigate={navigate}/>;
      case 'logs':
        if (user?.role !== 'admin') { navigate('dashboard'); return null; }
        return <LogsPage/>;
      case 'guide':        return <GuidePage user={user} onNavigate={navigate}/>;
      case 'docs':         return <DocsPage/>;
      default:             return <DashboardPage user={user} onNavigate={navigate}/>;
    }
  };

  if (appLoading) {
    return (
      <div style={{minHeight:'100vh',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',background:'linear-gradient(135deg,#0f172a,#1e1b4b)'}}>
        <div style={{width:64,height:64,borderRadius:18,background:'linear-gradient(135deg,#4f46e5,#06b6d4)',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:20,boxShadow:'0 8px 24px rgba(79,70,229,.5)'}}>
          <i className="fas fa-chart-line" style={{fontSize:'1.8rem',color:'#fff'}}/>
        </div>
        <div style={{color:'#fff',fontWeight:800,fontSize:'1.4rem',marginBottom:8}}>SEO <span style={{color:'#818cf8'}}>SOP</span> System</div>
        <div style={{color:'#64748b',fontSize:'.875rem',marginBottom:24}}>Đang khởi động hệ thống...</div>
        <i className="fas fa-circle-notch fa-spin" style={{color:'#4f46e5',fontSize:'1.5rem'}}/>
      </div>
    );
  }

  if (!user) {
    return (
      <>
        <div id="toast-wrap" style={{position:'fixed',top:16,right:16,zIndex:9999,display:'flex',flexDirection:'column',gap:8}}/>
        <LoginPage onLogin={handleLogin}/>
      </>
    );
  }

  return (
    <>
      {/* TOAST */}
      <div id="toast-wrap" style={{position:'fixed',top:16,right:16,zIndex:9999,display:'flex',flexDirection:'column',gap:8,pointerEvents:'none'}}/>

      {/* LAYOUT */}
      <div className="app-wrap">
        <Sidebar
          currentPage={page}
          onNavigate={navigate}
          onLogout={handleLogout}
          user={user}
          sidebarOpen={sidebarOpen}
          onClose={() => setSidebarOpen(false)}
        />
        <div className="main-area">
          <Topbar
            currentPage={page}
            onHamburger={() => setSidebarOpen(true)}
            user={user}
            onNavigate={navigate}
            unreadLogs={unreadLogs}
          />
          <main className="content-area">
            {renderPage()}
          </main>
        </div>
      </div>
    </>
  );
}

// ============================================================
//  MOUNT
// ============================================================
const rootEl = document.getElementById('root');
const reactRoot = ReactDOM.createRoot(rootEl);
reactRoot.render(<App/>);