<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { CircleAlert, CircleCheck, Search, Eye, Pencil } from '@lucide/vue'
import dayjs from 'dayjs'
import * as select from '@zag-js/select'
import {
  AlertRoot,
  AlertTitle,
  AlertDescription,
  AlertCloseTrigger,
} from '@/components/ui/alert'
import { Badge } from '@/components/ui/badge'
import { CheckboxRoot, CheckboxControl } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import {
  SelectRoot,
  SelectControl,
  SelectTrigger,
  SelectValueText,
  SelectContent,
  SelectItemGroup,
  SelectItemGroupLabel,
  SelectItem,
  SelectItemText,
} from '@/components/ui/select'
import { Button } from '@/components/ui/button'
import { DialogRoot, DialogContent, DialogCloseTrigger } from '@/components/ui/dialog'
import DataTable from '@/components/ui/usage/DataTable.vue'
import type { TableHeader } from '@/components/ui/usage/DataTable.vue'
import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
import axios from 'axios'
import { useMembershipApplicationList } from '../composables/useMembershipApplicationList'
import { usePermissions } from '@/composables/usePermissions'
import { batchCompleteMembershipApplications } from '../services/membership-application.service'
import type {
  BatchCompleteFailedItem,
  BatchCompleteResponse,
  MembershipApplicationBoardResult,
  MembershipApplicationListItem,
  MembershipApplicationStatus,
} from '../types/membership-application.types'

type SelectOption = { label: string; value: string }

const STATUS_FILTER_OPTIONS: SelectOption[] = [
  { label: 'Semua Status', value: '' },
  { label: 'Dihantar', value: 'SUBMITTED' },
  { label: 'Menunggu Lembaga', value: 'PENDING_BOARD' },
  { label: 'Ditolak Pentadbiran', value: 'MANAGEMENT_REJECTED' },
  { label: 'Menunggu Makluman', value: 'PENDING_NOTIFICATION' },
  { label: 'Selesai', value: 'COMPLETED' },
]

function createSelectCollection(options: SelectOption[]) {
  return select.collection({
    items: options,
    itemToValue: (item) => item.label,
  })
}

function labelToApiValue(options: SelectOption[], label: string | undefined): string {
  if (!label) return ''
  return options.find((option) => option.label === label)?.value ?? ''
}

function apiValueToLabel(options: SelectOption[], value: string | null | undefined): string[] {
  if (value === '' || value === null || value === undefined) {
    const allOption = options.find((item) => item.value === '')
    return allOption ? [allOption.label] : []
  }

  const option = options.find((item) => item.value === value)
  return option ? [option.label] : []
}

const statusFilterCollection = createSelectCollection(STATUS_FILTER_OPTIONS)

const router = useRouter()
const { hasPermission } = usePermissions()

const {
  applications,
  loading,
  error,
  search,
  statusFilter,
  sortBy,
  page,
  itemsPerPage,
  pagination,
  handleSortUpdate,
  fetchApplications,
} = useMembershipApplicationList()

const canBatchComplete = computed(() => hasPermission('selesaikan permohonan keahlian'))
const selectedIds = ref<string[]>([])
const batchSubmitting = ref(false)
const batchConfirmOpen = ref(false)
const batchSuccessMessage = ref<string | null>(null)
const batchFailedItems = ref<BatchCompleteFailedItem[]>([])

const selectableApplications = computed(() =>
  applications.value.filter((item) => item.status === 'PENDING_NOTIFICATION'),
)

const allSelectableSelected = computed(() => {
  const eligible = selectableApplications.value
  return eligible.length > 0 && eligible.every((item) => selectedIds.value.includes(item.id))
})

watch(applications, () => {
  selectedIds.value = selectedIds.value.filter((id) =>
    applications.value.some((item) => item.id === id && item.status === 'PENDING_NOTIFICATION'),
  )
})

function isSelectable(item: MembershipApplicationListItem): boolean {
  return item.status === 'PENDING_NOTIFICATION'
}

function isSelected(id: string): boolean {
  return selectedIds.value.includes(id)
}

