import PageCustom from "@/components/page-custom/index";
import NavBarNormal from "@/components/NavBarNormal";

import { View, Button, Image } from "@tarojs/components";
import Logo from "@/components/logo";
import AvatarDefault from "@/components/AvatarDefault";
import { useEffect, useState } from "react";
import CardList from "@/components/list/card-list";
import CardListItem from "@/components/list/card-list-item";
import IconAccount from "@/images/svgs/personal/IconAccount.svg";
import IconPrivacy from "@/images/svgs/personal/IconPrivacy.svg";
import IconAgreement from "@/images/svgs/personal/IconAgreement.svg";
import IconFeedback from "@/images/svgs/personal/IconFeedback.svg";
import IconDesktop from "@/images/svgs/personal/IconDesktop.svg";
import style from "./index.module.less";
import Taro from "@tarojs/taro";
import { useIsLogin } from '@/xiaolanbenlib/hooks/data/useAuth'

import LoginPopup from '@/components/LoginPopup/index'
import SaveToDesktopTip from './components/SaveToDesktopTip'
import { useUserStore } from "@/store/userStore";
import {restrictedPage} from '@/utils'

export default function Index() {
  restrictedPage()
  const {fetchtMyInfo} = useUserStore()

  const isLogin = useIsLogin()
  

  const [showPopup, setShowPopup] = useState(false)
  const [showSaveToDesktopTip, setSaveToDesktopTip] = useState(false)
  


  const handleClick = () => {
    if(!isLogin){
      setShowPopup(true)
    }
  }
  
  useEffect(()=>{
    fetchtMyInfo()
  }, [])

  // 自定义背景样式
  const handleNicknameChange = async (e: any) => {
    const nickname = e.detail.value.trim();
    if (nickname) {
      console.log();
    }
  };

  

  return (
    <PageCustom onClick={()=> {
      setSaveToDesktopTip(false)
    }} >
      <NavBarNormal leftColumn={Logo} scrollFadeIn></NavBarNormal>
      <SaveToDesktopTip show={showSaveToDesktopTip}></SaveToDesktopTip>
      
      <View className="w-full px-16 py-24 flex flex-col gap-16 h-full" >
        <View className="flex items-center w-full gap-12 mb-16">
          <View className="w-60 h-60">
            <AvatarDefault />
          </View>
          <View className={style.nickname} onClick={handleClick}>
            { isLogin ? '已登录': '立即登录' }
          </View>
          {/* <Input
            type="nickname"
            defaultValue={name}
            placeholder="您的昵称"
            placeholder-style="color: #111A34"
            className={style.nickname}
            onConfirm={(e) => {
              handleNicknameChange(e);
            }}
            onBlur={(e) => {
              handleNicknameChange(e);
            }}
          ></Input> */}
        </View>
        
        <CardList>
          <CardListItem
            className="pl-16"
            underline
            arrow
            leftRenderer={() => (
              <Image src={IconAccount} className="w-28 h-28" mode="widthFix" />
            )}
            onClick={() => {
              Taro.navigateTo({ url: "/pages/account/index" });
            }}
          >
            <View className="py-18 label-text">账号管理</View>
          </CardListItem>
          <CardListItem
            className="pl-16"
            underline
            arrow
            leftRenderer={() => (
              <Image src={IconPrivacy} className="w-28 h-28" mode="widthFix" />
            )}
            onClick={() => {
              Taro.navigateTo({ url: "/pages/privacy/index" });
            }}
          >
            <View className="py-18 label-text">隐私设置</View>
          </CardListItem>
          
          <CardListItem
            className="pl-16"
            arrow
            leftRenderer={() => (
              <Image src={IconAgreement} className="w-28 h-28" mode="widthFix" />
            )}
            onClick={() => {
              Taro.navigateTo({ url: "/pages/agreement/index" });
            }}
          >
            <View className="py-18 label-text">服务协议</View>
          </CardListItem>
        </CardList>

        <CardList>
          <CardListItem
            className="pl-16"
            underline
            arrow
            leftRenderer={() => (
              <Image src={IconFeedback} className="w-28 h-28" mode="widthFix" />
            )}
            onClick={() => {
              // Taro.navigateTo({ url: "/pages/voice/index" });
            }}
          >
            <View className="py-18 label-text relative">
              意见反馈
              <Button
                openType="contact"
                className="absolute left-0 top-0 right-0 bottom-0 opacity-0"
              ></Button>
            </View>
          </CardListItem>
          <CardListItem
            className="pl-16"
            arrow
            leftRenderer={() => (
              <Image src={IconDesktop} className="w-28 h-28" mode="widthFix" />
            )}
            onClick={(e:any) => {
              e.stopPropagation();
              setSaveToDesktopTip(true)
            }}
          >
            <View className="py-18 label-text">将智能体添加到桌面</View>
          </CardListItem>
        </CardList>
      </View>
      <LoginPopup onEnd={()=> {
        // todo
      }} showPopup={showPopup} setShowPopup={setShowPopup}></LoginPopup>
    </PageCustom>
  );
}
