import { ScrollView, Text, View } from "@tarojs/components";
import {
  ArrowLeft,
  Heart,
  HeartFill,
  Home,
  Message,
  Notice,
  Plus,
  Setting,
  User,
} from "@nutui/icons-react-taro";
import {
  Badge,
  Button,
  Dialog,
  Grid,
  GridItem,
  Image,
  ImagePreview,
  NavBar,
  Tabbar,
  Tabs,
  Toast,
} from "@nutui/nutui-react-taro";
import {
  navigateTo,
  redirectTo,
  getSystemInfoSync,
  useDidShow,
  navigateBack,
  useLoad,
} from "@tarojs/taro";
import "./index.scss";
import { useState, useEffect, useCallback } from "react";
import { strSlice } from "../../utils";
import { followApi, interactionApi, unfollowApi } from "../../api/interaction";
import { getUserPostListApi } from "../../api/post";
import { getUserInfoApi } from "../../api/user";
const Self = () => {
  const [tab1value, setTab1value] = useState<string | number>("0");
  const [scrollHeight, setScrollHeight] = useState<number>(0);
  const [postList, setPostList] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [refreshing, setRefreshing] = useState<boolean>(false);
  const [loadingMore, setLoadingMore] = useState<boolean>(false);
  const [hasMore, setHasMore] = useState<boolean>(true);
  const [error, setError] = useState<string>("");
  const [mediaUrl, setMediaUrl] = useState<any[]>([]);
  const [showPreview, setShowPreview] = useState(false);
  const [init, setInit] = useState(0);
  const [userInfo, setUserInfo] = useState<any>({});
  const [pageConfig, setPageConfig] = useState({
    page: 1,
    page_size: 10,
    count: 0,
    has_more: false,
  });
  const [userId, setUserId] = useState<any>(null);

  // 计算滚动区域高度
  useEffect(() => {
    const systemInfo = getSystemInfoSync();
    // 屏幕高度 - 状态栏 - 导航栏 - 用户信息区域 - 标签栏
    const height = systemInfo.windowHeight - 44 - 50 - 100;
    setScrollHeight(height);
  }, []);

  // 点赞
  const handleInteraction = async (postId: number, type) => {
    const res: any = await interactionApi({
      target_type: "post",
      target_id: postId,
      interaction_type: type,
    });
    if (res.code === 200) {
      const data = [...postList];
      data.forEach((item: any) => {
        if (item.id === postId) {
          item.interaction_type = type;
          item.like_count =
            type === "praise" ? item.like_count + 1 : item.like_count - 1;
        }
      });
      setPostList(data);
    }
  };
  // 获取用户信息
  const getUserInfo = async () => {
    const res: any = userId
      ? await getUserInfoApi(userId)
      : await getUserInfoApi();
    if (res.code === 200) {
      setUserInfo(res.data);
    }
  };

  // 获取帖子列表
  const getPostList = async (
    isRefresh: boolean = false,
    isLoadMore: boolean = false
  ) => {
    try {
      // 设置对应的加载状态
      if (isRefresh) {
        setRefreshing(true);
      } else if (isLoadMore) {
        setLoadingMore(true);
      } else {
        setLoading(true);
      }

      setError(""); // 清除错误信息

      const currentPage = isRefresh ? 1 : pageConfig.page;
      const requestParams = {
        ...pageConfig,
        page: currentPage,
      };

      const res: any = await getUserPostListApi(
        userId ? userId : null,
        requestParams
      );

      if (res.code === 200) {
        const newData = res.data.list || [];

        setPageConfig({
          page: res.data.page,
          page_size: res.data.page_size,
          count: res.data.count,
          has_more: res.data.has_more,
        });

        // 根据操作类型更新帖子列表
        if (isRefresh || currentPage === 1) {
          setPostList(newData);
        } else if (isLoadMore) {
          setPostList((prev) => [...prev, ...newData]);
        } else {
          setPostList(newData);
        }

        setHasMore(res.data.has_more);
      } else {
        setError(res.message || "获取帖子列表失败");
      }
    } catch (err: any) {
      console.error("获取帖子列表失败:", err);
      setError(err.message || "网络错误，请稍后重试");
    } finally {
      // 清除所有加载状态
      setLoading(false);
      setRefreshing(false);
      setLoadingMore(false);
    }
  };

  // 关注/不关注
  const handleFollowClick = (followeeId: number, is_followed) => {
    console.log(followeeId, is_followed);
    if (is_followed) {
      Dialog.open("followed_dialog", {
        title: "提示",
        content: "确定取消关注吗？",
        onConfirm: () => {
          unfollowApi({ followee_id: followeeId }).then(() => {
            Toast.show("follow_success", {
              content: "取消关注成功",
              duration: 2,
              lockScroll: true,
            });
            const data = { ...userInfo, is_followed: false };
            setUserInfo(data);
            Dialog.close("followed_dialog");
          });
        },
        onCancel: () => {
          Dialog.close("followed_dialog");
        },
        onClose: () => {
          Dialog.close("followed_dialog");
        },
      });
    } else {
      followApi({ followee_id: followeeId }).then(() => {
        Toast.show("follow_success", {
          content: "关注成功",
          duration: 2,
          lockScroll: true,
        });
        const data = { ...userInfo, is_followed: true };
        setUserInfo(data);
      });
    }
  };

  useDidShow(() => {
    getPostList();
    getUserInfo();
  });
  useLoad((params) => {
    setUserId(params.id);
  });

  // 加载更多
  const loadMore = useCallback(() => {
    if (hasMore && !loadingMore && !loading && !refreshing) {
      getPostList(false, true);
    }
  }, [hasMore, loadingMore, loading, refreshing]);

  // 下拉刷新
  const onRefresh = useCallback(() => {
    getPostList(true, false);
  }, []);
  return (
    <>
      <NavBar
        back={<></>}
        onBackClick={(e) => {
          e.preventDefault();
          navigateBack({ delta: 1 });
        }}
      >
        消息
      </NavBar>

      <View className="min-h-screen bg-[#f7f8fa]">
        <View className="p-[10px] pt-[0px] bg-[#fff]">
          <View className="flex items-center justify-between">
            <View className="flex items-center">
              <View className="w-[50px] h-[50px] bg-[#1874d0] rounded-[50%] overflow-hidden">
                <Image
                  src={userInfo.avatar_url}
                  width="100%"
                  height="100%"
                  mode="aspectFill"
                />
              </View>
              <View className="flex-1 ml-[10px]">
                <View className="text-[16px] font-bold">
                  {userInfo.username || userInfo.nickname}
                </View>
              </View>
            </View>
            <View>
              {userId ? (
                <></>
              ) : (
                <>
                  <Setting
                    className="mr-[10px]"
                    size={18}
                    onClick={() => {
                      navigateTo({ url: "/pages/self/setting/index" });
                    }}
                  />
                  {/* <Badge top="2" right="8" value={userInfo.notification_count}>
                    <Notice
                      onClick={() => {
                        navigateTo({ url: "/pages/message/index" });
                      }}
                    />
                  </Badge> */}
                </>
              )}
            </View>
          </View>
          {/* <View className="flex items-center justify-between text-[14px] mt-[10px]">
            <View className="flex">
              <View className="flex">
                <Text className="text-[#949494]">
                  {userId ? "粉丝" : "关注我"}
                </Text>
                <Text className="ml-[5px]">{userInfo.follow_count}</Text>
              </View>
              <View className="flex ml-[20px]">
                <Text className="text-[#949494]">获得互动</Text>
                <Text className="ml-[5px]">{userInfo.interaction_count}</Text>
              </View>
            </View>
            <View className="bg-[#f7f7f7] w-[70px] h-[30px] rounded-[15px] flex items-center justify-around">
              {userId ? (
                <>
                  <View
                    className="flex items-center justify-center text-[12px] bg-[#f8f8f8] text-[#949494] rounded-[20px] h-[25px] w-[60px] text-center"
                    onClick={() =>
                      handleFollowClick(userInfo.id, userInfo.is_followed)
                    }
                  >
                    {userInfo.is_followed ? <></> : <Plus color="#1874d0" />}
                    <Text>{userInfo.is_followed ? "已关注" : "关注"}</Text>
                  </View>
                </>
              ) : (
                <View
                  className="flex items-center justify-center text-[12px] bg-[#6065e0] text-[#fff] rounded-[20px] h-[25px] w-[60px] text-center"
                  onClick={() => {
                    navigateTo({ url: "/pages/publish/index" });
                  }}
                >
                  <Plus />
                  <Text>发布</Text>
                </View>
              )}
            </View>
          </View> */}
        </View>
        <View className="mt-[10px]">
          {/* <Tabs
            className="tabs-self"
            align="left"
            value={tab1value}
            onChange={(value) => {
              setTab1value(value);
            }}
          >
            <Tabs.TabPane title="帖子">
              <ScrollView
                scrollY
                style={{ height: `${scrollHeight}px` }}
                onScrollToLower={loadMore}
                refresherEnabled
                refresherTriggered={refreshing}
                onRefresherRefresh={onRefresh}
                lowerThreshold={50}
                className="bg-[#f7f8fa]"
              >
                {postList.map((item) => (
                  <View
                    className="post-list-item bg-[#fff] p-[10px] mt-[10px]"
                    onClick={() =>
                      navigateTo({ url: `/pages/detail/index?id=${item.id}` })
                    }
                  >
                    <View className="flex items-center justify-between">
                      <View className="flex items-center">
                        <View
                          className="w-[40px] h-[40px] rounded-[50%] bg-[#000] overflow-hidden  bg-cover bg-center"
                          style={{
                            backgroundImage: item.user.avatar_url
                              ? `url('${item.user.avatar_url}')`
                              : "none",
                          }}
                        ></View>
                        <View className="ml-[10rpx]">
                          <View className="text-[14px] font-[800] text-[#9c9dee]">
                            {item.user.nickname || "微信用户"}
                          </View>
                          {item.user.is_official ? (
                            <View className="text-[12px] text-[#949494]">
                              《心动女友》官方账号
                            </View>
                          ) : (
                            <></>
                          )}
                        </View>
                      </View>
                    </View>
                    <View className="text-[14px] text-[#333] pt-[10px]">
                      {strSlice(item.content, 100)}
                      {item.content.length > 100 && (
                        <Text className="text-[#1874d0]">全文</Text>
                      )}
                    </View>
                    <View className="mt-[10px]">
                      <Grid
                        columns={item.media_url.length < 3 ? 2 : 3} 
                        gap={7}
                        style={
                          {
                            "--nutui-grid-item-content-padding": "0px",
                            "--nutui-grid-item-content-margin": "0px",
                          } as any
                        }
                      >
                        {item.media_url.map((ite: any, index: number) => {
                          return (
                            <GridItem>
                              <Image
                                width="100%"
                                height="100px"
                                src={ite.src}
                                mode="widthFix"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  setMediaUrl(item.media_url);
                                  setInit(index + 1);

                                  setShowPreview(true);
                                }}
                              />
                            </GridItem>
                          );
                        })}
                      </Grid>
                    </View>
                    <View className="mt-[10px] pl-[20px] pr-[20px] flex items-center justify-between">
                      <View className="flex items-center">
                        <Message size={16} color="#949494" />
                        <Text className="ml-[5px] text-[16px] text-[#949494]">
                          {item.comment_count}
                        </Text>
                      </View>
                      <View
                        className="flex items-center"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleInteraction(
                            item.id,
                            item.interaction_type === "praise"
                              ? "dispraise"
                              : "praise"
                          );
                        }}
                      >
                        {item.interaction_type === "praise" ? (
                          <HeartFill size={16} color="#ec4342" />
                        ) : (
                          <Heart size={16} color="#949494" />
                        )}
                        <Text className="ml-[5px] text-[16px] text-[#949494]">
                          {item.like_count}
                        </Text>
                      </View>
                    </View>
                  </View>
                ))}

              
                {error && (
                  <View className="p-[20px] text-center">
                    <View className="text-[#ff4d4f] mb-[10px]">{error}</View>
                    <View
                      className="text-[#1874d0] underline cursor-pointer"
                      onClick={() => getPostList()}
                    >
                      点击重试
                    </View>
                  </View>
                )}

              
                {loadingMore && (
                  <View className="p-[20px] text-center text-[#999]">
                    加载更多...
                  </View>
                )}

              
                {!hasMore && postList.length > 0 && !loading && !refreshing && (
                  <View className="p-[20px] text-center text-[#999]">
                    没有更多内容了
                  </View>
                )}

              
                {!loading && !refreshing && postList.length === 0 && !error && (
                  <View className="p-[40px] text-center text-[#999]">
                    暂无帖子
                  </View>
                )}

                
                {loading && postList.length === 0 && (
                  <View className="p-[40px] text-center text-[#999]">
                    加载中...
                  </View>
                )}
              </ScrollView>
            </Tabs.TabPane>
          </Tabs> */}
        </View>
        <ImagePreview
          images={mediaUrl}
          visible={showPreview}
          defaultValue={init}
          onClose={() => setShowPreview(false)}
          indicator
        />
      </View>
      <View className="bg-[#fff] fixed bottom-[0px] left-[0px] right-[0px] w-full">
        <Tabbar
          defaultValue={1}
          onSwitch={(value) => {
            if (value === 1) {
              redirectTo({ url: "/pages/self/index" });
            } else {
              redirectTo({ url: "/pages/index/index" });
            }
          }}
        >
          <Tabbar.Item title="首页" icon={<Home width={20} height={20} />} />
          <Tabbar.Item title="我的" icon={<User width={20} height={20} />} />
        </Tabbar>
      </View>
    </>
  );
};

export default Self;
