<template>
  <Transition name="alert-fade">
    <div v-if="internalModelValue" class="alert" :class="alertClasses" role="alert">
      <div class="alert-main-section">
        <VIcon v-if="showIcon && displayIconName" :name="displayIconName" class="alert-icon" />
        <div class="alert-content">
          <slot>{{ message }}</slot>
        </div>
        <button
          v-if="closable"
          type="button"
          class="alert-close-btn"
          aria-label="Close alert"
          @click="handleClose"
        >
          <VIcon name="close" />
        </button>
      </div>
      <div v-if="$slots.actions" class="alert-actions">
        <slot name="actions"></slot>
      </div>
    </div>
  </Transition>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import VIcon from './VIcon.vue'; // Assuming VIcon is available

const props = defineProps({
  modelValue: { // For v-model for dismissible alerts
    type: Boolean,
    default: true,
  },
  message: {
    type: String,
    default: '',
  },
  type: {
    type: String, // 'success', 'warning', 'error', 'info'
    default: 'info',
    validator: (value: string) => ['success', 'warning', 'error', 'info'].includes(value),
  },
  closable: {
    type: Boolean,
    default: false,
  },
  icon: { // Custom icon name
    type: String,
    default: null,
  },
  showIcon: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(['update:modelValue', 'close']);

// Internal state for visibility, to allow closing even if not using v-model
const internalModelValue = ref(props.modelValue);

watch(() => props.modelValue, (newVal) => {
  internalModelValue.value = newVal;
});

const alertClasses = computed(() => [
  `alert-${props.type}`,
  // Add other classes based on props if needed, e.g., for icon presence
]);

const defaultIcons: Record<string, string> = {
  success: 'check-circle',
  warning: 'alert-triangle',
  error: 'alert-octagon', // Or 'x-octagon' / 'alert-circle'
  info: 'info-circle', // Or 'info' / 'bell'
};

const displayIconName = computed(() => {
  if (!props.showIcon) return null;
  return props.icon || defaultIcons[props.type] || 'info-circle'; // Fallback if type is somehow invalid
});

const handleClose = () => {
  internalModelValue.value = false; // Hide it internally
  emit('update:modelValue', false); // Emit for v-model
  emit('close');
};

</script>

<style lang="scss" scoped>
.alert {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1.25rem; // Default padding
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem; // Standard border radius

  // Default alert type (info)
  // These colors should align with valerie-ui.scss variables
  color: #0c5460; // Example: $info-text
  background-color: #d1ecf1; // Example: $info-bg
  border-color: #bee5eb; // Example: $info-border

  &.alert-success {
    color: #155724; // $success-text
    background-color: #d4edda; // $success-bg
    border-color: #c3e6cb; // $success-border
  }
  &.alert-warning {
    color: #856404; // $warning-text
    background-color: #fff3cd; // $warning-bg
    border-color: #ffeeba; // $warning-border
  }
  &.alert-error {
    color: #721c24; // $danger-text
    background-color: #f8d7da; // $danger-bg
    border-color: #f5c6cb; // $danger-border
  }
  // Info is the default if no specific class matches
}

.alert-main-section {
  display: flex;
  align-items: flex-start; // Align icon with the start of the text
}

.alert-icon {
  // margin-right: 0.75rem;
  // font-size: 1.25em; // Make icon slightly larger than text
  // Using VIcon size prop might be better.
  // For now, let's assume VIcon itself has appropriate default sizing or takes it from font-size.
  flex-shrink: 0; // Prevent icon from shrinking
  margin-right: 0.8em;
  margin-top: 0.1em; // Fine-tune vertical alignment with text
  // Default icon color can be inherited or set explicitly if needed
  // e.g., color: currentColor; (though VIcon might handle this)
}

.alert-content {
  flex-grow: 1; // Message area takes available space
  // line-height: 1.5; // Ensure good readability
}

.alert-close-btn {
  background: transparent;
  border: none;
  color: inherit; // Inherit color from parent alert type for better contrast
  opacity: 0.7;
  padding: 0 0.5rem; // Minimal padding
  margin-left: 1rem; // Space it from the content
  font-size: 1.2rem; // Adjust VIcon size if needed via this
  line-height: 1;
  cursor: pointer;

  &:hover {
    opacity: 1;
  }
  // VIcon specific styling if needed
  // ::v-deep(.icon) { font-size: 1em; }
}

.alert-actions {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.1); // Separator for actions
  display: flex;
  justify-content: flex-end; // Align actions to the right
  gap: 0.5rem;
}

// Transition for fade in/out
.alert-fade-enter-active,
.alert-fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.alert-fade-enter-from,
.alert-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px); // Optional: slight slide effect
}
</style>
