<script setup lang="ts">
import type { Pharmacy } from '~/types/pharmacy'

const route = useRoute()
const config = useRuntimeConfig()
const { data, error } = await useFetch<{ data: Pharmacy }>(`${config.public.apiBase}/pharmacies/${route.params.slug}`, {
  key: `pharmacy-${route.params.slug}`,
  server: true,
})

if (error.value) {
  throw createError({ statusCode: 404, statusMessage: 'داروخانه پیدا نشد' })
}

const pharmacy = computed(() => data.value?.data)

useSeoMeta({
  title: () => pharmacy.value?.seo_title || pharmacy.value?.name || 'داروخانه',
  description: () => pharmacy.value?.seo_description || pharmacy.value?.short_description || 'صفحه اختصاصی داروخانه',
  ogTitle: () => pharmacy.value?.name || 'داروخانه',
  ogDescription: () => pharmacy.value?.short_description || 'معرفی داروخانه',
  ogImage: () => pharmacy.value?.image_url || undefined,
})
</script>

<template>
  <section v-if="pharmacy" class="detail-hero">
    <div class="container detail-grid">
      <article class="detail-box">
        <div class="detail-cover">
          <img v-if="pharmacy.image_url" :src="pharmacy.image_url" :alt="pharmacy.name">
        </div>
        <span class="eyebrow">{{ pharmacy.city?.name }}<span v-if="pharmacy.district">، {{ pharmacy.district }}</span></span>
        <h1>{{ pharmacy.name }}</h1>
        <p style="line-height:2;color:#475569">{{ pharmacy.short_description }}</p>
        <div class="services" style="margin:20px 0">
          <span v-if="pharmacy.is_24h" class="service">شبانه‌روزی</span>
          <span v-if="pharmacy.has_delivery" class="service">ارسال</span>
          <span v-if="pharmacy.has_supplements" class="service">مکمل</span>
          <span v-if="pharmacy.has_cosmetics" class="service">آرایشی‌بهداشتی</span>
          <span v-if="pharmacy.has_insurance" class="service">بیمه</span>
          <span v-for="service in pharmacy.services" :key="service" class="service">{{ service }}</span>
        </div>
        <div v-if="pharmacy.description" style="line-height:2;color:#334155" v-html="pharmacy.description"></div>
      </article>

      <aside class="detail-box">
        <h2>اطلاعات تماس</h2>
        <div class="contact-list">
          <div class="contact-item"><span>آدرس</span><strong>{{ pharmacy.address || 'ثبت نشده' }}</strong></div>
          <div class="contact-item"><span>ساعت کاری</span><strong>{{ pharmacy.working_hours || 'ثبت نشده' }}</strong></div>
          <div class="contact-item"><span>تلفن</span><strong>{{ pharmacy.phone || 'ثبت نشده' }}</strong></div>
          <div class="contact-item"><span>موبایل</span><strong>{{ pharmacy.mobile || 'ثبت نشده' }}</strong></div>
        </div>
        <div style="display:grid;gap:10px;margin-top:18px">
          <a v-if="pharmacy.phone" class="primary-btn" :href="`tel:${pharmacy.phone}`">تماس با داروخانه</a>
          <a v-if="pharmacy.whatsapp" class="ghost-btn" :href="`https://wa.me/${pharmacy.whatsapp}`" target="_blank">واتساپ</a>
        </div>
      </aside>
    </div>
  </section>
</template>
