<template>
  <div class="data-manager-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-info">
        <h1>数据管理</h1>
        <p>管理对话历史、数据源和系统数据</p>
      </div>
      <div class="header-actions">
        <n-button @click="exportData">
          <template #icon>
            <n-icon :component="DownloadIcon" />
          </template>
          导出数据
        </n-button>
        <n-button type="error" @click="showClearModal = true">
          <template #icon>
            <n-icon :component="TrashIcon" />
          </template>
          清理数据
        </n-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <n-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon">
            <n-icon :component="MessageIcon" size="24" color="#18a058" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ conversations.length }}</div>
            <div class="stat-label">对话数量</div>
          </div>
        </div>
      </n-card>

      <n-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon">
            <n-icon :component="DatabaseIcon" size="24" color="#2080f0" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ getTotalMessages() }}</div>
            <div class="stat-label">消息总数</div>
          </div>
        </div>
      </n-card>

      <n-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon">
            <n-icon :component="ClockIcon" size="24" color="#f0a020" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ getStorageSize() }}</div>
            <div class="stat-label">存储使用</div>
          </div>
        </div>
      </n-card>

      <n-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon">
            <n-icon :component="CalendarIcon" size="24" color="#d03050" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ getLastActiveDate() }}</div>
            <div class="stat-label">最后活动</div>
          </div>
        </div>
      </n-card>
    </div>

    <!-- 对话历史列表 -->
    <div class="conversations-section">
      <div class="section-header">
        <h2>对话历史</h2>
        <div class="section-actions">
          <n-input
            v-model:value="searchKeyword"
            placeholder="搜索对话..."
            clearable
            style="width: 240px"
          >
            <template #prefix>
              <n-icon :component="SearchIcon" />
            </template>
          </n-input>
        </div>
      </div>

      <div v-if="filteredConversations.length === 0" class="empty-state">
        <div class="empty-icon">
          <n-icon :component="MessageIcon" size="48" />
        </div>
        <h3>{{ searchKeyword ? '未找到匹配的对话' : '暂无对话历史' }}</h3>
        <p>{{ searchKeyword ? '尝试使用其他关键词搜索' : '开始一个新对话吧' }}</p>
      </div>

      <div v-else class="conversations-list">
        <n-card
          v-for="conv in filteredConversations"
          :key="conv.id"
          class="conversation-card"
          hoverable
        >
          <div class="conversation-header">
            <div class="conversation-info">
              <h3 class="conversation-title">{{ conv.title || '未命名对话' }}</h3>
              <div class="conversation-meta">
                <span class="meta-item">
                  <n-icon :component="MessageIcon" size="14" />
                  {{ conv.messages.length }} 条消息
                </span>
                <span class="meta-item">
                  <n-icon :component="ClockIcon" size="14" />
                  {{ formatDate(conv.updatedAt) }}
                </span>
              </div>
            </div>
            <div class="conversation-actions">
              <n-button text @click="viewConversation(conv)">
                <n-icon :component="EyeIcon" size="18" />
              </n-button>
              <n-button text @click="exportConversation(conv)">
                <n-icon :component="DownloadIcon" size="18" />
              </n-button>
              <n-button text @click="deleteConversation(conv)">
                <n-icon :component="TrashIcon" size="18" color="#d03050" />
              </n-button>
            </div>
          </div>

          <div class="conversation-preview">
            <p>{{ getConversationPreview(conv) }}</p>
          </div>
        </n-card>
      </div>
    </div>

    <!-- 查看对话详情弹窗 -->
    <n-modal
      v-model:show="showViewModal"
      preset="card"
      title="对话详情"
      style="width: 800px; max-height: 80vh"
    >
      <div v-if="selectedConversation" class="conversation-detail">
        <div class="detail-header">
          <h3>{{ selectedConversation.title || '未命名对话' }}</h3>
          <div class="detail-meta">
            <span>创建时间: {{ formatDate(selectedConversation.createdAt) }}</span>
            <span>更新时间: {{ formatDate(selectedConversation.updatedAt) }}</span>
            <span>消息数: {{ selectedConversation.messages.length }}</span>
          </div>
        </div>

        <div class="messages-list">
          <div
            v-for="(msg, index) in selectedConversation.messages"
            :key="index"
            class="message-item"
            :class="msg.role"
          >
            <div class="message-header">
              <span class="message-role">{{ getRoleLabel(msg.role) }}</span>
              <span class="message-time">{{ formatTime(msg.timestamp) }}</span>
            </div>
            <div class="message-content">{{ msg.content }}</div>
          </div>
        </div>
      </div>
    </n-modal>

    <!-- 清理数据确认弹窗 -->
    <n-modal
      v-model:show="showClearModal"
      preset="dialog"
      title="确认清理数据"
      positive-text="确认清理"
      negative-text="取消"
      @positive-click="handleClearData"
    >
      <div class="clear-options">
        <p>请选择要清理的数据类型：</p>
        <n-checkbox-group v-model:value="clearOptions">
          <n-space vertical>
            <n-checkbox value="conversations" label="对话历史" />
            <n-checkbox value="tools" label="工具配置" />
            <n-checkbox value="services" label="模型服务" />
            <n-checkbox value="settings" label="系统设置" />
          </n-space>
        </n-checkbox-group>
        <n-alert type="warning" style="margin-top: 16px">
          此操作不可恢复，请谨慎操作！建议先导出数据备份。
        </n-alert>
      </div>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import {
  NCard,
  NButton,
  NIcon,
  NModal,
  NInput,
  NCheckbox,
  NCheckboxGroup,
  NSpace,
  NAlert,
  useMessage
} from 'naive-ui'
import {
  Download as DownloadIcon,
  Trash as TrashIcon,
  Message as MessageIcon,
  Database as DatabaseIcon,
  Clock as ClockIcon,
  Calendar as CalendarIcon,
  Search as SearchIcon,
  Eye as EyeIcon
} from '@vicons/tabler'

