<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useBookmarkStore } from '@/stores/bookmark'
import type { Bookmark } from '@/types'
import { VisibilityType } from '@/types'

const props = defineProps<{
  bookmarks: Bookmark[]
  loading: boolean
}>()

const emit = defineEmits<{
  edit: [bookmark: Bookmark]
}>()

const bookmarkStore = useBookmarkStore()
const selectedIds = ref<string[]>([])

function getVisibilityText(visibility: VisibilityType) {
  const map = {
    [VisibilityType.Public]: '公开',
    [VisibilityType.Private]: '私密',
    [VisibilityType.Specified]: '指定设备'
  }
  return map[visibility] || '公开'
}

function getVisibilityType(visibility: VisibilityType) {
  const map = {
    [VisibilityType.Public]: 'success',
    [VisibilityType.Private]: 'danger',
    [VisibilityType.Specified]: 'warning'
  }
  return map[visibility] || 'success'
}

async function handleVisit(bookmark: Bookmark) {
  await bookmarkStore.recordVisit(bookmark.id)
  window.open(bookmark.url, '_blank')
}

function handleEdit(bookmark: Bookmark) {
  emit('edit', bookmark)
}

async function handleDelete(bookmark: Bookmark) {
  try {
    await ElMessageBox.confirm(
      `确定要删除书签 "${bookmark.title}" 吗？`,
      '删除确认',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    const response = await bookmarkStore.deleteBookmark(bookmark.id)
    if (response.success) {
      ElMessage.success('删除成功')
    }
  } catch {
    // 取消
  }
}

async function handleBatchDelete() {
  if (selectedIds.value.length === 0) {
    ElMessage.warning('请先选择要删除的书签')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedIds.value.length} 个书签吗？`,
      '批量删除确认',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    const response = await bookmarkStore.batchDeleteBookmarks(selectedIds.value)
    if (response.success) {
      ElMessage.success(`成功删除 ${response.data} 个书签`)
      selectedIds.value = []
    }
  } catch {
    // 取消
  }
}

function handleSelectionChange(selection: Bookmark[]) {
  selectedIds.value = selection.map(b => b.id)
}
</script>

<template>
  <div class="bookmark-list">
    <!-- 批量操作栏 -->
    <div v-if="selectedIds.length > 0" class="batch-actions">
      <span>已选择 {{ selectedIds.length }} 项</span>
      <el-button type="danger" size="small" @click="handleBatchDelete">
        批量删除
      </el-button>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <el-skeleton :rows="5" animated />
    </div>

    <!-- 空状态 -->
    <el-empty
      v-else-if="bookmarks.length === 0"
      description="暂无书签"
    />

    <!-- 书签表格 -->
    <el-table
      v-else
      :data="bookmarks"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="40" />
      
      <el-table-column label="书签" min-width="300">
        <template #default="{ row }">
          <div class="bookmark-cell">
            <img
              v-if="row.icon"
              :src="row.icon"
              class="favicon"
              @error="($event.target as HTMLImageElement).style.display = 'none'"
            />
            <span v-else class="favicon-placeholder">{{ row.title[0] }}</span>
            <div class="bookmark-info">
              <a class="title" @click="handleVisit(row)">{{ row.title }}</a>
              <span class="url">{{ row.url }}</span>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="标签" width="200">
        <template #default="{ row }">
          <div class="tags">
            <el-tag
              v-for="tag in row.tags.slice(0, 3)"
              :key="tag"
              size="small"
              type="info"
            >
              {{ tag }}
            </el-tag>
            <el-tag v-if="row.tags.length > 3" size="small" type="info">
              +{{ row.tags.length - 3 }}
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="可见性" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="getVisibilityType(row.visibility)" size="small">
            {{ getVisibilityText(row.visibility) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="访问" width="80" align="center">
        <template #default="{ row }">
          <span class="visit-count">{{ row.visitCount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120" align="center">
        <template #default="{ row }">
          <el-button-group>
            <el-button size="small" @click="handleEdit(row)">
              <el-icon><Edit /></el-icon>
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">
              <el-icon><Delete /></el-icon>
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.bookmark-list {
  .batch-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px;
    background: #fef0f0;
    border-radius: 8px;
    
    span {
      color: #f56c6c;
      font-size: 14px;
    }
  }

  .loading-state {
    padding: 20px;
  }

  .bookmark-cell {
    display: flex;
    align-items: center;
    gap: 12px;

    .favicon {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      flex-shrink: 0;
    }

    .favicon-placeholder {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      flex-shrink: 0;
    }

    .bookmark-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;

      .title {
        font-weight: 500;
        color: #333;
        cursor: pointer;
        
        &:hover {
          color: #667eea;
        }
      }

      .url {
        font-size: 12px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .visit-count {
    color: #999;
    font-size: 13px;
  }
}
</style>

