<script setup lang="ts">
import { useQuery } from '@vue/apollo-composable';
import {
  NotificationTemplatesDocument,
  type NotificationTemplatesQuery,
} from '~/composables/graphql/generated';

definePageMeta({
  middleware: ['manager-only'],
  path: '/admin/settings/messages',
  alias: ['/messages'],
});

type TemplateItem = NotificationTemplatesQuery['notificationTemplates'][number];
type TemplateChannel = TemplateItem['channels'][number];

const templatesQuery = useQuery(NotificationTemplatesDocument);

const templates = computed<TemplateItem[]>(() => templatesQuery.result.value?.notificationTemplates ?? []);

function channelLabel(channel: TemplateChannel['channel']) {
  if (channel === 'EMAIL') {
    return 'Email';
  }
  if (channel === 'TELEGRAM') {
    return 'Telegram';
  }
  return 'Max';
}
</script>

<template>
  <section class="space-y-6">
    <h1 class="text-3xl font-extrabold text-[#0f2f20]">Сообщения</h1>

    <div v-if="templatesQuery.loading.value" class="manager-empty-state">
      Загружаем шаблоны...
    </div>

    <div v-else-if="templates.length === 0" class="manager-empty-state">
      Шаблонов пока нет.
    </div>

    <div v-else class="space-y-6">
      <section
        v-for="template in templates"
        :key="template.id"
      >
        <h2 class="text-xl font-bold text-[#123824]">
          {{ template.title }}
        </h2>

        <div class="mt-4 grid gap-4 xl:grid-cols-3">
          <section
            v-for="channel in template.channels"
            :key="`${template.id}-${channel.channel}`"
            class="surface-card rounded-[24px] bg-white p-4"
          >
            <h3 class="text-sm font-extrabold uppercase tracking-[0.14em] text-[#355947]">
              {{ channelLabel(channel.channel) }}
            </h3>

            <div class="mt-3 rounded-[20px] bg-[#f8fbf9] p-4">
              <div v-if="channel.subject" class="space-y-1">
                <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#5c7b69]">
                  Тема
                </p>
                <p class="text-sm font-semibold text-[#123824]">
                  {{ channel.subject }}
                </p>
              </div>

              <div class="mt-3 space-y-3 text-sm leading-6 text-[#123824]">
                <p
                  v-for="line in channel.body"
                  :key="line"
                >
                  {{ line }}
                </p>
              </div>

              <div v-if="channel.buttonText" class="mt-4">
                <a
                  v-if="channel.buttonUrl"
                  :href="channel.buttonUrl"
                  class="btn h-11 rounded-full border-0 bg-[#123824] px-5 text-white hover:bg-[#0f2f20]"
                >
                  {{ channel.buttonText }}
                </a>
                <span
                  v-else
                  class="inline-flex h-11 items-center rounded-full bg-[#123824] px-5 text-sm font-semibold text-white"
                >
                  {{ channel.buttonText }}
                </span>
              </div>
            </div>
          </section>
        </div>
      </section>
    </div>
  </section>
</template>
