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';
import MapBasePanel from './MapBasePanel';
import LayerPanel from './LayerPanel';
import SensitiveLayerPanel from './SensitiveLayerPanel';
import DispersingZonePanel from './DispersingZonePanel';
import MonitorRealtimePanel from './MonitorRealtimePanel';
import MonitorVesselPanel from './MonitorVesselPanel';
import CollectHrPanel from './CollectHrPanel';
import MonitorForecastPanel from './MonitorForecastPanel';
import VesselMaterialsPanel from './VesselMaterialsPanel';

/** 기존 패널이 있는 메뉴 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 />,
  'map-base': () => <MapBasePanel />,
  'map-layer': () => <LayerPanel />,
  'env-ecology':    () => <SensitiveLayerPanel categoryCode="LYR001002001" title="환경/생태" />,
  'social-economy': () => <SensitiveLayerPanel categoryCode="LYR001002002" title="사회/경제" />,
  'dispersant-zone': () => <DispersingZonePanel />,
  'vessel-materials': () => <VesselMaterialsPanel />,
  'monitor-realtime': () => <MonitorRealtimePanel />,
  'monitor-vessel': () => <MonitorVesselPanel />,
  'collect-hr': () => <CollectHrPanel />,
  'monitor-forecast': () => <MonitorForecastPanel />,
};

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>
  );
}