function toggleSelection(id: string) {
  if (selectedIds.value.includes(id)) {
    selectedIds.value = selectedIds.value.filter((selectedId) => selectedId !== id)
    return
  }

  selectedIds.value = [...selectedIds.value, id]
}

function toggleSelectAllOnPage(checked: boolean) {
  if (!checked) {
    const pageIds = new Set(selectableApplications.value.map((item) => item.id))
    selectedIds.value = selectedIds.value.filter((id) => !pageIds.has(id))
    return
  }

  const merged = new Set([
    ...selectedIds.value,
    ...selectableApplications.value.map((item) => item.id),
  ])
  selectedIds.value = [...merged]
}

function openBatchConfirm() {
  if (!selectedIds.value.length) return
  batchConfirmOpen.value = true
}

async function confirmBatchComplete() {
  if (!selectedIds.value.length || batchSubmitting.value) return

  batchSubmitting.value = true
  batchSuccessMessage.value = null
  batchFailedItems.value = []
  error.value = null

  try {
    const response = await batchCompleteMembershipApplications(selectedIds.value)

    if (response.success) {
      batchSuccessMessage.value = response.message
      batchFailedItems.value = response.data.failed
      selectedIds.value = []
      batchConfirmOpen.value = false
      await fetchApplications(page.value)
    } else {
      error.value = response.message
      batchFailedItems.value = response.data.failed
    }
  } catch (err) {
    if (axios.isAxiosError(err) && err.response?.data) {
      const responseData = err.response.data as BatchCompleteResponse
      batchFailedItems.value = responseData.data?.failed ?? []
      error.value = responseData.message ?? getApiErrorMessage(err, 'Gagal menyelesaikan permohonan.')
    } else {
      error.value = getApiErrorMessage(err, 'Gagal menyelesaikan permohonan.')
    }
  } finally {
    batchSubmitting.value = false
  }
}

function setStatusFilterValue(details: { value: string[] }) {
  statusFilter.value = labelToApiValue(STATUS_FILTER_OPTIONS, details.value[0])
}

const statusFilterInitial = computed(() => apiValueToLabel(STATUS_FILTER_OPTIONS, statusFilter.value))

function statusLabel(status: MembershipApplicationStatus): string {
  const labels: Record<MembershipApplicationStatus, string> = {
    SUBMITTED: 'Dihantar',
    PENDING_BOARD: 'Menunggu Lembaga',
    MANAGEMENT_REJECTED: 'Ditolak Pentadbiran',
    PENDING_NOTIFICATION: 'Menunggu Makluman',
    COMPLETED: 'Selesai',
  }

  return labels[status] ?? status
}

function statusBadgeVariant(status: MembershipApplicationStatus) {
  if (status === 'COMPLETED') return 'success'
  if (status === 'MANAGEMENT_REJECTED') return 'danger'
  if (status === 'PENDING_BOARD' || status === 'PENDING_NOTIFICATION') return 'pending'
  return 'outline'
}

function boardResultLabel(result: MembershipApplicationBoardResult | null): string {
  if (result === 'PASS') return 'Lulus'
  if (result === 'FAIL') return 'Gagal'
  return '-'
}

function boardResultBadgeVariant(result: MembershipApplicationBoardResult | null) {
  if (result === 'PASS') return 'success'
  if (result === 'FAIL') return 'danger'
  return 'outline'
}

function formatSubmittedAt(value: string | null): string {
  if (!value) return '-'
  return dayjs(value).format('DD/MM/YYYY HH:mm')
}

function goToApplicationDetail(id: string) {
  router.push({ name: 'view-membership-application', params: { id } })
}

function goToApplicationEdit(id: string) {
  router.push({ name: 'edit-membership-application', params: { id } })
}

