// 主应用入口 - 全栈版本：状态管理 + 路由 + API 对接

const AppContext = React.createContext(null);

// Reducer - 本地状态镜像，同步自后端
function appReducer(state, action) {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };

    case 'SET_DISEASES':
      return { ...state, diseases: action.payload };
    case 'ADD_DISEASE_LOCAL':
      return { ...state, diseases: [action.payload, ...state.diseases] };
    case 'UPDATE_DISEASE_LOCAL':
      return {
        ...state,
        diseases: state.diseases.map(d =>
          d.id === action.payload.id ? { ...d, ...action.payload.data } : d
        )
      };
    case 'DELETE_DISEASE_LOCAL':
      return {
        ...state,
        diseases: state.diseases.filter(d => d.id !== action.payload)
      };

    case 'SET_MEDICATIONS':
      return { ...state, medications: action.payload };
    case 'ADD_MEDICATION_LOCAL':
      return { ...state, medications: [action.payload, ...state.medications] };
    case 'UPDATE_MEDICATION_LOCAL':
      return {
        ...state,
        medications: state.medications.map(m =>
          m.id === action.payload.id ? { ...m, ...action.payload.data } : m
        )
      };
    case 'DELETE_MEDICATION_LOCAL':
      return {
        ...state,
        medications: state.medications.filter(m => m.id !== action.payload)
      };

    case 'SET_BP':
      return { ...state, bloodPressure: action.payload };
    case 'ADD_BP_LOCAL':
      return { ...state, bloodPressure: [action.payload, ...state.bloodPressure] };
    case 'DELETE_BP_LOCAL':
      return {
        ...state,
        bloodPressure: state.bloodPressure.filter(b => b.id !== action.payload)
      };

    case 'SET_BS':
      return { ...state, bloodSugar: action.payload };
    case 'ADD_BS_LOCAL':
      return { ...state, bloodSugar: [action.payload, ...state.bloodSugar] };
    case 'DELETE_BS_LOCAL':
      return {
        ...state,
        bloodSugar: state.bloodSugar.filter(b => b.id !== action.payload)
      };

    case 'SET_AI_MESSAGES':
      return { ...state, aiMessages: action.payload };

    default:
      return state;
  }
}

const initialState = {
  user: { name: '', nickname: '', phone: '', age: 0, gender: '男', height: 0, weight: 0 },
  diseases: [],
  medications: [],
  bloodPressure: [],
  bloodSugar: [],
  aiMessages: [],
};

