<template>
  <div class="coi-empty" :class="sizeClass">
    <div class="coi-empty__content">
      <!-- 图标区域 -->
      <div class="coi-empty__icon-wrapper">
        <div class="coi-empty__icon-bg" />
        <NIcon class="coi-empty__icon" :size="iconSize" :color="iconColor">
          <component :is="iconComponent" />
        </NIcon>
      </div>

      <!-- 文字区域 -->
      <div class="coi-empty__text">
        <h3 class="coi-empty__title">
          {{ title }}
        </h3>
        <p v-if="description" class="coi-empty__description">
          {{ description }}
        </p>
      </div>

      <!-- 操作按钮区域 -->
      <div v-if="showAction" class="coi-empty__actions">
        <slot name="action">
          <NButton
            v-if="actionText"
            :type="actionType"
            :size="actionButtonSize"
            round
            class="coi-empty__action-btn"
            @click="handleAction"
          >
            <template v-if="actionIcon" #icon>
              <NIcon class="coi-empty__action-icon">
                <component :is="actionIconComponent" />
              </NIcon>
            </template>
            {{ actionText }}
          </NButton>
        </slot>
      </div>
    </div>

    <!-- 装饰性背景元素 -->
    <div class="coi-empty__decorations">
      <div class="decoration-circle decoration-circle--1" />
      <div class="decoration-circle decoration-circle--2" />
      <div class="decoration-circle decoration-circle--3" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { NButton, NIcon } from 'naive-ui'

export interface CoiEmptyProps {
  type?: 'default' | 'search' | 'network' | 'permission' | 'custom'
  title?: string
  description?: string
  iconSize?: number
  iconColor?: string
  icon?: any
  showAction?: boolean
  actionText?: string
  actionType?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'
  actionSize?: 'tiny' | 'small' | 'medium' | 'large'
  actionIcon?: any
  size?: 'small' | 'medium' | 'large'
}

interface CoiEmptyEmits {
  action: []
}

const props = withDefaults(defineProps<CoiEmptyProps>(), {
  type: 'default',
  title: '',
  description: '',
  iconSize: 0,
  iconColor: '#d1d5db',
  icon: undefined,
  showAction: false,
  actionText: '',
  actionType: 'primary',
  actionSize: 'medium',
  actionIcon: undefined,
  size: 'medium',
})

const emit = defineEmits<CoiEmptyEmits>()

// 预定义的类型配置
const typeConfigs = {
  default: {
    title: '暂无数据',
    description: '当前没有可显示的数据',
    icon: 'icon-park-outline:inbox',
  },
  search: {
    title: '搜索无结果',
    description: '未找到符合条件的数据，请尝试调整搜索条件',
    icon: 'icon-park-outline:search',
  },
  network: {
    title: '网络异常',
    description: '网络连接出现问题，请检查网络连接后重试',
    icon: 'icon-park-outline:wifi-error',
  },
  permission: {
    title: '暂无权限',
    description: '您没有访问此内容的权限，请联系管理员',
    icon: 'icon-park-outline:lock',
  },
  custom: {
    title: '自定义状态',
    description: '这是一个自定义的空状态',
    icon: 'icon-park-outline:folder-close',
  },
}

// 计算图标组件
const iconComponent = computed(() => {
  if (props.icon) {
    return props.icon
  }
  return typeConfigs[props.type].icon
})

// 计算标题
const title = computed(() => {
  if (props.title) {
    return props.title
  }
  return typeConfigs[props.type].title
})

// 计算描述
const description = computed(() => {
  if (props.description) {
    return props.description
  }
  return typeConfigs[props.type].description
})

// 尺寸相关计算属性
const sizeClass = computed(() => `coi-empty--${props.size}`)

const iconSize = computed(() => {
  if (props.iconSize > 0) {
    return props.iconSize
  }
  const sizeMap = {
    small: 60,
    medium: 80,
    large: 100,
  }
  return sizeMap[props.size]
})

const actionButtonSize = computed(() => {
  if (props.actionSize !== 'medium') {
    return props.actionSize
  }
  const sizeMap = {
    small: 'small',
    medium: 'medium',
    large: 'large',
  }
  return sizeMap[props.size] as any
})

const actionIconComponent = computed(() => {
  if (props.actionIcon) {
    return props.actionIcon
  }
  // 如果没有传入操作图标，根据类型返回默认图标
  if (props.type === 'search') {
    return 'icon-park-outline:refresh'
  }
  return 'icon-park-outline:plus'
})

// 处理操作按钮点击
function handleAction() {
  emit('action')
}
</script>

<style scoped>
.coi-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
}

.coi-empty__content {
  text-align: center;
  max-width: 400px;
  position: relative;
  z-index: 2;
  animation: fadeInUp 0.6s ease-out;
}

