<template>
  <div class="apps-center">
    <!-- 统计条 -->
    <div class="app-stats-bar">
      <span class="stats-total">
        共 <b>{{ total }}</b> 个应用
      </span>
      <span v-if="ownerCount > 0" class="stats-item owner">
        <span class="stats-dot owner-dot" />我创建的 {{ ownerCount }}
      </span>
      <span v-if="memberCount > 0" class="stats-item member">
        <span class="stats-dot member-dot" />我参与的 {{ memberCount }}
      </span>
    </div>

    <!-- 工具栏：搜索 + 视图切换 -->
    <div class="toolbar">
      <a-input
        v-model:value="keywords"
        placeholder="搜索应用名称或标识"
        class="search-input"
        allow-clear
        @press-enter="doSearch"
      >
        <template #prefix>
          <SearchOutlined style="color: #bbb" />
        </template>
      </a-input>

      <div class="toolbar-right">
        <a-tooltip title="网格视图">
          <a-button
            :type="viewMode === 'grid' ? 'primary' : 'default'"
            shape="default"
            size="small"
            class="view-btn"
            @click="viewMode = 'grid'"
          >
            <template #icon><AppstoreOutlined /></template>
          </a-button>
        </a-tooltip>
        <a-tooltip title="列表视图">
          <a-button
            :type="viewMode === 'list' ? 'primary' : 'default'"
            shape="default"
            size="small"
            class="view-btn"
            @click="viewMode = 'list'"
          >
            <template #icon><UnorderedListOutlined /></template>
          </a-button>
        </a-tooltip>
      </div>
    </div>

    <!-- 错误提示 -->
    <a-alert v-if="error" show-icon type="error" :message="String(error)" class="mb-4" />

    <!-- 加载中 -->
    <div v-if="pending" class="state-wrap">
      <a-spin size="large" tip="加载中..." />
    </div>

    <!-- 空状态 -->
    <div v-else-if="filteredApps.length === 0" class="state-wrap">
      <a-empty :description="keywords ? '没有匹配的应用' : '还没有应用，点击上方按钮创建第一个吧'">
        <template #image>
          <div class="empty-icon">📦</div>
        </template>
        <a-button v-if="!keywords" type="primary" @click="$emit('create')">
          <template #icon><PlusOutlined /></template>
          创建企业自建应用
        </a-button>
      </a-empty>
    </div>

    <!-- 网格视图 -->
    <div v-else-if="viewMode === 'grid'" class="app-grid">
      <div
        v-for="app in filteredApps"
        :key="app.productId"
        class="app-card"
        @click="handleCardClick(app)"
      >
        <!-- 右上角：状态标签 + 角色标签 -->
        <div class="card-top-actions">
          <div class="card-role-badge">
            <RoleTag :role="app.myRole || 'owner'" size="small" />
          </div>
          <div class="card-status-badge" :class="`status-${app.status}`">
            {{ statusText(app.status, app.statusText) }}
          </div>
        </div>

        <!-- 图标 + 基本信息 -->
        <div class="card-main">
          <div class="app-icon-wrap">
            <img
              v-if="app.icon || app.logo"
              :src="app.icon || app.logo"
              :alt="app.productName"
              class="app-icon-img"
            />
            <div v-else class="app-icon-placeholder" :style="{ background: iconBgColor(app.productName) }">
              {{ (app.productName || 'A').charAt(0).toUpperCase() }}
            </div>
          </div>

          <div class="card-info">
            <div class="app-name">{{ app.productName || '-' }}</div>

            <div class="app-meta">
              <!-- 应用类型标签 -->
              <span class="app-type-tag" :class="appTypeClass(app.appType)">
                {{ appTypeIcon(app.appType) }} {{ appTypeName(app.appType) }}
              </span>
            </div>
          </div>
        </div>

        <!-- 分割线 -->
        <div class="card-divider" />

        <!-- 最新动态 -->
        <div class="card-activity">
          <span class="activity-label">最新动态：</span>
          <span class="activity-time">{{ formatDateTime(app.updateTime || app.createTime) }}</span>
          <span class="activity-dot">·</span>
          <span class="activity-action">{{ app.domain ? '已绑域名' : '已创建' }}</span>
          <template v-for="entry in getAppEntries(app)" :key="entry.type">
            <a
              v-if="entry.available"
              class="card-enter-btn"
              :class="{ 'primary-entry': entry.isPrimary }"
              @click.stop="handleEntryClick(entry, app)"
            >{{ entry.label }} →</a>
          </template>
        </div>
      </div>
    </div>

    <!-- 列表视图 -->
    <div v-else class="app-list">
      <div
        v-for="app in filteredApps"
        :key="app.productId"
        class="app-list-item"
        @click="openDetail(app)"
      >
        <div class="list-icon-wrap">
          <img
            v-if="app.icon || app.logo"
            :src="app.icon || app.logo"
            :alt="app.productName"
            class="list-icon-img"
          />
          <div v-else class="list-icon-placeholder" :style="{ background: iconBgColor(app.productName) }">
            {{ (app.productName || 'A').charAt(0).toUpperCase() }}
          </div>
        </div>

        <div class="list-info">
          <div class="list-name">{{ app.productName || '-' }}</div>
          <div class="list-meta">
            <span class="app-type-tag" :class="appTypeClass(app.appType)">
              {{ appTypeIcon(app.appType) }} {{ appTypeName(app.type, app.appType) }}
            </span>
            <span class="meta-dot">·</span>
            {{ app.domain || app.productCode || '-' }}
            <span class="meta-dot">·</span>
            {{ app.username || app.companyName || '管理员' }}
          </div>
        </div>

        <div class="list-right">
          <div class="list-time">{{ formatDateTime(app.updateTime || app.createTime) }}</div>
          <div class="list-actions">
            <RoleTag :role="app.myRole || 'owner'" size="small" />
            <span class="list-status-badge" :class="`status-${app.status}`">
              {{ statusText(app.status, app.statusText) }}
            </span>
            <template v-for="entry in getAppEntries(app)" :key="entry.type">
              <a
                v-if="entry.available"
                class="list-enter-link"
                :class="{ 'primary-entry': entry.isPrimary }"
                @click.stop="handleEntryClick(entry, app)"
              >{{ entry.label }}</a>
            </template>
            <a-popconfirm
              v-if="app.myRole === 'owner'"
              :title="`确认删除应用「${app.productName}」？`"
              ok-text="确认删除"
              cancel-text="取消"
              ok-type="danger"
              @confirm="handleDeleteApp(app)"
            >
              <a-button type="text" danger size="small" @click.stop>
                <template #icon><DeleteOutlined /></template>
              </a-button>
            </a-popconfirm>
          </div>
        </div>
      </div>
    </div>

    <!-- 应用详情抽屉（放在条件渲染链之外） -->
    <AppDetail v-model:open="detailOpen" :app="selectedApp" @deleted="handleDeletedFromDetail" @updated="handleUpdatedFromDetail" />

    <!-- 小程序扫码弹窗 -->
    <QrCodeModal
      v-model:open="qrOpen"
      :qrcode-url="qrApp?.qrcode"
      :app-name="qrApp?.productName"
      :title="qrApp ? (APP_TYPE_NAME[qrApp.appType ?? 10] || '小程序') + '二维码' : ''"
      :tip="qrApp ? getScanTip(qrApp.appType ?? 20) : ''"
    />

    <!-- 分页 -->
    <div v-if="total > pageSize" class="pagination-wrap">
      <a-pagination
        :current="page"
        :page-size="pageSize"
        :total="total"
        show-size-changer
        :page-size-options="['10', '20', '50']"
        @change="onPageChange"
        @show-size-change="onPageSizeChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  AppstoreOutlined,
  SearchOutlined,
  UnorderedListOutlined,
  DeleteOutlined,
  PlusOutlined,
  GlobalOutlined,
  QrcodeOutlined,
  DownloadOutlined,
  SettingOutlined,
} from '@ant-design/icons-vue'
import { message, Modal } from 'ant-design-vue'
import { removeAppProduct, getMyAccessibleApps } from '@/api/app/appProduct'
import type { AppProduct } from '@/api/app/appProduct/model'
import { APP_TYPE, APP_TYPE_NAME } from '@/api/app/appProduct/model'
import AppDetail from '@/components/developer/AppDetail.vue'
import RoleTag from '@/components/developer/RoleTag.vue'
import QrCodeModal from '@/components/QrCodeModal.vue'
import { getAppEntries, executeEntry, getScanTip } from '@/utils/appEntry'
import type { AppEntry } from '@/utils/appEntry'

