<template>
  <div class="message-shell" :class="[`message-shell--${role}`]">
    <div class="message-shell__avatar">
      <slot name="avatar">
        <div
          v-if="avatar || color"
          class="message-shell__custom-avatar"
          :style="{ backgroundColor: color || '#1a1a1a' }"
        >
          {{ avatar || (name ? name.charAt(0).toUpperCase() : '?') }}
        </div>
        <a-avatar v-else-if="role === 'assistant'" :size="28" class="message-shell__avatar--assistant">
          <template #icon><RobotOutlined /></template>
        </a-avatar>
        <a-avatar v-else :size="28" class="message-shell__avatar--user">
          <template #icon><UserOutlined /></template>
        </a-avatar>
      </slot>
    </div>
    <div class="message-shell__body">
      <div class="message-shell__header">
        <span class="message-shell__name">{{ name }}</span>
        <span v-if="meta" class="message-shell__meta">{{ meta }}</span>
      </div>
      <div class="message-shell__content">
        <slot />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Avatar as AAvatar } from 'ant-design-vue'
import { RobotOutlined, UserOutlined } from '@ant-design/icons-vue'

interface Props {
  role: 'user' | 'assistant'
  name?: string
  meta?: string
  avatar?: string
  color?: string
}

withDefaults(defineProps<Props>(), {
  name: undefined,
  meta: undefined,
  avatar: undefined,
  color: undefined,
})
</script>

<style scoped>
.message-shell {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-message-gap);
  animation: shellSlideIn 0.2s ease-out;
}

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

.message-shell--user {
  flex-direction: row-reverse;
}

.message-shell__avatar {
  flex-shrink: 0;
  padding-top: 2px;
}

.message-shell__avatar--assistant {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.message-shell__avatar--user {
  background: var(--text-primary);
  color: var(--text-inverse);
}

.message-shell__custom-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

.message-shell__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.message-shell--user .message-shell__body {
  align-items: flex-end;
}

.message-shell--assistant .message-shell__body {
  align-items: flex-start;
  max-width: 100%;
}

.message-shell__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--font-xs);
}

.message-shell__name {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.message-shell__meta {
  color: var(--text-placeholder);
}

.message-shell__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 100%;
}

.message-shell--user .message-shell__content {
  align-items: flex-end;
}
</style>
