<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import SiteHeader from '@/components/SiteHeader.vue'
import { useElementsStore } from '@/stores/elements'

const route = useRoute()
const elementsStore = useElementsStore()
const { element, childElements, isLoading, error } = storeToRefs(elementsStore)

const elementId = computed(() => {
  const routeElementId = route.params.id

  if (Array.isArray(routeElementId)) {
    return routeElementId.join('/')
  }

  return routeElementId
})

watch(
  elementId,
  (currentElementId) => {
    if (typeof currentElementId !== 'string' || currentElementId === '') {
      return
    }

    void elementsStore.fetchElement(currentElementId)
  },
  { immediate: true },
)
</script>

<template>
  <div class="element-page">
    <SiteHeader />
    <main class="element-page__main" data-cy="element-page">
      <p v-if="isLoading" class="element-page__status">Loading element...</p>
      <p
        v-else-if="error"
        class="element-page__status element-page__status--error"
        data-cy="element-error"
      >
        {{ error }}
      </p>
      <section v-else-if="element" class="element-page__content">
        <h1 class="element-page__heading">
          {{ element.title }}
        </h1>

        <nav
          v-if="childElements.length > 0"
          class="element-page__children"
          aria-label="Child elements"
        >
          <ul class="element-page__child-list" data-cy="child-element-list">
            <li
              v-for="childElement in childElements"
              :key="childElement.id"
              class="element-page__child-item"
            >
              <RouterLink
                :to="{ name: 'element', params: { id: childElement.id } }"
                class="element-page__child-link"
                data-cy="child-element-link"
              >
                <span class="element-page__child-title">
                  {{ childElement.title }}
                </span>
                <span
                  v-if="childElement.description !== ''"
                  class="element-page__child-description"
                >
                  {{ childElement.description }}
                </span>
              </RouterLink>
            </li>
          </ul>
        </nav>
      </section>
    </main>
  </div>
</template>

<style scoped>
.element-page {
  min-height: 100vh;
  background: var(--color-white);
}

.element-page__main {
  min-height: 100vh;
  padding: 5.1rem 4.15rem 5rem;
}

.element-page__content {
  max-width: 48rem;
  margin: 0 auto;
}

.element-page__heading {
  margin: 0;
  color: #2c2c2c;
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 4.8vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
}

.element-page__children {
  margin-top: 3rem;
}

.element-page__child-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0.85rem;
  list-style: none;
}

.element-page__child-link {
  display: block;
  padding: 1rem 1.2rem;
  background: var(--color-white);
  border: 1px solid #e5cf9f;
  border-radius: 8px;
  color: #333333;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.element-page__child-title {
  display: block;
}

.element-page__child-description {
  display: block;
  margin-top: 0.4rem;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.45;
}

.element-page__child-link:hover,
.element-page__child-link:focus-visible {
  border-color: #d4ad5f;
  box-shadow: 0 10px 28px rgb(44 44 44 / 9%);
  transform: translateY(-1px);
}

.element-page__child-link:focus-visible {
  outline: 3px solid rgb(212 173 95 / 45%);
  outline-offset: 4px;
}

.element-page__status {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  color: var(--color-text-muted);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.95rem;
}

.element-page__status--error {
  color: #7c2d2d;
  border-color: #e5b8b8;
}

@media (max-width: 768px) {
  .element-page__main {
    padding: 3rem 1rem;
  }

  .element-page__children {
    margin-top: 2rem;
  }
}
</style>