const props = defineProps<{
  userId?: number | string | null
  ownerName?: string
}>()

const emit = defineEmits<{
  create: []
}>()

const viewMode = ref<'grid' | 'list'>('grid')
const page = ref(1)
const pageSize = ref(20)
const keywords = ref('')

// 所有应用合并列表
const allApps = ref<AppProduct[]>([])
const pending = ref(false)
const error = ref<string | null>(null)

// 统计
const total = computed(() => allApps.value.length)
const ownerCount = computed(() => allApps.value.filter(a => a.myRole === 'owner' || !a.myRole).length)
const memberCount = computed(() => allApps.value.filter(a => a.myRole && a.myRole !== 'owner').length)

// 关键词搜索过滤
const filteredApps = computed(() => {
  let result = allApps.value
  if (keywords.value.trim()) {
    const kw = keywords.value.trim().toLowerCase()
    result = result.filter(app =>
      (app.productName || '').toLowerCase().includes(kw) ||
      (app.productCode || '').toLowerCase().includes(kw)
    )
  }
  // 前端分页
  const start = (page.value - 1) * pageSize.value
  return result.slice(start, start + pageSize.value)
})

// 详情抽屉
const detailOpen = ref(false)
const selectedApp = ref<AppProduct | null>(null)

function openDetail(app: AppProduct) {
  selectedApp.value = app
  detailOpen.value = true
}

