import { Outlet, useLocation } from 'react-router-dom'
import { GNB } from './GNB'
import { Sidebar } from './Sidebar'

const PAGE_TITLES: Record<string, string> = {
  '/':               '통합 운영 대시보드',
  '/servers':        '서버 목록',
  '/cmdb':           'CMDB 현황',
  '/deployments':    '배포 이력',
  '/repos':          '저장소 목록',
  '/users':          '사용자 관리',
  '/institutions':   '기관 관리',
  '/api-keys':       'API Key 관리',
  '/audit':          '감사 로그',
  '/llm':            'AI / LLM 관리',
  '/config/env':     '환경변수 설정',
  '/config/nginx':   'Nginx 관리',
  '/notifications':  '알림 / 리포트',
  '/licenses':       '라이선스 관리',
  '/export-import':  '폐쇄망 데이터 연동 (Export / Import)',
  '/dr':             'DR 재해복구 관제',
  '/network':        '네트워크 장비 관제',
  '/csap':           'CSAP 보안 점검',
}

export function AppLayout() {
  const { pathname } = useLocation()
  const title = PAGE_TITLES[pathname] ?? 'GUARDiA Manager'

  return (
    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      <GNB />
      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
        <Sidebar />
        <main style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
          {/* 페이지 타이틀 바 */}
          <div style={{
            padding: '12px 28px', background: '#ffffff',
            borderBottom: '1px solid #e2e8f0',
            display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
          }}>
            <h1 style={{ fontSize: 16, fontWeight: 700, color: '#1e293b', margin: 0 }}>{title}</h1>
          </div>
          {/* 콘텐츠 */}
          <div style={{ padding: 24, flex: 1 }} className="animate-in">
            <Outlet />
          </div>
        </main>
      </div>
    </div>
  )
}
