import { useState } from 'react';
import AdminSidebar from './AdminSidebar';
import AdminPlaceholder from './AdminPlaceholder';
import { findMenuLabel } from './adminMenuConfig';
import UsersPanel from './UsersPanel';
import PermissionsPanel from './PermissionsPanel';
import MenusPanel from './MenusPanel';
import SettingsPanel from './SettingsPanel';
import BoardMgmtPanel from './BoardMgmtPanel';
import VesselSignalPanel from './VesselSignalPanel';
import CleanupEquipPanel from './CleanupEquipPanel';
import AssetUploadPanel from './AssetUploadPanel';

/** 기존 패널이 있는 메뉴 ID 매핑 */
const PANEL_MAP: Record<string, () => JSX.Element> = {
  users: () => <UsersPanel />,
  permissions: () => <PermissionsPanel />,
  menus: () => <MenusPanel />,
  settings: () => <SettingsPanel />,
  notice: () => <BoardMgmtPanel initialCategory="NOTICE" />,
  board: () => <BoardMgmtPanel initialCategory="DATA" />,
  qna: () => <BoardMgmtPanel initialCategory="QNA" />,
  'collect-vessel-signal': () => <VesselSignalPanel />,
  'cleanup-equip': () => <CleanupEquipPanel />,
  'asset-upload': () => <AssetUploadPanel />,
};

export function AdminView() {
  const [activeMenu, setActiveMenu] = useState('users');

  const renderContent = () => {
    const factory = PANEL_MAP[activeMenu];
    if (factory) return factory();
    const label = findMenuLabel(activeMenu) ?? activeMenu;
    return <AdminPlaceholder label={label} />;
  };

  return (
    <div className="flex flex-1 overflow-hidden bg-bg-0">
      <AdminSidebar activeMenu={activeMenu} onSelect={setActiveMenu} />
      <div className="flex-1 flex flex-col overflow-hidden">
        {renderContent()}
      </div>
    </div>
  );
}