<template>
  <component
    :is="clickable && userId ? 'button' : 'div'"
    type="button"
    class="author-info flex items-center gap-2 min-w-0 text-left"
    :class="[
      variant === 'compact' ? 'gap-2' : 'gap-3 md:gap-4',
      themeClasses.wrapper,
      clickable && userId ? 'cursor-pointer group/author hover:opacity-90 transition-opacity border-0 bg-transparent p-0 m-0' : ''
    ]"
    @click="handleClick"
  >
    <div
      class="shrink-0 overflow-hidden flex items-center justify-center border rounded-full"
      :class="[avatarSizeClass, themeClasses.avatarBorder]"
    >
      <img
        v-if="avatar"
        :src="avatar"
        :alt="displayName"
        class="w-full h-full object-cover"
      />
      <span
        v-else
        class="font-semibold uppercase"
        :class="[placeholderTextClass, themeClasses.placeholder]"
      >
        {{ placeholderLetter }}
      </span>
    </div>

    <div class="min-w-0 flex-1">
      <div
        class="font-medium truncate"
        :class="[nameTextClass, themeClasses.name]"
      >
        {{ displayName }}
      </div>
      <div
        v-if="showEmail && displayEmail"
        class="truncate"
        :class="[emailTextClass, themeClasses.email]"
      >
        {{ displayEmail }}
      </div>
      <div
        v-else-if="variant === 'full' && !displayEmail && userId"
        class="truncate opacity-60"
        :class="[emailTextClass, themeClasses.email]"
      >
        用户#{{ userId }}
      </div>
    </div>
  </component>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUserProfileModal } from '../composables/useUserProfileModal'

const props = withDefaults(defineProps<{
  name?: string
  email?: string
  avatar?: string
  userId?: number
  size?: 'sm' | 'md'
  variant?: 'full' | 'compact'
  theme?: 'default' | 'onDark' | 'onImage'
  showEmail?: boolean
  clickable?: boolean
}>(), {
  size: 'sm',
  variant: 'compact',
  theme: 'default',
  showEmail: true,
  clickable: true,
})

const { openUserProfile } = useUserProfileModal()

const handleClick = () => {
  if (props.clickable && props.userId) {
    openUserProfile(props.userId)
  }
}

const displayName = computed(() => {
  if (props.name) return props.name
  if (props.userId) return `用户#${props.userId}`
  return '未知作者'
})

const displayEmail = computed(() => props.email || '')

const placeholderLetter = computed(() => {
  const source = props.name || (props.userId ? String(props.userId) : '?')
  return source.charAt(0).toUpperCase()
})

const avatarSizeClass = computed(() => {
  if (props.variant === 'full') {
    return props.size === 'md' ? 'w-10 h-10 md:w-12 md:h-12' : 'w-8 h-8 md:w-10 md:h-10'
  }
  return props.size === 'md' ? 'w-8 h-8' : 'w-6 h-6'
})

const nameTextClass = computed(() => {
  if (props.variant === 'full') return 'text-xs md:text-sm'
  return props.size === 'md' ? 'text-sm' : 'text-xs'
})

const emailTextClass = computed(() => {
  if (props.variant === 'full') return 'text-[10px] md:text-xs'
  return 'text-[10px]'
})

const placeholderTextClass = computed(() => {
  return props.size === 'md' ? 'text-xs' : 'text-[10px]'
})

const themeClasses = computed(() => {
  switch (props.theme) {
    case 'onImage':
      return {
        wrapper: '',
        avatarBorder: 'border-white/30 bg-white/10',
        placeholder: 'text-white/80',
        name: 'text-white',
        email: 'text-white/70'
      }
    case 'onDark':
      return {
        wrapper: '',
        avatarBorder: 'border-white/20 bg-white/5',
        placeholder: 'text-art-accent',
        name: 'text-white',
        email: 'text-art-muted'
      }
    default:
      return {
        wrapper: '',
        avatarBorder: 'border-white/20 bg-white/5',
        placeholder: 'text-art-accent',
        name: 'text-white',
        email: 'text-art-muted'
      }
  }
})
</script>
