import type { AppPageProps } from '@/types/index';
import { usePage } from '@inertiajs/vue3';
import type { DirectiveBinding } from 'vue';

// Helper functions
export const hasRole = (roles: string | string[]): boolean => {
  const page = usePage<AppPageProps>();
  const userRoles = page.props.auth.roles || [];

  if (typeof roles === 'string') {
    return userRoles.includes(roles);
  }

  return roles.some((role) => userRoles.includes(role));
};

export const hasPermission = (permissions: string | string[]): boolean => {
  const page = usePage<AppPageProps>();
  const userPermissions = page.props.auth.permissions || [];

  if (typeof permissions === 'string') {
    return userPermissions.includes(permissions);
  }

  return permissions.some((permission) => userPermissions.includes(permission));
};

export const hasAnyRole = (roles: string | string[]): boolean => {
  return hasRole(roles);
};

export const hasAllRoles = (roles: string[]): boolean => {
  const page = usePage<AppPageProps>();
  const userRoles = page.props.auth.roles || [];

  return roles.every((role) => userRoles.includes(role));
};

export const hasAnyPermission = (permissions: string | string[]): boolean => {
  return hasPermission(permissions);
};

export const hasAllPermissions = (permissions: string[]): boolean => {
  const page = usePage<AppPageProps>();
  const userPermissions = page.props.auth.permissions || [];

  return permissions.every((permission) => userPermissions.includes(permission));
};

// Vue directives
export const vRoles = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const roles = binding.value;
    if (!hasRole(roles)) {
      el.style.display = 'none';
    }
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    const roles = binding.value;
    if (!hasRole(roles)) {
      el.style.display = 'none';
    } else {
      el.style.display = '';
    }
  },
};

export const vPermissions = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const permissions = binding.value;
    if (!hasPermission(permissions)) {
      el.style.display = 'none';
    }
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    const permissions = binding.value;
    if (!hasPermission(permissions)) {
      el.style.display = 'none';
    } else {
      el.style.display = '';
    }
  },
};

export const vAnyRole = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const roles = binding.value;
    if (!hasAnyRole(roles)) {
      el.style.display = 'none';
    }
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    const roles = binding.value;
    if (!hasAnyRole(roles)) {
      el.style.display = 'none';
    } else {
      el.style.display = '';
    }
  },
};

export const vAllRoles = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const roles = binding.value;
    if (!hasAllRoles(roles)) {
      el.style.display = 'none';
    }
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    const roles = binding.value;
    if (!hasAllRoles(roles)) {
      el.style.display = 'none';
    } else {
      el.style.display = '';
    }
  },
};

export const vAnyPermission = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const permissions = binding.value;
    if (!hasAnyPermission(permissions)) {
      el.style.display = 'none';
    }
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    const permissions = binding.value;
    if (!hasAnyPermission(permissions)) {
      el.style.display = 'none';
    } else {
      el.style.display = '';
    }
  },
};

export const vAllPermissions = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const permissions = binding.value;
    if (!hasAllPermissions(permissions)) {
      el.style.display = 'none';
    }
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    const permissions = binding.value;
    if (!hasAllPermissions(permissions)) {
      el.style.display = 'none';
    } else {
      el.style.display = '';
    }
  },
};