<template>
  <section class="page">
    <GnPageHeader title="Favorites" kicker="Areas">
      <template #actions>
        <GnBadge variant="primary">{{ favoriteAreas.length }} favorite areas</GnBadge>
      </template>
    </GnPageHeader>

    <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">
      <GnCard
        v-for="area in favoriteAreas"
        :key="area.id"
        :title="area.display_name"
      >
        <template #default>
          <p>
            <GnBadge variant="secondary">{{ area.type }}</GnBadge>
            <code>{{ area.alias }}</code>
          </p>
        </template>
        <template #footer>
          <GnButton variant="secondary" icon="ph-star" @click="favoritesStore.remove(area.id)">
            Remove favorite
          </GnButton>
        </template>
      </GnCard>
    </div>
  </section>
</template>

<script setup>
import { computed, onMounted } from "vue";
import { useAreasStore } from "../../../stores/areas";
import { useFavoritesStore } from "../../../stores/favorites";
import { GnPageHeader, GnBadge, GnCard, GnButton } from "gnexus-ui-kit/vue";
import AppLoadingState from "../../../components/feedback/AppLoadingState.vue";
import AppErrorState from "../../../components/feedback/AppErrorState.vue";
import AppEmptyState from "../../../components/feedback/AppEmptyState.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>