import React from 'react';
import { HashRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { Layout } from './components/Layout';
import { FamilyList } from './pages/FamilyList';
import { FamilyDetail } from './pages/FamilyDetail';
import { SettingsPage } from './pages/Settings';
import { TicketsPage } from './pages/Tickets';
import { ReportsPage } from './pages/Reports';
import { ExtraordinaryAdmin } from './pages/ExtraordinaryAdmin';
import { ExtraordinaryUser } from './pages/ExtraordinaryUser';
import { LoginPage } from './pages/Login';
import { CondoService } from './services/mockDb';

const ProtectedRoute = ({ children }: { children?: React.ReactNode }) => {
  const user = CondoService.getCurrentUser();
  const location = useLocation();

  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return <>{children}</>;
};

// Route wrapper that checks for Admin/PowerUser
const AdminRoute = ({ children }: { children?: React.ReactNode }) => {
    const user = CondoService.getCurrentUser();
    const isAdmin = user?.role === 'admin' || user?.role === 'poweruser';
    
    if (!isAdmin) {
        // Redirect regular users to their own view
        return <ExtraordinaryUser />;
    }
    return <>{children}</>;
};

const App: React.FC = () => {
  return (
    <HashRouter>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        
        <Route path="/" element={
          <ProtectedRoute>
            <Layout />
          </ProtectedRoute>
        }>
          <Route index element={<FamilyList />} />
          <Route path="family/:id" element={<FamilyDetail />} />
          <Route path="tickets" element={<TicketsPage />} />
          <Route path="reports" element={<ReportsPage />} />
          <Route path="extraordinary" element={
              <AdminRoute>
                  <ExtraordinaryAdmin />
              </AdminRoute>
          } />
          <Route path="settings" element={<SettingsPage />} />
        </Route>
        
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </HashRouter>
  );
};

export default App;