<script setup>
import { ref, onMounted, computed } from 'vue';
import { useProcessBuilderStore } from '~/stores/processBuilder';
import NotificationManager from '~/components/process-flow/notification/NotificationManager.vue';

// Define page meta
definePageMeta({
  title: "Notification Manager",
  description: "Manage notifications, templates, triggers, and user preferences",
  layout: "default",
  middleware: ["auth"],
  requiresAuth: true,
});

// Initialize the store
const processStore = useProcessBuilderStore();

// Get available variables for usage in notifications
const availableVariables = computed(() => {
  const processVariables = processStore.getProcessVariables();
  if (!processVariables || typeof processVariables !== 'object') {
    return [];
  }

  return Object.entries(processVariables).map(([name, variable]) => ({
    name: name,
    label: `${name} (${variable.type || 'string'})`,
    type: variable.type || 'string',
    scope: variable.scope || 'process'
  }));
});

// Current user ID
const userId = ref('current_user');

// Get notification preferences (in a real implementation, this would be fetched from the API)
onMounted(() => {
  // In a real implementation, fetch user data, notification templates, triggers, etc.
  console.log('Notification Manager loaded');
});
</script>

<template>
  <div>
    <div class="bg-white shadow">
      <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold text-gray-900">
          Notification Center
        </h1>
      </div>
    </div>
    
    <main>
      <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div class="px-4 py-6 sm:px-0">
          <NotificationManager 
            :userId="userId"
            :availableVariables="availableVariables"
          />
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
/* Additional styles if needed */
</style> 