<script setup>
import { computed } from 'vue'
import { formatDistanceToNow } from 'date-fns'
import { zhCN } from 'date-fns/locale'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  link: {
    type: Object,
    default: () => ({}),
  },
})

const emit = defineEmits(['update:modelValue', 'edit', 'open', 'delete'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
})

const link = computed(() => props.link || {})

const createdLabel = computed(() => {
  if (!link.value.createdAt) return ''
  try {
    return formatDistanceToNow(new Date(link.value.createdAt), { addSuffix: true, locale: zhCN })
  } catch {
    return ''
  }
})

const updatedLabel = computed(() => {
  if (!link.value.updatedAt) return ''
  try {
    return formatDistanceToNow(new Date(link.value.updatedAt), { addSuffix: true, locale: zhCN })
  } catch {
    return ''
  }
})

const lastVisitLabel = computed(() => {
  if (!link.value.lastVisitTime) return '从未访问'
  try {
    return formatDistanceToNow(new Date(link.value.lastVisitTime), { addSuffix: true, locale: zhCN })
  } catch {
    return '从未访问'
  }
})

function handleEdit() {
  emit('edit', link.value)
  visible.value = false
}

function handleOpen() {
  emit('open', link.value)
}

function handleDelete() {
  emit('delete', link.value)
  visible.value = false
}
</script>

<template>
  <el-dialog v-model="visible" title="查看书签" width="600px" destroy-on-close>
    <div v-if="link.id" class="link-view-content">
      <div class="view-section">
        <div class="view-label">标题</div>
        <div class="view-value">{{ link.title || '-' }}</div>
      </div>

      <div class="view-section">
        <div class="view-label">链接地址</div>
        <div class="view-value url-value">
          <a :href="link.url" target="_blank" rel="noopener noreferrer" class="url-link">
            {{ link.url || '-' }}
          </a>
        </div>
      </div>

      <div v-if="link.description" class="view-section">
        <div class="view-label">描述</div>
        <div class="view-value">{{ link.description }}</div>
      </div>

      <div v-if="link.tags && link.tags.length > 0" class="view-section">
        <div class="view-label">标签</div>
        <div class="view-value">
          <el-tag v-for="tag in link.tags" :key="tag" size="small" style="margin-right: 8px; margin-bottom: 4px">
            {{ tag }}
          </el-tag>
        </div>
      </div>

      <div class="view-section">
        <div class="view-label">访问统计</div>
        <div class="view-value">
          <div>访问次数：{{ link.visitCount || 0 }} 次</div>
          <div v-if="link.lastVisitTime" class="sub-info">
            最后访问：{{ lastVisitLabel }}
          </div>
          <div v-else class="sub-info">最后访问：从未访问</div>
        </div>
      </div>

      <div class="view-section">
        <div class="view-label">时间信息</div>
        <div class="view-value">
          <div>创建时间：{{ createdLabel }}</div>
          <div v-if="updatedLabel" class="sub-info">
            更新时间：{{ updatedLabel }}
          </div>
        </div>
      </div>
    </div>
    <div v-else class="empty-state">
      <el-empty description="书签信息不存在" />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="danger" text @click="handleDelete">删除</el-button>
        <el-button type="primary" @click="handleOpen">打开链接</el-button>
        <el-button type="primary" @click="handleEdit">编辑</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.link-view-content {
  padding: 8px 0;
}

.view-section {
  margin-bottom: 20px;
}

.view-section:last-child {
  margin-bottom: 0;
}

.view-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.view-value {
  font-size: 14px;
  color: var(--color-text-primary);
  line-height: 1.6;
  word-break: break-word;
}

.url-value {
  max-width: 100%;
  overflow-wrap: break-word;
}

.url-link {
  color: var(--color-accent);
  text-decoration: none;
}

.url-link:hover {
  text-decoration: underline;
}

.empty-state {
  padding: 40px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.sub-info {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 13px;
}
</style>

