import { useState } from 'react'
import { Outlet, useLocation } from 'react-router-dom'
import { useTranslation } from 'react-i18next'

import Sidebar from './Sidebar'
import Header from './Header'
import UpdateBanner from '../UpdateBanner'
import LicenseBanner from '../LicenseBanner'
import MaintenanceBanner from '../MaintenanceBanner'

// PAGE_TITLES maps the pathname to an i18n nav key. Header reads
// this to render "where you are". Empty fallback = app.title.
const PAGE_TITLES: Record<string, string> = {
  '/dashboard':     'nav.dashboard',
  '/domains':       'nav.domains',
  '/backends':      'nav.backends',
  '/routing-rules':  'nav.routing',
  '/networks':       'nav.networks',
  '/ip-addresses':   'nav.ipAddresses',
  '/ssl':            'nav.ssl',
  '/dns':            'nav.dns',
  '/dhcp':           'nav.dhcp',
  '/ntp':            'nav.ntp',
  '/vpn/wireguard':  'nav.wireguard',
  '/forward-proxy':  'nav.forwardProxy',
  '/radius':         'nav.radius',
  '/firewall/live':  'nav.firewallLive',
  '/firewall':       'nav.firewall',
  '/cluster':        'nav.cluster',
  '/logs':          'nav.logs',
  '/audit':         'nav.audit',
  '/backups':       'nav.backups',
  '/diagnostics':   'nav.diagnostics',
  '/alerts':        'nav.alerts',
  '/license':       'nav.license',
  '/users':         'nav.users',
  '/settings':      'nav.settings',
}

export default function AppLayout() {
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const location = useLocation()
  const { t } = useTranslation()

  const titleKey = Object.entries(PAGE_TITLES)
    .find(([p]) => location.pathname === p || location.pathname.startsWith(p + '/'))?.[1]
  const title = titleKey ? t(titleKey) : t('app.title')

  return (
    <div className="app-layout">
      {sidebarOpen && (
        <div
          className="sidebar-overlay"
          onClick={() => setSidebarOpen(false)}
          aria-hidden="true"
        />
      )}

      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />

      <main className="main-content">
        <Header pageTitle={title} onMenuToggle={() => setSidebarOpen(true)} />
        <MaintenanceBanner />
        <LicenseBanner />
        <UpdateBanner />
        <div className="content-area">
          <Outlet />
        </div>
      </main>
    </div>
  )
}