import { Outlet, NavLink, useLocation } from 'react-router-dom'
import {
  getAdminShellNavEntries,
  adminShellEntryIsActive,
  adminShellEntryItemCount,
} from '../config/adminNav'

/**
 * Wie KI-Analyse: nur Gruppen-Chips (mobil) bzw. Seitenleiste (desktop);
 * konkrete Admin-Seiten über Hub unter /admin/g/:groupId.
 */
export default function AdminShell() {
  const loc = useLocation()
  const entries = getAdminShellNavEntries()

  return (
    <div className="admin-shell">
      <div className="analysis-split">
        <div className="analysis-split__nav-wrap">
          <nav className="analysis-split__nav" aria-label="Adminbereich">
            {entries.map((entry) => {
              const active = adminShellEntryIsActive(loc.pathname, entry)
              const count = adminShellEntryItemCount(entry)
              return (
                <NavLink
                  key={entry.id}
                  to={entry.to}
                  end={!!entry.end}
                  className={() =>
                    'analysis-split__nav-item' +
                    (active ? ' analysis-split__nav-item--active' : '')
                  }
                >
                  {entry.label}
                  {count > 0 && (
                    <span className="analysis-split__nav-cat-count">({count})</span>
                  )}
                </NavLink>
              )
            })}
          </nav>
        </div>
        <div className="analysis-split__main">
          <div className="admin-page">
            <Outlet />
          </div>
        </div>
      </div>
    </div>
  )
}