const message = useMessage()

// 消息接口
interface Message {
  role: 'user' | 'assistant' | 'system'
  content: string
  timestamp: Date
}

// 对话接口
interface Conversation {
  id: string
  title: string
  messages: Message[]
  createdAt: Date
  updatedAt: Date
}

// 响应式数据
const conversations = ref<Conversation[]>([])
const searchKeyword = ref('')
const showViewModal = ref(false)
const showClearModal = ref(false)
const selectedConversation = ref<Conversation | null>(null)
const clearOptions = ref<string[]>([])

// 过滤后的对话列表
const filteredConversations = computed(() => {
  if (!searchKeyword.value) {
    return conversations.value
  }
  
  const keyword = searchKeyword.value.toLowerCase()
  return conversations.value.filter(conv => {
    return (
      conv.title.toLowerCase().includes(keyword) ||
      conv.messages.some(msg => msg.content.toLowerCase().includes(keyword))
    )
  })
})

// 获取总消息数
const getTotalMessages = (): number => {
  return conversations.value.reduce((total, conv) => total + conv.messages.length, 0)
}

// 获取存储大小
const getStorageSize = (): string => {
  try {
    let totalSize = 0
    for (let key in localStorage) {
      if (localStorage.hasOwnProperty(key)) {
        totalSize += localStorage[key].length + key.length
      }
    }
    const sizeInKB = totalSize / 1024
    if (sizeInKB < 1024) {
      return `${sizeInKB.toFixed(2)} KB`
    }
    return `${(sizeInKB / 1024).toFixed(2)} MB`
  } catch {
    return '未知'
  }
}

// 获取最后活动日期
const getLastActiveDate = (): string => {
  if (conversations.value.length === 0) {
    return '无'
  }
  
  const latest = conversations.value.reduce((latest, conv) => {
    return new Date(conv.updatedAt) > new Date(latest.updatedAt) ? conv : latest
  })
  
  return formatDate(latest.updatedAt)
}

