import { useState } from 'react'
import RoleManagement from './RoleManagement'
import RoleMenuManagement from './RoleMenuManagement'
import CodeManagement from './CodeManagement'
import MenuManagement from './MenuManagement'
import DeptManagement from './DeptManagement'
import CompanyManagement from './CompanyManagement'

/*
 * 시스템관리(권한) — UIWS system 모듈 이식 화면 셸(탭 컨테이너).
 * 단일 라우트 /system 에서 6개 관리화면을 탭으로 전환. 색상은 var(--uiws-*) 토큰만 사용(다크/라이트 정합).
 * 백엔드: com.zioinfo.hrm.uiws.system (/api/system/*). 조회 SUPERADMIN/MANAGER, 쓰기 SUPERADMIN.
 */

type TabKey = 'roles' | 'role-menus' | 'codes' | 'menus' | 'depts' | 'companies'

const TABS: { key: TabKey; label: string }[] = [
  { key: 'roles', label: '권한 관리' },
  { key: 'role-menus', label: '역할-메뉴 권한' },
  { key: 'codes', label: '공통코드' },
  { key: 'menus', label: '메뉴 관리' },
  { key: 'depts', label: '부서 관리' },
  { key: 'companies', label: '거래처 관리' },
]

export default function SystemPage() {
  const [tab, setTab] = useState<TabKey>('roles')

  return (
    <div className="uiws-scope">
      <div style={{
        display: 'flex', gap: 4, marginBottom: 20, flexWrap: 'wrap',
        borderBottom: '1px solid var(--uiws-border)',
      }}>
        {TABS.map(t => (
          <button key={t.key} onClick={() => setTab(t.key)}
            style={{
              padding: '10px 16px', fontSize: 13, fontWeight: 600, cursor: 'pointer',
              background: 'transparent', border: 'none',
              color: tab === t.key ? 'var(--uiws-primary)' : 'var(--uiws-text-muted)',
              borderBottom: `2px solid ${tab === t.key ? 'var(--uiws-primary)' : 'transparent'}`,
              marginBottom: -1,
            }}>
            {t.label}
          </button>
        ))}
      </div>

      {tab === 'roles' && <RoleManagement />}
      {tab === 'role-menus' && <RoleMenuManagement />}
      {tab === 'codes' && <CodeManagement />}
      {tab === 'menus' && <MenuManagement />}
      {tab === 'depts' && <DeptManagement />}
      {tab === 'companies' && <CompanyManagement />}
    </div>
  )
}