import '@blueprintjs/core/lib/css/blueprint.css';
import './App.css';
import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
import DashboardPage from './pages/DashboardPage';
import PipelinesPage from './pages/PipelinesPage';
import BuildMonitorPage from './pages/BuildMonitorPage';
import ImageBuildPage from './pages/ImageBuildPage';
import BranchPage from './pages/BranchPage';
import OpcPage from './opc/OpcPage';
import InfraPage from './pages/InfraPage';
import ChangesetsPage from './pages/ChangesetsPage';

function Sidebar() {
  const navigate     = useNavigate();
  const { pathname } = useLocation();
  const at           = (path: string) => pathname === path || pathname.startsWith(path + '/');

  return (
    <aside className="cp-sidebar">
      <div className="cp-sidebar-brand">
        <span className="brand-mark">CP</span>
        <span className="brand-name">Control Plane</span>
      </div>

      <div className="cp-sidebar-nav">
        <Menu className="cp-sidebar-menu">
          <MenuItem icon="cloud-upload" text="Deployments"   active={at('/deployments')}   onClick={() => navigate('/deployments')} />
          <MenuItem icon="git-branch"   text="Pipelines"     active={at('/pipelines')}      onClick={() => navigate('/pipelines')} />
          <MenuItem icon="git-merge"    text="Branch Ladder" active={at('/branches')}       onClick={() => navigate('/branches')} />
          <MenuItem icon="build"        text="Image Build"   active={at('/image-build')}    onClick={() => navigate('/image-build')} />
          <MenuItem icon="pulse"        text="Build Monitor" active={at('/build-monitor')}  onClick={() => navigate('/build-monitor')} />
          <MenuDivider />
          <MenuItem icon="heat-grid"    text="Infrastructure" active={at('/infra')}         onClick={() => navigate('/infra')} />
          <MenuItem icon="clipboard"    text="OPC"            active={at('/opc')}            onClick={() => navigate('/opc')} />
          <MenuItem icon="history"      text="Changesets"    active={at('/changesets')}     onClick={() => navigate('/changesets')} />
          <MenuItem icon="people"       text="Clients"       active={at('/clients')}        onClick={() => navigate('/clients')} />
          <MenuItem icon="cog"          text="Settings"      active={at('/settings')}       onClick={() => navigate('/settings')} />
        </Menu>
      </div>

      <div className="cp-sidebar-footer">
        <div className="cp-sidebar-user">
          <div className="user-avatar">A</div>
          <div className="user-info">
            <span className="user-name">Platform Admin</span>
            <span className="user-role">Clarity Internal</span>
          </div>
        </div>
      </div>
    </aside>
  );
}

function PlaceholderPage({ title }: { title: string }) {
  return (
    <div className="page-header">
      <h1>{title}</h1>
      <p>Coming soon.</p>
    </div>
  );
}

function App() {
  return (
    <div className="cp-shell">
      <Sidebar />
      <main className="cp-main">
        <Routes>
          <Route path="/"             element={<Navigate to="/opc" replace />} />
          <Route path="/deployments"  element={<DashboardPage />} />
          <Route path="/pipelines"    element={<PipelinesPage />} />
          <Route path="/branches"     element={<BranchPage />} />
          <Route path="/image-build"  element={<ImageBuildPage />} />
          <Route path="/build-monitor" element={<BuildMonitorPage />} />
          <Route path="/infra"        element={<InfraPage />} />
          <Route path="/opc"          element={<OpcPage />} />
          <Route path="/changesets"   element={<ChangesetsPage />} />
          <Route path="/clients"      element={<PlaceholderPage title="Clients" />} />
          <Route path="/settings"     element={<PlaceholderPage title="Settings" />} />
        </Routes>
      </main>
    </div>
  );
}

export default App;