<template>
  <div class="public-layout">
    <!-- 顶部导航 -->
    <header class="public-header">
      <div class="header-inner">
        <div class="header-brand" @click="goHome">
          <img src="@/assets/images/logo-icon.png" alt="智创未来" class="header-logo" />
          <span class="header-title">智创未来</span>
        </div>
        <!-- 桌面端导航菜单 -->
        <nav class="header-nav">
          <div
            v-for="item in desktopNavItems"
            :key="item.key"
            class="nav-item"
            :class="{ active: currentTab === item.key }"
            @click="handleNavClick(item)"
          >
            <component :is="item.icon" />
            <span>{{ item.label }}</span>
          </div>
        </nav>

        <div class="header-actions">
          <template v-if="isLoggedIn">
            <div class="user-menu" @click="goMine">
              <a-avatar :size="28" :src="userAvatar">
                {{ user?.nickname?.charAt(0) }}
              </a-avatar>
              <span class="user-name hidden-mobile">{{ user?.nickname }}</span>
            </div>
          </template>
          <template v-else>
            <a-button type="primary" size="small" shape="round" @click="goLogin">
              登录
            </a-button>
          </template>
        </div>
      </div>
    </header>

    <!-- 主内容 -->
    <main class="public-main">
      <router-view v-slot="{ Component }">
        <keep-alive :include="['AiCreateShell']">
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </main>

    <!-- 移动端底部导航 -->
    <nav class="public-tabbar">
      <div
        v-for="item in mobileNavItems"
        :key="item.key"
        class="tabbar-item"
        :class="{ active: currentTab === item.key }"
        @click="handleNavClick(item)"
      >
        <component :is="item.icon" />
        <span>{{ item.label }}</span>
      </div>
      <div
        class="tabbar-item"
        :class="{ active: currentTab === 'mine' }"
        @click="goMine"
      >
        <user-outlined />
        <span>我的</span>
      </div>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue"
import { useRouter, useRoute } from "vue-router"
import { HomeOutlined, UserOutlined, PlusCircleOutlined, AppstoreOutlined, TrophyOutlined } from "@ant-design/icons-vue"
import { useAicreateStore } from "@/stores/aicreate"

// 导航配置：可按租户需求调整
interface NavItem {
  key: string
  label: string
  path: string
  requireAuth: boolean
  icon: any
}

const desktopNavItems: NavItem[] = [
  { key: 'home', label: '发现', path: '/p/gallery', requireAuth: false, icon: HomeOutlined },
  { key: 'activity', label: '活动', path: '/p/activities', requireAuth: false, icon: TrophyOutlined },
  { key: 'create', label: '创作', path: '/p/create', requireAuth: true, icon: PlusCircleOutlined },
  { key: 'works', label: '作品库', path: '/p/works', requireAuth: true, icon: AppstoreOutlined },
]

const mobileNavItems: NavItem[] = [
  { key: 'home', label: '发现', path: '/p/gallery', requireAuth: false, icon: HomeOutlined },
  { key: 'create', label: '创作', path: '/p/create', requireAuth: true, icon: PlusCircleOutlined },
  { key: 'activity', label: '活动', path: '/p/activities', requireAuth: false, icon: TrophyOutlined },
  { key: 'works', label: '作品库', path: '/p/works', requireAuth: true, icon: AppstoreOutlined },
]

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

const isLoggedIn = computed(() => !!localStorage.getItem("public_token"))
const user = computed(() => {
  const data = localStorage.getItem("public_user")
  if (!data || data === "undefined" || data === "null") return null
  try {
    return JSON.parse(data)
  } catch {
    // 数据损坏时清除并返回 null
    localStorage.removeItem("public_user")
    return null
  }
})
const userAvatar = computed(() => user.value?.avatar || undefined)

const currentTab = computed(() => {
  const path = route.path
  if (path.includes("/mine")) return "mine"
  if (path.includes("/create")) return "create"
  if (path.startsWith("/p/works")) return "works"
  if (path.includes("/activities")) return "activity"
  return "home"
})

const handleNavClick = (item: NavItem) => {
  if (item.requireAuth && !isLoggedIn.value) {
    router.push("/p/login")
    return
  }
  // 创作特殊处理：恢复上次创作路由
  if (item.key === 'create') {
    const saved = aicreateStore.lastCreateRoute
    if (saved && saved !== '/p/create') {
      router.push(saved)
    } else {
      router.push(item.path)
    }
    return
  }
  router.push(item.path)
}

const goHome = () => router.push("/p/gallery")
const goMine = () => {
  if (!isLoggedIn.value) { router.push("/p/login"); return }
  router.push("/p/mine")
}
const goLogin = () => router.push("/p/login")
</script>

<style scoped lang="scss">
$primary: #6366f1;

.public-layout {
  min-height: 100vh;
  background: #f8f7fc;
  display: flex;
  flex-direction: column;
}

// ========== 顶部导航 ==========
.public-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(99, 102, 241, 0.06);
  box-shadow: 0 1px 8px rgba(99, 102, 241, 0.04);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;

  .header-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .header-title {
    font-size: 16px;
    font-weight: 800;
    background: linear-gradient(135deg, $primary 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

// ========== 桌面端顶部导航菜单 ==========
.header-nav {
  display: none;
  align-items: center;
  gap: 4px;

  .nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;

    :deep(.anticon) {
      font-size: 15px;
    }

    span {
      font-weight: 500;
    }

    &:hover {
      color: $primary;
      background: rgba($primary, 0.06);
    }

    &.active {
      color: $primary;
      background: rgba($primary, 0.08);
      font-weight: 600;
    }
  }
}

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

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;

  &:hover {
    background: rgba($primary, 0.06);
  }

  .user-name {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
  }
}

// ========== 主内容 ==========
.public-main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 80px; // 为底部 tabbar 留空间
}

// ========== 底部导航（移动端） ==========
.public-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(99, 102, 241, 0.06);
  display: flex;
  padding: 6px 0;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));

  .tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    font-size: 20px;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.2s;

    span {
      font-size: 11px;
      font-weight: 500;
    }

    &.active {
      color: $primary;
    }
  }
}

// ========== 响应式 ==========
@media (min-width: 768px) {
  .header-nav {
    display: flex;
  }

  .public-tabbar {
    display: none;
  }

  .public-main {
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .hidden-mobile {
    display: none;
  }

  .public-main {
    padding: 16px;
    padding-bottom: 80px;
  }

  .header-inner {
    padding: 0 16px;
    height: 50px;
  }
}
</style>
