<script setup>
import { reactive, ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useMainStore } from "@/stores/main";
import {
  mdiAccountOutline,
  mdiBackburger,
  mdiPlaylistMusicOutline,
  mdiFormatListText,
} from "@mdi/js";
import SectionMain from "@/components/SectionMain.vue";
import CardBoxWidget from "@/components/CardBoxWidget.vue";
import BaseButton from "@/components/BaseButton.vue";
import ProfileCard from "@/components/Cards/ProfileCard.vue";
import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
import SectionTitleLine from "@/components/SectionTitleLine.vue";
import FormControl from "@/components/FormControl.vue";
import { getGameInfo } from "@/constants";
import { getIIDXDan } from "@/constants/danClass.js";
import { getGitadoraColor, getJubilityColor } from "@/constants/skillColor";

const $route = useRoute();
const $router = useRouter();
const mainStore = useMainStore();
var gameID = null;
var thisGame = null;
var profileUserId = null;

gameID = $route.params.game;
profileUserId = $route.params.userId;
thisGame = getGameInfo(gameID);

if (!thisGame) {
  $router.push({
    name: "ErrorPage",
    params: {
      catchAll: "404",
    },
  });
}

const versionForm = reactive({
  currentVersion: null,
});

watch(
  () => versionForm.currentVersion,
  () => {
    loadProfile();
  }
);

const myProfile = ref(null);

onMounted(async () => {
  loadProfile();
});

if (!thisGame.versions) {
  versionForm.currentVersion = 1;
}

async function loadProfile() {
  try {
    myProfile.value = null;
    const data = await mainStore.getUserProfile(
      gameID,
      versionForm.currentVersion,
      profileUserId
    );
    myProfile.value = formatProfile(data);

    if (data && !versionForm.currentVersion) {
      versionForm.currentVersion = data.versions[data.versions.length - 1];
    }
  } catch (error) {
    console.error("Failed to fetch user profile data:", error);
  }
}

var loadStats = [
  {
    label: "Register Date",
    type: String,
    span: "md:col-span-2",
    key: "first_play_timestamp",
  },
  {
    label: "Last Play",
    type: String,
    span: "md:col-span-2",
    key: "last_play_timestamp",
  },
  {
    label: "First Arcade",
    type: String,
    span: "md:col-span-2",
    key: "first_play_arcade",
  },
  {
    label: "Last Arcade",
    type: String,
    span: "md:col-span-2",
    key: "last_play_arcade",
  },
  {
    label: "Total Plays",
    type: Number,
    key: "total_plays",
  },
  {
    label: "EXP",
    type: Number,
    key: "exp",
  },
  {
    label: "SP Plays",
    type: Number,
    key: "single_plays",
  },
  {
    label: "DP Plays",
    type: Number,
    key: "double_plays",
  },
  {
    label: "SP DJPOINT",
    type: Number,
    key: "single_dj_points",
  },
  {
    label: "DP DJPOINT",
    type: Number,
    key: "double_dj_points",
  },
];

function getSources() {
  var sources = null;
  if (!versionForm.currentVersion) {
    sources = thisGame.cardBG;
  } else {
    sources = `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.png`;
  }
  return sources;
}

function getCardStyle() {
  return `
      background-image: url('${getSources()}');
      background-size: cover;
      background-repeat: no-repeat;
    `;
}

function colorText(stat, profile) {
  if (profile) {
    if (stat.isSkill && profile.jubility) {
      return getGitadoraColor(profile.jubility);
    } else if (stat.isJubility && profile.records.skill) {
      return getJubilityColor(profile.records.skill);
    }
  }
  return "";
}

function filterVersions(haveVersions) {
  var filtered = [];
  for (const version of thisGame.versions) {
    if (haveVersions.includes(version.id)) {
      filtered.push(version);
    }
  }
  return filtered;
}

function returnNumber(stat, profile) {
  if (stat.isSkill) {
    return profile.stats[stat.key] / 100;
  } else if (stat.isJubility) {
    return profile.stats[stat.key] / 10;
  }

  return profile.stats[stat.key];
}

function formatNumber(number, tenth) {
  if (!tenth) {
    return number / 100;
  } else {
    return number / 10;
  }
}

