import { useState, useEffect, useCallback } from 'react';
import { App as AntdApp } from 'antd';

import { useAppContext } from '@/app/providers/AppProvider';
import { LoginPage } from '@/modules/auth/views/AuthPage';
import { SettingsPage } from '@/modules/settings';
import { on, off, emit, EVENTS } from '@/shared/utils/bus';
import type { BusinessErrorEvent } from '@/shared/utils/bus';
import { Layout } from '@/app/layout/Layout';
import { HomePage } from '@/modules/home/views/HomePage';
import { PageDispatcher } from '@/app/layout/PageDispatcher';

/**
 * 根组件 — 主窗口
 *
 * 层级：
 *   Layout（Banner + NavBar）
 *     └── HomePage（主页面，始终挂载）
 *   LoginPage（Modal 弹层，事件总线驱动）
 *   SettingsPage（Modal 居中叠加，事件总线驱动 — 对应 QT 原版设置窗口）
 *
 * 设计原则（对应 QT 原版多窗口模型）：
 *   - 叠加层（设置、公告、页面等）→ Modal/Drawer + 事件总线，主页面不卸载
 *   - 不再使用 React Router，所有导航由事件总线驱动
 */
function App() {
   const { isLoggedIn } = useAppContext();
   const { modal } = AntdApp.useApp();

   // 登录 Modal 状态
   const [loginOpen, setLoginOpen] = useState(false);

   // 首次加载时未登录 → 弹出
   useEffect(() => {
      if (!isLoggedIn) {
         setLoginOpen(true);
      }
   }, [isLoggedIn]);

   // 监听事件总线：401 → 弹出登录 / 导航栏点击登录 → 弹出登录
   useEffect(() => {
      const handler = () => setLoginOpen(true);
      on(EVENTS.AUTH_REQUIRED, handler);
      on(EVENTS.SHOW_LOGIN, handler);
      return () => {
         off(EVENTS.AUTH_REQUIRED, handler);
         off(EVENTS.SHOW_LOGIN, handler);
      };
   }, []);

   const handleLoginClose = useCallback(() => {
      setLoginOpen(false);
   }, []);

   // 设置 Drawer 状态
   const [settingsOpen, setSettingsOpen] = useState(false);

   // 监听打开设置 Drawer
   useEffect(() => {
      const handler = () => setSettingsOpen(true);
      on(EVENTS.OPEN_SETTINGS, handler);
      return () => { off(EVENTS.OPEN_SETTINGS, handler); };
   }, []);

   // 监听余额不足业务错误 → 弹窗引导充值
   useEffect(() => {
      const handler = (payload: BusinessErrorEvent) => {
         console.log('[App] 收到 BALANCE_INSUFFICIENT 事件:', payload);
         modal.confirm({
            title: '余额不足',
            content: payload.message || '当前账户余额不足，请充值后重试',
            okText: '去充值',
            cancelText: '取消',
            onOk: () => {
               console.log('[App] 用户点击"去充值"，打开充值页面');
               emit(EVENTS.OPEN_PAGE, { target: '/recharge', modalType: 'drawer' });
            },
         });
      };
      on(EVENTS.BALANCE_INSUFFICIENT, handler as (...args: unknown[]) => void);
      return () => { off(EVENTS.BALANCE_INSUFFICIENT, handler as (...args: unknown[]) => void); };
   }, [modal]);

   // 监听软件使用权到期（HTTP 403）→ 弹窗引导购买 VIP
   useEffect(() => {
      const handler = (payload: BusinessErrorEvent) => {
         console.log('[App] 收到 SUBSCRIPTION_EXPIRED 事件:', payload);
         modal.confirm({
            title: '软件使用权已到期',
            content: payload.message || '软件使用权已到期，请购买 VIP 套餐后继续使用',
            okText: '去购买 VIP',
            cancelText: '取消',
            onOk: () => {
               console.log('[App] 用户点击"去购买 VIP"，打开充值页面');
               emit(EVENTS.OPEN_PAGE, { target: '/recharge', modalType: 'drawer' });
            },
         });
      };
      on(EVENTS.SUBSCRIPTION_EXPIRED, handler as (...args: unknown[]) => void);
      return () => { off(EVENTS.SUBSCRIPTION_EXPIRED, handler as (...args: unknown[]) => void); };
   }, [modal]);

   return (
      <>
         <Layout>
            <HomePage />
         </Layout>

         {/* 登录 Modal — 可关闭，关闭后主页可操作 */}
         <LoginPage open={loginOpen && !isLoggedIn} onClose={handleLoginClose} />

         {/* 设置 Modal — 事件驱动，居中叠加，主页面始终挂载（对应 QT 原版独立设置窗口） */}
         <SettingsPage open={settingsOpen} onClose={() => setSettingsOpen(false)} />

         {/* 页面调度器 — 监听 OPEN_PAGE 事件，根据 modalType 渲染 Modal/Drawer/FloatingPanel */}
         <PageDispatcher />
      </>
   );
}

export default App;
