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

import { ArrowDown, Check } from '@element-plus/icons-vue';
import {
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
} from 'element-plus';

interface AssistantOption {
  label: string;
  value: string;
}

const props = withDefaults(
  defineProps<{
    assistantId?: string;
    assistantName?: string;
    assistantOptions?: AssistantOption[];
    disabled?: boolean;
    loading?: boolean;
    placeholder?: string;
  }>(),
  {
    assistantId: undefined,
    assistantName: '',
    assistantOptions: () => [],
    disabled: false,
    loading: false,
    placeholder: '选择智能体',
  },
);

const emit = defineEmits<{
  'update:assistantId': [value?: string];
}>();

const currentLabel = computed(() => {
  if (props.assistantName?.trim()) {
    return props.assistantName.trim();
  }
  return (
    props.assistantOptions.find((item) => item.value === props.assistantId)?.label ||
    props.placeholder
  );
});

function handleCommand(value: string) {
  emit('update:assistantId', value || undefined);
}
</script>

<template>
  <ElDropdown
    class="assistant-inline-picker"
    :disabled="disabled"
    trigger="click"
    @command="handleCommand"
  >
    <button
      type="button"
      class="assistant-inline-picker__trigger"
      :class="{
        'is-placeholder': !assistantId,
        'is-disabled': disabled,
      }"
    >
      <span class="assistant-inline-picker__label">
        {{ loading ? '加载智能体中' : currentLabel }}
      </span>
      <ArrowDown class="assistant-inline-picker__arrow" />
    </button>

    <template #dropdown>
      <ElDropdownMenu class="assistant-inline-picker__menu">
        <ElDropdownItem
          v-for="item in assistantOptions"
          :key="item.value"
          :command="item.value"
          class="assistant-inline-picker__item"
        >
          <span class="assistant-inline-picker__item-label">
            {{ item.label }}
          </span>
          <Check
            v-if="item.value === assistantId"
            class="assistant-inline-picker__item-check"
          />
        </ElDropdownItem>
        <ElDropdownItem
          v-if="assistantOptions.length === 0"
          disabled
          class="assistant-inline-picker__item is-empty"
        >
          暂无可用智能体
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>

<style scoped>
.assistant-inline-picker {
  display: inline-flex;
  vertical-align: middle;
}

.assistant-inline-picker__trigger {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  max-width: min(100%, 360px);
  min-height: 42px;
  padding: 0 14px;
  font-size: 22px;
  font-weight: 680;
  line-height: 1;
  color: hsl(var(--text-strong));
  border: 1px solid hsl(var(--divider-faint) / 0.82);
  border-radius: 999px;
  background: hsl(var(--surface-panel));
  box-shadow: 0 12px 28px -24px hsl(var(--foreground) / 0.22);
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease;
}

.assistant-inline-picker__trigger:hover:not(.is-disabled) {
  border-color: hsl(var(--primary) / 0.22);
  background: hsl(var(--surface-subtle));
}

.assistant-inline-picker__trigger:focus-visible {
  outline: 2px solid hsl(var(--primary) / 0.28);
  outline-offset: 2px;
}

.assistant-inline-picker__trigger.is-placeholder {
  color: hsl(var(--text-muted));
}

.assistant-inline-picker__trigger.is-disabled {
  cursor: default;
  opacity: 0.72;
}

.assistant-inline-picker__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-inline-picker__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  color: hsl(var(--text-muted));
}

.assistant-inline-picker__menu :deep(.el-dropdown-menu__item) {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 220px;
  padding: 10px 14px;
  font-size: 13px;
  color: hsl(var(--text-strong));
}

.assistant-inline-picker__item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-inline-picker__item-check {
  flex: none;
  width: 14px;
  height: 14px;
  color: hsl(var(--primary));
}

.assistant-inline-picker__item.is-empty {
  justify-content: center;
  color: hsl(var(--text-muted));
}

@media (max-width: 768px) {
  .assistant-inline-picker__trigger {
    max-width: 100%;
    min-height: 38px;
    padding-inline: 12px;
    font-size: 18px;
  }
}
</style>
