<script setup lang="ts">
import { computed, ref, watch } from 'vue';

import { ArrowRight } from '@element-plus/icons-vue';
import { useResizeObserver } from '@vueuse/core';
import { ElIcon } from 'element-plus';

const props = defineProps<{
  agentName: string;
  avatar?: string;
  disabled?: boolean;
  suggestedQuestions?: string[];
  welcomeMessage: string;
}>();

const emit = defineEmits<{
  selectQuestion: [question: string];
}>();

const avatarFailed = ref(false);
const welcomeRef = ref<HTMLElement>();
const legacyCompact = ref(false);
const headingId = `agent-welcome-${Math.random().toString(36).slice(2, 9)}`;
const initial = computed(() => [...props.agentName.trim()][0] || 'A');
const needsContainerQueryFallback =
  typeof CSS === 'undefined' || !CSS.supports('container-type', 'inline-size');

useResizeObserver(welcomeRef, ([entry]) => {
  if (!needsContainerQueryFallback || !entry) return;
  legacyCompact.value = entry.contentRect.width <= 560;
});

watch(
  () => props.avatar,
  () => {
    avatarFailed.value = false;
  },
);
</script>

<template>
  <section
    ref="welcomeRef"
    class="agent-welcome"
    :class="{ 'is-legacy-compact': legacyCompact }"
    :aria-labelledby="headingId"
  >
    <div class="agent-welcome__content">
      <div class="agent-welcome__avatar" aria-hidden="true">
        <img
          v-if="avatar && !avatarFailed"
          :src="avatar"
          alt=""
          @error="avatarFailed = true"
        />
        <span v-else>{{ initial }}</span>
      </div>
      <h2 :id="headingId" class="agent-welcome__name">{{ agentName }}</h2>
      <p class="agent-welcome__message">{{ welcomeMessage }}</p>

      <div v-if="suggestedQuestions?.length" class="agent-welcome__suggestions">
        <div class="agent-welcome__suggestions-title">猜你想问</div>
        <div class="agent-welcome__suggestions-grid">
          <button
            v-for="question in suggestedQuestions"
            :key="question"
            class="agent-welcome__question"
            type="button"
            :title="question"
            :disabled="disabled"
            @click="emit('selectQuestion', question)"
            @keydown.enter.stop.prevent="emit('selectQuestion', question)"
            @keydown.space.stop.prevent="emit('selectQuestion', question)"
          >
            <span>{{ question }}</span>
            <ElIcon aria-hidden="true"><ArrowRight /></ElIcon>
          </button>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.agent-welcome {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 100%;
  padding: var(--space-8) 0;
  container-type: inline-size;
}

.agent-welcome__content {
  width: min(680px, 100%);
  margin: auto;
  text-align: center;
}

.agent-welcome__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  font-size: 20px;
  font-weight: 600;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border: 1px solid var(--el-color-primary-light-8);
  border-radius: var(--radius-panel);
}

.agent-welcome__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-welcome__name {
  margin: var(--space-3) 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: hsl(var(--text-strong));
}

.agent-welcome__message {
  max-width: 640px;
  margin: var(--space-2) auto 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--el-text-color-regular);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.agent-welcome__suggestions {
  margin-top: var(--space-6);
  text-align: left;
}

.agent-welcome__suggestions-title {
  margin-bottom: var(--space-2);
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--text-muted));
}

.agent-welcome__suggestions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.agent-welcome__question {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: var(--space-2);
  align-items: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--el-text-color-primary);
  text-align: left;
  cursor: pointer;
  background: hsl(var(--surface-subtle));
  border: 1px solid hsl(var(--line-subtle));
  border-radius: var(--radius-toolbar);
  transition:
    color var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.agent-welcome__question span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
}

.agent-welcome__question .el-icon {
  color: hsl(var(--text-muted));
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.agent-welcome__question:hover:not(:disabled) {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-7);
  transform: translateY(-1px);
}

.agent-welcome__question:active:not(:disabled) {
  background: var(--el-color-primary-light-8);
  transform: translateY(0);
}

.agent-welcome__question:hover:not(:disabled) .el-icon {
  color: var(--el-color-primary);
  transform: translateX(2px);
}

.agent-welcome__question:focus-visible {
  outline: 2px solid var(--el-color-primary-light-5);
  outline-offset: 2px;
}

.agent-welcome__question:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

@container (max-width: 560px) {
  .agent-welcome__suggestions-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .agent-welcome__message {
    font-size: 16px;
  }
}

.agent-welcome.is-legacy-compact .agent-welcome__suggestions-grid {
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.agent-welcome.is-legacy-compact .agent-welcome__message {
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .agent-welcome__question,
  .agent-welcome__question .el-icon {
    transition: none;
  }
}
</style>
