<template>
  <header class="site-header">
    <div class="topbar">
      <div class="mx-auto flex max-w-screen-xl items-center justify-between gap-4 px-4">
        <div class="topbar-left">
          <span class="topbar-date">{{ todayText }}</span>
        </div>

        <div class="topbar-right">
          <div class="hidden md:flex items-center gap-2">
            <a-button size="small" @click="navigateTo('/products')">经营范围</a-button>
            <a-button size="small" type="primary" @click="navigateTo('/contact')">联系我们</a-button>
          </div>

          <a-button class="md:hidden" size="small" @click="open = true">菜单</a-button>
        </div>
      </div>
    </div>

    <div v-if="showBrandbar" class="brandbar">
      <div class="mx-auto grid max-w-screen-xl grid-cols-12 items-center gap-6 px-4 py-4">
        <NuxtLink to="/" class="col-span-12 flex items-center gap-4 md:col-span-6">
          <img class="brand-logo" :src="`https://oss.wsdns.cn/20260127/989e5cf82b0847ed9168023baf68f4a9.png`" :alt="siteName" />
        </NuxtLink>

        <div class="col-span-12 text-right md:col-span-6">
          <div class="brand-mission">{{ missionText }}</div>
          <div class="brand-values">{{ valuesText }}</div>
        </div>
      </div>
    </div>

    <a-affix :offset-top="0" @change="onAffixChange">
      <div class="navbar">
        <div class="mx-auto flex max-w-screen-xl items-center justify-between gap-20 px-">
          <NuxtLink v-if="isAffixed" to="/" class="navbar-brand" :class="{ 'navbar-brand-hidden': !isAffixed }">
            <img class="navbar-logo" :src="logoUrl" :alt="siteName" />
            <span class="navbar-brand-name">
              {{ siteName }}
            </span>
          </NuxtLink>
          <nav class="nav hidden md:flex">
            <template v-for="item in navItems" :key="item.key">
              <a-dropdown v-if="item.children?.length" :trigger="['hover']">
                <a class="nav-link" :class="{ active: isActive(item) }" @click.prevent>
                  {{ item.label }}
                </a>
                <template #overlay>
                  <a-menu>
                    <a-menu-item
                      v-for="child in item.children"
                      :key="child.key"
                      @click="onNavClick(child)"
                    >
                      {{ child.label }}
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>

              <NuxtLink
                v-else-if="item.to"
                class="nav-link"
                :class="{ active: isActive(item) }"
                :to="item.to"
              >
                {{ item.label }}
              </NuxtLink>

              <a
                v-else
                class="nav-link"
                :class="{ active: isActive(item) }"
                :href="item.href"
                :target="item.target || undefined"
                rel="noopener noreferrer"
              >
                {{ item.label }}
              </a>
            </template>
          </nav>
          <div class="nav-spacer md:hidden" />
        </div>
      </div>
    </a-affix>
  </header>

  <a-drawer v-model:open="open" title="导航" placement="right">
    <a-menu mode="inline" :selected-keys="selectedKeys">
      <template v-for="item in navItems" :key="item.key">
        <a-menu-item v-if="!item.children?.length" :key="item.key" @click="onNavClick(item)">
          {{ item.label }}
        </a-menu-item>
        <a-sub-menu v-else :key="item.key" :title="item.label">
          <a-menu-item
            v-for="child in item.children"
            :key="child.key"
            @click="onNavClick(child)"
          >
            {{ child.label }}
          </a-menu-item>
        </a-sub-menu>
      </template>
    </a-menu>

    <div class="mt-4">
      <a-space direction="vertical" class="w-full">
        <a-button type="primary" block @click="onNav('/contact')">联系我们</a-button>
        <a-button block @click="onNav('/products')">经营范围</a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import { mainNav } from '@/config/nav'
import type { CmsNavigation } from '@/api/cms/cmsNavigation/model'
import { COMPANY } from '@/config/company'

const route = useRoute()
const open = ref(false)
const isAffixed = ref(false)

type HeaderNavItem = {
  key: string
  label: string
  to?: string
  href?: string
  target?: string
  children?: HeaderNavItem[]
}

const { data: siteInfo } = useSiteInfo()

const selectedKeys = computed(() => {
  const flatten = (items: HeaderNavItem[]) =>
    items.flatMap((i) => [i, ...(i.children?.length ? flatten(i.children) : [])])
  const all = flatten(navItems.value)

  const exactHit = all.find((n) => n.to === route.path)
  if (exactHit) return [exactHit.key]

  const prefixHit = all
    .filter((n) => n.to && n.to !== '/' && route.path.startsWith(n.to))
    .sort((a, b) => (b.to?.length ?? 0) - (a.to?.length ?? 0))[0]
  if (prefixHit) return [prefixHit.key]

  const home = all.find((n) => n.to === '/')
  return home ? [home.key] : []
})

type SiteInfoData = {
  websiteName?: unknown
  websiteLogo?: unknown
  websiteIcon?: unknown
  topNavs?: unknown
  setting?: unknown
  config?: unknown
} & Record<string, unknown>

const siteData = computed<SiteInfoData | null>(() => {
  const data = siteInfo.value?.data
  if (data && typeof data === 'object') return data as SiteInfoData
  return null
})

