<template>
  <div v-if="user">
    <img
      :src="userBackground"
      class="object-cover w-full max-h-48 mb-8"
      style="aspect-ratio: 16/7"
    />

    <div class="container mx-auto px-8 pb-8">
      <div class="flex items-center gap-6 mb-8">
        <v-avatar size="80" rounded="circle" :image="userPicture" />
        <div>
          <div class="text-2xl font-bold">
            {{ user.nick || user.name }}
          </div>
          <div class="text-body-2 text-medium-emphasis">@{{ user.name }}</div>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="flex flex-col gap-4">
          <v-card
            title="Info"
            prepend-icon="mdi-information"
            density="comfortable"
          >
            <v-card-text class="flex flex-col gap-2">
              <div v-if="user?.profile?.timeZone" class="flex gap-2">
                <span class="flex items-center gap-2 grow">
                  <v-icon>mdi-clock-outline</v-icon>
                  Time Zone
                </span>
                <span class="flex gap-2">
                  <span>
                    {{
                      new Date().toLocaleTimeString(void 0, {
                        timeZone: user.profile.timeZone
                      })
                    }}
                  </span>
                  <span class="font-bold">·</span>
                  <span>{{ getOffsetUTCString(user.profile.timeZone) }}</span>
                  <span class="font-bold">·</span>
                  <span>{{ user.profile.timeZone }}</span>
                </span>
              </div>
              <div v-if="user?.profile?.location" class="flex gap-2">
                <span class="flex items-center gap-2 grow">
                  <v-icon>mdi-map-marker-outline</v-icon>
                  Location
                </span>
                <span>
                  {{ user.profile.location }}
                </span>
              </div>
              <div
                v-if="user?.profile?.firstName || user?.profile?.lastName"
                class="flex gap-2"
              >
                <span class="flex items-center gap-2 grow">
                  <v-icon>mdi-account-edit-outline</v-icon>
                  Name
                </span>
                <span>
                  {{
                    [
                      user.profile.firstName,
                      user.profile.middleName,
                      user.profile.lastName
                    ]
                      .filter(Boolean)
                      .join(" ")
                  }}
                </span>
              </div>
              <div
                v-if="user?.profile?.gender || user?.profile?.pronouns"
                class="flex gap-2"
              >
                <span class="flex items-center gap-2 grow">
                  <v-icon>mdi-account-circle</v-icon>
                  Gender
                </span>
                <span class="flex gap-2">
                  <span>{{ user.profile.gender || "Unspecified" }}</span>
                  <span class="font-bold">·</span>
                  <span>{{ user.profile.pronouns || "Unspecified" }}</span>
                </span>
              </div>
              <div class="flex gap-2">
                <span class="flex items-center gap-2 grow">
                  <v-icon>mdi-calendar-month-outline</v-icon>
                  Joined at
                </span>
                <span>{{
                  user ? new Date(user.createdAt).toLocaleDateString() : ""
                }}</span>
              </div>
              <div v-if="user?.profile?.birthday" class="flex gap-2">
                <span class="flex items-center gap-2 grow">
                  <v-icon>mdi-cake-variant-outline</v-icon>
                  Birthday
                </span>
                <span class="flex gap-2">
                  <span
                    >{{ calculateAge(new Date(user.profile.birthday)) }} yrs
                    old</span
                  >
                  <span class="font-bold">·</span>
                  <span>{{
                    new Date(user.profile.birthday).toLocaleDateString()
                  }}</span>
                </span>
              </div>
            </v-card-text>
          </v-card>
          <v-card v-if="user?.perkSubscription">
            <v-card-text>
              <div class="flex justify-between items-center">
                <div class="flex flex-col">
                  <div class="text-xl font-bold">
                    {{
                      perkSubscriptionNames[user.perkSubscription.identifier]
                        ?.name || "Unknown"
                    }}
                    Tier
                  </div>
                  <div class="text-sm">Stellar Program Member</div>
                </div>
                <v-icon
                  size="48"
                  :color="
                    perkSubscriptionNames[user.perkSubscription.identifier]
                      ?.color || '#2196f3'
                  "
                >
                  mdi-star-circle
                </v-icon>
              </div>
            </v-card-text>
          </v-card>
          <v-card>
            <v-card-text>
              <div class="flex justify-between items-center mb-2">
                <div>Level {{ user?.profile?.level || 0 }}</div>
                <div>{{ user?.profile?.experience || 0 }} XP</div>
              </div>
              <v-progress-linear
                :model-value="user?.profile?.levelingProgress || 0"
                color="success"
                class="mb-0"
                rounded
              />
            </v-card-text>
          </v-card>
        </div>
        <div>
          <v-card v-if="htmlBio" title="Bio" prepend-icon="mdi-pencil">
            <v-card-text>
              <article
                class="bio-prose prose prose-sm dark:prose-invert prose-slate"
                v-html="htmlBio"
              ></article>
            </v-card-text>
          </v-card>
        </div>
      </div>
    </div>
  </div>
  <div v-else-if="notFound" class="flex justify-center items-center h-full">
    <v-empty-state
      icon="mdi-account-off"
      title="User not found"
      text="The user profile you're trying to access is not found."
    />
  </div>
  <div v-else class="flex justify-center items-center h-full">
    <v-progress-circular indeterminate size="64" color="primary" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue"
