// App.js
import { Navigate, Route, Routes } from 'react-router-dom';
import RoleProtectedRoute from './components/RoleProtectedRoute';
import Sidebar from './components/Sidebar';
import { AuthProvider } from './context/AuthContext';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import Branches from './pages/Branches';
import Clients from './pages/Clients';
import Currency from './pages/Currency';
import Employees from './pages/Employees';
import Login from './pages/Login';
import Payments from './pages/Payments';
import Permissions from './pages/Permissions'; // Yangi sahifa
import Reference from './pages/Reference';
import Warhouses from './pages/Warhouses';

const queryClient = new QueryClient();

function AppLayout({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="flex min-h-screen md:ml-[250px]">
        <Sidebar />
        <main className="flex-1 p-4 bg-gray-100">{children}</main>
      </div>
    </QueryClientProvider>
  );
}

function App() {
  return (
    <AuthProvider>
      <Routes>
        {/* Login */}
        <Route path="/login" element={<Login />} />

        {/* Asosiy sahifa Clients */}
        <Route
          path="/"
          element={
            <RoleProtectedRoute allowedRoles={['admin', 'uzb_worker', 'china_worker']}>
              <AppLayout>
                <Clients />
              </AppLayout>
            </RoleProtectedRoute>
          }
        />

        {/* Clients */}
        <Route
          path="/clients"
          element={
            <RoleProtectedRoute allowedRoles={['admin', 'uzb_worker', 'china_worker']}>
              <AppLayout>
                <Clients />
              </AppLayout>
            </RoleProtectedRoute>
          }
        />

        {/* Employees - faqat admin */}
        <Route
          path="/employees"
          element={
            <RoleProtectedRoute allowedRoles={['admin']}>
              <AppLayout>
                <Employees />
              </AppLayout>
            </RoleProtectedRoute>
          }
        />

        {/* Payments */}
        <Route
          path="/payments"
          element={
            <RoleProtectedRoute allowedRoles={['admin', 'uzb_worker', 'china_worker']}>
              <AppLayout>
                <Payments />
              </AppLayout>
            </RoleProtectedRoute>
          }
        />

        {/* Branches - faqat admin */}
        <Route
          path="/branches"
          element={
            <RoleProtectedRoute allowedRoles={['admin']}>
              <AppLayout>
                <Branches />
              </AppLayout>
            </RoleProtectedRoute>
          }
        />

        {/* Currency */}
        <Route
          path="/currency"
          element={
            <RoleProtectedRoute allowedRoles={['admin', 'uzb_worker', 'china_worker']}>
              <AppLayout>
                <Currency />
              </AppLayout>
            </RoleProtectedRoute>
          }
        />

        {/* Permissions - faqat admin */}
        <Route
          path="/permissions"
          element={
            <RoleProtectedRoute allowedRoles={['admin']}>
              <AppLayout>
                <Permissions />
              </AppLayout>
            </RoleProtectedRoute>
          }
        />

        <Route
          path="/reference"
          element={
            <RoleProtectedRoute allowedRoles={['admin']}>
              <AppLayout>
                <Reference />
              </AppLayout>
            </RoleProtectedRoute>
          }
        />

        <Route
          path="/warhouses"
          element={
            <RoleProtectedRoute allowedRoles={['admin']}>
              <AppLayout>
                <Warhouses />
              </AppLayout>
            </RoleProtectedRoute>
          }
        />

        {/* Default redirect */}
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </AuthProvider>
  );
}

export default App;