// 格式化日期
const formatDate = (date: Date | string): string => {
  const d = new Date(date)
  const now = new Date()
  const diffMs = now.getTime() - d.getTime()
  const diffMins = Math.floor(diffMs / 60000)
  const diffHours = Math.floor(diffMs / 3600000)
  const diffDays = Math.floor(diffMs / 86400000)

  if (diffMins < 1) return '刚刚'
  if (diffMins < 60) return `${diffMins} 分钟前`
  if (diffHours < 24) return `${diffHours} 小时前`
  if (diffDays < 7) return `${diffDays} 天前`
  
  return d.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 格式化时间
const formatTime = (date: Date | string | undefined): string => {
  if (!date) return ''
  const d = new Date(date)
  return d.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取角色标签
const getRoleLabel = (role: string): string => {
  const labels: Record<string, string> = {
    user: '用户',
    assistant: '助手',
    system: '系统'
  }
  return labels[role] || role
}

// 获取对话预览
const getConversationPreview = (conv: Conversation): string => {
  if (conv.messages.length === 0) {
    return '暂无消息'
  }
  
  const lastMsg = conv.messages[conv.messages.length - 1]
  const preview = lastMsg.content.substring(0, 100)
  return preview.length < lastMsg.content.length ? `${preview}...` : preview
}

// 查看对话
const viewConversation = (conv: Conversation) => {
  selectedConversation.value = conv
  showViewModal.value = true
}

// 导出单个对话
const exportConversation = (conv: Conversation) => {
  try {
    const data = JSON.stringify(conv, null, 2)
    const blob = new Blob([data], { type: 'application/json' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `conversation_${conv.id}_${Date.now()}.json`
    a.click()
    URL.revokeObjectURL(url)
    message.success('对话已导出')
  } catch (error) {
    message.error('导出失败')
  }
}

// 删除对话
const deleteConversation = (conv: Conversation) => {
  const index = conversations.value.findIndex(c => c.id === conv.id)
  if (index !== -1) {
    conversations.value.splice(index, 1)
    saveConversations()
    message.success('对话已删除')
  }
}

// 导出所有数据
const exportData = () => {
  try {
    const data = {
      conversations: conversations.value,
      tools: JSON.parse(localStorage.getItem('mcp-tools') || '[]'),
      services: JSON.parse(localStorage.getItem('model-services') || '[]'),
      settings: JSON.parse(localStorage.getItem('mcp-settings') || '{}'),
      exportDate: new Date().toISOString()
    }
    
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `mcp_backup_${Date.now()}.json`
    a.click()
    URL.revokeObjectURL(url)
    message.success('数据已导出')
  } catch (error) {
    message.error('导出失败')
  }
}

// 清理数据
const handleClearData = () => {
  if (clearOptions.value.length === 0) {
    message.warning('请选择要清理的数据类型')
    return false
  }

  try {
    clearOptions.value.forEach(option => {
      switch (option) {
        case 'conversations':
          localStorage.removeItem('mcp-conversations')
          conversations.value = []
          break
        case 'tools':
          localStorage.removeItem('mcp-tools')
          break
        case 'services':
          localStorage.removeItem('model-services')
          break
        case 'settings':
          localStorage.removeItem('mcp-settings')
          localStorage.removeItem('display-settings')
          break
      }
    })
    
    message.success('数据已清理')
    clearOptions.value = []
    return true
  } catch (error) {
    message.error('清理失败')
    return false
  }
}

// 保存对话
const saveConversations = () => {
  try {
    localStorage.setItem('mcp-conversations', JSON.stringify(conversations.value))
  } catch (error) {
    console.error('保存对话失败:', error)
  }
}

// 加载对话
const loadConversations = () => {
  try {
    const saved = localStorage.getItem('mcp-conversations')
    if (saved) {
      conversations.value = JSON.parse(saved)
    } else {
      // 加载示例数据（首次使用）
      loadSampleData()
    }
  } catch (error) {
    console.error('加载对话失败:', error)
  }
}

// 加载示例数据
const loadSampleData = () => {
  const sampleConversations: Conversation[] = [
    {
      id: 'sample_1',
      title: '欢迎使用 MCP 客户端',
      messages: [
        {
          role: 'system',
          content: '欢迎使用 MCP 客户端！这是一个示例对话。',
          timestamp: new Date(Date.now() - 86400000)
        },
        {
          role: 'user',
          content: '你好，这是我的第一条消息',
          timestamp: new Date(Date.now() - 86400000 + 1000)
        },
        {
          role: 'assistant',
          content: '你好！很高兴见到你。我是 AI 助手，我可以帮助你完成各种任务。',
          timestamp: new Date(Date.now() - 86400000 + 2000)
        }
      ],
      createdAt: new Date(Date.now() - 86400000),
      updatedAt: new Date(Date.now() - 86400000 + 2000)
    }
  ]
  
  conversations.value = sampleConversations
  saveConversations()
}

// 生命周期
onMounted(() => {
  loadConversations()
})
</script>

<style scoped>
.data-manager-page {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-info h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.header-info p {
  font-size: 14px;
  color: var(--text-color-3);
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-target-bg);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: var(--text-color-3);
}

.conversations-section {
  margin-top: 32px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
}

.empty-icon {
  font-size: 48px;
  color: var(--border-color);
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 18px;
  margin: 0 0 8px 0;
}

.empty-state p {
  color: var(--text-color-3);
  margin: 0;
}

.conversations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.conversation-card {
  transition: all 0.3s;
}

.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.conversation-info {
  flex: 1;
}

.conversation-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.conversation-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-color-3);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.conversation-actions {
  display: flex;
  gap: 4px;
}

.conversation-preview {
  color: var(--text-color-2);
  font-size: 14px;
  line-height: 1.6;
}

.conversation-preview p {
  margin: 0;
}

.conversation-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.detail-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-color-3);
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 500px;
  overflow-y: auto;
}

.message-item {
  padding: 12px;
  border-radius: 8px;
  background: var(--color-target-bg);
}

.message-item.user {
  background: rgba(24, 160, 88, 0.1);
}

.message-item.assistant {
  background: rgba(32, 128, 240, 0.1);
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}

.message-role {
  font-weight: 600;
}

.message-time {
  color: var(--text-color-3);
}

.message-content {
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.clear-options {
  padding: 16px 0;
}

.clear-options p {
  margin: 0 0 16px 0;
  font-weight: 500;
}
</style>
