<template>
  <a-drawer
    v-model:open="basketStore.drawerVisible"
    title="参考资料篮"
    placement="right"
    :width="420"
  >
    <div class="basket-drawer">
      <div class="basket-summary">
        <span>已收集 {{ basketStore.count }} 项资料</span>
        <a-button type="link" danger :disabled="basketStore.count === 0" @click="basketStore.clearAll">
          清空
        </a-button>
      </div>

      <a-empty v-if="basketStore.count === 0" description="暂未收集资料" />

      <a-list v-else :data-source="basketStore.items" item-layout="vertical">
        <template #renderItem="{ item }">
          <a-list-item class="basket-item">
            <template #actions>
              <span>来源：{{ getSourceLabel(item.selected_from) }}</span>
              <span>级别：{{ item.importance === 'core' ? '核心参考' : '一般参考' }}</span>
              <a-button type="link" danger size="small" @click="basketStore.removeItem(item)">
                移除
              </a-button>
            </template>

            <a-list-item-meta>
              <template #title>
                <div class="basket-item-title">
                  <span>{{ item.title }}</span>
                  <a-tag>{{ getItemTypeLabel(item.item_type) }}</a-tag>
                </div>
              </template>

              <template #description>
                <div class="basket-item-desc">
                  <div v-if="item.doc_code">文号：{{ item.doc_code }}</div>
                  <div v-if="item.note">备注：{{ item.note }}</div>
                  <div v-if="item.item_type === 'snippet'">片段：{{ item.snippet }}</div>
                  <div v-if="item.item_type === 'matter'">事项 ID：{{ item.matter_id }}</div>
                  <div v-if="item.item_type === 'theme'">主题：{{ item.theme_name }}</div>
                </div>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>

    <template #footer>
      <div class="basket-footer">
        <a-button @click="basketStore.closeDrawer">关闭</a-button>
        <a-button @click="openImportDialog" :disabled="basketStore.count === 0">
          批量导入
        </a-button>
        <a-button type="primary" :disabled="basketStore.count === 0" @click="goToResearch">
          前往 Research
        </a-button>
      </div>
    </template>

    <ImportToResearchDialog
      v-model:open="importDialogOpen"
      :items="basketStore.items"
      title="批量处理资料篮中的资料"
      description="可仅保留在资料篮中，也可直接导入当前或新建研究会话。"
      @confirm="handleImportConfirm"
    />
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ImportToResearchDialog from '@/components/ImportToResearchDialog.vue'
import { useResearchImport } from '@/composables/useResearchImport'
import { useBasketStore } from '@/stores/basket'
import type { ResearchImportDialogPayload } from '@/types/research-import'
import { getItemTypeLabel, getSourceLabel } from '@/utils/basketKeys'

const router = useRouter()
const basketStore = useBasketStore()
const { applyImport } = useResearchImport()
const importDialogOpen = ref(false)

function goToResearch() {
  basketStore.closeDrawer()
  router.push('/research/new')
}

function openImportDialog() {
  importDialogOpen.value = true
}

function handleImportConfirm(payload: ResearchImportDialogPayload) {
  applyImport(basketStore.items, payload)
}
</script>

<style scoped lang="less">
.basket-drawer {
  .basket-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    color: #595959;
  }

  .basket-item {
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    padding: 12px;
    margin-bottom: 8px;
    background: #fafafa;
  }

  .basket-item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .basket-item-desc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #595959;
    margin-top: 4px;
  }
}

.basket-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>