import { NavLink, Route, Routes } from 'react-router-dom'
import ConsoleHome from './views/ConsoleHome'
import Discover from './views/Discover'
import ChamadosList from './views/ChamadosList'
import ChamadoHub from './views/ChamadoHub'
import AdminShell from './layouts/AdminShell'
import AdminHome from './views/admin/AdminHome'
import AdminDominio from './views/admin/AdminDominio'

const opsNav = [
  { to: '/', label: 'Console', end: true, icon: '◆' },
  { to: '/discover', label: 'Discover', icon: '◇' },
  { to: '/chamados', label: 'Chamados', icon: '◇' },
]

function OpsShell() {
  return (
    <div className="shell">
      <aside className="sidebar">
        <div className="sidebar-brand">
          <div className="sidebar-logo" aria-hidden="true">LB</div>
          <div>
            <h1>Ligbox Console</h1>
            <p className="sidebar-sub">Ops · Tenants · CH-*</p>
          </div>
        </div>
        <p className="nav-section-label">Navegação</p>
        <nav>
          {opsNav.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              end={item.end}
              className={({ isActive }) => `nav-link${isActive ? ' active' : ''}`}
            >
              {item.label}
            </NavLink>
          ))}
        </nav>
        <p className="nav-section-label">Gerente</p>
        <nav>
          <NavLink to="/admin" className="nav-link">Área Admin →</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={<ConsoleHome />} />
          <Route path="/discover" element={<Discover />} />
          <Route path="/chamados" element={<ChamadosList />} />
          <Route path="/chamados/:publicId" element={<ChamadoHub />} />
        </Routes>
      </main>
    </div>
  )
}

export default function App() {
  return (
    <Routes>
      <Route path="/admin/*" element={<AdminShell />}>
        <Route index element={<AdminHome />} />
        <Route path="dominio" element={<AdminDominio />} />
      </Route>
      <Route path="/*" element={<OpsShell />} />
    </Routes>
  )
}