<script setup>
import { paginationMeta } from "@api-utils/paginationMeta";
import { VDataTableServer } from "vuetify/lib/labs/VDataTable";

const searchQuery = ref("");
const selectedStatus = ref();
const selectedRows = ref([]);

// Data table options
const itemsPerPage = ref(10);
const page = ref(1);
const sortBy = ref();
const orderBy = ref();

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

// 👉 headers
const headers = [
  {
    title: "#ID",
    key: "id",
  },
  {
    title: "Trending",
    key: "trending",
    sortable: false,
  },
  {
    title: "Client",
    key: "client",
  },
  {
    title: "Total",
    key: "total",
  },
  {
    title: "Date",
    key: "date",
  },
  {
    title: "Balance",
    key: "balance",
  },
  {
    title: "Actions",
    key: "actions",
    sortable: false,
  },
];

const { data: invoiceData, execute: fetchInvoices } = await useApi(
  createUrl("/apps/invoice", {
    query: {
      q: searchQuery,
      status: selectedStatus,
      itemsPerPage,
      page,
      sortBy,
      orderBy,
    },
  })
);

const invoices = computed(() => invoiceData.value?.invoices);
const totalInvoices = computed(() => invoiceData.value?.totalInvoices);

// 👉 Invoice balance variant resolver
const resolveInvoiceBalanceVariant = (balance, total) => {
  if (balance === total)
    return {
      status: "Unpaid",
      chip: { color: "error" },
    };
  if (balance === 0)
    return {
      status: "Paid",
      chip: { color: "success" },
    };

  return {
    status: balance,
    chip: { variant: "text" },
  };
};

const resolveInvoiceStatusVariantAndIcon = (status) => {
  if (status === "Partial Payment")
    return {
      variant: "warning",
      icon: "tabler-circle-half-2",
    };
  if (status === "Paid")
    return {
      variant: "success",
      icon: "tabler-circle-check",
    };
  if (status === "Downloaded")
    return {
      variant: "info",
      icon: "tabler-download",
    };
  if (status === "Draft")
    return {
      variant: "secondary",
      icon: "tabler-device-floppy",
    };
  if (status === "Sent")
    return {
      variant: "primary",
      icon: "tabler-mail",
    };
  if (status === "Past Due")
    return {
      variant: "error",
      icon: "tabler-alert-circle",
    };

  return {
    variant: "secondary",
    icon: "tabler-x",
  };
};

const computedMoreList = computed(() => {
  return (paramId) => [
    {
      title: "Download",
      value: "download",
      prependIcon: "tabler-download",
    },
    {
      title: "Edit",
      value: "edit",
      prependIcon: "tabler-pencil",
      to: {
        name: "apps-invoice-edit-id",
        params: { id: paramId },
      },
    },
    {
      title: "Duplicate",
      value: "duplicate",
      prependIcon: "tabler-layers-intersect",
    },
  ];
});

const deleteInvoice = async (id) => {
  await $api(`/apps/invoice/${id}`, { method: "DELETE" });
  fetchInvoices();
};
</script>

