<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';

import { useUserStore } from '@vben/stores';

import { $t } from '@/locales';
import {
  Button,
  Input,
  message,
  Modal,
  Pagination,
  Select,
  Table,
} from 'antdv-next';
import md5 from 'crypto-js/md5';

import {
  deleteUserApi,
  getDeliveryPartnersApi,
  getPartnersListApi,
  resetPasswordApi,
  type UserApi,
} from '#/api';

import DeliveryPartnersModal from './delivery-partners-modal.vue';

const modalOpen = ref(false);
const modalMode = ref<'add' | 'edit'>('add');
const currentUser = ref<any>(null);

const resetPasswordModalOpen = ref(false);
const resetPasswordUser = ref<any>(null);
const newPassword = ref('');

const userStore = useUserStore();
const isLogin = computed(() => !!userStore.userInfo);

const userList = ref<UserApi.UserModel[]>([]);
const loading = ref(false);

const searchParams = ref({
  account: '',
  chineseName: '',
  englishName: '',
  cellPhone: '',
  emailAddress: '',
  isActive: '1',
  currentPage: 1,
  pageSize: 10,
  partnerInfoId: '',
});

const totalPage = ref(0);
const totalCount = ref(0);

const partners = ref<Array<{ label: string; value: string }>>([]);

function handleSearch() {
  searchParams.value.currentPage = 1;
  fetchUserList();
}

function handleAddNew() {
  modalMode.value = 'add';
  currentUser.value = null;
  modalOpen.value = true;
}

function handleEdit(item: any) {
  modalMode.value = 'edit';
  currentUser.value = item;
  modalOpen.value = true;
}

function handleResetPassword(item: any) {
  resetPasswordUser.value = item;
  newPassword.value = '';
  resetPasswordModalOpen.value = true;
}

function handleModalSave() {
  modalOpen.value = false;
  fetchUserList();
}

function handleBack() {
  window.history.back();
}

function handleClear() {
  searchParams.value.account = '';
  searchParams.value.chineseName = '';
  searchParams.value.englishName = '';
  searchParams.value.cellPhone = '';
  searchParams.value.emailAddress = '';
  searchParams.value.isActive = '1';
  searchParams.value.partnerInfoId = '';
  handleSearch();
}

function handlePageChange(page: number) {
  searchParams.value.currentPage = page;
  fetchUserList();
}

async function fetchUserList() {
  if (!isLogin.value) {
    return;
  }

  try {
    loading.value = true;
    const result = await getDeliveryPartnersApi({
      currentPage: searchParams.value.currentPage,
      pageSize: searchParams.value.pageSize,
      orderByProperty: 'Id',
      Ascending: false,
      totalPage: 1,
      totalCount: 7,
      filters: [
        { name: 'account', value: searchParams.value.account },
        { name: 'chineseName', value: searchParams.value.chineseName },
        { name: 'englishName', value: searchParams.value.englishName },
        { name: 'cellPhone', value: searchParams.value.cellPhone },
        { name: 'emailAddress', value: searchParams.value.emailAddress },
        { name: 'isActive', value: searchParams.value.isActive },
        { name: 'partnerInfoId', value: searchParams.value.partnerInfoId },
      ],
    });
    if (result?.result?.model) {
      userList.value = result.result.model;
      totalPage.value = result.result.totalPages;
      totalCount.value = result.result.totalCount;
    } else {
      userList.value = [];
      totalPage.value = 0;
      totalCount.value = 0;
    }
  } catch {
    userList.value = [];
  } finally {
    loading.value = false;
  }
}

async function deleteUser(item: any) {
  if (!isLogin.value) {
    return;
  }

  try {
    loading.value = true;
    const result = await deleteUserApi(item);
    if (result?.result) {
      fetchUserList();
      message.success($t('deliveryPartners.deleteSuccess'));
    }
  } catch {}
}

function handleDelete(item: any) {
  Modal.confirm({
    title: $t('btn.delete'),
    content: $t('deliveryPartners.deleteConfirm'),
    okText: $t('btn.yes'),
    okType: 'danger',
    cancelText: $t('btn.no'),
    onOk() {
      deleteUser(item);
    },
    onCancel() {},
  });
}

