<template>
  <div class="my-60px ml-112px mr-87px box-border relative">
    <div
      class="w-658px text-72px leading-78px mb-105px ml-auto"
      style="font-family: D-DINExp, sans-serif"
    >
      {{ date }}
    </div>

    <!-- Social Media Sentimental Analysis -->
    <Title title="Social Media Sentimental Analysis" :time="endDate" :gap="15" />

    <div class="w-full h-183px mt-60px bg-gradient-to-r from-#46759140 to-#46759100">
      <div class="flex p-20px box-border">
        <div class="w-480px shrink-0">
          <div class="num text-48px leading-60px mb-20px">
            {{ dataSource.socialMediaSentimentalAnalysisData?.googleReviews?.value ?? 'N/A' }}
          </div>
          <div class="flex items-center justify-between">
            <span class="flex-1 text-42px leading-60px">Google review</span>
            <span
              class="flex items-center gap-10px"
              v-if="dataSource.socialMediaSentimentalAnalysisData?.googleReviews?.preValue"
            >
              <img
                v-if="dataSource.socialMediaSentimentalAnalysisData?.googleReviews?.preValue > 0"
                src="@/assets/images/up-arrow.svg"
                alt="up"
              />
              <img v-else src="@/assets/images/down-arrow.svg" alt="up" />
              <span
                class="num text-36px"
                :class="
                  dataSource.socialMediaSentimentalAnalysisData?.googleReviews?.preValue > 0
                    ? 'text-upcolor'
                    : 'text-downcolor'
                "
                >{{
                  dataSource.socialMediaSentimentalAnalysisData?.googleReviews?.preValue > 0
                    ? '+'
                    : ''
                }}{{
                  dataSource.socialMediaSentimentalAnalysisData?.googleReviews?.preValue
                }}%</span
              >
            </span>
          </div>
        </div>
        <div class="ml-60px flex-1 overflow-x-auto list-item" ref="scrollContainer1">
          <div class="flex item-center gap-70px" ref="scrollContent1">
            <div
              v-for="item in dataSource.socialMediaSentimentalAnalysisData?.googleReviews?.lists ||
              []"
              :key="item.parkCode"
              class="shrink-0"
            >
              <div class="num text-48px leading-60px mb-23px">
                {{ formatNumber(item.value) }}
              </div>
              <div class="text-#9BAEC1FF text-36px leading-50px">
                {{ item.parkCode }}
              </div>
            </div>
            <div class="w-70px shrink-0"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="w-full h-183px mt-60px bg-gradient-to-r from-#46759140 to-#46759100 mt-20px">
      <div class="flex p-20px box-border overflow-hidden">
        <div class="w-480px shrink-0">
          <div class="num text-48px leading-60px mb-20px">
            {{ dataSource.socialMediaSentimentalAnalysisData?.tripAdvisor?.value ?? 'N/A' }}
          </div>
          <div class="flex items-center justify-between">
            <span class="flex-1 text-42px leading-60px">Trip advisor</span>
            <span
              class="flex items-center gap-10px"
              v-if="dataSource.socialMediaSentimentalAnalysisData?.tripAdvisor?.preValue"
            >
              <img
                v-if="dataSource.socialMediaSentimentalAnalysisData?.tripAdvisor?.preValue > 0"
                src="@/assets/images/up-arrow.svg"
                alt="up"
              />
              <img v-else src="@/assets/images/down-arrow.svg" alt="up" />
              <span
                class="num text-36px"
                :class="
                  dataSource.socialMediaSentimentalAnalysisData?.tripAdvisor?.preValue > 0
                    ? 'text-upcolor'
                    : 'text-downcolor'
                "
                >{{
                  dataSource.socialMediaSentimentalAnalysisData?.tripAdvisor?.preValue > 0
                    ? '+'
                    : ''
                }}{{ dataSource.socialMediaSentimentalAnalysisData?.tripAdvisor?.preValue }}%</span
              >
            </span>
          </div>
        </div>
        <div class="ml-60px flex-1 overflow-x-auto list-item" ref="scrollContainer2">
          <div class="flex item-center gap-70px" ref="scrollContent2">
            <div
              v-for="item in dataSource.socialMediaSentimentalAnalysisData?.tripAdvisor?.lists ||
              []"
              :key="item.parkCode"
              class="shrink-0"
            >
              <div class="num text-48px leading-60px mb-23px">
                {{ formatNumber(item.value) }}
              </div>
              <div class="text-#9BAEC1FF text-36px leading-50px">
                {{ item.parkCode }}
              </div>
            </div>
            <div class="w-70px shrink-0"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Google Reviews -->
    <div class="chart-title mt-25px mb-30px">Google Reviews</div>
    <div class="h-396px grid grid-cols-2 gap-30px">
      <div
        v-for="item in dataSource.googleReviewsData || []"
        :key="item.id"
        class="h-183px flex items-center p-16px box-border rounded-10px border-1px border-solid border-#326495FF"
      >
        <el-image :src="item.contentUrl" class="w-187px h-151px shrink-0"></el-image>
        <div class="w-53px h-full shrink-0 ml-23px mr-14px">
          <el-avatar :src="item.avatarUrl" :size="53" />
        </div>
        <div class="flex-1">
          <div class="h-90px mb-17px text-32px leading-45px line-clamp-2">
            {{ item.content }}
          </div>
          <div class="flex items-center justify-between">
            <span class="flex items-center gap-40px">
              <span class="flex items-center">
                <img src="@/assets/images/favour.svg" alt="favour" />
                <span class="text-24px text-#8ACAEFFF ml-8px">{{ item.likeNum ?? 'N/A' }}</span>
              </span>
              <span class="flex items-center">
                <img src="@/assets/images/comment.svg" alt="comment" />
                <span class="text-24px text-#8ACAEFFF ml-8px">{{ item.commentCount ?? 'N/A' }}</span>
              </span>
              <span class="flex items-center">
                <img src="@/assets/images/share.svg" alt="share" />
                <span class="text-24px text-#8ACAEFFF ml-8px">{{ item.reposts ?? 'N/A' }}</span>
              </span>
            </span>
            <span class="text-24px leading-34px text-#8ACAEFFF">{{ item.reviewDate }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Word Cloud -->
    <Tabs
      class="text-44px leading-60px mt-60px"
      v-bind:active="cloudType"
      :items="[
        { name: 'Google Evaluation Word Cloud', value: 'Google' },
        { name: 'Trip Advisor Evaluation Word Cloud', value: 'Trip' },
      ]"
      :gap="30"
    />
    <div class="w-full h-434px bg-[url(@/assets/images/cloud-word-bg.svg)] bg-contain bg-no-repeat">
      <Cloud :words="cloudData" />
    </div>

    <!-- Digital GX -->
    <Title title="Digital GX" :time="endDate" class="mt-62px" />
    <div class="text-44px leading-62px mt-20px mb-30px font-[PingFangSC-Medium]">Mobile App</div>
    <div class="flex justify-between flex-wrap gap-y-40px">
      <div
        v-for="item in mobileAppData"
        :key="item.name"
        class="w-557px h-168px bg-[url(@/assets/images/digital-bg.svg)] bg-no-repeat bg-contain box-border flex flex-col justify-center items-center"
      >
        <div class="text-42px leading-60px text-#CBD1D3">{{ item.name }}</div>
        <div class="num text-48px leading-60px mt-2px">{{ item.value }}{{ item.unit }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from 'vue';
import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';
import { formatNumber } from '@/utils';
import { useAutoScroll } from '@/hooks/useAutoScroll';
import {
  GetSocialMeidaAnalysis,
  GetGoogleReviewsPost,
  GetDigitalAnalysis,
  GetWordCloud,
} from '@/api';

import type { ISocialMeidaAnalysis, IGoogleReviewsPost, IDigitalAnalysis } from '@/api';

import Tabs from '@/components/Tabs.vue';
import Title from '@/components/Title.vue';
import Cloud from '@/components/Cloud.vue';

dayjs.extend(advancedFormat);

// 系统时间
const date = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
// 截止日期
const endDate = ref(dayjs().format('YY/MM/DD'));

setInterval(() => {
  date.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
  endDate.value = dayjs().format('YY/MM/DD');
}, 1000);

const cloudType = ref<'Google' | 'Trip'>('Google');
// 数据源
const dataSource = reactive<{
  socialMediaSentimentalAnalysisData?: ISocialMeidaAnalysis;
  googleReviewsData?: IGoogleReviewsPost[];
  digitalGXData?: IDigitalAnalysis;
}>({
  socialMediaSentimentalAnalysisData: undefined,
  googleReviewsData: undefined,
  digitalGXData: undefined,
});

// 滚动区域
const scrollContainer1 = ref<HTMLElement | null>(null);
const scrollContainer2 = ref<HTMLElement | null>(null);
const scrollContent1 = ref<HTMLElement | null>(null);
const scrollContent2 = ref<HTMLElement | null>(null);

useAutoScroll(scrollContainer1, scrollContent1, { direction: 'right' });
useAutoScroll(scrollContainer2, scrollContent2, { direction: 'right' });

// app数据
const mobileAppData = computed(() => {
  return [
    {
      name: 'App uptime',
      value: dataSource.digitalGXData?.appUptime
        ? dayjs(dataSource.digitalGXData.appUptime).format('YYYY-MM-DD')
        : 'N/A',
    },
    {
      name: 'Downtime notification',
      value: dataSource.digitalGXData?.downtimeNotification ?? 'N/A',
    },
    {
      name: 'Current app sessions',
      value: dataSource.digitalGXData?.currentAppSessions ?? 'N/A',
    },
    {
      name: 'Most used screens',
      value: dataSource.digitalGXData?.mostUsedScreens ?? 'N/A',
    },
    {
      name: 'Avg. time spend',
      value: dataSource.digitalGXData?.avgTimespend ?? 'N/A',
      unit: 's',
    },
    {
      name: 'App revenue',
      value: dataSource.digitalGXData?.appRevenue ?? 'N/A',
      unit: 'AED',
    },
    {
      name: 'Yas app CSAT',
      value: dataSource.digitalGXData?.yasAppCsat ?? 'N/A',
      unit: '%',
    },
  ];
});

// 词云数据
const cloudData = ref<
  {
    name: string;
    value: number;
  }[]
>([]);

// 获取词云
const getWordCloudData = () => {
  GetWordCloud(cloudType.value).then((res) => {
    cloudData.value = (res || []).map((item) => ({ name: item.word, value: item.frequency }));
  });
};

watch(
  () => cloudType.value,
  () => {
    getWordCloudData();
  },
);

// 获取数据
const getData = () => {
  GetSocialMeidaAnalysis().then((res) => {
    dataSource.socialMediaSentimentalAnalysisData = res;
  });
  GetGoogleReviewsPost().then((res) => {
    dataSource.googleReviewsData = (res || []).splice(0, 4).map((item) => ({
      ...item,
      reviewDate: dayjs(item.reviewDate).format('MMMM Do'),
    }));
  });
  GetDigitalAnalysis().then((res) => {
    dataSource.digitalGXData = res;
  });
  getWordCloudData();
};

onMounted(() => {
  getData();
  // 轮询数据
  setInterval(getData, Number(import.meta.env.VITE_APP_POLLING_INTERVAL));
});
</script>

<style lang="less" scoped>
.list-item {
  background: linear-gradient(90deg, rgba(16, 44, 88, 0) 0%, rgba(16, 44, 88, 0.6) 100%);
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent);
  mask-image: linear-gradient(to right, black 80%, transparent);
}
</style>
