<template>
  <section class="min-h-screen px-5 pt-20 pb-10 lg:px-8 bg-[#fff]">
    <div class="mx-auto w-full max-w-3xl">
      <button
        type="button"
        class="mb-8 flex items-center justify-center gap-x-1.5 text-sm text-dark/60 transition hover:text-dark"
        @click="$emit('back')"
      >
        <component :is="icons.arrowLeft" class="w-4 h-4" />
        <span>{{ t("Back") }}</span>
      </button>

      <h1
        class="text-4xl font-medium tracking-tight text-dark text-center py-5 mb-5"
      >
        müco <span class="font-handwritten">{{ t("Campaigns") }}</span>
      </h1>

      <div
        v-if="campaigns.length"
        class="mx-auto grid max-w-5xl grid-cols-1 gap-5 md:grid-cols-2 mt-12"
      >
        <button
          v-for="campaign in campaigns"
          :key="campaign.title"
          type="button"
          class="group overflow-hidden rounded-[1.75rem] border border-dark/20 bg-[#fff] p-3 text-left transition duration-300 hover:-translate-y-0.5 hover:shadow-lg"
          @click="selectedCampaign = campaign"
        >
          <div class="relative overflow-hidden rounded-[1.35rem] bg-light">
            <div class="aspect-video">
              <img
                :src="campaign.image.src"
                :alt="campaign.image.alt"
                class="h-full w-full object-cover transition duration-500 group-hover:scale-105"
                @error="setPlaceholderImage"
              />
            </div>

            <div class="absolute left-3 top-3">
              <div
                class="flex items-center gap-2 rounded-2xl bg-white/95 px-3 py-2 text-dark shadow-lg backdrop-blur"
                :class="isExpired(campaign) ? 'grayscale' : ''"
              >
                <span
                  class="flex h-10 w-10 items-center justify-center rounded-xl bg-rose-500 text-lg font-black text-white"
                >
                  {{ isExpired(campaign) ? "!" : campaign.discount }}
                </span>

                <span class="text-left leading-none">
                  <strong
                    v-if="!isExpired(campaign)"
                    class="mt-1.5 block text-xl font-handwritten uppercase tracking-wide text-dark"
                  >
                    {{ t("Discount") }}
                  </strong>

                  <span
                    v-if="isExpired(campaign)"
                    class="mt-1 inline-flex rounded-full bg-rose-100 px-2 py-1 text-[10px] font-bold text-rose-600"
                  >
                    {{ t("Ended") }}
                  </span>
                </span>
              </div>
            </div>
          </div>

          <div class="px-2 pb-2 pt-4">
            <div class="mb-2 flex flex-wrap gap-1.5">
              <span
                v-for="tag in campaign.tags"
                :key="tag"
                class="rounded-full bg-dark/5 px-2.5 py-1 text-[10px] font-medium text-dark/70"
              >
                {{ tag }}
              </span>
            </div>

            <h2
              class="text-xl font-semibold leading-tight tracking-tight text-dark"
              v-html="campaign.title"
            />

            <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-dark/70">
              {{ campaign.excerpt }}
            </p>

            <div
              class="mt-4 flex flex-wrap md:flex-row items-center justify-between gap-3"
            >
              <span
                class="text-xs font-medium"
                :class="isExpired(campaign) ? 'text-rose-600' : 'text-dark/70'"
              >
                {{
                  isExpired(campaign)
                    ? t("Campaign ended")
                    : `${formatDate(campaign.endDate)} ${t("until")}`
                }}
              </span>

              <span
                class="rounded-full bg-dark px-3 py-1.5 text-xs font-medium text-white"
              >
                {{ t("View Details") }}
              </span>
            </div>
          </div>
        </button>
      </div>

      <div v-else class="rounded-3xl bg-light/60 p-10 text-center">
        <p class="text-base font-medium text-dark">
          {{ t("No Active Campaign") }}
        </p>
      </div>
    </div>

    <Teleport to="body">
      <Transition name="fade">
        <div
          v-if="selectedCampaign"
          class="fixed inset-0 z-50 flex items-end justify-center bg-black/55 p-3 backdrop-blur-sm md:items-center md:p-6"
          @click.self="selectedCampaign = null"
        >
          <Transition name="modal">
            <div
              class="flex max-h-[92dvh] w-full max-w-xl flex-col overflow-hidden rounded-t-4xl bg-white shadow-2xl md:max-h-[88dvh] md:rounded-4xl"
            >
              <div class="relative shrink-0 bg-[#fff]">
                <div class="aspect-video">
                  <img
                    :src="selectedCampaign.image.src"
                    :alt="selectedCampaign.image.alt"
                    class="h-full w-full object-cover"
                    @error="setPlaceholderImage"
                  />
                </div>

                <div
                  class="absolute inset-0 bg-linear-to-t from-black/75 via-black/15 to-transparent"
                />

                <button
                  type="button"
                  class="absolute right-4 top-4 flex h-10 w-10 items-center justify-center rounded-full bg-white/70 text-dark backdrop-blur transition hover:bg-white hover:text-dark"
                  @click="selectedCampaign = null"
                >
                  <span>✕</span>
                </button>

                <div class="absolute left-5 top-5">
                  <div
                    class="flex items-center gap-2 rounded-2xl bg-white/95 px-3 py-2 text-dark shadow-lg backdrop-blur"
                    :class="isExpired(selectedCampaign) ? 'grayscale' : ''"
                  >
                    <span
                      class="flex h-12 w-12 items-center justify-center rounded-xl bg-rose-500 text-xl font-black text-white"
                    >
                      {{
                        isExpired(selectedCampaign)
                          ? "!"
                          : selectedCampaign.discount
                      }}
                    </span>

                    <span class="text-left leading-none">
                      <strong
                        v-if="!isExpired(selectedCampaign)"
                        class="mt-1 block text-2xl font-handwritten uppercase tracking-wide text-dark"
                      >
                        {{ t("Discount") }}
                      </strong>

                      <span
                        v-if="isExpired(selectedCampaign)"
                        class="mt-1 inline-flex rounded-full bg-rose-100 px-2 py-1 text-[10px] font-bold text-rose-600"
                      >
                        {{ t("Ended") }}
                      </span>
                    </span>
                  </div>
                </div>
              </div>

              <div
                class="min-h-0 flex-1 overflow-y-auto overscroll-contain p-7 md:p-10"
              >
                <div class="space-y-5">
                  <h3
                    class="text-3xl font-black uppercase leading-none tracking-tight"
                    v-html="selectedCampaign.title"
                  />

                  <p
                    v-if="isExpired(selectedCampaign)"
                    class="rounded-2xl bg-rose-50 px-4 py-3 text-sm font-semibold text-rose-600"
                  >
                    {{ t("Kampanyamız bitmiştir") }}
                  </p>

                  <p
                    class="whitespace-pre-line text-base leading-6 text-dark/70"
                  >
                    {{ selectedCampaign.description }}
                  </p>

                  <div v-if="selectedCampaign.rules?.length">
                    <h4
                      class="mb-4 text-lg font-extrabold tracking-tight text-dark"
                    >
                      {{ t("Campaign Rules") }}
                    </h4>

                    <ul class="space-y-3">
                      <li
                        v-for="rule in selectedCampaign.rules"
                        :key="rule"
                        class="flex items-start gap-3 text-sm leading-relaxed text-dark"
                      >
                        <span
                          class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-highlight"
                        />
                        <span>{{ rule }}</span>
                      </li>
                    </ul>
                  </div>

                  <div class="grid md:grid-cols-2 gap-3 mt-2">
                    <div class="rounded-2xl bg-white p-4">
                      <p class="text-sm text-dark font-extrabold">
                        {{ t("End Date") }}
                      </p>
                      <p class="mt-1 text-base font-medium text-dark">
                        {{ formatDate(selectedCampaign.endDate) }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Transition>
        </div>
      </Transition>
    </Teleport>
  </section>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { useIcons } from "@/composables/useIcons";

const icons = useIcons();
const { t, locale } = useI18n();

type Campaign = {
  title: string;
  excerpt: string;
  description: string;
  image: {
    src: string;
    alt: string;
  };
  startDate: string;
  endDate: string;
  tags: string[];
  discount: string;
  rules?: string[];
};

const props = withDefaults(
  defineProps<{
    campaigns: Campaign[];
    fallbackImage?: string;
  }>(),
  {
    fallbackImage: "/images/general-img-square.webp",
  },
);

defineEmits<{
  back: [];
}>();

const selectedCampaign = ref<Campaign | null>(null);

function isExpired(campaign: Campaign) {
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  const endDate = new Date(campaign.endDate);
  endDate.setHours(23, 59, 59, 999);

  return endDate < today;
}

function formatDate(date: string) {
  return new Intl.DateTimeFormat(locale.value === "en" ? "en-US" : "tr-TR", {
    day: "numeric",
    month: "long",
    year: "numeric",
  }).format(new Date(date));
}

function setPlaceholderImage(event: Event) {
  const image = event.target as HTMLImageElement;
  image.src = props.fallbackImage;
}
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.modal-enter-active,
.modal-leave-active {
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.modal-enter-from,
.modal-leave-to {
  transform: translateY(18px) scale(0.98);
  opacity: 0;
}
</style>
