<script setup lang="ts">
import { ref, computed } from 'vue'
import './database/database.css'

// 日志数据
interface Log {
  id: number
  level: 'info' | 'warning' | 'error' | 'debug'
  source: string
  message: string
  timestamp: string
  user?: string
}

const logs = ref<Log[]>([
  { id: 1, level: 'info', source: 'System', message: 'User logged in successfully', timestamp: '2025-03-10 14:35:22', user: 'alex@example.com' },
  { id: 2, level: 'warning', source: 'API', message: 'Rate limit approaching for API key', timestamp: '2025-03-10 14:32:15', user: 'john@example.com' },
  { id: 3, level: 'error', source: 'Database', message: 'Connection timeout to primary database', timestamp: '2025-03-10 14:30:45' },
  { id: 4, level: 'info', source: 'Skill', message: 'MCP Server started successfully', timestamp: '2025-03-10 14:28:10' },
  { id: 5, level: 'debug', source: 'Auth', message: 'Token refresh initiated', timestamp: '2025-03-10 14:25:33', user: 'jane@example.com' },
  { id: 6, level: 'error', source: 'Script', message: 'Failed to execute backup script', timestamp: '2025-03-10 14:20:18' },
  { id: 7, level: 'info', source: 'Account', message: 'User role updated', timestamp: '2025-03-10 14:15:42', user: 'admin@example.com' },
  { id: 8, level: 'warning', source: 'Memory', message: 'Memory usage exceeds 80% threshold', timestamp: '2025-03-10 14:10:55' },
  { id: 9, level: 'info', source: 'Knowledge', message: 'Document indexed successfully', timestamp: '2025-03-10 14:05:30' },
  { id: 10, level: 'error', source: 'API', message: 'Invalid API key provided', timestamp: '2025-03-10 14:00:12' },
])

// 搜索和筛选
const searchQuery = ref('')
const filterLevel = ref('')
const filterSource = ref('')

// 日志级别选项
const levelOptions = [
  { value: '', label: 'All Levels' },
  { value: 'info', label: 'Info' },
  { value: 'warning', label: 'Warning' },
  { value: 'error', label: 'Error' },
  { value: 'debug', label: 'Debug' },
]

// 来源选项
const sourceOptions = computed(() => {
  const sources = [...new Set(logs.value.map(l => l.source))]
  return [{ value: '', label: 'All Sources' }, ...sources.map(s => ({ value: s, label: s }))]
})

// 过滤后的日志
const filteredLogs = computed(() => {
  return logs.value.filter(log => {
    const matchSearch = searchQuery.value === '' ||
      log.message.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      log.source.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchLevel = filterLevel.value === '' || log.level === filterLevel.value
    const matchSource = filterSource.value === '' || log.source === filterSource.value
    return matchSearch && matchLevel && matchSource
  })
})

// 日志级别样式
const levelClass = (level: string) => {
  switch (level) {
    case 'info': return 'bg-blue-500/20 text-blue-400'
    case 'warning': return 'bg-yellow-500/20 text-yellow-400'
    case 'error': return 'bg-red-500/20 text-red-400'
    case 'debug': return 'bg-gray-500/20 text-gray-400'
    default: return 'bg-gray-500/20 text-gray-400'
  }
}

// 日志详情
const selectedLog = ref<Log | null>(null)
const showLogDetail = ref(false)

const viewDetail = (log: Log) => {
  selectedLog.value = log
  showLogDetail.value = true
}

const closeDetail = () => {
  showLogDetail.value = false
  selectedLog.value = null
}

// 清空日志
const clearLogs = () => {
  logs.value = []
}
</script>

<template>
  <div class="p-6 min-h-screen">
    <!-- 顶部标题 -->
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center gap-2">
        <i class="fa-solid fa-file-lines text-orange-500"></i>
        <span class="font-medium">Logs</span>
      </div>
      <button @click="clearLogs" class="px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors flex items-center gap-2">
        <i class="fa-solid fa-trash"></i>
        Clear Logs
      </button>
    </div>

    <!-- 搜索和筛选 -->
    <div class="flex gap-4 mb-6">
      <div class="flex-1 relative">
        <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
        <input
          v-model="searchQuery"
          type="text"
          placeholder="Search logs..."
          class="w-full bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
        >
      </div>
      <el-select v-model="filterLevel" placeholder="All Levels" class="w-40" size="large" popper-class="dark-select-dropdown">
        <el-option v-for="opt in levelOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
      </el-select>
      <el-select v-model="filterSource" placeholder="All Sources" class="w-40" size="large" popper-class="dark-select-dropdown">
        <el-option v-for="opt in sourceOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
      </el-select>
    </div>

    <!-- 日志列表 -->
    <div class="bg-dark-700 rounded-xl overflow-hidden">
      <table class="w-full">
        <thead class="bg-dark-600">
          <tr>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Level</th>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Source</th>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Message</th>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">User</th>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Timestamp</th>
            <th class="text-right px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="log in filteredLogs" :key="log.id" class="border-t border-dark-600 hover:bg-dark-600/50">
            <td class="px-5 py-4">
              <span :class="['px-2 py-1 rounded text-xs font-medium', levelClass(log.level)]">
                {{ log.level.toUpperCase() }}
              </span>
            </td>
            <td class="px-5 py-4 text-gray-300">{{ log.source }}</td>
            <td class="px-5 py-4 text-gray-300 max-w-md">
              <div class="truncate">{{ log.message }}</div>
            </td>
            <td class="px-5 py-4 text-gray-400">{{ log.user || '-' }}</td>
            <td class="px-5 py-4 text-gray-400 text-sm">{{ log.timestamp }}</td>
            <td class="px-5 py-4">
              <div class="flex items-center justify-end">
                <button
                  @click="viewDetail(log)"
                  class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
                  title="View Details"
                >
                  <i class="fa-solid fa-eye text-gray-400 hover:text-white"></i>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 空状态 -->
      <div v-if="filteredLogs.length === 0" class="py-12 text-center text-gray-500">
        <i class="fa-solid fa-file-lines text-4xl mb-3"></i>
        <p>No logs found</p>
      </div>
    </div>

    <!-- 日志详情弹窗 -->
    <Teleport to="body">
      <div v-if="showLogDetail" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50" @click="closeDetail">
        <div class="bg-dark-700 rounded-2xl w-full max-w-2xl border border-dark-500 shadow-2xl" @click.stop>
          <div class="flex items-center justify-between p-5 border-b border-dark-500">
            <h3 class="text-lg font-semibold">Log Details</h3>
            <button @click="closeDetail" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-solid fa-xmark text-xl"></i>
            </button>
          </div>

          <div v-if="selectedLog" class="p-5 space-y-4">
            <div class="flex items-center gap-4">
              <span :class="['px-3 py-1 rounded text-sm font-medium', levelClass(selectedLog.level)]">
                {{ selectedLog.level.toUpperCase() }}
              </span>
              <span class="text-gray-400">{{ selectedLog.timestamp }}</span>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-400 mb-2">Source</label>
              <div class="text-white">{{ selectedLog.source }}</div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-400 mb-2">User</label>
              <div class="text-white">{{ selectedLog.user || 'System' }}</div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-400 mb-2">Message</label>
              <div class="bg-dark-800 rounded-lg p-4 text-gray-300 font-mono text-sm whitespace-pre-wrap">
                {{ selectedLog.message }}
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-400 mb-2">Log ID</label>
              <div class="text-gray-500">#{{ selectedLog.id }}</div>
            </div>
          </div>

          <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-500">
            <button
              @click="closeDetail"
              class="px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>