async function handleResetPasswordConfirm() {
  if (!newPassword.value) {
    message.error($t('deliveryPartners.enterPassword'));
    return;
  }

  try {
    loading.value = true;
    const encryptedPassword = md5(newPassword.value).toString();
    const result = await resetPasswordApi({
      userId: resetPasswordUser.value.id,
      newPassword: encryptedPassword,
    });
    if (result?.result) {
      message.success($t('deliveryPartners.resetPasswordSuccess'));
      resetPasswordModalOpen.value = false;
      loading.value = false;
    }
  } catch {
    loading.value = false;
  }
}

async function fetchPartnersList() {
  if (!isLogin.value) {
    return;
  }

  try {
    const result = await getPartnersListApi({
      currentPage: 1,
      pageSize: 10,
    });
    if (result?.result?.model) {
      partners.value = result.result.model.map(
        (item: { id: string; name: string }) => ({
          value: item.id,
          label: item.name,
        }),
      );
    }
  } catch {}
}

watch(
  () => isLogin.value,
  (newValue) => {
    if (newValue) {
      fetchUserList();
    }
  },
  { immediate: true },
);

onMounted(() => {
  fetchPartnersList();
});
</script>

<template>
  <div class="p-5">
    <div class="mb-4 flex items-center justify-between">
      <div class="text-sm text-[#462424] text-gray-500">
        {{ $t('deliveryPartners.breadcrumb') }}
      </div>
      <div
        class="flex cursor-pointer items-center gap-[9px] text-[16px] font-bold text-[#462424]"
        @click="handleBack"
      >
        <div
          class="global-color flex h-[22px] w-[22px] items-center justify-center rounded-full"
        >
          <img
            alt=""
            class="h-[11px] w-[10px]"
            src="@/assets/image/the-left.png"
          />
        </div>
        {{ $t('btn.back') }}
      </div>
    </div>

    <div class="mb-[21px] mt-[30px] text-[26px] font-bold text-[#462424]">
      {{ $t('homeModule.deliveryPartners') }}
    </div>

    <div class="mb-4 space-y-4">
      <div class="flex items-center gap-4">
        <div class="flex flex-col gap-1">
          <label class="text-[11px] text-[#000]">{{
            $t('deliveryPartners.modal.account')
          }}</label>
          <Input
            v-model:value="searchParams.account"
            class="h-[42px] w-[138px] rounded-[11px] border-[#707070]"
            placeholder=""
          />
        </div>
        <div class="flex flex-col gap-1">
          <label class="text-[11px] text-[#000]">{{
            $t('deliveryPartners.modal.chineseName')
          }}</label>
          <Input
            v-model:value="searchParams.chineseName"
            class="h-[42px] w-[97.81px] rounded-[11px] border-[#707070]"
            placeholder=""
          />
        </div>
        <div class="flex flex-col gap-1">
          <label class="text-[11px] text-[#000]">{{
            $t('deliveryPartners.modal.englishName')
          }}</label>
          <Input
            v-model:value="searchParams.englishName"
            class="h-[42px] w-[138px] rounded-[11px] border-[#707070]"
            placeholder=""
          />
        </div>
      </div>
      <div class="flex items-center gap-4">
        <div class="flex flex-col gap-1">
          <label class="text-[11px] text-[#000]">{{
            $t('deliveryPartners.modal.cellPhone')
          }}</label>
          <Input
            v-model:value="searchParams.cellPhone"
            class="h-[42px] w-[138px] rounded-[11px] border-[#707070]"
            placeholder=""
          />
        </div>
        <div class="flex flex-col gap-1">
          <label class="text-[11px] text-[#000]">{{
            $t('deliveryPartners.modal.emailAddress')
          }}</label>
          <Input
            v-model:value="searchParams.emailAddress"
            class="h-[42px] w-[168px] rounded-[11px] border-[#707070]"
            placeholder=""
          />
        </div>
        <div class="flex flex-col gap-1">
          <label class="text-[11px] text-[#000]">Cooperate Partner</label>
          <Select
            v-model:value="searchParams.partnerInfoId"
            :options="partners"
            class="h-[42px] w-[168px] rounded-[11px] border-[#707070]"
            placeholder=""
          />
        </div>
        <div class="ml-[58px] flex flex-col gap-1">
          <label class="text-[11px] text-[#000]">{{
            $t('deliveryPartners.modal.isActive')
          }}</label>
          <div class="flex h-[42px] items-center gap-2">
            <label
              class="flex cursor-pointer items-center gap-2 text-sm"
              @click="searchParams.isActive = '1'"
            >
              <div
                class="flex h-[20px] w-[20px] items-center justify-center rounded-[5px] border-[1px] border-[#707070]"
              >
                <div
                  v-if="searchParams.isActive === '1'"
                  class="h-[14px] w-[14px] flex-shrink-0 rounded-[3px] bg-[#462424]"
                ></div>
              </div>
              {{ $t('btn.yes') }}
            </label>
            <label
              class="flex cursor-pointer items-center gap-2 text-sm"
              @click="searchParams.isActive = '0'"
            >
              <div
                class="flex h-[20px] w-[20px] items-center justify-center rounded-[5px] border-[1px] border-[#707070]"
              >
                <div
                  v-if="searchParams.isActive === '0'"
                  class="h-[14px] w-[14px] flex-shrink-0 rounded-[3px] bg-[#462424]"
                ></div>
              </div>
              {{ $t('btn.no') }}
            </label>
          </div>
        </div>
        <div class="ml-auto flex items-center gap-2">
          <Button class="h-[42px]" @click="handleSearch">
            <svg
              class="h-[21.5px] w-[21.5px] cursor-pointer"
              fill="none"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="11"
                cy="11"
                r="8"
                stroke="currentColor"
                stroke-width="2"
              />
              <path
                d="M21 21L16.65 16.65"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
              />
            </svg>
            {{ $t('btn.search') }}
          </Button>
          <Button class="h-[42px]" @click="handleClear">
            <svg
              class="h-[21.5px] w-[21.5px] cursor-pointer"
              fill="none"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M3 6H5"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
              />
              <path
                d="M19 6V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V6M8 6V4C8 3.79086 8.79086 3 10 3H14C15.2091 3 16 3.79086 16 6V8M10 11V17M14 11V17"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
              />
            </svg>
            {{ $t('btn.reset') }}
          </Button>
          <Button class="h-[42px]" type="primary" @click="handleAddNew">
            <img
              alt=""
              class="h-[21.5px] w-[21.5px] cursor-pointer"
              src="@/assets/image/new.png"
            />
            {{ $t('btn.addNew') }}
          </Button>
        </div>
      </div>
    </div>

    <div v-if="loading" class="py-8 text-center">
      {{ $t('deliveryPartners.loading') }}
    </div>
    <div v-else>
      <Table
        :columns="[
          {
            title: $t('deliveryPartners.modal.account'),
            dataIndex: 'account',
            key: 'account',
          },
          {
            title: $t('deliveryPartners.modal.name'),
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: $t('deliveryPartners.modal.expiredTime'),
            dataIndex: 'expiredTime',
            key: 'expiredTime',
          },
          {
            title: $t('deliveryPartners.modal.cellPhone'),
            dataIndex: 'cellPhone',
            key: 'cellPhone',
          },
          {
            title: $t('deliveryPartners.modal.emailAddress'),
            dataIndex: 'emailAddress',
            key: 'emailAddress',
          },
          // {
          //   title: $t('deliveryPartners.accessId'),
          //   dataIndex: 'accessId',
          //   key: 'accessId',
          // },
          {
            title: $t('deliveryPartners.status'),
            key: 'status',
          },
          {
            title: $t('deliveryPartners.action'),
            key: 'action',
          },
        ]"
        :data-source="userList"
        :loading="loading"
        :pagination="false"
        class="mt-[38px]"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <span v-if="record.isActive" class="text-green-600">{{
              $t('btn.yes')
            }}</span>
            <span v-else class="text-red-600">{{ $t('btn.no') }}</span>
          </template>
          <template v-if="column.key === 'action'">
            <div class="flex gap-2">
              <div class="cursor-pointer" @click="handleEdit(record)">
                <svg
                  class="mr-1 h-[16px] w-[16px]"
                  fill="none"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V19C2 19.5304 2.21071 20.0391 2.58579 20.4142C2.96086 20.7893 3.46957 21 4 21H17C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19 19.5304 19 19V12"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                  <path
                    d="M18.5 2.5C18.8978 2.10218 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10218 21.5 2.5C21.8978 2.89782 22.1213 3.43743 22.1213 4C22.1213 4.56257 21.8978 5.10218 21.5 5.5L12 15L9 12L18.5 2.5Z"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </svg>
              </div>
              <div class="cursor-pointer" @click="handleResetPassword(record)">
                <svg
                  class="mr-1 h-[16px] w-[16px]"
                  fill="none"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                  <line
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    x1="12"
                    x2="12"
                    y1="6"
                    y2="18"
                  />
                </svg>
              </div>
              <div class="cursor-pointer" @click="handleDelete(record)">
                <svg
                  class="mr-1 h-[16px] w-[16px]"
                  fill="none"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M3 6H5H21"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                  <path
                    d="M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6M8 6V4C8 3.46957 8.46957 3 9 3H15C15.5304 3 16 3.46957 16 4V6"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </svg>
              </div>
            </div>
          </template>
        </template>
      </Table>

      <div class="list-pagination mt-4">
        <Pagination
          v-model:current="searchParams.currentPage"
          :hide-on-single-page="true"
          :page-size="searchParams.pageSize"
          :show-size-changer="false"
          :total="totalCount"
          position="bottomLeft"
          @change="handlePageChange"
        />
      </div>
    </div>

    <DeliveryPartnersModal
      v-model:open="modalOpen"
      :mode="modalMode"
      :user-data="currentUser"
      @save="handleModalSave"
    />

    <Modal
      v-model:open="resetPasswordModalOpen"
      :title="$t('deliveryPartners.resetPassword')"
      width="500"
      @ok="handleResetPasswordConfirm"
    >
      <div class="space-y-4">
        <div class="flex flex-col gap-2">
          <label class="text-sm font-medium">{{
            $t('deliveryPartners.modal.password')
          }}</label>
          <Input
            v-model:value="newPassword"
            :placeholder="$t('deliveryPartners.modal.enterPassword')"
            type="password"
          />
        </div>
      </div>
    </Modal>
  </div>
