<template>
  <button
    v-if="hasPermission"
    v-bind="$attrs"
    :class="buttonClass"
    :disabled="disabled"
    @click="handleClick"
  >
    <slot>{{ buttonText }}</slot>
  </button>
</template>

<script setup lang="ts">
interface Props {
  /** 버튼 코드 (권한 체크용) */
  buttonCode: string;
  /** 버튼 비활성화 여부 */
  disabled?: boolean;
  /** 추가 CSS 클래스 */
  class?: string;
}

interface Emits {
  /** 클릭 이벤트 */
  (e: "click", event: MouseEvent): void;
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  class: "",
});

const emit = defineEmits<Emits>();

// 권한 체크 - usePermission composable만 사용
const permission = usePermission();
const hasPermission = computed(() =>
  permission.hasComponentPermission(props.buttonCode)
);

// 버튼 텍스트 가져오기 - usePermission composable 사용
const buttonText = computed(() => {
  const component = permission.getResourceByCode(props.buttonCode);
  return component?.name || props.buttonCode;
});

// 버튼 클래스 계산
const buttonClass = computed(() => {
  const baseClass = "permission-button";
  const disabledClass = props.disabled ? "permission-button--disabled" : "";
  const customClass = props.class || "";

  return [baseClass, disabledClass, customClass].filter(Boolean).join(" ");
});

// 클릭 이벤트 처리
const handleClick = (event: MouseEvent) => {
  if (!props.disabled && hasPermission.value) {
    emit("click", event);
  }
};
</script>

<style scoped>
.permission-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  background-color: #3b82f6;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  outline: none;
  user-select: none;
  min-height: 36px;
}

.permission-button:hover:not(.permission-button--disabled) {
  background-color: #2563eb;
}

.permission-button:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.permission-button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>