// 加载所有可访问的应用（带角色信息）
async function fetchApps() {
  pending.value = true
  error.value = null
  try {
    const apps = await getMyAccessibleApps()
    // 排序：owner 在前，然后按更新时间倒序
    apps.sort((a, b) => {
      const aIsOwner = a.myRole === 'owner' ? 0 : 1
      const bIsOwner = b.myRole === 'owner' ? 0 : 1
      if (aIsOwner !== bIsOwner) return aIsOwner - bIsOwner
      return new Date(b.updateTime || b.createTime || 0).getTime() - new Date(a.updateTime || a.createTime || 0).getTime()
    })
    allApps.value = apps
  } catch (e: any) {
    error.value = e.message || '加载失败'
  } finally {
    pending.value = false
  }
}

// 初始化时加载
fetchApps()

function doSearch() {
  page.value = 1
}

function onPageChange(nextPage: number) {
  page.value = nextPage
}

function onPageSizeChange(_current: number, nextSize: number) {
  pageSize.value = nextSize
  page.value = 1
}

function handleCardClick(app: AppProduct) {
  openDetail(app)
}

// 删除应用
const deletingAppId = ref<number | null>(null)

function handleDeletedFromDetail() {
  selectedApp.value = null
  detailOpen.value = false
  refresh()
}

// 更新应用后同步本地数据
function handleUpdatedFromDetail(updatedApp: AppProduct) {
  const index = allApps.value.findIndex((app) => app.productId === updatedApp.productId)
  if (index !== -1) {
    allApps.value[index] = { ...allApps.value[index], ...updatedApp }
  }
  if (selectedApp.value?.productId === updatedApp.productId) {
    selectedApp.value = { ...selectedApp.value, ...updatedApp }
  }
}