const headers = computed<TableHeader[]>(() => {
  const base: TableHeader[] = [
    { title: 'Bil.', key: '#', sortable: false },
  { title: 'No. Permohonan', key: 'application_number', sortable: true },
  {
    title: 'Nama Pemohon',
    key: 'applicant_name',
    sortable: false,
    exportValue: (item) => item.applicant?.name ?? '',
  },
  {
    title: 'Emel',
    key: 'applicant_email',
    sortable: false,
    exportValue: (item) => item.applicant?.email ?? '',
  },
  {
    title: 'No. IC',
    key: 'applicant_ic_number',
    sortable: false,
    exportValue: (item) => item.applicant?.ic_number ?? '',
  },
  {
    title: 'Status',
    key: 'status',
    sortable: true,
    exportValue: (item) => statusLabel(item.status),
  },
  {
    title: 'Keputusan Lembaga',
    key: 'board_result',
    sortable: false,
    exportValue: (item) => boardResultLabel(item.board_result),
  },
  {
    title: 'Tarikh Hantar',
    key: 'submitted_at',
    sortable: true,
    exportValue: (item) => formatSubmittedAt(item.submitted_at),
  },
  { title: 'Tindakan', key: 'actions', sortable: false },
  ]

  if (canBatchComplete.value) {
    return [{ title: '', key: 'select', sortable: false, width: 48 }, ...base]
  }

  return base
})

</script>

