<script lang="ts" setup>
/* eslint-disable @stylistic/member-delimiter-style */
import type { User } from '~/types/database'

interface TeamMember {
  id: string;
  teamId: string;
  userId: string;
  role: string;
  createdAt: string;
  updatedAt: string;
  team: {
    id: string;
    name: string;
    ownerId: string;
    logo: string;
    slug: string;
    createdAt: string;
    updatedAt: string;
  };
}

const props = defineProps<{
  teamMembers?: TeamMember[]
  users?: (User & { avatarUrl?: string })[]
}>()

const { t } = useI18n()

function getTeamOwner(ownerId: string): { name: string, email: string, avatarUrl: string } {
  const unknown = t('superAdmin.userTeamAffiliations.unknown')
  if (!ownerId || !props.users?.length) return { name: unknown, email: unknown, avatarUrl: unknown }
  const owner = props.users.find(user => user.id === ownerId)
  const withAvatar = owner as (User & { avatarUrl?: string }) | undefined
  return { name: owner?.name || unknown, email: owner?.email || unknown, avatarUrl: withAvatar?.avatarUrl || unknown }
}
</script>

<template>
  <UPopover
    v-if="teamMembers?.length"
    mode="hover"
  >
    <div class="flex cursor-pointer items-center gap-1">
      <span>{{ teamMembers.length }}</span>
      <UIcon
        name="i-solar-users-group-rounded-bold-duotone"
        class="text-neutral-500"
      />
    </div>
    <template #content>
      <div class="w-72 px-4 py-2">
        <ul class="divide-y divide-neutral-100 dark:divide-white/10">
          <li
            v-for="teamMember in teamMembers"
            :key="teamMember.id"
            class="py-2"
          >
            <div class="flex items-center gap-2">
              <UAvatar
                :src="teamMember.team.logo || undefined"
                size="2xs"
                :alt="teamMember.team.name + ' logo'"
              />
              <span class="text-sm font-medium flex-1">
                {{ teamMember.team.name }}
              </span>
              <span class="text-xs text-neutral-500 capitalize">
                {{ teamMember.role }}
              </span>
            </div>
            <div
              v-if="teamMember.role !== 'owner'"
              class="pl-2.5 p-2 pb-0"
            >
              <div class="flex items-center gap-2">
                <UIcon
                  name="i-solar-login-3-bold-duotone"
                  class="shrink-0 scale-x-[-1] text-sm"
                />
                <p class="text-neutral-500 text-xs">
                  {{ $t('superAdmin.userTeamAffiliations.ownedBy') }}
                </p>
                <UAvatar
                  :src="getTeamOwner(teamMember.team.ownerId).avatarUrl || undefined"
                  size="3xs"
                  :alt="getTeamOwner(teamMember.team.ownerId).name"
                />
                <p class="text-xs font-medium">
                  {{ getTeamOwner(teamMember.team.ownerId).name }}
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </template>
  </UPopover>
  <span v-else>-</span>
</template>
