import { useEffect, lazy, Suspense } from 'react';
import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider, theme as antdTheme, Spin } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import MainLayout from './layouts/MainLayout';
import Login from './pages/Login';
import { ErrorBoundary } from './components/ErrorBoundary';
import { useAuthStore } from './stores/auth';
import { useAppStore } from './stores/app';

const Home = lazy(() => import('./pages/Home'));
const Users = lazy(() => import('./pages/Users'));
const Roles = lazy(() => import('./pages/Roles'));
const Organizations = lazy(() => import('./pages/Organizations'));
const Workflow = lazy(() => import('./pages/Workflow'));
const Messages = lazy(() => import('./pages/Messages'));
const Settings = lazy(() => import('./pages/Settings'));
const PluginAdmin = lazy(() => import('./pages/PluginAdmin'));
const PluginCRUDPage = lazy(() => import('./pages/PluginCRUDPage'));
const PluginTabsPage = lazy(() => import('./pages/PluginTabsPage').then((m) => ({ default: m.PluginTabsPage })));
const PluginTreePage = lazy(() => import('./pages/PluginTreePage').then((m) => ({ default: m.PluginTreePage })));
const PluginGraphPage = lazy(() => import('./pages/PluginGraphPage').then((m) => ({ default: m.PluginGraphPage })));
const PluginDashboardPage = lazy(() => import('./pages/PluginDashboardPage').then((m) => ({ default: m.PluginDashboardPage })));
const PluginKanbanPage = lazy(() => import('./pages/PluginKanbanPage'));

function PrivateRoute({ children }: { children: React.ReactNode }) {
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
  return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
}

const themeConfig = {
  token: {
    colorPrimary: '#4F46E5',
    colorSuccess: '#059669',
    colorWarning: '#D97706',
    colorError: '#DC2626',
    colorInfo: '#2563EB',
    colorBgLayout: '#F1F5F9',
    colorBgContainer: '#FFFFFF',
    colorBgElevated: '#FFFFFF',
    colorBorder: '#E2E8F0',
    colorBorderSecondary: '#F1F5F9',
    borderRadius: 8,
    borderRadiusLG: 12,
    borderRadiusSM: 6,
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Helvetica Neue', Helvetica, Arial, sans-serif",
    fontSize: 14,
    fontSizeHeading4: 20,
    controlHeight: 36,
    controlHeightLG: 40,
    controlHeightSM: 28,
    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06)',
    boxShadowSecondary: '0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07)',
  },
  components: {
    Button: {
      primaryShadow: '0 1px 2px 0 rgba(79, 70, 229, 0.3)',
      fontWeight: 500,
    },
    Card: {
      paddingLG: 20,
    },
    Table: {
      headerBg: '#F8FAFC',
      headerColor: '#475569',
      rowHoverBg: '#F5F3FF',
      fontSize: 14,
    },
    Menu: {
      itemBorderRadius: 8,
      itemMarginInline: 8,
      itemHeight: 40,
    },
    Modal: {
      borderRadiusLG: 16,
    },
    Tag: {
      borderRadiusSM: 6,
    },
  },
};

const darkThemeConfig = {
  ...themeConfig,
  token: {
    ...themeConfig.token,
    colorBgLayout: '#0B0F1A',
    colorBgContainer: '#111827',
    colorBgElevated: '#1E293B',
    colorBorder: '#1E293B',
    colorBorderSecondary: '#1E293B',
    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.3)',
    boxShadowSecondary: '0 4px 6px -1px rgba(0, 0, 0, 0.4)',
  },
  components: {
    ...themeConfig.components,
    Table: {
      headerBg: '#1E293B',
      headerColor: '#94A3B8',
      rowHoverBg: '#1E293B',
    },
  },
};

export default function App() {
  const loadFromStorage = useAuthStore((s) => s.loadFromStorage);
  const themeMode = useAppStore((s) => s.theme);

  useEffect(() => {
    loadFromStorage();
  }, [loadFromStorage]);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', themeMode);
  }, [themeMode]);

  const isDark = themeMode === 'dark';

  return (
    <>
      <a href="#root" className="erp-skip-link">跳转到主要内容</a>
    <ConfigProvider
      locale={zhCN}
      theme={{
        ...isDark ? darkThemeConfig : themeConfig,
        algorithm: isDark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
      }}
    >
      <HashRouter>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route
            path="/*"
            element={
              <PrivateRoute>
                <MainLayout>
              <ErrorBoundary>
                  <Suspense fallback={<div style={{ display: 'flex', justifyContent: 'center', padding: 100 }}><Spin size="large" /></div>}>
                    <Routes>
                      <Route path="/" element={<Home />} />
                      <Route path="/users" element={<Users />} />
                      <Route path="/roles" element={<Roles />} />
                      <Route path="/organizations" element={<Organizations />} />
                      <Route path="/workflow" element={<Workflow />} />
                      <Route path="/messages" element={<Messages />} />
                      <Route path="/settings" element={<Settings />} />
                      <Route path="/plugins/admin" element={<PluginAdmin />} />
                      <Route path="/plugins/:pluginId/tabs/:pageLabel" element={<PluginTabsPage />} />
                      <Route path="/plugins/:pluginId/tree/:entityName" element={<PluginTreePage />} />
                      <Route path="/plugins/:pluginId/graph/:entityName" element={<PluginGraphPage />} />
                      <Route path="/plugins/:pluginId/dashboard" element={<PluginDashboardPage />} />
                      <Route path="/plugins/:pluginId/kanban/:entityName" element={<PluginKanbanPage />} />
                      <Route path="/plugins/:pluginId/:entityName" element={<PluginCRUDPage />} />
                    </Routes>
                  </Suspense>
              </ErrorBoundary>
                </MainLayout>
              </PrivateRoute>
            }
          />
        </Routes>
      </HashRouter>
    </ConfigProvider>
    </>
  );
}