<template>
  <div class="cert">
    <div class="cert__course">
      <div class="cert__thumb">
        <img v-if="certificate.thumbnailUrl" :src="certificate.thumbnailUrl" :alt="courseTitle" />
        <SvgIcon v-else name="scroll" :size="24" color="#f55d6d" />
      </div>
      <div class="cert__course-info">
        <p class="cert__title">{{ courseTitle }}</p>
        <div class="cert__teacher">
          <SvgIcon name="user" :size="11" color="#bcbcbc" />
          <span class="cert__teacher-label">استاد :</span>
          <span class="cert__teacher-name">{{ teacherName }}</span>
        </div>
      </div>
    </div>

    <div class="cert__dates">
      <div class="cert__date">
        <span class="cert__date-label">تاریخ شروع :</span>
        <span class="cert__date-value">{{ certificate.startDate || '—' }}</span>
      </div>
      <span class="cert__date-divider" />
      <div class="cert__date">
        <span class="cert__date-label">تاریخ پایان :</span>
        <span class="cert__date-value">{{ certificate.endDate || '—' }}</span>
      </div>
    </div>

    <div class="cert__actions">
      <BaseButton
        ref="downloadBtnRef"
        text="دانلود گواهینامه"
        custom-class="cert__download-btn"
        @click="toggleMenu"
      >
        <template #appendIcon>
          <SvgIcon name="caret-down" :size="14" color="#fff" />
        </template>
      </BaseButton>
    </div>

    <DropdownMenu
      v-model="menuOpen"
      :reference="menuTrigger"
      :items="downloadItems"
      placement="bottom-end"
      min-width="14rem"
    />
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import DropdownMenu from '@/components/DropdownMenu.vue'

const props = defineProps({
  certificate: { type: Object, required: true },
})

const emit = defineEmits(['download'])

const courseTitle = computed(() => props.certificate.courseTitle || '—')
const teacherName = computed(() => props.certificate.teacherName || '—')

const downloadBtnRef = ref(null)
const menuTrigger = ref(null)
const menuOpen = ref(false)

const toggleMenu = (event) => {
  menuTrigger.value = event.currentTarget
  menuOpen.value = !menuOpen.value
}

const onDownload = (format) => {
  emit('download', { certificate: props.certificate, format })
}

const downloadItems = computed(() => [
  {
    key: 'pdf',
    label: 'دانلود به صورت PDF',
    icon: 'upload',
    onClick: () => onDownload('pdf'),
  },
  {
    key: 'jpg',
    label: 'دانلود به صورت JPG',
    icon: 'upload',
    onClick: () => onDownload('jpg'),
  },
])
</script>

<style lang="scss" scoped>
.cert {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 58%);
  box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
  border-radius: 0.75rem;
  margin-bottom: 0.625rem;

  @media (min-width: 1024px) {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 0.875rem 2rem;
  }

  &__course {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    @media (min-width: 1024px) {
      flex: 1;
      order: 3;
      min-width: 12rem;
    }
  }

  &__thumb {
    width: 3rem;
    height: 3.25rem;
    border-radius: 0.625rem;
    background: #f4f4f4;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &__course-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: end;
    gap: 0.25rem;
    min-width: 0;
  }

  &__title {
    font-family: var(--font-family-fa);
    font-weight: 400;
    font-size: 0.95rem;
    color: #4b4b4b;
    margin: 0;
  }

  &__teacher {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-family-fa);
    font-size: 0.65rem;
    color: #4b4b4b;
  }

  &__teacher-label {
    font-weight: 400;
  }

  &__teacher-name {
    font-weight: 500;
  }

  &__dates {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0.875rem;
    border-radius: 0.75rem;
    background: rgba(107, 107, 107, 4%);
    font-family: var(--font-family-fa);
    white-space: nowrap;

    @media (min-width: 1024px) {
      order: 2;
    }
  }

  &__date {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }

  &__date-label {
    font-weight: 400;
    font-size: 0.65rem;
    color: #535353;
  }

  &__date-value {
    font-family: var(--font-family-en);
    font-weight: 400;
    font-size: 0.75rem;
    color: #5d5d5d;
  }

  &__date-divider {
    width: 1px;
    height: 0.55rem;
    background: #dadada;
  }

  &__actions {
    display: flex;
    justify-content: center;

    @media (min-width: 1024px) {
      order: 1;
      justify-content: flex-start;
    }
  }

  &__download-btn {
    min-width: 9rem;
    height: 2rem;
    padding: 0 1.25rem;
  }
}
</style>
