<template>
  <section class="page">
    <GnPageHeader title="Actions" kicker="Scripts">
      <template #actions>
        <GnBadge variant="primary">{{ scriptsStore.totalActions }} scripts</GnBadge>
      </template>
    </GnPageHeader>

    <AppLoadingState v-if="scriptsStore.isLoadingActions" text="Loading actions" />

    <AppErrorState
      v-else-if="scriptsStore.errorActions"
      title="Actions loading failed"
      :error="scriptsStore.errorActions"
      :retry="scriptsStore.loadActions"
    />

    <AppEmptyState
      v-else-if="scriptsStore.actions.length === 0"
      title="No action scripts"
      message="No action scripts registered."
    />

    <ActionScriptsGrid v-else :scripts="scriptsStore.actions" show-area-badge />
  </section>
</template>

<script setup>
import { onMounted } from "vue";
import { useScriptsStore } from "../../../stores/scripts";
import { useAreasStore } from "../../../stores/areas";
import {
  GnPageHeader,
  GnBadge,
} from "gnexus-ui-kit/vue";
import AppEmptyState from "../../../components/feedback/AppEmptyState.vue";
import AppErrorState from "../../../components/feedback/AppErrorState.vue";
import AppLoadingState from "../../../components/feedback/AppLoadingState.vue";
import ActionScriptsGrid from "../../../components/script/ActionScriptsGrid.vue";

const scriptsStore = useScriptsStore();
const areasStore = useAreasStore();

onMounted(() => {
  scriptsStore.loadActions();
  if (areasStore.areas.length === 0) {
    areasStore.loadAreas();
  }
});
</script>

<style scoped>
.result-alert {
  margin-top: 24px;
}
</style>