<template>
  <div class="dashboard">
    <div class="dashboard__main">
      <!-- آمار مشاوره -->
      <section class="dashboard__section">
        <BoxedIconTitleBlock title="آمار مشاوره‌ها" desc="مروری بر وضعیت تیکت‌های مشاوره.">
          <template #icon>
            <SvgIcon name="heart" :size="24" color="var(--color-primary)" />
          </template>
        </BoxedIconTitleBlock>

        <SkeletonLoaderBlock v-if="isLoading" :rows="1" :cols-per-row="3" />
        <div v-else class="dashboard__stats">
          <DashboardStatCard
            v-for="(stat, i) in ticketStats"
            :key="i"
            :icon="stat.icon"
            :label="stat.label"
            :value="stat.value"
            :unit="stat.unit"
            :subtitle="stat.subtitle"
            :to="stat.to"
          />
        </div>
      </section>

      <!-- آخرین درخواست ها -->
      <section class="dashboard__section">
        <BoxedIconTitleBlock title="آخرین درخواست‌ها" desc="جدیدترین تیکت‌های مشاوره کاربران.">
          <template #icon>
            <SvgIcon name="heart" :size="24" color="var(--color-primary)" />
          </template>
        </BoxedIconTitleBlock>

        <SkeletonLoaderBlock v-if="isLoading" :rows="1" :cols-per-row="2" />
        <p v-else-if="activities.length === 0" class="dashboard__empty">
          درخواست مشاوره‌ای ثبت نشده است.
        </p>
        <div v-else class="dashboard__activities">
          <DashboardActivityGroup
            v-for="(act, i) in activities"
            :key="i"
            circle
            thumb-icon="user"
            :pill-icon="act.pillIcon"
            :pill-label="act.pillLabel"
            :title="act.title"
            :meta="act.meta"
            :meta-icon="act.metaIcon"
          />
        </div>
      </section>
    </div>

    <aside class="dashboard__aside">
      <SkeletonLoaderBlock v-if="isLoading" :rows="2" :cols-per-row="1" />
      <DashboardProfileCard
        v-else
        :name="profile.name"
        :location="profile.location"
        :avatar-url="profile.avatarUrl"
        :stats="profile.stats"
      />
      <DashboardCalendar :month-label="calendar.month" :days="calendar.days" />
    </aside>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import { toFaDigits, formatJalaaliMeta } from '@/utils/persian'
import { useTehranCalendar } from '@/composables/useTehranCalendar'
import DashboardStatCard from '@/components/dashboard/DashboardStatCard.vue'
import DashboardCalendar from '@/components/dashboard/DashboardCalendar.vue'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
import { useCounselorDashboardQuery } from '@/services/query/counselor-dashboard'
import DashboardProfileCard from '@/components/dashboard/DashboardProfileCard.vue'
import DashboardActivityGroup from '@/components/dashboard/DashboardActivityGroup.vue'

const { data, isLoading } = useCounselorDashboardQuery()

const dashboard = computed(() => data.value?.data ?? {})

const ticketStats = computed(() => {
  const stats = dashboard.value.stats ?? {}
  return [
    {
      icon: 'chat',
      label: 'تیکت‌های باز',
      value: toFaDigits(stats.openTickets ?? 0),
      unit: 'تیکت',
      subtitle: 'در انتظار پاسخ',
      to: { name: 'counselor-consultations' },
    },
    {
      icon: 'check-circle',
      label: 'پاسخ داده شده',
      value: toFaDigits(stats.answeredTickets ?? 0),
      unit: 'تیکت',
      subtitle: 'پاسخ داده شده',
      to: { name: 'counselor-consultations' },
    },
    {
      icon: 'check',
      label: 'بسته شده',
      value: toFaDigits(stats.closedTickets ?? 0),
      unit: 'تیکت',
      subtitle: 'بسته شده',
      to: { name: 'counselor-consultations' },
    },
  ]
})

const activities = computed(() =>
  (dashboard.value.recentTickets ?? []).map((ticket) => ({
    pillIcon: 'chat',
    pillLabel: 'آخرین درخواست مشاوره',
    title: ticket.studentName,
    metaIcon: 'calendar',
    meta: [
      { label: 'موضوع:', value: ticket.subject ?? '' },
      { label: 'تاریخ:', value: formatJalaaliMeta(ticket.createdAt), numeric: true },
    ],
  }))
)

const profile = computed(() => {
  const info = dashboard.value.profile ?? {}
  const stats = dashboard.value.stats ?? {}
  return {
    name: info.name ?? '',
    avatarUrl: info.avatarUrl ?? '',
    location: [info.city || info.province, 'ایران'].filter(Boolean).join('، '),
    stats: [
      { label: 'مدت عضویت', value: toFaDigits(info.membershipDays ?? 0), unit: 'روز' },
      { label: 'کل تیکت‌ها', value: toFaDigits(stats.totalTickets ?? 0), unit: 'عدد' },
      { label: 'واگذار به من', value: toFaDigits(stats.assignedToMe ?? 0), unit: 'عدد' },
    ],
  }
})

const calendar = useTehranCalendar()
</script>

<style lang="scss" scoped>
.dashboard {
  display: flex;
  flex-direction: column-reverse;
  gap: 2rem;

  @media (min-width: 1024px) {
    flex-direction: row;
    align-items: flex-start;
  }

  &__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  &__section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  &__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;

    @media (min-width: 640px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  &__activities {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  &__empty {
    font-family: var(--font-family-fa);
    font-size: 0.875rem;
    color: var(--color-prim-gray);
    text-align: center;
    padding: 2rem 0;
    background: rgba(255, 255, 255, 58%);
    border-radius: 0.9375rem;
    margin: 0;
  }

  &__aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    @media (min-width: 1024px) {
      width: clamp(21rem, 26vw, 24rem);
      flex-shrink: 0;
      border-inline-start: 1px solid #e6e6e6;
      padding-inline-start: 2rem;
    }
  }
}
</style>
