import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import Layout from './components/Layout/Layout';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import POS from './pages/POS';
import Products from './pages/Products';
import Packages from './pages/Packages';
import Purchases from './pages/Purchases';
import StockManagement from './pages/StockManagement';
import StockHistory from './pages/StockHistory';
import SalesReport from './pages/SalesReport';
import ProfitLoss from './pages/ProfitLoss';
import Users from './pages/Users';
import KasirAccounts from './pages/KasirAccounts';
import StoreSettings from './pages/StoreSettings';
import SalesHistory from './pages/SalesHistory';
import Panduan from './pages/Panduan';

function PrivateRoute({ children, roles }) {
  const { user, loading } = useAuth();
  if (loading) return <div className="flex h-screen items-center justify-center"><div className="animate-spin w-8 h-8 border-4 border-orange-500 border-t-transparent rounded-full" /></div>;
  if (!user) return <Navigate to="/login" replace />;
  if (roles && !roles.includes(user.role)) return <Navigate to="/" replace />;
  return children;
}

function AppRoutes() {
  const { user } = useAuth();
  return (
    <Routes>
      <Route path="/login" element={user ? <Navigate to="/" /> : <Login />} />
      <Route path="/" element={<PrivateRoute><Layout /></PrivateRoute>}>
        <Route index element={<Dashboard />} />
        <Route path="pos" element={<POS />} />
        <Route path="sales-history" element={<SalesHistory />} />
        <Route path="products" element={<PrivateRoute roles={['owner','admin']}><Products /></PrivateRoute>} />
        <Route path="packages" element={<PrivateRoute roles={['owner','admin']}><Packages /></PrivateRoute>} />
        <Route path="purchases" element={<PrivateRoute roles={['owner','admin']}><Purchases /></PrivateRoute>} />
        <Route path="stock" element={<PrivateRoute roles={['owner','admin']}><StockManagement /></PrivateRoute>} />
        <Route path="stock-history" element={<PrivateRoute roles={['owner','admin']}><StockHistory /></PrivateRoute>} />
        <Route path="reports/sales" element={<PrivateRoute roles={['owner','admin']}><SalesReport /></PrivateRoute>} />
        <Route path="reports/profit-loss" element={<PrivateRoute roles={['owner','admin']}><ProfitLoss /></PrivateRoute>} />
        <Route path="users" element={<PrivateRoute roles={['owner']}><Users /></PrivateRoute>} />
        <Route path="accounts" element={<PrivateRoute roles={['owner','admin']}><KasirAccounts /></PrivateRoute>} />
        <Route path="settings" element={<PrivateRoute roles={['owner']}><StoreSettings /></PrivateRoute>} />
        <Route path="panduan" element={<Panduan />} />
      </Route>
      <Route path="*" element={<Navigate to="/" />} />
    </Routes>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <AppRoutes />
      </AuthProvider>
    </BrowserRouter>
  );
}
