'use client';

import React from 'react';
import dynamic from 'next/dynamic';
import { useUIStore } from '@/store/uiStore';
import { LoadingState } from '@/components/ui/loading-state';

// Lazy load SettingsModal to avoid SSR issues
const SettingsModal = dynamic(
  () => import('./canvas/panels/management/settings/index').then(mod => ({ default: mod.SettingsModal })),
  {
    loading: () => <LoadingState message="加载设置..." />,
    ssr: false,
  }
);

/**
 * Global Settings Modal
 * Rendered in root layout to make settings accessible from any page
 */
export function GlobalSettings() {
  const { isSettingsOpen, settingsActiveTab, closeSettings } = useUIStore();

  return (
    <>
      {isSettingsOpen && (
        <SettingsModal
          isOpen={isSettingsOpen}
          onClose={closeSettings}
          defaultTab={settingsActiveTab || undefined}
        />
      )}
    </>
  );
}
