<template>
  <section class="admin-layout">
    <!-- Sidebar -->
    <nav class="admin-sidebar">
      <div class="sidebar-brand">
        <span>管理后台</span>
      </div>
      <div class="sidebar-nav">
        <button
          v-for="item in NAV_ITEMS"
          :key="item.id"
          :class="['nav-item', activeSection === item.id ? 'nav-item--active' : '']"
          @click="activeSection = item.id"
          type="button"
        >
          <span class="nav-icon" v-html="item.icon"></span>
          <span class="nav-label">{{ item.label }}</span>
        </button>
      </div>
    </nav>

    <!-- Main content -->
    <div class="admin-content">
      <!-- Top bar -->
      <div class="admin-topbar">
        <div class="topbar-title">{{ currentNavLabel }}</div>
        <div class="topbar-actions">
          <button class="ghost small-btn" @click="refresh">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
            刷新
          </button>
          <button v-if="activeSection === 'products'" class="primary small-btn" @click="openCreate">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            添加商品
          </button>
        </div>
      </div>

      <!-- Token row (always visible) -->
      <AdminTokenRow
        :show="!token || !!message"
        v-model:token="token"
        :message="!token || message ? message : ''"
        :inline-message="token && message ? message : ''"
      />

      <!-- Section: Products -->
      <div v-if="activeSection === 'products'">
        <p class="section-tip tag">共 {{ products.length }} 件商品</p>
        <AdminProductTable
          :products="products"
          @edit="openEdit"
          @toggle="toggle"
          @remove="remove"
        />
      </div>

      <!-- Section: Orders -->
      <div v-else-if="activeSection === 'orders'">
        <AdminOrderTable :orders="orders" @remove="removeOrder" />
      </div>

      <!-- Section: Chat -->
      <div v-else-if="activeSection === 'chat'">
        <AdminChatPanel :admin-token="token" />
      </div>

      <!-- Section: Settings -->
      <div v-else-if="activeSection === 'settings'">
        <AdminMaintenanceRow
          v-model:enabled="maintenanceEnabled"
          v-model:reason="maintenanceReason"
          :message="maintenanceMsg"
          @save="saveMaintenance"
        />
        <AdminSMTPRow
          :config="smtpConfig"
          :message="smtpMsg"
          @save="saveSMTPConfig"
        />
      </div>
    </div>
  </section>

  <AdminProductModal
    :open="editorOpen"
    :edit-item="selectedItem"
    @close="closeEditor"
    @submit="handleFormSubmit"
  />
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  fetchAdminProducts,
  createProduct,
  updateProduct,
  toggleProduct,
  deleteProduct,
  fetchAdminOrders,
  deleteAdminOrder,
  fetchSiteMaintenance,
  setSiteMaintenance,
  fetchSMTPConfig,
  setSMTPConfig
} from '../shared/api'
import AdminTokenRow from './components/AdminTokenRow.vue'
import AdminMaintenanceRow from './components/AdminMaintenanceRow.vue'
import AdminSMTPRow from './components/AdminSMTPRow.vue'
import AdminProductTable from './components/AdminProductTable.vue'
import AdminProductModal from './components/AdminProductModal.vue'
import AdminOrderTable from './components/AdminOrderTable.vue'
import AdminChatPanel from './components/AdminChatPanel.vue'

const route = useRoute()
const router = useRouter()

const NAV_ITEMS = [
  {
    id: 'products',
    label: '商品管理',
    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>'
  },
  {
    id: 'orders',
    label: '订单记录',
    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>'
  },
  {
    id: 'chat',
    label: '用户消息',
    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>'
  },
  {
    id: 'settings',
    label: '站点设置',
    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>'
  }
]

const activeSection = ref('products')
const currentNavLabel = computed(() => NAV_ITEMS.find(i => i.id === activeSection.value)?.label || '')

const token = ref(route.query.token || '')
const products = ref([])
const orders = ref([])
const message = ref('')
const editorOpen = ref(false)
const selectedItem = ref(null)

const maintenanceEnabled = ref(false)
const maintenanceReason = ref('')
const maintenanceMsg = ref('')

const smtpConfig = ref({})
const smtpMsg = ref('')

const syncQuery = () => {
  if (token.value) {
    router.replace({ query: { token: token.value } })
  }
}

const refresh = async () => {
  if (!token.value) {
    message.value = '请先输入 token'
    return
  }
  try {
    const [prods, ords] = await Promise.all([
      fetchAdminProducts(token.value),
      fetchAdminOrders(token.value)
    ])
    products.value = prods
    orders.value = ords
    message.value = '数据已更新'
  } catch {
    message.value = '获取失败，请检查 token'
  }
}


