import { Routes, Route, Navigate } from 'react-router-dom';
import AuthGate from './components/AuthGate';
import TabLayout from './layouts/TabLayout';
import LoginPage from './pages/LoginPage';
import LegalPage from './pages/LegalPage';
import SelectStorePage from './pages/SelectStorePage';
import HomePage from './pages/HomePage';
import RedeemConfirmPage from './pages/RedeemConfirmPage';
import PhoneRedeemPage from './pages/PhoneRedeemPage';
import RedeemSuccessPage from './pages/RedeemSuccessPage';
import RecordsPage from './pages/RecordsPage';
import StatusPage from './pages/StatusPage';
import MinePage from './pages/MinePage';
import StaffPage from './pages/StaffPage';
import WithdrawPage from './pages/WithdrawPage';
import PackagesPage from './pages/PackagesPage';

export default function App() {
  return (
    <AuthGate>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route path="/legal/user-agreement" element={<LegalPage docId="user-agreement" />} />
        <Route path="/legal/privacy-policy" element={<LegalPage docId="privacy-policy" />} />
        <Route path="/select-store" element={<SelectStorePage />} />
        <Route path="/staff" element={<StaffPage />} />
        <Route path="/withdraw" element={<WithdrawPage />} />
        <Route path="/packages" element={<PackagesPage />} />
        <Route path="/redeem" element={<RedeemConfirmPage />} />
        <Route path="/redeem/phone" element={<PhoneRedeemPage />} />
        <Route path="/redeem/success" element={<RedeemSuccessPage />} />
        <Route element={<TabLayout />}>
          <Route path="/" element={<HomePage />} />
          <Route path="/records" element={<RecordsPage />} />
          <Route path="/status" element={<StatusPage />} />
          <Route path="/mine" element={<MinePage />} />
        </Route>
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </AuthGate>
  );
}