<script setup lang="ts">
import { ref } from 'vue'

interface Database {
  id: number
  name: string
  type: string
  subtables: number
  status: 'connected' | 'disconnected' | 'error'
  createdAt: string
  description: string
}

// 数据库数据
const databases = ref<Database[]>([
  { id: 1, name: 'production-db', type: 'MySQL', subtables: 24, status: 'connected', createdAt: '2025-04-10', description: 'Main production database' },
  { id: 2, name: 'staging-db', type: 'MySQL', subtables: 18, status: 'connected', createdAt: '2025-04-08', description: 'Staging environment database' },
  { id: 3, name: 'analytics-db', type: 'ClickHouse', subtables: 56, status: 'connected', createdAt: '2025-04-05', description: 'Analytics and reporting database' },
  { id: 4, name: 'cache-db', type: 'Redis', subtables: 8, status: 'connected', createdAt: '2025-04-12', description: 'Cache layer database' },
  { id: 5, name: 'test-db', type: 'MySQL', subtables: 12, status: 'disconnected', createdAt: '2025-04-11', description: 'Testing database' },
])

// 编辑状态
const editingDb = ref<Database | null>(null)
const isEditing = ref(false)
const isCreating = ref(false)
const searchQuery = ref('')
const filterStatus = ref<string>('all')

const dbTypes = ['MySQL']

// 新建 Database 表单
const newDbForm = ref({
  name: '',
  type: 'MySQL',
  description: '',
})

// 打开新建弹窗
const openCreate = () => {
  newDbForm.value = {
    name: '',
    type: 'MySQL',
    description: '',
  }
  isCreating.value = true
}

// 关闭新建弹窗
const closeCreate = () => {
  isCreating.value = false
}

// 保存新建
const saveNewDb = () => {
  const newId = Math.max(...databases.value.map(d => d.id)) + 1
  databases.value.push({
    id: newId,
    name: newDbForm.value.name || 'Untitled Database',
    type: newDbForm.value.type,
    subtables: 0,
    status: 'disconnected',
    createdAt: new Date().toISOString().split('T')[0],
    description: newDbForm.value.description,
  })
  isCreating.value = false
}

// 编辑表单数据
const editForm = ref({
  name: '',
  type: '',
  description: '',
})

// 打开编辑弹窗
const openEdit = (db: Database) => {
  editingDb.value = db
  editForm.value = {
    name: db.name,
    type: db.type,
    description: db.description,
  }
  isEditing.value = true
}

// 保存编辑
const saveEdit = () => {
  if (editingDb.value) {
    const index = databases.value.findIndex(d => d.id === editingDb.value!.id)
    if (index !== -1) {
      databases.value[index] = {
        ...databases.value[index],
        ...editForm.value,
      }
    }
  }
  isEditing.value = false
}

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false
  editingDb.value = null
}

// 切换状态
const toggleStatus = (db: Database) => {
  if (db.status === 'connected') {
    db.status = 'disconnected'
  } else if (db.status === 'disconnected') {
    db.status = 'connected'
  }
}

// 删除 Database
const deleteDb = (id: number) => {
  databases.value = databases.value.filter(d => d.id !== id)
}

// 过滤后的 Databases
const filteredDatabases = () => {
  return databases.value.filter(db => {
    const matchSearch = db.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                       db.type.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchStatus = filterStatus.value === 'all' || db.status === filterStatus.value
    return matchSearch && matchStatus
  })
}

// 状态颜色
const statusClass = (status: string) => {
  switch (status) {
    case 'connected': return 'bg-primary-success'
    case 'disconnected': return 'bg-gray-500'
    case 'error': return 'bg-primary-danger'
    default: return 'bg-gray-500'
  }
}

</script>

