<template>
  <div class="notebook-list-view">
    <div class="list-header">
      <h2>专题写稿</h2>
      <a-space>
        <a-input-search
          v-model:value="searchQuery"
          placeholder="搜索专题写稿…"
          style="width: 240px"
          allow-clear
          @search="handleSearch"
        />
        <a-button type="primary" @click="handleCreate">
          <PlusOutlined /> 新建
        </a-button>
      </a-space>
    </div>

    <a-spin :spinning="store.loading">
      <div class="notebook-grid" v-if="store.notebooks.length">
        <div
          v-for="nb in store.notebooks"
          :key="nb.id"
          class="notebook-card"
          @click="openNotebook(nb.id)"
        >
          <div class="card-header">
            <BookOutlined class="card-icon" />
            <a-dropdown :trigger="['click']" @click.stop>
              <MoreOutlined class="card-more" />
              <template #overlay>
                <a-menu>
                  <a-menu-item @click.stop="handleRename(nb)">
                    <EditOutlined /> 重命名
                  </a-menu-item>
                  <a-menu-item @click.stop="handleArchive(nb.id)">
                    <InboxOutlined /> 归档
                  </a-menu-item>
                  <a-menu-item danger @click.stop="handleDelete(nb.id)">
                    <DeleteOutlined /> 删除
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <div class="card-title">{{ nb.title }}</div>
          <div class="card-desc" v-if="nb.description">{{ nb.description }}</div>
          <div class="card-meta">
            <span v-if="nb.source_count !== undefined">{{ nb.source_count }} 来源</span>
            <span v-if="nb.message_count">{{ nb.message_count }} 条对话</span>
            <span v-if="nb.updated_at" class="card-time">{{ formatDate(nb.updated_at) }}</span>
          </div>
        </div>
      </div>
      <a-empty v-else description="暂无专题写稿" style="margin-top: 80px">
        <template #extra>
          <a-button type="primary" @click="handleCreate">
            <PlusOutlined /> 新建专题写稿
          </a-button>
        </template>
      </a-empty>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  PlusOutlined,
  BookOutlined,
  MoreOutlined,
  EditOutlined,
  InboxOutlined,
  DeleteOutlined,
} from '@ant-design/icons-vue'
import { message, Modal } from 'ant-design-vue'
import { useNotebookStore } from '@/stores/notebook'
import { archiveNotebook } from '@/api/notebook'
import type { Notebook } from '@/types/notebook'

const router = useRouter()
const store = useNotebookStore()
const searchQuery = ref('')

onMounted(() => {
  store.loadNotebooks()
})

function handleSearch() {
  store.loadNotebooks({ q: searchQuery.value || undefined })
}

async function handleCreate() {
  const id = await store.createNotebook('未命名专题写稿')
  router.push(`/notebook/${id}`)
}

function openNotebook(id: string) {
  router.push(`/notebook/${id}`)
}

async function handleRename(nb: Notebook) {
  const newTitle = prompt('输入新名称', nb.title)
  if (newTitle && newTitle.trim() && newTitle !== nb.title) {
    await store.updateNotebook(nb.id, { title: newTitle.trim() })
    await store.loadNotebooks()
  }
}

async function handleArchive(id: string) {
  await archiveNotebook(id)
  message.success('已归档')
  store.loadNotebooks()
}

function handleDelete(id: string) {
  Modal.confirm({
    title: '确认删除',
    content: '删除后所有来源、对话和输出文档将被清除。确定删除？',
    okText: '删除',
    okType: 'danger',
    async onOk() {
      await store.deleteNotebook(id)
      message.success('已删除')
    },
  })
}

function formatDate(ts: string): string {
  const d = new Date(ts)
  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
}
</script>

<style scoped lang="less">
.notebook-list-view {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;

  h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
  }
}

.notebook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.notebook-card {
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    border-color: #91caff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;

  .card-icon {
    font-size: 24px;
    color: #1890ff;
  }

  .card-more {
    cursor: pointer;
    color: #8c8c8c;
    font-size: 16px;

    &:hover {
      color: #1890ff;
    }
  }
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-desc {
  font-size: 13px;
  color: #8c8c8c;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #595959;

  .card-time {
    margin-left: auto;
  }
}
</style>