function App() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);
  const [isCheckingAuth, setIsCheckingAuth] = React.useState(true);
  const [currentPage, setCurrentPage] = React.useState('home');
  const [previousPages, setPreviousPages] = React.useState([]);
  const [toast, setToast] = React.useState({ visible: false, message: '' });
  const [state, dispatch] = React.useReducer(appReducer, initialState);

  // Toast
  const toastTimerRef = React.useRef(null);
  const showToast = React.useCallback((message) => {
    setToast({ visible: true, message });
    if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
    toastTimerRef.current = setTimeout(() => {
      setToast({ visible: false, message: '' });
    }, 2000);
  }, []);

  // 页面加载时检查登录状态
  React.useEffect(() => {
    checkAuth();
  }, []);

  async function checkAuth() {
    try {
      const profile = await api.getProfile();
      dispatch({ type: 'SET_USER', payload: profile });
      setIsLoggedIn(true);
      // 加载各模块数据
      await loadAllData();
    } catch (err) {
      // 未登录，保持登出状态
      setIsLoggedIn(false);
    } finally {
      setIsCheckingAuth(false);
    }
  }

  async function loadAllData() {
    try {
      const [diseases, medications, bp, bs] = await Promise.all([
        api.getDiseases(),
        api.getMedications(),
        api.getBloodPressure(),
        api.getBloodSugar(),
      ]);
      dispatch({ type: 'SET_DISEASES', payload: diseases });
      dispatch({ type: 'SET_MEDICATIONS', payload: medications });
      dispatch({ type: 'SET_BP', payload: bp });
      dispatch({ type: 'SET_BS', payload: bs });
    } catch (err) {
      showToast('数据加载失败');
    }
  }

  // 导航
  const mainTabs = ['home', 'disease', 'vitals', 'profile'];

  const navigate = (page) => {
    setPreviousPages(prev => [...prev, currentPage]);
    setCurrentPage(page);
  };

  const goBack = () => {
    if (previousPages.length > 0) {
      const prev = previousPages[previousPages.length - 1];
      setPreviousPages(p => p.slice(0, -1));
      setCurrentPage(prev);
    }
  };

  const handleTabChange = (tab) => {
    setCurrentPage(tab);
    setPreviousPages([]);
  };

  const showTabBar = mainTabs.includes(currentPage) && isLoggedIn;
  const activeTab = mainTabs.includes(currentPage) ? currentPage : '';

  // 登录成功
  const handleLoginSuccess = async (userData) => {
    dispatch({ type: 'SET_USER', payload: userData });
    setIsLoggedIn(true);
    setCurrentPage('home');
    setPreviousPages([]);
    await loadAllData();
  };

  // 退出登录
  const handleLogout = async () => {
    try {
      await api.logout();
    } catch (e) {}
    setIsLoggedIn(false);
    dispatch({ type: 'SET_USER', payload: initialState.user });
    dispatch({ type: 'SET_DISEASES', payload: [] });
    dispatch({ type: 'SET_MEDICATIONS', payload: [] });
    dispatch({ type: 'SET_BP', payload: [] });
    dispatch({ type: 'SET_BS', payload: [] });
    setCurrentPage('home');
    setPreviousPages([]);
    showToast('已退出登录');
  };

  const contextValue = React.useMemo(() => ({
    state,
    dispatch,
    showToast,
    isLoggedIn,
  }), [state, showToast, isLoggedIn]);

  const renderPage = () => {
    if (isCheckingAuth) {
      return (
        <div className="page" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: '#faf8f3',
        }}>
          <div style={{ textAlign: 'center', color: '#8a9390' }}>
            <div style={{ fontSize: 14, marginBottom: 12 }}>加载中...</div>
            <div style={{
              width: 24, height: 24,
              border: '2px solid #e0dcd2',
              borderTopColor: '#3a8f7a',
              borderRadius: '50%',
              margin: '0 auto',
              animation: 'spin 0.8s linear infinite',
            }} />
            <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
          </div>
        </div>
      );
    }

    if (!isLoggedIn) {
      return <LoginPage onLoginSuccess={handleLoginSuccess} showToast={showToast} />;
    }

    switch (currentPage) {
      case 'home':
        return <HomePage navigate={navigate} />;
      case 'disease':
        return <DiseasePage navigate={navigate} goBack={goBack} />;
      case 'medication':
        return <MedicationPage navigate={navigate} goBack={goBack} />;
      case 'vitals':
        return <VitalsPage navigate={navigate} goBack={goBack} />;
      case 'cci':
        return <CCIPage navigate={navigate} goBack={goBack} />;
      case 'report':
        return <ReportPage navigate={navigate} goBack={goBack} />;
      case 'ai':
        return <AIPage navigate={navigate} goBack={goBack} />;
      case 'profile':
        return <ProfilePage navigate={navigate} goBack={goBack} onLogout={handleLogout} />;
      default:
        return <HomePage navigate={navigate} />;
    }
  };

  return (
    <AppContext.Provider value={contextValue}>
      <div className="app-shell">
        <div className="phone-frame">
          {renderPage()}
          {showTabBar && (
            <TabBar activeTab={activeTab} onTabChange={handleTabChange} />
          )}
          <Toast message={toast.message} visible={toast.visible} />
        </div>
      </div>
    </AppContext.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);