</template>

<style scoped>
:deep(.ant-table) {
  background: transparent !important;
}

:deep(.ant-table-thead > tr > th) {
  font-size: 11px !important;
  background: transparent !important;
}

:deep(.ant-table-tbody > tr:nth-child(odd) > td) {
  font-size: 11px !important;
  background: transparent !important;
}

:deep(.ant-table-tbody > tr:nth-child(even) > td) {
  font-size: 11px !important;
  background: #f5f3f3 !important;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: transparent !important;
}

:deep(.ant-table-container) {
  background: transparent !important;
}

:deep(.ant-table-wrapper) {
  background: transparent !important;
}

:deep(
  .ant-table-wrapper
    .ant-table-thead
    > tr
    > th:not(:last-child):not(.ant-table-selection-column):not(
      .ant-table-row-expand-icon-cell
    ):not([colspan])::before,
  .ant-table-wrapper
    .ant-table-thead
    > tr
    > td:not(:last-child):not(.ant-table-selection-column):not(
      .ant-table-row-expand-icon-cell
    ):not([colspan])::before
) {
  display: none !important;
}
</style>

<style lang="scss">
.ant-pagination-item-active {
  color: #7a003d !important;
  background-color: #f8f2f5 !important;
  border-color: transparent !important;

  a {
    color: #c48da8 !important;
  }
}
</style>