<template>
  <VCard v-if="invoices" id="invoice-list">
    <VCardText class="d-flex align-center flex-wrap gap-3">
      <!-- 👉 Create invoice -->
      <VBtn
        prepend-icon="tabler-plus"
        :to="{ name: 'apps-invoice-add' }"
        class="me-3"
      >
        Create invoice
      </VBtn>

      <AppSelect
        v-model="itemsPerPage"
        :items="[5, 10, 20, 25, 50]"
        style="max-inline-size: 6.25rem"
      />

      <VSpacer />

      <div class="d-flex align-end flex-wrap gap-3">
        <!-- 👉 Search  -->
        <div class="invoice-list-search">
          <AppTextField
            v-model="searchQuery"
            placeholder="Search Invoice"
            density="compact"
            class="me-3"
          />
        </div>
        <div class="invoice-list-status">
          <AppSelect
            v-model="selectedStatus"
            density="compact"
            placeholder="Select Status"
            clearable
            clear-icon="tabler-x"
            :items="[
              'Downloaded',
              'Draft',
              'Sent',
              'Paid',
              'Partial Payment',
              'Past Due',
            ]"
            style="inline-size: 12rem"
          />
        </div>
      </div>
    </VCardText>

    <VDivider />

    <!-- SECTION Datatable -->
    <VDataTableServer
      v-model="selectedRows"
      v-model:items-per-page="itemsPerPage"
      v-model:page="page"
      show-select
      :items-length="totalInvoices"
      :headers="headers"
      :items="invoices"
      class="text-no-wrap"
      @update:options="updateOptions"
    >
      <!-- Trending Header -->
      <template #column.trending>
        <VIcon size="22" icon="tabler-trending-up" />
      </template>

      <!-- id -->
      <template #item.id="{ item }">
        <RouterLink
          :to="{ name: 'apps-invoice-preview-id', params: { id: item.id } }"
        >
          #{{ item.id }}
        </RouterLink>
      </template>

      <!-- trending -->
      <template #item.trending="{ item }">
        <VTooltip>
          <template #activator="{ props }">
            <VAvatar
              :size="30"
              v-bind="props"
              :color="
                resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).variant
              "
              variant="tonal"
            >
              <VIcon
                :size="20"
                :icon="
                  resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).icon
                "
              />
            </VAvatar>
          </template>
          <p class="mb-0">
            {{ item.invoiceStatus }}
          </p>
          <p class="mb-0">Balance: {{ item.balance }}</p>
          <p class="mb-0">Due date: {{ item.dueDate }}</p>
        </VTooltip>
      </template>

      <!-- client -->
      <template #item.client="{ item }">
        <div class="d-flex align-center">
          <VAvatar
            size="38"
            :color="
              !item.avatar.length
                ? resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).variant
                : undefined
            "
            :variant="!item.avatar.length ? 'tonal' : undefined"
            class="me-3"
          >
            <VImg v-if="item.avatar.length" :src="item.avatar" />
            <span v-else>{{ avatarText(item.client.name) }}</span>
          </VAvatar>
          <div class="d-flex flex-column">
            <RouterLink
              class="font-weight-medium mb-0 text-link"
              :to="{
                name: 'pages-user-profile-tab',
                params: { tab: 'profile' },
              }"
            >
              {{ item.client.name }}
            </RouterLink>
            <span class="text-sm text-disabled">{{
              item.client.companyEmail
            }}</span>
          </div>
        </div>
      </template>

      <!-- Total -->
      <template #item.total="{ item }"> ${{ item.total }} </template>

      <!-- Issued Date -->
      <template #item.date="{ item }">
        {{ item.issuedDate }}
      </template>

      <!-- Balance -->
      <template #item.balance="{ item }">
        <VChip
          v-if="
            typeof resolveInvoiceBalanceVariant(item.balance, item.total)
              .status === 'string'
          "
          :color="
            resolveInvoiceBalanceVariant(item.balance, item.total).chip.color
          "
          size="small"
          label
        >
          {{ resolveInvoiceBalanceVariant(item.balance, item.total).status }}
        </VChip>
        <span v-else>
          {{
            Number(
              resolveInvoiceBalanceVariant(item.balance, item.total).status
            ) > 0
              ? `$${
                  resolveInvoiceBalanceVariant(item.balance, item.total).status
                }`
              : `-$${Math.abs(
                  Number(
                    resolveInvoiceBalanceVariant(item.balance, item.total)
                      .status
                  )
                )}`
          }}
        </span>
      </template>

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

        <IconBtn
          :to="{ name: 'apps-invoice-preview-id', params: { id: item.id } }"
        >
          <VIcon icon="tabler-eye" />
        </IconBtn>

        <MoreBtn
          :menu-list="computedMoreList(item.id)"
          item-props
          color="undefined"
        />
      </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 }, totalInvoices) }}
          </p>

          <VPagination
            v-model="page"
            :length="Math.ceil(totalInvoices / itemsPerPage)"
            :total-visible="
              $vuetify.display.xs ? 1 : Math.ceil(totalInvoices / 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>
    </VDataTableServer>
    <!-- !SECTION -->
    <VDivider />
  </VCard>
</template>

<style lang="scss">
#invoice-list {
  .invoice-list-actions {
    inline-size: 8rem;
  }

  .invoice-list-search {
    inline-size: 12rem;
  }
}
</style>
