<template>
  <section class="page">
    <div class="page-heading">
      <div>
        <p class="eyebrow">Areas</p>
        <h1>Favorites</h1>
      </div>
      <UiBadge variant="primary">{{ favoriteAreas.length }} favorite areas</UiBadge>
    </div>

    <AppLoadingState v-if="areasStore.isLoading" text="Loading areas" />

    <AppErrorState
      v-else-if="areasStore.error"
      title="Areas loading failed"
      :message="areasStore.error.message"
      :retry="areasStore.loadAreas"
    />

    <AppEmptyState
      v-else-if="favoriteAreas.length === 0"
      title="No favorite areas"
      message="Favorite areas from the current client are preserved through localStorage."
    />

    <div v-else class="area-grid">
      <article v-for="area in favoriteAreas" :key="area.id" class="area-card">
        <div>
          <h2>{{ area.display_name }}</h2>
          <p>
            <UiBadge variant="neutral">{{ area.type }}</UiBadge>
            <code>{{ area.alias }}</code>
          </p>
        </div>
        <UiButton variant="secondary" @click="favoritesStore.remove(area.id)">
          Remove favorite
        </UiButton>
      </article>
    </div>
  </section>
</template>

<script setup>
import { computed, onMounted } from "vue";
import { useAreasStore } from "../../../stores/areas";
import { useFavoritesStore } from "../../../stores/favorites";
import AppLoadingState from "../../../components/feedback/AppLoadingState.vue";
import AppErrorState from "../../../components/feedback/AppErrorState.vue";
import AppEmptyState from "../../../components/feedback/AppEmptyState.vue";
import UiBadge from "../../../components/ui/UiBadge.vue";
import UiButton from "../../../components/ui/UiButton.vue";

const areasStore = useAreasStore();
const favoritesStore = useFavoritesStore();

const favoriteAreas = computed(() => {
  const favoriteIds = new Set(favoritesStore.ids.map(String));
  return areasStore.areas.filter((area) => favoriteIds.has(String(area.id)));
});

onMounted(() => {
  areasStore.loadAreas();
});
</script>