import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useAuthStore = defineStore('auth', () => {
  const user = ref(null);
  const isAuthenticated = computed(() => user.value !== null);
  
  const fullName = computed(() => {
    if (!user.value) return '';
    return user.value.fullName || `${user.value.firstName} ${user.value.lastName}`;
  });

  const hasRole = (role) => {
    if (!user.value) return false;
    return user.value.roles && user.value.roles.includes(role);
  };

  const isAdmin = computed(() => hasRole('ROLE_ADMIN'));

  const initializeFromElement = () => {
    const appElement = document.getElementById('app');
    if (appElement && appElement.dataset.user) {
      try {
        const userData = JSON.parse(appElement.dataset.user);
        if (userData) {
          user.value = userData;
        }
      } catch (error) {
        console.error('Error parsing user data:', error);
      }
    }
  };

  const logout = async () => {
    window.location.href = '/logout';
  };

  return {
    user,
    isAuthenticated,
    fullName,
    hasRole,
    isAdmin,
    initializeFromElement,
    logout
  };
});