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 PluginMarket = lazy(() => import('./pages/PluginMarket'));
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: '#0075de',
    colorSuccess: '#1aae39',
    colorWarning: '#dd5b00',
    colorError: '#e5534b',
    colorInfo: '#0075de',
    colorBgLayout: '#f6f5f4',
    colorBgContainer: '#ffffff',
    colorBgElevated: '#ffffff',
    colorBorder: 'rgba(0, 0, 0, 0.1)',
    colorBorderSecondary: 'rgba(0, 0, 0, 0.06)',
    borderRadius: 4,
    borderRadiusLG: 8,
    borderRadiusSM: 2,
    fontFamily: "'Inter', -apple-system, system-ui, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', Helvetica, Arial, sans-serif",
    fontSize: 14,
    fontSizeHeading4: 20,
    controlHeight: 36,
    controlHeightLG: 40,
    controlHeightSM: 28,
    boxShadow: 'none',
    boxShadowSecondary: 'rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px',
  },
  components: {
    Button: {
      primaryShadow: 'none',
      fontWeight: 500,
    },
    Card: {
      paddingLG: 20,
    },
    Table: {
      headerBg: '#fafaf9',
      headerColor: '#615d59',
      rowHoverBg: '#f2f9ff',
      fontSize: 14,
    },
    Menu: {
      itemBorderRadius: 4,
      itemMarginInline: 8,
      itemHeight: 36,
    },
    Modal: {
      borderRadiusLG: 12,
    },
    Tag: {
      borderRadiusSM: 4,
    },
  },
};

const darkThemeConfig = {
  ...themeConfig,
  token: {
    ...themeConfig.token,
    colorBgLayout: '#191918',
    colorBgContainer: '#232322',
    colorBgElevated: '#2a2a29',
    colorBorder: 'rgba(255, 255, 255, 0.08)',
    colorBorderSecondary: 'rgba(255, 255, 255, 0.05)',
    boxShadow: 'none',
    boxShadowSecondary: 'rgba(0,0,0,0.2) 0px 4px 18px, rgba(0,0,0,0.15) 0px 2px 8px',
  },
  components: {
    ...themeConfig.components,
    Table: {
      headerBg: '#2a2a29',
      headerColor: '#a39e98',
      rowHoverBg: '#2a2a29',
    },
  },
};

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/market" element={<PluginMarket />} />
                      <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>
    </>
  );
}