function pickString(source: unknown, key: string) {
  if (!source || typeof source !== 'object') return ''
  const record = source as Record<string, unknown>
  const value = record[key]
  return typeof value === 'string' ? value.trim() : ''
}

const siteName = computed(() => {
  const websiteName = siteData.value?.websiteName
  return typeof websiteName === 'string' && websiteName.trim() ? websiteName.trim() : '桂乐淘'
})

const showBrandbar = computed(() => {
  // Corporate site: keep brand bar consistent across pages.
  return true
})

const logoUrl = computed(() => {
  const data = siteData.value
  const logo = typeof data?.websiteLogo === 'string' ? data.websiteLogo.trim() : ''
  const icon = typeof data?.websiteIcon === 'string' ? data.websiteIcon.trim() : ''
  return (
    logo ||
    icon ||
    'https://oss.wsdns.cn/20251226/675876f9f5a84732b22efc02b275440a.png'
  )
})

const siteSlogan = computed(() => {
  const data = siteData.value
  const slogan =
    pickString(data?.setting, 'slogan') ||
    pickString(data?.setting, 'subtitle') ||
    pickString(data?.config, 'slogan')
  return slogan || `${COMPANY.projectName} · 品质服务与合规经营`
})

const missionText = computed(() => '生物基材料研发 · 技术服务 · 食品与农产品流通')
const valuesText = computed(() => '真诚 · 奉献 · 规范 · 聚力')

function normalizePath(path: unknown) {
  if (typeof path !== 'string') return ''
  const p = path.trim()
  if (!p) return ''
  if (/^https?:\/\//i.test(p)) return p
  if (p.startsWith('/')) return p
  return `/${p}`
}

function normalizeNavTree(list: CmsNavigation[]): HeaderNavItem[] {
  const normalizeOne = (n: CmsNavigation): HeaderNavItem => {
    const label = String(n.title || n.label || '').trim() || '未命名'
    const rawPath = normalizePath(n.path)
    const isExternal = /^https?:\/\//i.test(rawPath)
    const children =
      Array.isArray(n.children) && n.children.length
        ? n.children
            .slice()
            .filter((c) => (c.hide ?? 0) !== 1)
            .sort((a, b) => (a.sortNumber ?? 0) - (b.sortNumber ?? 0))
            .map(normalizeOne)
        : undefined
    const key = String(n.code || n.navigationId || rawPath || label)
    const target = n.target ? String(n.target) : (isExternal ? '_blank' : undefined)
    return {
      key,
      label,
      ...(isExternal ? { href: rawPath } : { to: rawPath || '/' }),
      target,
      ...(children?.length ? { children } : {})
    }
  }

  return list
    .filter((n) => (n.hide ?? 0) !== 1)
    .slice()
    .sort((a, b) => (a.sortNumber ?? 0) - (b.sortNumber ?? 0))
    .map(normalizeOne)
}

const navItems = computed<HeaderNavItem[]>(() => {
  const apiNavs = siteData.value?.topNavs
  if (Array.isArray(apiNavs) && apiNavs.length) {
    // Prefer navigation from getShopInfo (CMS-managed).
    return normalizeNavTree(apiNavs as CmsNavigation[])
  }
  // Fallback when CMS has not configured topNavs.
  return mainNav.map((n) => ({ key: n.key || n.to, label: n.label, to: n.to }))
})

function isActive(item: HeaderNavItem) {
  const isHit = (candidate: HeaderNavItem): boolean => {
    if (candidate.to && candidate.to === route.path) return true
    return !!candidate.children?.some(isHit)
  }
  return isHit(item)
}

function onNavClick(item: HeaderNavItem) {
  open.value = false
  if (item.href) {
    window.open(item.href, item.target || '_blank')
    return
  }
  if (item.to) navigateTo(item.to)
}

function onNav(to: string) {
  open.value = false
  navigateTo(to)
}

const todayText = computed(() => {
  const d = new Date()
  const week = ['日', '一', '二', '三', '四', '五', '六'][d.getDay()] || ''
  const pad = (n: number) => String(n).padStart(2, '0')
  return `${d.getFullYear()}年${pad(d.getMonth() + 1)}月${pad(d.getDate())}日 星期${week}`
})

function onAffixChange(affixed: boolean) {
  isAffixed.value = affixed
}
</script>

<style scoped>
.site-header {
  background: #fff;
}

.topbar {
  background: #f7f7f7;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 12px;
}

.topbar-left {
  color: rgba(0, 0, 0, 0.7);
  padding: 6px 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.brandbar {
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
    radial-gradient(circle at 25% 20%, rgba(220, 38, 38, 0.12), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.12), transparent 55%),
    linear-gradient(180deg, #f2f4f7, #ffffff);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.brand-logo {
  height: 62px;
  object-fit: contain;
  display: block;
}

.brand-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-name {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  color: #15803d;
}

.brand-sub {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.55);
}

.brand-mission {
  font-size: 18px;
  font-weight: 700;
  color: #1d4ed8;
}

.brand-values {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
}

.navbar {
  background: #16a34a;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  height: 48px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.navbar-brand-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
}

.navbar-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.navbar-brand-name {
  color: #e7ffe5;
  font-size: 15px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.navbar-brand:hover {
  color: #fff;
}

.nav {
  display: flex;
  gap: 10px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 18px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  text-decoration: none;
}

.nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.nav-link.active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.nav-spacer {
  height: 48px;
}
</style>