<template>
  <!-- 主内容区域 -->
  <div class="p-6 min-h-screen">
    <!-- 顶部导航 -->
    <div class="flex justify-between items-center mb-6">
      <div class="flex items-center gap-2">
        <i class="fa-solid fa-database text-gray-400"></i>
        <span class="font-medium">Database</span>
      </div>
      <button @click="openCreate" class="bg-gradient-to-r from-primary-orange to-red-500 hover:from-orange-500 hover:to-red-600 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-all">
        <i class="fa-solid fa-plus"></i>
        New Connection
      </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 databases..."
          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="filterStatus" placeholder="Select" class="w-40" size="large">
          <el-option label="All Status" value="all" />
          <el-option label="Connected" value="connected" />
          <el-option label="Disconnected" value="disconnected" />
          <el-option label="Error" value="error" />
        </el-select>
    </div>

    <!-- Database 列表 -->
    <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">Database Name</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Type</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Subtables</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Status</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Created</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="db in filteredDatabases()" :key="db.id" class="border-t border-dark-600 hover:bg-dark-600/50 transition-colors">
            <td class="px-5 py-4">
              <div class="font-medium">{{ db.name }}</div>
              <div class="text-sm text-gray-500">{{ db.description }}</div>
            </td>
            <td class="px-5 py-4 text-center">
              <span class="bg-dark-500 px-2 py-1 rounded text-sm">{{ db.type }}</span>
            </td>
            <td class="px-5 py-4 text-center">
              <span class="text-primary-cyan">{{ db.subtables }}</span>
            </td>
            <td class="px-5 py-4 text-center">
              <span
                class="px-3 py-1 rounded-full text-xs capitalize"
                :class="{
                  'bg-green-500/20 text-green-400': db.status === 'connected',
                  'bg-gray-500/20 text-gray-400': db.status === 'disconnected',
                  'bg-red-500/20 text-red-400': db.status === 'error'
                }"
              >{{ db.status }}</span>
            </td>
            <td class="px-5 py-4 text-center text-gray-400 text-sm">{{ db.createdAt }}</td>
            <td class="px-5 py-4">
              <div class="flex items-center justify-center gap-2">
                <button
                  @click="toggleStatus(db)"
                  class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
                  :title="db.status === 'connected' ? 'Disconnect' : 'Connect'"
                >
                  <i :class="['fa-solid', db.status === 'connected' ? 'fa-stop' : 'fa-play', 'text-gray-400 hover:text-white']"></i>
                </button>
                <button
                  @click="openEdit(db)"
                  class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
                  title="Edit"
                >
                  <i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
                </button>
                <button
                  @click="deleteDb(db.id)"
                  class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
                  title="Delete"
                >
                  <i class="fa-solid fa-trash text-gray-400 hover:text-primary-danger"></i>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 空状态 -->
      <div v-if="filteredDatabases().length === 0" class="py-12 text-center text-gray-500">
        <i class="fa-solid fa-database text-4xl mb-3"></i>
        <p>No databases found</p>
      </div>
    </div>

    <!-- 编辑弹窗 -->
    <Teleport to="body">
      <div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50" @click.self="cancelEdit">
        <div class="bg-dark-700 rounded-2xl w-full max-w-lg border border-dark-500 shadow-2xl">
          <!-- 弹窗头部 -->
          <div class="flex items-center justify-between p-5 border-b border-dark-500">
            <h3 class="text-lg font-semibold">Edit Database</h3>
            <button @click="cancelEdit" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-solid fa-xmark text-xl"></i>
            </button>
          </div>

          <!-- 弹窗内容 -->
          <div class="p-5 space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Database Name</label>
              <input
                v-model="editForm.name"
                type="text"
                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
              >
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
              <el-select v-model="editForm.type" placeholder="Select" class="w-full" size="large">
                <el-option v-for="type in dbTypes" :key="type" :label="type" :value="type" />
              </el-select>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
              <textarea
                v-model="editForm.description"
                rows="3"
                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange resize-none"
              ></textarea>
            </div>
          </div>

          <!-- 弹窗底部 -->
          <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-500">
            <button
              @click="cancelEdit"
              class="px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors"
            >
              Cancel
            </button>
            <button
              @click="saveEdit"
              class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-orange to-red-500 text-white hover:from-orange-500 hover:to-red-600 transition-all"
            >
              Save Changes
            </button>
          </div>
        </div>
      </div>
    </Teleport>

    <!-- 新建 Database 弹窗 -->
    <Teleport to="body">
      <div v-if="isCreating" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4" @click.self="closeCreate">
        <div class="bg-dark-800 rounded-2xl w-full max-w-lg border border-dark-600 shadow-2xl overflow-hidden animate-modal-in">
          <!-- 弹窗头部 -->
          <div class="flex items-center justify-between p-5 border-b border-dark-600 bg-dark-700/50">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-orange to-red-500 flex items-center justify-center">
                <i class="fa-solid fa-database text-white"></i>
              </div>
              <div>
                <h3 class="text-xl font-semibold text-white">Create New Connection</h3>
                <p class="text-sm text-gray-400">Configure your database connection</p>
              </div>
            </div>
            <button @click="closeCreate" class="text-gray-400 hover:text-white transition-all p-2 hover:bg-dark-600 rounded-lg">
              <i class="fa-solid fa-xmark text-xl"></i>
            </button>
          </div>

          <!-- 弹窗内容 -->
          <div class="p-5 space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Database Name</label>
              <input
                v-model="newDbForm.name"
                type="text"
                placeholder="Enter database name..."
                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
              >
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
              <el-select v-model="newDbForm.type" placeholder="Select" class="w-full" size="large">
                <el-option v-for="type in dbTypes" :key="type" :label="type" :value="type" />
              </el-select>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
              <textarea
                v-model="newDbForm.description"
                rows="3"
                placeholder="Describe this database..."
                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange resize-none"
              ></textarea>
            </div>
          </div>

          <!-- 底部操作栏 -->
          <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-600 bg-dark-700/50">
            <button
              @click="closeCreate"
              class="px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors"
            >
              Cancel
            </button>
            <button
              @click="saveNewDb"
              class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-orange to-red-500 text-white hover:from-orange-500 hover:to-red-600 transition-all flex items-center gap-2"
            >
              <i class="fa-solid fa-plus"></i>
              Create Database
            </button>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>
