<script setup>
import AddNewUserDrawer from "@/views/apps/user/list/AddNewUserDrawer.vue";
import { paginationMeta } from "@api-utils/paginationMeta";
import { VDataTableServer } from "vuetify/lib/labs/VDataTable";

// 👉 Store
const searchQuery = ref("");
const selectedRole = ref();
const selectedPlan = ref();
const selectedStatus = ref();

// Data table options

const search = ref("");
const itemsPerPage = ref(10);
const page = ref(1);
const sortBy = ref(null);
const orderBy = ref(null);
const updateSignal = ref(0);

const updateOptions = (options) => {
  page.value = options.page;
  sortBy.value = options.sortBy[0]?.key;
  orderBy.value = options.sortBy[0]?.order;
};

// Headers
const headers = [
  {
    title: "User",
    key: "name",
  },
  {
    title: "Role",
    key: "created_at",
  },
  {
    title: "Plan",
    key: "plan",
  },
  {
    title: "Status",
    key: "status",
  },
  {
    title: "Actions",
    key: "actions",
    sortable: false,
  },
];

// const { data: usersData, execute: fetchUsers } = await useApi(
//   createUrl("/apps/users", {
//     query: {
//       q: searchQuery,
//       status: selectedStatus,
//       plan: selectedPlan,
//       role: selectedRole,
//       itemsPerPage,
//       page,
//       sortBy,
//       orderBy,
//     },
//   })
// );

const { data: usersData, execute: fetchUsers } = await useApi(
  createUrl("/account-panel/roles", {
    query: {
      q: search,
      itemsPerPage,
      page,
      sortBy,
      orderBy,
      updateSignal,
    },
  })
);

const users = computed(() => usersData.value.data);
const totalUsers = computed(() => usersData.value.totalUsers);

// 👉 search filters
const roles = [
  {
    title: "Admin",
    value: "admin",
  },
  {
    title: "Author",
    value: "author",
  },
  {
    title: "Editor",
    value: "editor",
  },
  {
    title: "Maintainer",
    value: "maintainer",
  },
  {
    title: "Subscriber",
    value: "subscriber",
  },
];

const resolveUserRoleVariant = (role) => {
  const roleLowerCase = role.toLowerCase();
  if (roleLowerCase === "subscriber")
    return {
      color: "primary",
      icon: "tabler-user",
    };
  if (roleLowerCase === "author")
    return {
      color: "warning",
      icon: "tabler-settings",
    };
  if (roleLowerCase === "maintainer")
    return {
      color: "success",
      icon: "tabler-chart-donut",
    };
  if (roleLowerCase === "editor")
    return {
      color: "info",
      icon: "tabler-pencil",
    };
  if (roleLowerCase === "admin")
    return {
      color: "error",
      icon: "tabler-device-laptop",
    };

  return {
    color: "primary",
    icon: "tabler-user",
  };
};

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

  return "primary";
};

const isAddNewUserDrawerVisible = ref(false);

const addNewUser = async (userData) => {
  await $api("/apps/users", {
    method: "POST",
    body: userData,
  });

  // refetch User
  fetchUsers();
};

const deleteUser = async (id) => {
  await $api(`/apps/users/${id}`, { method: "DELETE" });

  // refetch User
  fetchUsers();
};
</script>