const loadMaintenance = async () => {
  try {
    const { maintenance, reason } = await fetchSiteMaintenance()
    maintenanceEnabled.value = maintenance
    maintenanceReason.value = reason || ''
  } catch {
    maintenanceMsg.value = '加载维护状态失败'
  }
}

const loadSMTPConfig = async () => {
  if (!token.value) return
  try {
    smtpConfig.value = await fetchSMTPConfig(token.value)
  } catch {
    smtpMsg.value = '加载 SMTP 配置失败'
  }
}

const saveSMTPConfig = async (cfg) => {
  if (!token.value) {
    smtpMsg.value = '请先输入 token'
    return
  }
  try {
    await setSMTPConfig(token.value, cfg)
    smtpMsg.value = '配置已保存'
    await loadSMTPConfig()
  } catch {
    smtpMsg.value = '保存失败，请检查 token'
  }
}

const saveMaintenance = async () => {
  if (!token.value) {
    maintenanceMsg.value = '请先输入 token'
    return
  }
  try {
    await setSiteMaintenance(token.value, maintenanceEnabled.value, maintenanceReason.value)
    maintenanceMsg.value = maintenanceEnabled.value ? '维护模式已开启' : '维护模式已关闭'
  } catch {
    maintenanceMsg.value = '保存失败，请检查 token'
  }
}

const handleFormSubmit = async (payload) => {
  if (!token.value) {
    message.value = '请先输入 token'
    return
  }
  try {
    if (payload.id) {
      await updateProduct(token.value, payload.id, payload)
      message.value = '已更新商品'
    } else {
      await createProduct(token.value, payload)
      message.value = '已新增商品'
    }
    closeEditor()
    await refresh()
  } catch {
    message.value = '操作失败，请检查输入'
  }
}

const toggle = async (item) => {
  if (!token.value) {
    message.value = '请先输入 token'
    return
  }
  await toggleProduct(token.value, item.id, !item.active)
  await refresh()
}

const remove = async (item) => {
  if (!token.value) {
    message.value = '请先输入 token'
    return
  }
  await deleteProduct(token.value, item.id)
  await refresh()
}

const removeOrder = async (orderId) => {
  if (!token.value) return
  try {
    await deleteAdminOrder(token.value, orderId)
    orders.value = orders.value.filter((o) => o.id !== orderId)
  } catch {
    message.value = '删除订单失败'
  }
}

const openCreate = () => {
  selectedItem.value = null
  editorOpen.value = true
}

const openEdit = (item) => {
  selectedItem.value = item
  editorOpen.value = true
}

const closeEditor = () => {
  editorOpen.value = false
  selectedItem.value = null
}

watch(token, (val) => {
  syncQuery()
  if (val) loadSMTPConfig()
})

onMounted(async () => {
  await loadMaintenance()
  if (token.value) {
    await Promise.all([refresh(), loadSMTPConfig()])
  }
})
</script>

<style scoped>
/* ── Layout ── */
.admin-layout {
  display: flex;
  min-height: calc(100vh - 120px);
  gap: 0;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

/* ── Sidebar ── */
.admin-sidebar {
  width: 180px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.65);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  padding: 20px 18px 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.3px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.nav-item:hover {
  background: rgba(180, 154, 203, 0.1);
  color: var(--text);
}

.nav-item--active {
  background: rgba(180, 154, 203, 0.18);
  color: var(--text);
  font-weight: 700;
  border-right: 3px solid var(--accent);
}

.nav-icon {
  display: flex;
  align-items: center;
  opacity: 0.7;
  flex-shrink: 0;
}

.nav-item--active .nav-icon {
  opacity: 1;
}

/* ── Content area ── */
.admin-content {
  flex: 1;
  min-width: 0;
  padding: 22px 24px;
  overflow: auto;
}

/* ── Top bar ── */
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.topbar-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.small-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  padding: 7px 13px;
}

.section-tip {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.tag {
  font-size: 14px;
  color: var(--muted);
}

/* ── Mobile: sidebar becomes top tabs ── */
@media (max-width: 900px) {
  .admin-layout {
    flex-direction: column;
    min-height: auto;
  }

  .admin-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-brand {
    padding: 12px 16px 10px;
    font-size: 15px;
  }

  .sidebar-nav {
    flex-direction: row;
    padding: 0;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sidebar-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    flex-direction: column;
    gap: 3px;
    padding: 8px 14px;
    font-size: 12px;
    border-right: none;
    border-bottom: 3px solid transparent;
    flex-shrink: 0;
    align-items: center;
  }

  .nav-item--active {
    border-right: none;
    border-bottom: 3px solid var(--accent);
    background: rgba(180, 154, 203, 0.12);
  }

  .admin-content {
    padding: 14px;
  }

  .admin-topbar {
    margin-bottom: 12px;
  }

  .topbar-title {
    font-size: 16px;
  }
}
</style>
