// Main React Application Coordinator
const { useState, useEffect } = React;

function App() {
  const [token, setToken] = useState(localStorage.getItem('icex_token') || '');
  const [user, setUser] = useState(null);
  const [activeTab, setActiveTab] = useState('dashboard');
  const [stats, setStats] = useState({ total: 0, online: 0, active: 0, unused: 0, expired: 0, banned: 0, frozen: 0 });
  const [apps, setApps] = useState([]);
  const [toast, setToast] = useState(null);
  const [loginError, setLoginError] = useState('');
  const [isLoggingIn, setIsLoggingIn] = useState(false);
  const [isRefreshing, setIsRefreshing] = useState(false);

  const showToast = (msg, type = 'success') => {
    setToast({ msg, type });
    setTimeout(() => setToast(null), 4000);
  };

  // Check auth
  useEffect(() => {
    if (token) {
      fetch('/api/auth/me', {
        headers: { 'Authorization': `Bearer ${token}` }
      })
        .then(r => r.json())
        .then(data => {
          if (data.success) {
            setUser(data.user);
          } else {
            handleLogout();
          }
        })
        .catch(() => handleLogout());
    }
  }, [token]);

  // Fetch Stats & Apps
  const fetchGlobalData = async () => {
    if (!token) return;
    setIsRefreshing(true);
    try {
      const [resStats, resApps] = await Promise.all([
        fetch('/api/licenses/stats', { headers: { 'Authorization': `Bearer ${token}` } }),
        fetch('/api/apps', { headers: { 'Authorization': `Bearer ${token}` } })
      ]);

      const dataStats = await resStats.json();
      const dataApps = await resApps.json();

      if (dataStats.success) setStats(dataStats.stats);
      if (dataApps.success) setApps(dataApps.apps);
    } catch (err) {
      console.error('Global data error:', err);
    } finally {
      setIsRefreshing(false);
    }
  };

  useEffect(() => {
    if (token && user) {
      fetchGlobalData();
      const interval = setInterval(fetchGlobalData, 5000);
      return () => clearInterval(interval);
    }
  }, [token, user]);

  const handleLogin = async (username, password) => {
    setLoginError('');
    setIsLoggingIn(true);
    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });
      const data = await res.json();
      if (data.success) {
        localStorage.setItem('icex_token', data.token);
        setToken(data.token);
        setUser(data.user);
        showToast(data.message, 'success');
      } else {
        setLoginError(data.message || 'เข้าสู่ระบบไม่สำเร็จ');
      }
    } catch (err) {
      setLoginError('เชื่อมต่อเซิร์ฟเวอร์ไม่ได้ กรุณาตรวจสอบสถานะ Node.js');
    } finally {
      setIsLoggingIn(false);
    }
  };

  const handleLogout = () => {
    localStorage.removeItem('icex_token');
    setToken('');
    setUser(null);
    setActiveTab('dashboard');
  };

  if (!token || !user) {
    return (
      <>
        <window.LoginPage
          onLogin={handleLogin}
          error={loginError}
          loading={isLoggingIn}
        />
        <window.ToastContainer toast={toast} onClose={() => setToast(null)} />
      </>
    );
  }

  return (
    <div className="min-h-screen bg-[#080C14] text-slate-200 flex flex-col">
      {/* Top Navbar Header */}
      <window.Navbar
        user={user}
        activeTab={activeTab}
        onSelectTab={setActiveTab}
        appsCount={apps?.length || 0}
        licensesCount={stats?.total || 0}
        appName={user?.app_name}
        onLogout={handleLogout}
        onRefresh={fetchGlobalData}
        isRefreshing={isRefreshing}
      />

      {/* Main Container - Full-Width Responsive Container */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 w-full flex-1">
        <div key={activeTab} className="animate-page-transition w-full space-y-6">
          {activeTab === 'dashboard' && (
            <window.DashboardPage
              user={user}
              stats={stats}
              apps={apps}
              onNavigate={setActiveTab}
              onRefresh={fetchGlobalData}
            />
          )}

          {activeTab === 'apps' && (
            <window.AppsPage
              user={user}
              apps={apps}
              onRefreshApps={fetchGlobalData}
              showToast={showToast}
            />
          )}

          {activeTab === 'licenses' && (
            <window.LicensesPage
              user={user}
              apps={apps}
              showToast={showToast}
              onRefreshData={fetchGlobalData}
            />
          )}

          {activeTab === 'hwid-links' && (
            <window.HwidLinksPage
              user={user}
              apps={apps}
              showToast={showToast}
            />
          )}

          {activeTab === 'status' && (
            <window.StatusPage
              user={user}
              showToast={showToast}
            />
          )}

          {activeTab === 'api-docs' && (
            <window.ApiDocsPage
              user={user}
              apps={apps}
              showToast={showToast}
            />
          )}

          {activeTab === 'team' && user.role === 'owner' && (
            <window.TeamPage
              user={user}
              apps={apps}
              showToast={showToast}
              onRefreshData={fetchGlobalData}
            />
          )}

          {activeTab === 'security' && user.role === 'owner' && (
            <window.SecurityPage
              user={user}
              showToast={showToast}
            />
          )}

          {activeTab === 'logs' && (
            <window.LogsPage
              user={user}
              showToast={showToast}
            />
          )}

          {activeTab === 'settings' && (
            <window.SettingsPage
              user={user}
              onUpdateUser={(updated) => setUser(updated)}
              showToast={showToast}
            />
          )}
        </div>
      </main>

      {/* Global Universal Footer */}
      <footer className="py-4 border-t border-[#1E2D4A] text-center text-xs text-slate-500 font-mono">
        Copyright By Hack.CL 2026
      </footer>

      <window.ToastContainer toast={toast} onClose={() => setToast(null)} />
    </div>
  );
}

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