<script setup lang="ts">
import type { CardStatus } from '../../composables/useCardStatus'

const props = withDefaults(defineProps<{
  title?: string
  description?: string
  icon?: string
  loading?: boolean
  status?: CardStatus
  showRefreshButton?: boolean
  /**
   * Function to call when refresh button is triggered
   */
  onRefresh?: () => Promise<void> | void
}>(), {
  status: () => ({
    message: '',
    description: '',
    color: 'neutral',
    icon: ''
  }),
  showRefreshButton: true
})

const emit = defineEmits<{
  'update:status': [status: CardStatus]
  'update:refresh': [refresh: boolean]
}>()

const clearStatus = () => {
  emit('update:status', {
    message: '',
    description: '',
    color: 'neutral',
    icon: ''
  })
}

onMounted(() => {
  clearStatus()
})

onUnmounted(() => {
  clearStatus()
})

watch(() => props.status?.message, (newMessage) => {
  if (newMessage) {
    setTimeout(() => {
      clearStatus()
    }, 5000)
  }
})
</script>

<template>
  <UCard>
    <template #header>
      <div class="flex">
        <div class="flex items-start gap-3">
          <div class="flex flex-col items-center justify-center -ml-1 mt-2">
            <UButton
              v-if="icon"
              :icon="icon"
              color="neutral"
              variant="soft"
              :loading="loading"
              size="xl"
              :ui="{
                base: 'aspect-square rounded-full items-center justify-center w-13 h-13'
              }"
            />
          </div>
          <div class="flex flex-col">
            <h2 class="mt-2! mb-1!">
              {{ title }}
            </h2>
            <p class="text-sm text-muted mb-2">
              {{ description }}
            </p>
          </div>
        </div>
        <div class="flex-1 justify-end pt-3">
          <div class="flex justify-end items-center gap-2">
            <slot name="header-actions" />
            <UButton
              v-if="showRefreshButton"
              :icon="useSolarIcon('refresh')"
              variant="soft"
              color="neutral"
              size="sm"
              :loading="loading"
              @click="onRefresh"
            />
          </div>
        </div>
      </div>
      <div
        v-if="$slots.header"
        class="flex items-start gap-3 mt-3 pt-5 border-t border-neutral-100 dark:border-white/10"
      >
        <slot name="header" />
      </div>
    </template>
    <div class="space-y-5">
      <slot />
    </div>
    <template
      v-if="$slots['footer-actions']"
      #footer
    >
      <div class="flex gap-4">
        <div class="flex-1 justify-start">
          <UAlert
            v-if="props.status.message"
            :color="props.status.color"
            variant="soft"
            :ui="{
              root: 'px-4 py-2 transition-opacity duration-500 ease-in-out'
            }"
          >
            <template #title>
              <div class="flex items-center justify-between gap-3">
                <span>{{ props.status.message }}</span>
              </div>
            </template>
            <template
              v-if="props.status.description"
              #description
            >
              {{ props.status.description }}
            </template>
          </UAlert>
        </div>
        <div class="flex justify-end gap-4 h-auto pb-1">
          <slot name="footer-actions" />
        </div>
      </div>
    </template>
  </UCard>
</template>