.coi-empty__icon-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 24px;
}

.coi-empty__icon-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  opacity: 0.8;
  animation: pulse 3s ease-in-out infinite;
}

.coi-empty__icon {
  position: relative;
  z-index: 1;
  color: #8b5cf6;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  animation: float 4s ease-in-out infinite;
}

.coi-empty__text {
  margin-bottom: 32px;
}

.coi-empty__title {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 12px 0;
  line-height: 1.5;
  letter-spacing: 0.5px;
  animation: slideInDown 0.6s ease-out 0.2s both;
}

.coi-empty__description {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.6;
  animation: slideInDown 0.6s ease-out 0.4s both;
}

.coi-empty__actions {
  animation: slideInUp 0.6s ease-out 0.6s both;
}

.coi-empty__action-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
}

.coi-empty__action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.coi-empty__action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.coi-empty__action-btn:hover::before {
  left: 100%;
}

.coi-empty__action-icon {
  margin-right: 4px;
  transition: transform 0.3s ease;
}

.coi-empty__action-btn:hover .coi-empty__action-icon {
  transform: scale(1.1);
}

/* 装饰性背景元素 */
.coi-empty__decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  opacity: 0.6;
  animation: float 6s ease-in-out infinite;
}

.decoration-circle--1 {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.decoration-circle--2 {
  width: 60px;
  height: 60px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.decoration-circle--3 {
  width: 40px;
  height: 40px;
  top: 80%;
  left: 20%;
  animation-delay: 4s;
}

/* 小尺寸 */
.coi-empty--small {
  min-height: 300px;
  padding: 30px 15px;
}

.coi-empty--small .coi-empty__content {
  max-width: 300px;
}

.coi-empty--small .coi-empty__icon-wrapper {
  margin-bottom: 20px;
}

.coi-empty--small .coi-empty__icon-bg {
  width: 90px;
  height: 90px;
}

.coi-empty--small .coi-empty__text {
  margin-bottom: 24px;
}

.coi-empty--small .coi-empty__title {
  font-size: 16px;
}

.coi-empty--small .coi-empty__description {
  font-size: 13px;
}

/* 中尺寸（默认） */
.coi-empty--medium {
  min-height: 400px;
  padding: 40px 20px;
}

.coi-empty--medium .coi-empty__content {
  max-width: 400px;
}

.coi-empty--medium .coi-empty__icon-wrapper {
  margin-bottom: 24px;
}

.coi-empty--medium .coi-empty__icon-bg {
  width: 120px;
  height: 120px;
}

.coi-empty--medium .coi-empty__text {
  margin-bottom: 32px;
}

.coi-empty--medium .coi-empty__title {
  font-size: 18px;
}

.coi-empty--medium .coi-empty__description {
  font-size: 14px;
}

/* 大尺寸 */
.coi-empty--large {
  min-height: 500px;
  padding: 50px 25px;
}

.coi-empty--large .coi-empty__content {
  max-width: 500px;
}

.coi-empty--large .coi-empty__icon-wrapper {
  margin-bottom: 28px;
}

.coi-empty--large .coi-empty__icon-bg {
  width: 150px;
  height: 150px;
}

.coi-empty--large .coi-empty__text {
  margin-bottom: 40px;
}

.coi-empty--large .coi-empty__title {
  font-size: 20px;
}

.coi-empty--large .coi-empty__description {
  font-size: 15px;
}

.coi-empty--large .coi-empty__action-btn {
  padding: 14px 28px;
  font-size: 14px;
}

/* 动画定义 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.6;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .coi-empty {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .coi-empty__icon-bg {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    opacity: 0.6;
  }

  .coi-empty__icon {
    color: #a78bfa;
  }

  .coi-empty__title {
    color: #e5e7eb;
  }

  .coi-empty__description {
    color: #9ca3af;
  }

  .decoration-circle {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    opacity: 0.4;
  }

  .coi-empty__action-btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .coi-empty__action-btn:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
}

/* 响应式设计 */
@media (max-width: 640px) {
  .coi-empty {
    min-height: 320px;
    padding: 32px 16px;
  }

  .coi-empty__title {
    font-size: 16px;
  }

  .coi-empty__description {
    font-size: 13px;
  }

  .coi-empty__icon-bg {
    width: 100px !important;
    height: 100px !important;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .coi-empty__content,
  .coi-empty__title,
  .coi-empty__description,
  .coi-empty__actions,
  .coi-empty__icon-bg,
  .coi-empty__icon,
  .decoration-circle {
    animation: none !important;
  }

  .coi-empty__action-btn {
    transition: none !important;
  }

  .coi-empty__action-btn:hover {
    transform: none !important;
  }
}
</style>