<template>
  <div class="w-full space-y-6">
    <div>
      <h2 class="text-lg font-medium">Senarai Permohonan Keahlian</h2>
      <p class="mt-1 text-sm opacity-70">Urus dan semak permohonan keahlian koperasi.</p>
    </div>

    <AlertRoot v-if="batchSuccessMessage" variant="success">
      <CircleCheck />
      <AlertTitle>Berjaya</AlertTitle>
      <AlertDescription>{{ batchSuccessMessage }}</AlertDescription>
      <AlertCloseTrigger @click="batchSuccessMessage = null" />
    </AlertRoot>

    <AlertRoot v-if="batchFailedItems.length" variant="warning">
      <CircleAlert />
      <AlertTitle>Sebahagian Permohonan Gagal</AlertTitle>
      <AlertDescription>
        <ul class="mt-2 list-disc space-y-1 ps-4 text-left">
          <li v-for="item in batchFailedItems" :key="item.id">
            {{ item.application_number ?? item.id }}: {{ item.message }}
          </li>
        </ul>
      </AlertDescription>
      <AlertCloseTrigger @click="batchFailedItems = []" />
    </AlertRoot>

    <AlertRoot v-if="error" variant="danger">
      <CircleAlert />
      <AlertTitle>Ralat</AlertTitle>
      <AlertDescription>{{ error }}</AlertDescription>
      <AlertCloseTrigger @click="error = null" />
    </AlertRoot>

    <DataTable
      :headers="headers"
      :items="applications"
      :loading="loading"
      :pagination="pagination"
      :current-sort="sortBy"
      show-pagination
      exportable
      export-file-name="permohonan-keahlian"
      v-model:page="page"
      v-model:items-per-page="itemsPerPage"
      @update:sort-by="handleSortUpdate"
    >
      <template #toolbar>
        <div class="flex w-full flex-wrap items-center gap-3">
          <div class="relative w-full max-w-md flex-1">
            <Search
              class="pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2 text-foreground/50"
              aria-hidden="true"
            />
            <Input
              v-model="search"
              type="search"
              placeholder="Cari no. permohonan, nama, emel, IC..."
              class="w-full pl-9"
              aria-label="Cari permohonan keahlian"
            />
          </div>

          <SelectRoot
            class="w-full sm:w-56"
            :collection="statusFilterCollection"
            :default-value="statusFilterInitial"
            @value-change="setStatusFilterValue"
          >
            <SelectControl>
              <SelectTrigger aria-label="Tapis status">
                <SelectValueText placeholder="Semua Status" />
              </SelectTrigger>
            </SelectControl>
            <SelectContent>
              <SelectItemGroup>
                <SelectItemGroupLabel>Status</SelectItemGroupLabel>
                <SelectItem
                  v-for="item in statusFilterCollection.items"
                  :key="item.label"
                  :item="item"
                >
                  <SelectItemText>{{ item.label }}</SelectItemText>
                </SelectItem>
              </SelectItemGroup>
            </SelectContent>
          </SelectRoot>

          <template v-if="canBatchComplete">
            <Button
              type="button"
              look="outline"
              variant="secondary"
              :disabled="!selectableApplications.length || loading"
              @click="toggleSelectAllOnPage(!allSelectableSelected)"
            >
              {{ allSelectableSelected ? 'Nyahpilih Halaman' : 'Pilih Halaman' }}
            </Button>
            <Button
              type="button"
              variant="primary"
              :disabled="!selectedIds.length || loading || batchSubmitting"
              @click="openBatchConfirm"
            >
              Selesaikan Terpilih ({{ selectedIds.length }})
            </Button>
          </template>
        </div>
      </template>

      <template v-if="canBatchComplete" #item.select="{ item }">
        <CheckboxRoot
          v-if="isSelectable(item as MembershipApplicationListItem)"
          :checked="isSelected((item as MembershipApplicationListItem).id)"
          @checked-change="({ checked }) => toggleSelection((item as MembershipApplicationListItem).id)"
        >
          <CheckboxControl />
        </CheckboxRoot>
      </template>

      <template #item.applicant_name="{ item }">
        <span class="font-medium">{{ (item as MembershipApplicationListItem).applicant?.name ?? '-' }}</span>
      </template>

      <template #item.applicant_email="{ item }">
        <span class="lowercase">{{ (item as MembershipApplicationListItem).applicant?.email ?? '-' }}</span>
      </template>

      <template #item.applicant_ic_number="{ item }">
        {{ (item as MembershipApplicationListItem).applicant?.ic_number ?? '-' }}
      </template>

      <template #item.status="{ item }">
        <Badge
          :variant="statusBadgeVariant((item as MembershipApplicationListItem).status)"
          class="whitespace-nowrap"
        >
          {{ statusLabel((item as MembershipApplicationListItem).status) }}
        </Badge>
      </template>

      <template #item.board_result="{ item }">
        <Badge
          v-if="(item as MembershipApplicationListItem).board_result"
          :variant="boardResultBadgeVariant((item as MembershipApplicationListItem).board_result)"
          class="whitespace-nowrap"
        >
          {{ boardResultLabel((item as MembershipApplicationListItem).board_result) }}
        </Badge>
        <span v-else class="opacity-50">-</span>
      </template>

      <template #item.submitted_at="{ item }">
        {{ formatSubmittedAt((item as MembershipApplicationListItem).submitted_at) }}
      </template>

      <template #item.actions="{ item }">
        <div class="flex items-center gap-2">
          <Button
            v-if="hasPermission('lihat permohonan keahlian')"
            type="button"
            variant="outline"
            size="sm"
            class="bg-green-600 text-white"
            title="Lihat butiran permohonan"
            @click="goToApplicationDetail((item as MembershipApplicationListItem).id)"
          >
            <Eye class="size-4" aria-hidden="true" />
          </Button>
          <Button
            v-if="hasPermission('kemaskini permohonan keahlian')"
            type="button"
            variant="outline"
            size="sm"
            class="bg-blue-600 text-white"
            title="Kemaskini permohonan"
            @click="goToApplicationEdit((item as MembershipApplicationListItem).id)"
          >
            <Pencil class="size-4" aria-hidden="true" />
          </Button>
        </div>
      </template>
    </DataTable>

    <DialogRoot
      :open="batchConfirmOpen"
      @openChange="(details) => { batchConfirmOpen = details.open }"
    >
      <DialogContent>
        <div class="p-5 text-center">
          <div class="mt-2 text-2xl font-medium">Selesaikan Permohonan Terpilih?</div>
          <div class="mt-2 opacity-70">
            {{ selectedIds.length }} permohonan akan diselesaikan dan e-mel keputusan dihantar.
          </div>
        </div>
        <div class="px-5 pb-8 text-center">
          <DialogCloseTrigger class="mr-2 w-32" :disabled="batchSubmitting">
            Batal
          </DialogCloseTrigger>
          <Button
            class="w-32"
            type="button"
            variant="primary"
            :disabled="batchSubmitting"
            @click="confirmBatchComplete"
          >
            {{ batchSubmitting ? 'Memproses...' : 'Sahkan' }}
          </Button>
        </div>
      </DialogContent>
    </DialogRoot>
  </div>
</template>