<template>
  <section>
    <VCard>
      <VCardText class="d-flex flex-wrap gap-4">
        <AppSelect
          :model-value="itemsPerPage"
          :items="[
            { value: 10, title: '10' },
            { value: 25, title: '25' },
            { value: 50, title: '50' },
            { value: 100, title: '100' },
            { value: -1, title: 'All' },
          ]"
          style="inline-size: 5rem"
          @update:model-value="itemsPerPage = parseInt($event, 10)"
        />

        <VSpacer />

        <div class="d-flex align-center flex-wrap gap-4">
          <!-- 👉 Search  -->
          <AppTextField
            v-model="searchQuery"
            placeholder="Search User"
            density="compact"
            style="inline-size: 12.5rem"
          />

          <!-- 👉 Add user button -->
          <AppSelect
            v-model="selectedRole"
            placeholder="Select Role"
            :items="roles"
            density="compact"
            clearable
            clear-icon="tabler-x"
            style="inline-size: 10rem"
          />
        </div>
      </VCardText>

      <VDivider />

      <!-- SECTION datatable -->
      <VDataTableServer
        v-model:items-per-page="itemsPerPage"
        v-model:page="page"
        :items-per-page-options="[
          { value: 10, title: '10' },
          { value: 20, title: '20' },
          { value: 50, title: '50' },
          { value: -1, title: '$vuetify.dataFooter.itemsPerPageAll' },
        ]"
        :items="users"
        :items-length="totalUsers"
        :headers="headers"
        class="text-no-wrap"
        @update:options="updateOptions"
      >
        <!-- User -->
        <template #item.id="{ item }">
          <div class="d-flex align-center">
            <VAvatar
              size="38"
              :variant="!item.id ? 'tonal' : undefined"
              :color="
                !item.avatar ? resolveUserRoleVariant(item.id).color : undefined
              "
              class="me-3"
            >
              <VImg v-if="item.id" :src="item.id" />
              <span v-else>{{ avatarText(item.id) }}</span>
            </VAvatar>
            <div class="d-flex flex-column">
              <h6 class="text-body-1 font-weight-medium">
                <RouterLink
                  :to="{ name: 'apps-user-view-id', params: { id: item.id } }"
                  class="user-list-name"
                >
                  {{ item.fullName }}
                </RouterLink>
              </h6>
              <span class="text-sm text-disabled">{{ item.email }}</span>
            </div>
          </div>
        </template>

        <!-- Role -->
        <template #item.created_at="{ item }">
          <div class="d-flex align-center gap-4">
            <VAvatar
              size="30"
              variant="tonal"
              :color="resolveUserRoleVariant(item.created_at).color"
            >
              <VIcon
                size="20"
                :icon="resolveUserRoleVariant(item.created_at).icon"
              />
            </VAvatar>
            <span class="text-capitalize">{{ item.created_at }}</span>
          </div>
        </template>

        <!-- Plan -->
        <template #item.updated_at="{ item }">
          <span class="text-capitalize font-weight-medium">{{
            item.currentPlan
          }}</span>
        </template>

        <!-- Status -->
        <template #item.users_count="{ item }">
          <VChip
            label
            size="small"
            class="text-capitalize"
            :color="resolveUserStatusVariant(item.status)"
          >
            {{ item.status }}
          </VChip>
        </template>

        <template #bottom>
          <VDivider />

          <div
            class="d-flex align-center justify-sm-space-between justify-center flex-wrap gap-3 pa-5 pt-3"
          >
            <p class="text-sm text-disabled mb-0">
              {{ paginationMeta({ page, itemsPerPage }, totalUsers) }}
            </p>

            <VPagination
              v-model="page"
              :length="Math.ceil(totalUsers / itemsPerPage)"
              :total-visible="
                $vuetify.display.xs ? 1 : Math.ceil(totalUsers / itemsPerPage)
              "
            >
              <template #prev="slotProps">
                <VBtn
                  variant="tonal"
                  color="default"
                  v-bind="slotProps"
                  :icon="false"
                >
                  Previous
                </VBtn>
              </template>

              <template #next="slotProps">
                <VBtn
                  variant="tonal"
                  color="default"
                  v-bind="slotProps"
                  :icon="false"
                >
                  Next
                </VBtn>
              </template>
            </VPagination>
          </div>
        </template>

        <!-- Actions -->
        <template #item.actions="{ item }">
          <IconBtn>
            <VIcon icon="tabler-edit" />
          </IconBtn>
          <IconBtn @click="deleteUser(item.id)">
            <VIcon icon="tabler-trash" />
          </IconBtn>

          <VBtn
            icon
            color="medium-emphasis"
            density="comfortable"
            variant="text"
          >
            <VIcon size="24" icon="tabler-dots-vertical" />

            <VMenu activator="parent">
              <VList>
                <VListItem
                  :to="{ name: 'apps-user-view-id', params: { id: item.id } }"
                >
                  <VListItemTitle>View</VListItemTitle>
                </VListItem>
                <VListItem link>
                  <VListItemTitle>Suspend</VListItemTitle>
                </VListItem>
              </VList>
            </VMenu>
          </VBtn>
        </template>
      </VDataTableServer>
      <!-- SECTION -->
    </VCard>

    <!-- 👉 Add New User -->
    <AddNewUserDrawer
      v-model:isDrawerOpen="isAddNewUserDrawerVisible"
      @user-data="addNewUser"
    />
  </section>
</template>

<style lang="scss">
.text-capitalize {
  text-transform: capitalize;
}

.user-list-name:not(:hover) {
  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}
</style>