function handleDeleteApp(app: AppProduct) {
  const name = app.productName || app.productCode || '该应用'
  Modal.confirm({
    title: '确认删除应用',
    content: `确定要删除应用「${name}」吗？删除后所有配置、成员和版本记录将被永久清除，且无法恢复。`,
    okText: '确认删除',
    cancelText: '取消',
    okType: 'danger',
    async onOk() {
      deletingAppId.value = app.productId ?? null
      try {
        await removeAppProduct(app.productId!)
        message.success(`应用「${name}」已删除`)
        // 如果详情抽屉打开的是当前应用，关闭它
        if (selectedApp.value?.productId === app.productId) {
          detailOpen.value = false
          selectedApp.value = null
        }
        // 刷新列表
        await refresh()
      } catch (e: any) {
        message.error(e.message || '删除失败')
      } finally {
        deletingAppId.value = null
      }
    },
  })
}

// 外部刷新：重新查询应用列表
async function refresh() {
  await fetchApps()
}

// 暴露 refresh 方法供父组件调用
defineExpose({ refresh })

// 入口处理
function handleEntryClick(entry: AppEntry, app: AppProduct) {
  if (entry.type === 'scan-qr') {
    qrApp.value = app
    qrOpen.value = true
    return
  }
  executeEntry(entry)
}

// 扫码弹窗
const qrOpen = ref(false)
const qrApp = ref<AppProduct | null>(null)

// 应用类型名称（使用统一枚举）
function appTypeName(type?: number, appType?: number): string {
  return APP_TYPE_NAME[type ?? 10] ?? 'Web 应用'
}

function appTypeIcon(appType?: number): string {
  const iconMap: Record<number, string> = {
    [APP_TYPE.WEBSITE]: '🌐',
    [APP_TYPE.WECHAT_MP]: '📱',
    [APP_TYPE.DOUYIN_MP]: '🎵',
    [APP_TYPE.BAIDU_MP]: '🔍',
    [APP_TYPE.ALIPAY_MP]: '💎',
    [APP_TYPE.ANDROID]: '🤖',
    [APP_TYPE.IOS]: '🍎',
    [APP_TYPE.MACOS]: '💻',
    [APP_TYPE.WINDOWS]: '🪟',
    [APP_TYPE.PLUGIN]: '🔌',
  }
  return iconMap[appType ?? 10] ?? '🌐'
}

function appTypeClass(appType?: number | string): string {
  const numType = typeof appType === 'string' ? Number(appType) : (appType ?? 10)
  const classMap: Record<number, string> = {
    [APP_TYPE.WEBSITE]: 'type-10',
    [APP_TYPE.WECHAT_MP]: 'type-20',
    [APP_TYPE.DOUYIN_MP]: 'type-30',
    [APP_TYPE.BAIDU_MP]: 'type-40',
    [APP_TYPE.ALIPAY_MP]: 'type-50',
    [APP_TYPE.ANDROID]: 'type-60',
    [APP_TYPE.IOS]: 'type-70',
    [APP_TYPE.MACOS]: 'type-80',
    [APP_TYPE.WINDOWS]: 'type-90',
    [APP_TYPE.PLUGIN]: 'type-100',
  }
  return classMap[numType] ?? 'type-10'
}

function statusText(status?: number, fallback?: string) {
  if (fallback) return fallback
  const map: Record<number, string> = {
    0: '未开通',
    1: '已启用',
    2: '维护中',
    3: '已关闭',
    4: '欠费停机',
    5: '违规关停',
  }
  return typeof status === 'number' && status in map ? map[status] : '未知'
}

function formatDateTime(dateStr?: string) {
  if (!dateStr) return '-'
  // 格式化为 "2026-03-28 10:46"
  return dateStr.slice(0, 16).replace('T', ' ')
}

// 根据名称生成一致的背景色
const PALETTE = [
  '#4e6ef2', '#f4a261', '#e76f51', '#2a9d8f',
  '#e9c46a', '#457b9d', '#a8dadc', '#f77f00',
  '#6d6875', '#b5838d',
]
function iconBgColor(name?: string) {
  if (!name) return PALETTE[0]
  let h = 0
  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) & 0xffffffff
  return PALETTE[Math.abs(h) % PALETTE.length]
}
</script>

