import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { AuthProvider, useAuth } from './auth/AuthContext'
import { LoginPage } from './components/LoginPage'
import { ChangePasswordPage } from './components/AccountsTab'

function AppGate() {
  const { token, staff, loading } = useAuth();
  if (loading) {
    return (
      <div className="auth-shell">
        <div className="login-card card">Đang tải...</div>
      </div>
    );
  }
  if (!token) {
    return (
      <div className="auth-shell">
        <LoginPage />
      </div>
    );
  }
  if (staff?.mustChangePassword) {
    return (
      <div className="auth-shell">
        <ChangePasswordPage forced />
      </div>
    );
  }
  return <App />;
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AuthProvider>
      <AppGate />
    </AuthProvider>
  </StrictMode>,
)