import { NavLink, Route, Routes } from 'react-router-dom'
import Overview from './views/Overview'
import Discover from './views/Discover'
import ChamadosList from './views/ChamadosList'
import ChamadoHub from './views/ChamadoHub'

const nav = [
  { to: '/', label: 'Overview', end: true },
  { to: '/discover', label: 'Discover' },
  { to: '/chamados', label: 'Chamados' },
]

export default function App() {
  return (
    <div className="shell">
      <aside className="sidebar">
        <h1>Ligbox Ops Console</h1>
        <p>VM123 · hub CH-* · Spec 019</p>
        <nav>
          {nav.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              end={item.end}
              className={({ isActive }) => `nav-link${isActive ? ' active' : ''}`}
            >
              {item.label}
            </NavLink>
          ))}
        </nav>
        <p className="status-pill" style={{ marginTop: '2rem' }}>
          API: {import.meta.env.VITE_API_URL || 'api.ops.ligbox.com.br'}
        </p>
      </aside>
      <main className="main">
        <Routes>
          <Route path="/" element={<Overview />} />
          <Route path="/discover" element={<Discover />} />
          <Route path="/chamados" element={<ChamadosList />} />
          <Route path="/chamados/:publicId" element={<ChamadoHub />} />
        </Routes>
      </main>
    </div>
  )
}
