import React, { useState, useEffect, useCallback } from "react";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { check_login_status } from "@/services/loginService";
import { useUserActions } from "@/store/userStore";
import GuideBar from "@/components/GuideBar";
import { withAuth, GeneralNavbar } from "@/components";
import HomeNavbar from "@/components/HomeNavbar";
import ListPageContent from "./components/ListPageContent";
import MessagePageContent from "./components/MessagePageContent";
import MyselfPageContent from "./components/MyselfPageContent";
import "./index.scss";
import FamilyContext from '@/context';

type TabType = "list" | "message" | "personal";

const MainPage: React.FC = () => {
  const [currentTab, setCurrentTab] = useState<TabType>("list");
  const [isPublishMenuVisible, setIsPublishMenuVisible] = useState(false);
  const [guideBarZIndex, setGuideBarZIndex] = useState<'low' | 'high'>('high');
  const [isDistanceFilterVisible, setIsDistanceFilterVisible] = useState(false);
  const [isCityPickerVisible, setIsCityPickerVisible] = useState(false);
  const [isFilterPopupVisible, setIsFilterPopupVisible] = useState(false);
  const [isShowInputCustomerNavBar, setIsShowInputCustomerNavBar] = useState(false);
  const [listPageScrollToTopTrigger, setListPageScrollToTopTrigger] = useState(0);
  const [showGuideBar, setShowGuideBar] = useState(true);

  const { fetchUserInfo } = useUserActions();

  // 初始化：检查登录状态并获取用户信息
  useEffect(() => {
    const init = async () => {
      const login_status = check_login_status();
      if (login_status) {
        try {
          await fetchUserInfo();
        } catch (error) {
          console.error('获取用户信息失败:', error);
        }
      }
    };
    init();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // fetchUserInfo 是稳定的函数引用，不需要加入依赖项

  // 处理标签切换
  const handleTabChange = useCallback((code: string) => {
    if (code === currentTab) {
      return;
    }
    setCurrentTab(code as TabType);
    // 切换标签时滚动到顶部
    (Taro as any).pageScrollTo({
      scrollTop: 0,
      duration: 300,
    });
  }, [currentTab]);

  // 处理发布菜单显示/隐藏
  const handlePublishMenuVisibleChange = useCallback((visible: boolean) => {
    setIsPublishMenuVisible(visible);
  }, []);

  // 处理距离筛选显示/隐藏
  const handleDistanceFilterVisibleChange = useCallback((visible: boolean) => {
    setIsDistanceFilterVisible(visible);
  }, []);

  // 处理城市选择器显示/隐藏
  const handleCityPickerVisibleChange = useCallback((visible: boolean) => {
    setIsCityPickerVisible(visible);
  }, []);

  // 处理筛选弹窗显示/隐藏
  const handleFilterPopupVisibleChange = useCallback((visible: boolean) => {
    setIsFilterPopupVisible(visible);
  }, []);

  // 处理列表页导航状态变化
  const handleListNavStateChange = useCallback((state: {
    isShowInputCustomerNavBar?: boolean;
    isDistanceFilterVisible?: boolean;
    isCityPickerVisible?: boolean;
  }) => {
    if (state.isShowInputCustomerNavBar !== undefined) {
      setIsShowInputCustomerNavBar(state.isShowInputCustomerNavBar);
    }
    if (state.isDistanceFilterVisible !== undefined) {
      setIsDistanceFilterVisible(state.isDistanceFilterVisible);
    }
    if (state.isCityPickerVisible !== undefined) {
      setIsCityPickerVisible(state.isCityPickerVisible);
    }
  }, []);

  // 滚动到顶部
  const scrollToTop = useCallback(() => {
    // 如果当前是列表页，触发列表页内部滚动
    if (currentTab === "list") {
      // 通过状态变化触发 ListPageContent 内部滚动
      setListPageScrollToTopTrigger(prev => prev + 1);
    } else {
      // 其他页面使用 pageScrollTo
      (Taro as any).pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    }
  }, [currentTab]);

  // 动态控制 GuideBar 的 z-index
  useEffect(() => {
    if (isPublishMenuVisible) {
      setGuideBarZIndex('high');
    } else if (isDistanceFilterVisible || isCityPickerVisible || isFilterPopupVisible) {
      setGuideBarZIndex('low');
    } else {
      setGuideBarZIndex('high');
    }
  }, [isPublishMenuVisible, isDistanceFilterVisible, isCityPickerVisible, isFilterPopupVisible]);

  // 渲染自定义导航栏（参考原始页面的实现）
  const renderCustomNavbar = () => {
    if (currentTab === "list") {
      // 列表页：使用 HomeNavbar（与原始列表页一致）
      return (
        <HomeNavbar
          config={{
            showInput: isShowInputCustomerNavBar,
          }}
          onCityPickerVisibleChange={(visible) => {
            setIsCityPickerVisible(visible);
            handleListNavStateChange({ isCityPickerVisible: visible });
          }}
          onScrollToTop={scrollToTop}
        />
      );
    } else if (currentTab === "message") {
      // 消息页：使用 GeneralNavbar（与原始消息页一致，显示用户头像和标题）
      return (
        <GeneralNavbar
          title="消息"
          titlePosition="left"
          showBack={false}
          showAvatar={true}
        />
      );
    } else if (currentTab === "personal") {
      // 我的页：使用 GeneralNavbar 显示标题
      return (
        <GeneralNavbar
          title=""
          titlePosition="left"
          showBack={false}
        />
      );
    }
    return null;
  };

  const handleGrandchildTrigger = (value) => {
    setShowGuideBar(!value)
  }

  return (
    <FamilyContext.Provider value={{ handleGrandchildTrigger }}>
      <View className="main-page">
        {/* 自定义导航栏 */}
        {renderCustomNavbar()}

        {/* 列表页内容 */}
        <View
          className={`tab-content ${currentTab === "list" ? "active" : ""}`}
        >
          <ListPageContent
            onNavStateChange={handleListNavStateChange}
            onScrollToTop={scrollToTop}
            scrollToTopTrigger={listPageScrollToTopTrigger}
            onDistanceFilterVisibleChange={handleDistanceFilterVisibleChange}
            onCityPickerVisibleChange={handleCityPickerVisibleChange}
            onFilterPopupVisibleChange={handleFilterPopupVisibleChange}
          />
        </View>

        {/* 消息页内容 */}
        <View
          className={`tab-content ${currentTab === "message" ? "active" : ""}`}
        >
          <MessagePageContent />
        </View>

        {/* 我的页内容 */}
        <View
          className={`tab-content ${currentTab === "personal" ? "active" : ""}`}
        >
          <MyselfPageContent />
        </View>

        {/* 底部导航栏 */}
        {
          showGuideBar ?
            <GuideBar
              currentPage={currentTab}
              guideBarClassName={guideBarZIndex === 'low' ? 'guide-bar-low-z-index' : 'guide-bar-high-z-index'}
              onTabChange={handleTabChange}
              onPublishMenuVisibleChange={handlePublishMenuVisibleChange}
            /> :
            null
        }

      </View>
    </FamilyContext.Provider>
  );
};

export default withAuth(MainPage);

