import { View, Text, } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import NavBarNormal from "@/components/NavBarNormal/index";
import PageCustom from "@/components/page-custom/index";
import IconArrowDownRounded from '@/components/icon/IconArrowDownRounded';
import DataCard from './components/DataCard'
import VisitorList from "./components/VisitorList";
import  PickerSingleColumn from "@/components/Picker/PickerSingleColumn";
import { useEffect, useState } from "react";
import { useAgentStore } from "@/store/agentStore";
import { getVisitorSummary, type TVisitorSummary } from '@/service/visitor'
import { isSuccess } from "@/utils";

export default () => {
  
  const {agents, fetchAgents} = useAgentStore()
  
  
  // 是否显示选择器
  const [showPicker, setShowPicker] = useState(false)
  const [summary, setSummary] = useState<TVisitorSummary>()

  // 当前选中的值
  const [selected, setSelected] = useState<string>();
  const currentAgent = agents.find( _agent => _agent.name === selected)

  const onPicked = (value: string) => {
    setSelected(value)
  }

  useEffect(()=> {
    fetchAgents()
  }, [])

  useEffect(() => {
    setSelected('全部智能体')
  }, [])


  const fetchInitData = async () => {
    const currentAgent = agents.find( _agent => _agent.name === selected)
    
    const response = await getVisitorSummary(currentAgent?.agentId)
    if(isSuccess(response.status)){
      setSummary(response.data)
    }
  }

  useEffect(()=> {
    fetchInitData()
  }, [selected])



  if(!agents || !selected) {
    return <View>...</View>
  }

  const options = ['全部智能体', ...agents.map(_agent => _agent.name)]


  return (
    <PageCustom>
      <NavBarNormal scrollFadeIn leftColumn={()=> <Text className="font-medium text-dark leading-22 text-16">数据分析</Text>}>
      </NavBarNormal>
      <View className="w-full pt-8 px-16 pb-40">
        {(!!options.length && !!selected) && 
          <PickerSingleColumn options={options} selected={selected} onPicked={onPicked} showPicker={showPicker} setShowPicker={setShowPicker}>
            <View className="flex items-center gap-2 bg-white rounded-12 p-12 mb-16" onClick={() => setShowPicker(true)}>
              <View className="flex-1 text-14 leading-22 text-gray-45">{selected}</View>
              <View className="flex-center">
                <IconArrowDownRounded/>
              </View>
            </View>
          </PickerSingleColumn>
        }

        <View className="grid grid-cols-2 gap-8 bg-white rounded-12 p-12 mb-12">
          <DataCard text="今日访问次数" unitText="次" value={summary?.todayPv ?? 0} />
          <DataCard text="今日对话人数" unitText="人" value={summary?.todayUv ?? 0} />
          <DataCard text="累计访问次数" unitText="次" value={summary?.sumPv ?? 0} />
          <DataCard text="累计对话人数" unitText="人" value={summary?.sumPv ?? 0} />
          <DataCard text="好评" unitText="条" value={summary?.unreadLikeCnt ?? 0} arrow />
          <DataCard onClick={()=> {
            const query = currentAgent?.agentId ? `agentId=${currentAgent.agentId}` : ''
            Taro.navigateTo({
              url: `/pages/dashboard-dislike-messages/index?${query}`
            })
            
          }} text="待处理差评" unitText="条" value={summary?.unprocessedDislikeCnt ?? 0} arrow />
        </View>

        <VisitorList agentId={currentAgent?.agentId}></VisitorList>

      </View>
      
    </PageCustom>
  );
};