<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'

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

const tabs = [
  { path: '/m', label: '首页', icon: 'home' },
  { path: '/m/work', label: '工作', icon: 'work' },
  { path: '/m/visit/new', label: '拜访', icon: 'visit' },
  { path: '/m/note/new', label: '纪要', icon: 'note' },
]

const activeTab = computed(() => {
  if (route.path === '/m') return '/m'
  if (route.path === '/m/work' || route.path.startsWith('/m/plans') || route.path.startsWith('/m/mini-biz') || route.path.startsWith('/m/key-visits') || route.path.startsWith('/m/leaves') || route.path.startsWith('/m/leave')) return '/m/work'
  if (route.path.includes('/visit')) return '/m/visit/new'
  if (route.path.includes('/note')) return '/m/note/new'
  return route.path
})
</script>

<template>
  <div class="mobile-layout">
    <!-- ═══ Magazine Header ═══ -->
    <header class="mobile-header">
      <div class="header-brand">
        <h1 class="header-title">企迹</h1>
        <span class="header-subtitle">政企周报</span>
        <div class="header-rule"></div>
      </div>
      <div class="header-actions">
        <button class="header-pc-btn" @click="router.push('/')" title="PC版">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
            <line x1="8" y1="21" x2="16" y2="21"></line>
            <line x1="12" y1="17" x2="12" y2="21"></line>
          </svg>
        </button>
        <span class="header-user">{{ auth.name }}</span>
      </div>
    </header>

    <!-- ═══ Main Content ═══ -->
    <main class="mobile-main">
      <!-- Gold corner accent (decorative) -->
      <div class="page-accent"></div>
      <router-view />
    </main>

    <!-- ═══ Floating Pill TabBar ═══ -->
    <nav class="mobile-tabbar">
      <div class="tabbar-pill">
        <div
          v-for="tab in tabs"
          :key="tab.path"
          class="tab-item"
          :class="{ active: activeTab === tab.path }"
          @click="router.push(tab.path)"
        >
          <!-- Home icon -->
          <svg v-if="tab.icon === 'home'" class="tab-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
            <polyline points="9 22 9 12 15 12 15 22"></polyline>
          </svg>
          <!-- Work icon -->
          <svg v-else-if="tab.icon === 'work'" class="tab-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
            <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
          </svg>
          <!-- Visit icon -->
          <svg v-else-if="tab.icon === 'visit'" class="tab-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
            <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
            <line x1="12" y1="11" x2="12" y2="17"></line>
            <line x1="9" y1="14" x2="15" y2="14"></line>
          </svg>
          <!-- Note icon -->
          <svg v-else-if="tab.icon === 'note'" class="tab-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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"></path>
            <polyline points="14 2 14 8 20 8"></polyline>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
            <polyline points="10 9 9 9 8 9"></polyline>
          </svg>
          <span class="tab-label">{{ tab.label }}</span>
        </div>
      </div>
    </nav>
  </div>
</template>

<style scoped>
/* ═══ Layout ═══ */
.mobile-layout {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: var(--paper);
  position: relative;
}

/* ═══ Header — Editorial Style ═══ */
.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 20px 10px;
  background: var(--paper);
  flex-shrink: 0;
  position: relative;
}

.header-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.header-subtitle {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--warm-gray);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 1px;
}

.header-rule {
  width: 28px;
  height: 3px;
  background: var(--gold);
  margin-top: 8px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.header-pc-btn {
  background: none;
  border: 1px solid var(--warm-border);
  border-radius: 2px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--warm-gray);
  display: flex;
  align-items: center;
  transition: all var(--transition);
}

.header-pc-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.header-user {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--warm-gray);
  letter-spacing: 0.03em;
}

/* ═══ Main Scroll Area ═══ */
.mobile-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 16px 20px;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Decorative accent — subtle diagonal line in corner */
.page-accent {
  position: fixed;
  top: 60px;
  right: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, transparent 60%, var(--page-accent-color) 60%);
  pointer-events: none;
  z-index: 0;
}

/* ═══ Floating Pill TabBar ═══ */
.mobile-tabbar {
  display: flex;
  justify-content: center;
  padding: 0 16px 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.tabbar-pill {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--warm-border);
  border-radius: 40px;
  padding: 6px 8px;
  box-shadow: 0 4px 18px rgba(28,55,56,0.08);
  gap: 4px;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 32px;
  color: var(--warm-gray);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  font-family: var(--font-body);
  letter-spacing: 0.03em;
}

.tab-item:active {
  transform: scale(0.95);
}

.tab-item.active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 2px 8px rgba(28,55,56,0.25);
}

.tab-item.active .tab-icon {
  stroke: #fff;
}

.tab-icon {
  flex-shrink: 0;
  transition: stroke 0.25s;
}

.tab-label {
  font-weight: 500;
}

/* Active tab has gold accent dot */
.tab-item.active .tab-label::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
</style>
