import React from "react";
import { BrowserRouter, Routes, Route, Link, Navigate } from "react-router-dom";
import { AuthProvider, useAuth } from "./contexts/AuthContext";
import CompanyList from "./components/CompanyList";
import JobList from "./components/JobList";
import CompanyForm from "./components/CompanyForm";
import JobForm from "./components/JobForm";
import CompanyJobs from "./components/CompanyJobs";
import Login from "./components/Login";
import Register from "./components/Register";
import Profile from "./components/Profile";

function PrivateRoute({ children }) {
  const { isAuthenticated } = useAuth();
  return isAuthenticated ? children : <Navigate to="/login" replace />;
}

function AppContent() {
  const { isAuthenticated, logout } = useAuth();
  return (
    <BrowserRouter>
      <nav style={{padding:8, borderBottom:"1px solid #ccc", marginBottom:16}}>
        <Link to="/">Jobs</Link> | {" "}
        <Link to="/companies">Companies</Link>
        {isAuthenticated ? (
          <>
            | <Link to="/profile">Profile</Link> | <button onClick={logout}>Logout</button>
          </>
        ) : (
          <>
            | <Link to="/login">Login</Link> | <Link to="/register">Register</Link>
          </>
        )}
      </nav>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/" element={
          <PrivateRoute>
            <JobList />
          </PrivateRoute>
        } />
        <Route path="/jobs/new" element={
          <PrivateRoute>
            <JobForm />
          </PrivateRoute>
        } />
        <Route path="/jobs/:id/edit" element={
          <PrivateRoute>
            <JobForm />
          </PrivateRoute>
        } />
        <Route path="/companies" element={
          <PrivateRoute>
            <CompanyList />
          </PrivateRoute>
        } />
        <Route path="/companies/new" element={
          <PrivateRoute>
            <CompanyForm />
          </PrivateRoute>
        } />
        <Route path="/companies/:id/edit" element={
          <PrivateRoute>
            <CompanyForm />
          </PrivateRoute>
        } />
        <Route path="/companies/:id/jobs" element={
          <PrivateRoute>
            <CompanyJobs />
          </PrivateRoute>
        } />
        <Route path="/profile" element={<PrivateRoute><Profile /></PrivateRoute>} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </BrowserRouter>
  );
}

function App() {
  return (
    <AuthProvider>
      <AppContent />
    </AuthProvider>
  );
}

export default App;