<style scoped>
.apps-center {
  padding: 0;
}

/* ===== 统计条 ===== */
.app-stats-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
}

.stats-total b {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  margin: 0 2px;
}

.stats-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.stats-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.owner-dot { background: #4f46e5; }
.member-dot { background: #16a34a; }

/* ===== 工具栏 ===== */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.search-input {
  width: 300px;
}

.toolbar-right {
  display: flex;
  gap: 4px;
}

.view-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== 状态/空状态 ===== */
.state-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 4px;
}

/* ===== 网格布局 ===== */
.app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .app-grid { grid-template-columns: 1fr; }
}

/* ===== 单张卡片 ===== */
.app-card {
  position: relative;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 18px 20px 14px;
  cursor: pointer;
  transition: box-shadow 0.18s, border-color 0.18s;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.app-card:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  border-color: #c5d8ff;
}

/* 右上角操作区 */
.card-top-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

/* 状态角标 */
.card-status-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
  line-height: 1.8;
}

/* 角色角标 */
.card-role-badge {
  margin-right: 4px;
}

/* 卡片更多操作按钮 */
.card-more-btn {
  color: #999;
}
.card-more-btn:hover { color: #333; background: #f5f5f5; }

.status-1 { background: #e6f7ee; color: #389e0d; }
.status-0 { background: #f5f5f5; color: #999; }
.status-2 { background: #fff7e6; color: #d46b08; }
.status-3 { background: #fff1f0; color: #cf1322; }
.status-4 { background: #fff2e8; color: #d4380d; }
.status-5 { background: #fff1f0; color: #cf1322; }

/* 卡片主体：图标 + 信息 */
.card-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  padding-right: 100px; /* 给右上角状态标签 + 更多按钮留空间 */
}

.app-icon-wrap {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-icon-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -1px;
}

.card-info {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}

.app-name {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.app-meta {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.meta-label { color: #999; }
.meta-dot { color: #ccc; margin: 0 4px; }
.meta-link {
  color: #1677ff;
  cursor: pointer;
  text-decoration: none;
}
.meta-link:hover { text-decoration: underline; }
.meta-value { color: #555; }

/* 分割线 */
.card-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 0 0 10px;
}

/* 最新动态 */
.card-activity {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #999;
  gap: 2px;
  flex-wrap: wrap;
}

.activity-label { color: #bbb; }
.activity-time { color: #666; }
.activity-dot { color: #ddd; margin: 0 4px; }
.activity-action { color: #666; }

.card-enter-btn {
  margin-left: auto;
  color: #1677ff;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
}
.card-enter-btn:hover { text-decoration: underline; }
.card-enter-btn.primary-entry {
  color: #1677ff;
  font-weight: 500;
}

/* ===== 列表视图 ===== */
.app-list {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
}

.app-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.15s;
  cursor: pointer;
}

.app-list-item:last-child { border-bottom: none; }
.app-list-item:hover { background: #fafafa; }

.list-icon-wrap {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-icon-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.list-info {
  flex: 1;
  min-width: 0;
}

.list-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-meta {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.list-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.list-time {
  font-size: 12px;
  color: #bbb;
}

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

.list-status-badge {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 20px;
}

.list-enter-link {
  font-size: 12px;
  color: #1677ff;
  text-decoration: none;
}
.list-enter-link:hover { text-decoration: underline; }
.list-enter-link.primary-entry {
  font-weight: 500;
}

/* ===== 分页 ===== */
.pagination-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0 0;
}

/* ===== 应用类型标签 ===== */
.app-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
  background: #f0f0f0;
  color: #666;
}
.app-type-tag.type-10         { background: #e6f4ff; color: #0958d9; }
.app-type-tag.type-20         { background: #f6ffed; color: #389e0d; }
.app-type-tag.type-60         { background: #fff7e6; color: #d46b08; }
.app-type-tag.type-100        { background: #f9f0ff; color: #722ed1; }
</style>