function formatProfile(profile) {
  if (profile.stats) {
    if (profile.stats.first_play_timestamp) {
      const date = new Date(profile.stats.first_play_timestamp * 1000);
      profile.stats.first_play_timestamp = date.toLocaleString();
    }

    if (profile.stats.last_play_timestamp) {
      const date = new Date(profile.stats.last_play_timestamp * 1000);
      profile.stats.last_play_timestamp = date.toLocaleString();
    }

    if (profile.dp) {
      if (profile.dp.dan !== undefined) {
        profile.dp.dan = getIIDXDan(profile.dp.dan).short;
      }
    }
  }

  return profile;
}
</script>

<template>
  <LayoutAuthenticated>
    <template v-if="myProfile">
      <SectionMain>
        <div class="md:flex pb-6 md:justify-between md:items-center">
          <BaseButton
            :icon="mdiBackburger"
            :href="`/#/games/${gameID}`"
            class="w-full md:w-auto"
            color="info"
            :label="`${
              thisGame.shortName ? thisGame.shortName : thisGame.name
            } Home`"
          />

          <div
            v-if="thisGame.versions && myProfile"
            class="mt-2 md:mt-0 md:w-1/3 md:text-right"
          >
            <h2 class="text-md sm:text-lg md:text-xl font-bold p-2">
              Select Version
            </h2>
            <FormControl
              v-model="versionForm.currentVersion"
              :options="filterVersions(myProfile.versions)"
            />
          </div>
        </div>
        <SectionTitleLine :icon="mdiAccountOutline" title="View Profile" main />
        <div
          v-if="versionForm.currentVersion && myProfile"
          :style="getCardStyle()"
          class="rounded-2xl mb-6"
        >
          <div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
            <div class="w-full">
              <ProfileCard
                use-small
                :game="gameID"
                :version="versionForm.currentVersion"
                :profile="myProfile"
              >
                <div class="md:w-1/3 grid grid-cols-1 md:grid-cols-2 gap-3">
                  <BaseButton
                    :href="`/#/games/${gameID}/scores/${myProfile.userId}`"
                    :icon="mdiPlaylistMusicOutline"
                    class="w-full md:w-auto"
                    color="info"
                    label="View Scores"
                  />

                  <BaseButton
                    :href="`/#/games/${gameID}/records/${myProfile.userId}`"
                    :icon="mdiFormatListText"
                    class="w-full md:w-auto"
                    color="info"
                    label="View Records"
                  />
                </div>
              </ProfileCard>
            </div>
          </div>
        </div>
        <div class="my-6 grid grid-cols-1 md:grid-cols-4 gap-6">
          <template v-for="stat in loadStats" :key="stat">
            <CardBoxWidget
              v-if="myProfile.stats[stat.key]"
              :class="stat.span"
              :label="stat.label"
              :number="
                stat.type == Number ? returnNumber(stat, myProfile) : null
              "
              :num-color="colorText(stat)"
            >
              {{ stat.type == String ? myProfile.stats[stat.key] : null }}
              <!-- {{
                      stat.type == String && stat.isIIDXDan
                        ? getIIDXDan(myProfile[stat.key]).label
                        : None
                    }} -->
            </CardBoxWidget>
          </template>
          <CardBoxWidget
            v-if="myProfile.skill"
            label="Skill Points"
            :number="formatNumber(myProfile.skill, false)"
            :num-color="getGitadoraColor(myProfile.skill)"
          />
          <CardBoxWidget
            v-if="myProfile.profile_skill"
            label="Skill Level"
            :number="myProfile.profile_skill"
          />
          <CardBoxWidget
            v-if="myProfile.deller"
            label="Deller"
            :number="myProfile.deller"
          />
          <CardBoxWidget v-if="myProfile.sgrade" label="SP DAN">{{
            getIIDXDan(myProfile.sgrade).label
          }}</CardBoxWidget>
          <CardBoxWidget v-if="myProfile.dgrade" label="DP DAN">{{
            getIIDXDan(myProfile.dgrade).label
          }}</CardBoxWidget>
        </div>
      </SectionMain>
    </template>
  </LayoutAuthenticated>
</template>
