<script setup>
const props = defineProps({
  userData: {
    type: Object,
    required: true,
  },
});

const standardPlan = {
  plan: "Standard",
  price: 99,
  benefits: ["10 Users", "Up to 10GB storage", "Basic Support"],
};

const isUserInfoEditDialogVisible = ref(false);
const isUpgradePlanDialogVisible = ref(false);

const resolveUserStatusVariant = (stat) => {
  if (stat === "pending") return "warning";
  if (stat === "active") return "success";
  if (stat === "inactive") return "secondary";

  return "primary";
};

const resolveUserRoleVariant = (role) => {
  if (role === "admin")
    return {
      color: "warning",
      icon: "tabler-user",
    };
  if (role === "manager")
    return {
      color: "success",
      icon: "tabler-circle-check",
    };
  if (role === "senior")
    return {
      color: "primary",
      icon: "tabler-chart-pie-2",
    };
  if (role === "editor")
    return {
      color: "info",
      icon: "tabler-pencil",
    };
  if (role === "user")
    return {
      color: "secondary",
      icon: "tabler-server-2",
    };

  return {
    color: "primary",
    icon: "tabler-user",
  };
};
</script>

<template>
  <VRow>
    <!-- SECTION User Details -->
    <VCol cols="12">
      <VCard v-if="props.userData">
        <VCardText class="text-center pt-15">
          <!-- 👉 Avatar -->
          <VAvatar
            rounded
            :size="100"
            :color="!props.userData.avatar ? 'primary' : undefined"
            :variant="!props.userData.avatar ? 'tonal' : undefined"
          >
            <VImg v-if="props.userData.avatar" :src="props.userData.avatar" />
            <span v-else class="text-5xl font-weight-medium">
              {{ avatarText(props.userData.username) }}
            </span>
          </VAvatar>

          <!-- 👉 User username -->
          <h6 class="text-h4 mt-4">
            {{ props.userData.username }}
          </h6>

          <!-- 👉 Role chip -->
          <VChip
            label
            :color="resolveUserRoleVariant(props.userData.role[0]).color"
            size="small"
            class="text-capitalize mt-3"
          >
            {{ props.userData.role[0] }}
          </VChip>
        </VCardText>

        <VCardText>
          <div class="d-flex justify-center flex-wrap gap-5">
            <!-- 👉 Done task -->
            <div class="d-flex align-center me-8">
              <VAvatar
                :size="38"
                rounded
                color="primary"
                variant="tonal"
                class="me-3"
              >
                <VIcon icon="tabler-users-group" size="28" />
              </VAvatar>
              <div>
                <div class="text-body-1 font-weight-medium">部門</div>
                <span class="text-sm">{{ props.userData.deptName }}</span>
              </div>
            </div>

            <!-- 👉 Done Project -->
            <div class="d-flex align-center me-4">
              <VAvatar
                :size="38"
                rounded
                color="primary"
                variant="tonal"
                class="me-3"
              >
                <VIcon icon="tabler-briefcase" size="28" />
              </VAvatar>
              <div>
                <div class="font-weight-medium">職等</div>
                <span class="text-sm">{{ props.userData.gradeName }}</span>
              </div>
            </div>
          </div>
        </VCardText>

        <VDivider />

        <!-- 👉 Details -->
        <VCardText>
          <p class="text-sm text-uppercase text-disabled">Details</p>

          <!-- 👉 User Details list -->
          <VList class="card-list mt-2 justify-center">
            <VListItem>
              <VListItemTitle>
                <h6 class="text-h6">
                  姓名:
                  <span class="text-body-1">
                    {{ props.userData.username }}
                  </span>
                </h6>
              </VListItemTitle>
            </VListItem>

            <VListItem>
              <VListItemTitle>
                <h6 class="text-h6">
                  工號:
                  <span class="text-body-1">{{ props.userData.userId }}</span>
                </h6>
              </VListItemTitle>
            </VListItem>

            <VListItem>
              <VListItemTitle>
                <h6 class="text-h6">
                  帳號:
                  <span class="text-body-1">{{ props.userData.account }}</span>
                </h6>
              </VListItemTitle>
            </VListItem>

            <VListItem>
              <VListItemTitle>
                <h6 class="text-h6">
                  職稱:
                  <span class="text-body-1">
                    {{ props.userData.jobTitle }}
                  </span>
                </h6>
              </VListItemTitle>
            </VListItem>
          </VList>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>

  <!-- 👉 Edit user info dialog -->
  <UserInfoEditDialog
    v-model:isDialogVisible="isUserInfoEditDialogVisible"
    :user-data="props.userData"
  />

  <!-- 👉 Upgrade plan dialog -->
  <UserUpgradePlanDialog v-model:isDialogVisible="isUpgradePlanDialogVisible" />
</template>

<style lang="scss" scoped>
.card-list {
  --v-card-list-gap: 0.75rem;
}

.text-capitalize {
  text-transform: capitalize !important;
}
</style>