import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
import type { SnAccount } from "~/types/api"

const route = useRoute()

const notFound = ref<boolean>(false)
const user = ref<SnAccount | null>(null)

const username = computed(() => {
  const nameStr = route.params.name?.toString()
  if (nameStr?.startsWith("@")) return nameStr.substring(1)
  return nameStr
})

// Use useFetch with the correct API URL to avoid router conflicts
const apiBase = useSolarNetworkUrl()
const apiBaseServer = useSolarNetworkUrl()

try {
  const { data, error } = await useFetch<SnAccount>(
    `${apiBaseServer}/id/accounts/${username.value}`,
    { server: true }
  )

  if (error.value) {
    console.error("Failed to fetch user:", error.value)
    notFound.value = true
  } else if (data.value) {
    user.value = data.value
  }
} catch (err) {
  console.error("Failed to fetch user:", err)
  notFound.value = true
}

interface PerkSubscriptionInfo {
  name: string
  tier: number
  color: string
}

const perkSubscriptionNames: Record<string, PerkSubscriptionInfo> = {
  "solian.stellar.primary": {
    name: "Stellar",
    tier: 1,
    color: "#2196f3"
  },
  "solian.stellar.nova": {
    name: "Nova",
    tier: 2,
    color: "#39c5bb"
  },
  "solian.stellar.supernova": {
    name: "Supernova",
    tier: 3,
    color: "#ffc109"
  }
}

const { render } = useMarkdownProcessor()

const htmlBio = ref<string | undefined>(undefined)

watch(
  user,
  (value) => {
    htmlBio.value = value?.profile.bio
      ? render(value.profile.bio)
      : undefined
  },
  { immediate: true, deep: true }
)

const userBackground = computed(() => {
  return user.value?.profile.background
    ? `${apiBase}/drive/files/${user.value.profile.background.id}?original=true`
    : undefined
})
const userPicture = computed(() => {
  return user.value?.profile.picture
    ? `${apiBase}/drive/files/${user.value.profile.picture.id}`
    : undefined
})

function calculateAge(birthday: Date) {
  const birthDate = new Date(birthday)
  const today = new Date()

  let age = today.getFullYear() - birthDate.getFullYear()

  // Check if the birthday hasn't occurred yet this year
  const monthDiff = today.getMonth() - birthDate.getMonth()
  const dayDiff = today.getDate() - birthDate.getDate()

  if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
    age--
  }

  return age
}

function getOffsetUTCString(targetTimeZone: string): string {
  const now = new Date()

  const localOffset = now.getTimezoneOffset() // in minutes
  const targetTime = new Date(
    now.toLocaleString("en-US", { timeZone: targetTimeZone })
  )
  const targetOffset = (now.getTime() - targetTime.getTime()) / 60000

  const diff = targetOffset - localOffset

  const sign = diff <= 0 ? "+" : "-" // inverted because positive offset is west of UTC
  const abs = Math.abs(diff)
  const hours = String(Math.floor(abs / 60)).padStart(2, "0")
  const minutes = String(Math.floor(abs % 60)).padStart(2, "0")

  return `${sign}${hours}:${minutes}`
}

definePageMeta({
  alias: ["/@:name()", "/u/:name()"]
})

useHead({
  title: computed(() => {
    if (notFound.value) {
      return "User not found"
    }
    if (user.value) {
      return user.value.nick || user.value.name
    }
    return "Loading user..."
  }),
  meta: computed(() => {
    if (user.value) {
      const description = `View the profile of ${
        user.value.nick || user.value.name
      } on Solar Network.`
      return [{ name: "description", content: description }]
    }
    return []
  })
})

defineOgImage({
  component: "ImageCard",
  title: computed(() =>
    user.value ? user.value.nick || user.value.name : "User Profile"
  ),
  description: computed(() =>
    user.value
      ? `View the profile of ${
          user.value.nick || user.value.name
        } on Solar Network.`
      : ""
  ),
  avatarUrl: computed(() => userPicture.value),
  backgroundImage: computed(() => userBackground.value)
})
</script>

<style>
.bio-prose img {
  display: inline !important;
  margin: 0 !important;
}
</style>
