<template>
  <div class="view-switcher">
    <a-tabs
      v-model:activeKey="activeKey"
      type="editable-card"
      size="small"
      :hide-add="true"
      @change="onSwitch"
    >
      <a-tab-pane
        v-for="v in views"
        :key="v.id"
        :tab="v.name"
        :closable="false"
      />
    </a-tabs>

    <!-- U4: "新建视图" is a dropdown exposing all 5 view types. Only `grid`
         is enabled in v1; the rest are disabled with a "规划中" tooltip. -->
    <a-dropdown :trigger="['click']" placement="bottomLeft">
      <a-button
        type="text"
        size="small"
        :icon="h(PlusOutlined)"
        :loading="creating"
        :disabled="creating"
      >
        新建视图
      </a-button>
      <template #overlay>
        <a-menu @click="handleTypeClick">
          <a-menu-item
            v-for="meta in VIEW_TYPE_LIST"
            :key="meta.viewType"
            :disabled="meta.disabled"
            :title="meta.tooltip"
          >
            <span class="view-switcher__type-item">
              <component :is="meta.icon" />
              <span>{{ meta.label }}</span>
            </span>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>

    <a-button
      v-if="activeKey"
      type="text"
      size="small"
      :icon="h(FilterOutlined)"
      @click="emit('config')"
    >
      配置
    </a-button>

    <!-- U6: delete the active view. Wrapped in a-popconfirm per spec.
         Disabled when only one view remains — backend rejects with 409
         (last view), so we preempt in the UI to avoid a wasted round-trip.
         ponytail: single delete button for the active view (not per-tab)
         matches the existing "配置" pattern and keeps the tab header clean. -->
    <a-popconfirm
      v-if="activeKey && views.length > 1"
      title="确认删除此视图？"
      ok-text="删除"
      ok-type="danger"
      cancel-text="取消"
      @confirm="handleDelete"
    >
      <a-button
        type="text"
        size="small"
        danger
        :icon="h(DeleteOutlined)"
      >
        删除
      </a-button>
    </a-popconfirm>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, h } from 'vue'
import {
  Tabs as ATabs,
  Button as AButton,
  Popconfirm as APopconfirm,
} from 'ant-design-vue'
import { PlusOutlined, FilterOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import type { IBitableView, ViewType } from '@/api/bitable'
import { VIEW_TYPE_LIST } from '@/helpers/viewSwitcherUtils'

const props = withDefaults(
  defineProps<{
    views: IBitableView[]
    activeViewId: string | null
    /** True while a createView POST is in flight — disables + shows spinner. */
    creating?: boolean
  }>(),
  { creating: false },
)

const emit = defineEmits<{
  (e: 'switch', viewId: string): void
  (e: 'create', viewType: ViewType): void
  (e: 'config'): void
  (e: 'delete', viewId: string): void
}>()

// antd Tabs activeKey is string | number | undefined; bridge to/from null
const activeKey = ref<string | undefined>(props.activeViewId ?? undefined)

watch(
  () => props.activeViewId,
  (val) => {
    activeKey.value = val ?? undefined
  },
)

function onSwitch(key: string | number): void {
  emit('switch', String(key))
}

// U6: emit delete for the active view. The v-if guard on the popconfirm
// already ensures activeKey is set and views.length > 1.
function handleDelete(): void {
  if (activeKey.value) {
    emit('delete', activeKey.value)
  }
}

// a-menu only emits click for enabled items; disabled items are skipped, so
// no extra guard is needed — the "规划中" tooltip is shown via `title`.
function handleTypeClick({ key }: { key: string }): void {
  emit('create', key as ViewType)
}
</script>

<style scoped>
.view-switcher {
  display: flex;
  align-items: center;
  gap: var(--bitable-spacing-sm);
  padding: 0 var(--bitable-spacing-lg);
  border-bottom: 1px solid var(--bitable-color-border);
}

.view-switcher :deep(.ant-tabs) {
  flex: 1;
  min-width: 0;
}

.view-switcher__type-item {
  display: inline-flex;
  align-items: center;
  gap: var(--bitable-spacing-xs);
}
</style>
