<template>
  <div class="tickets-page">
    <BoxedIconTitleBlock
      class="tickets-page__heading"
      title="تیکت‌های من"
      desc="در این قسمت می‌توانید تیکت‌های خود را مدیریت کنید"
    >
      <template #icon>
        <SvgIcon name="envelope-open" :size="24" color="var(--color-primary)" />
      </template>
    </BoxedIconTitleBlock>

    <div class="tickets-page__tiles-scroll">
      <div class="tickets-page__tiles">
        <StatusTile
          v-for="tile in statusTiles"
          :key="tile.key"
          :image="tile.image"
          :label="tile.label"
          :count="tile.count"
          :count-color="tile.countColor"
          :active="activeTile === tile.key"
          @click="onTileSelect(tile.key)"
        />
      </div>
    </div>

    <div class="tickets-page__title-bar">
      <SimpleTitleIconBlock title="لیست تمام تیکت‌ها" class="tickets-page__list-title">
        <template #header-icon>
          <SvgIcon name="list-bullets" :size="16" color="#bcbcbc" />
        </template>
      </SimpleTitleIconBlock>
      <BaseButton
        type="button"
        text="ارسال تیکت جدید"
        custom-class="tickets-page__new-btn"
        @click="onNewTicket"
      >
        <template #appendIcon>
          <SvgIcon name="arrow-left" :size="16" color="#fff" />
        </template>
      </BaseButton>
    </div>

    <SkeletonLoaderBlock v-if="isLoading" :rows="6" :cols-per-row="1" />
    <div v-else-if="tickets.length > 0">
      <TicketItem
        v-for="ticket in tickets"
        :key="ticket.id"
        :ticket="ticket"
        @show-details="onShowDetails"
      />
    </div>
    <NoItems v-else title="موردی نیست" desc="هنوز تیکتی ثبت نکرده‌اید." />

    <PaginationBlock :pagination="paginationMeta" @update:page="setPage" />

    <TicketDetailsModal v-if="isModal('TicketDetailsModal')" />
    <CreateTicketModal v-if="isModal('CreateTicketModal')" />
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import useModal from '@/composables/useModal'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import BaseButton from '@/components/BaseButton.vue'
import NoItems from '@/components/blocks/NoItems.vue'
import chatsPng from '@/assets/images/tickets/chats.png'
import { usePagination } from '@/composables/usePagination'
import chatTextPng from '@/assets/images/tickets/chat-text.png'
import chatDotsPng from '@/assets/images/tickets/chat-dots.png'
import chatSlashPng from '@/assets/images/tickets/chat-slash.png'
import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
import StatusTile from '@/features/student/tickets/components/StatusTile.vue'
import TicketItem from '@/features/student/tickets/components/TicketItem.vue'
import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
import CreateTicketModal from '@/features/student/tickets/components/modals/CreateTicketModal.vue'
import TicketDetailsModal from '@/features/student/tickets/components/modals/TicketDetailsModal.vue'
import {
  useStudentTicketsQuery,
  useStudentTicketStatsQuery,
} from '@/services/query/student-tickets'

const { openModal, isModal } = useModal()

const TILE_STATUS = {
  all: '',
  in_review: 'open',
  answered: 'answered',
  closed: 'closed',
}

const activeTile = ref('all')

const filters = ref({ type: 'ticket', status: '' })
const { pagination, setPage, reset: resetPagination } = usePagination({ page: 1, perPage: 10 })

const onTileSelect = (key) => {
  activeTile.value = key
  filters.value = { type: 'ticket', status: TILE_STATUS[key] || '' }
  resetPagination()
}

const { data, isLoading } = useStudentTicketsQuery(filters, pagination, {
  keepPreviousData: true,
})

const tickets = computed(() => {
  const raw = data.value?.data
  if (Array.isArray(raw)) return raw
  if (Array.isArray(raw?.items)) return raw.items
  return []
})

const paginationMeta = computed(() => ({
  page: pagination.value.page,
  perPage: pagination.value.perPage,
  ...data.value?.meta,
}))

const { data: stats } = useStudentTicketStatsQuery({ type: 'ticket' })
const statusTiles = computed(() => [
  {
    key: 'all',
    image: chatTextPng,
    label: 'تمام تیکت‌ها',
    count: stats.value?.all ?? 0,
    countColor: '#B6842D',
  },
  {
    key: 'in_review',
    image: chatDotsPng,
    label: 'در حال بررسی',
    count: stats.value?.openTickets ?? 0,
    countColor: '#4C4C4C',
  },
  {
    key: 'answered',
    image: chatsPng,
    label: 'پاسخ داده شده',
    count: stats.value?.answeredTickets ?? 0,
    countColor: '#662BB9',
  },
  {
    key: 'closed',
    image: chatSlashPng,
    label: 'بسته شده',
    count: stats.value?.closedTickets ?? 0,
    countColor: '#CC2831',
  },
])

const onShowDetails = (ticket) => {
  openModal('TicketDetailsModal', { id: ticket.id })
}

const onNewTicket = () => {
  openModal('CreateTicketModal')
}
</script>

<style lang="scss" scoped>
.tickets-page {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  &__heading {
    margin-bottom: 0.75rem;
  }

  // Horizontal scroll for the 5 status tiles on small screens.
  &__tiles-scroll {
    overflow: auto hidden;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
    padding-block: 0.5rem;
    scrollbar-width: thin;
  }

  &__tiles {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    min-width: max-content;
  }

  &__title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-block: 0.5rem 0.25rem;
  }

  &__list-title {
    margin-bottom: 0;
    flex: 1;
  }

  &__new-btn {
    min-width: 11rem;
    height: 2.25rem;
    padding: 0 1rem;
  }
}
</style>
