<template>
  <div class="mosquito-app">
    <header class="sticky top-0 z-40 border-b border-mosquito-line bg-white/90 backdrop-blur">
      <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
        <div class="flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-2xl bg-mosquito-accent/15 text-sm font-bold text-mosquito-brand">
            M
          </div>
          <div>
            <div class="mos-title text-sm font-semibold">Mosquito Admin</div>
            <div class="mos-muted text-xs">运营与数据控制台</div>
          </div>
        </div>
        <nav class="flex items-center gap-2 text-sm font-semibold">
          <RouterLink
            to="/"
            class="rounded-full px-3 py-1.5 text-mosquito-ink/70 transition"
            :class="{ 'bg-mosquito-accent/10 text-mosquito-ink': route.path === '/' }"
          >
            概览
          </RouterLink>
          <RouterLink
            to="/activities"
            class="rounded-full px-3 py-1.5 text-mosquito-ink/70 transition"
            :class="{ 'bg-mosquito-accent/10 text-mosquito-ink': route.path.startsWith('/activities') }"
          >
            活动
          </RouterLink>
          <RouterLink
            v-if="auth.hasPermission('manage:users')"
            to="/users"
            class="rounded-full px-3 py-1.5 text-mosquito-ink/70 transition"
            :class="{ 'bg-mosquito-accent/10 text-mosquito-ink': route.path.startsWith('/users') }"
          >
            用户
          </RouterLink>
          <RouterLink
            v-if="auth.hasPermission('manage:rewards')"
            to="/rewards"
            class="rounded-full px-3 py-1.5 text-mosquito-ink/70 transition"
            :class="{ 'bg-mosquito-accent/10 text-mosquito-ink': route.path.startsWith('/rewards') }"
          >
            奖励
          </RouterLink>
          <RouterLink
            v-if="auth.hasPermission('manage:risk')"
            to="/risk"
            class="rounded-full px-3 py-1.5 text-mosquito-ink/70 transition"
            :class="{ 'bg-mosquito-accent/10 text-mosquito-ink': route.path.startsWith('/risk') }"
          >
            风控
          </RouterLink>
          <RouterLink
            v-if="auth.hasPermission('view:audit')"
            to="/audit"
            class="rounded-full px-3 py-1.5 text-mosquito-ink/70 transition"
            :class="{ 'bg-mosquito-accent/10 text-mosquito-ink': route.path.startsWith('/audit') }"
          >
            审计
          </RouterLink>
          <RouterLink
            v-if="auth.hasPermission('manage:users')"
            to="/approvals"
            class="rounded-full px-3 py-1.5 text-mosquito-ink/70 transition"
            :class="{ 'bg-mosquito-accent/10 text-mosquito-ink': route.path.startsWith('/approvals') }"
          >
            审批
          </RouterLink>
          <RouterLink
            v-if="auth.hasPermission('manage:users')"
            to="/permissions"
            class="rounded-full px-3 py-1.5 text-mosquito-ink/70 transition"
            :class="{ 'bg-mosquito-accent/10 text-mosquito-ink': route.path.startsWith('/permissions') }"
          >
            权限
          </RouterLink>
          <RouterLink
            v-if="auth.hasPermission('view:notifications')"
            to="/notifications"
            class="rounded-full px-3 py-1.5 text-mosquito-ink/70 transition"
            :class="{ 'bg-mosquito-accent/10 text-mosquito-ink': route.path.startsWith('/notifications') }"
          >
            通知
          </RouterLink>
        </nav>
        <div class="flex items-center gap-2">
          <span v-if="auth.mode === 'demo'" class="mos-pill">演示模式</span>
          <span class="mos-pill">{{ roleLabel }}</span>
          <label v-if="auth.mode === 'demo'" class="flex items-center gap-2 text-xs text-mosquito-ink/70">
            角色
            <select class="mos-input !py-1 !px-2 !text-xs" v-model="selectedRole" @change="onRoleChange">
              <option value="admin">管理员</option>
              <option value="operator">运营</option>
              <option value="viewer">只读</option>
            </select>
          </label>
          <RouterLink
            to="/login"
            class="rounded-xl border border-mosquito-line px-3 py-2 text-sm font-semibold text-mosquito-ink/70"
          >
            登录页
          </RouterLink>
          <button
            class="rounded-xl border border-mosquito-line px-3 py-2 text-sm font-semibold text-mosquito-ink/70"
            @click="toggleReportPanel"
          >
            导出报表
          </button>
          <RouterLink
            to="/activities/new"
            class="rounded-xl bg-mosquito-accent px-3 py-2 text-sm font-semibold text-white shadow-soft"
          >
            新建活动
          </RouterLink>
        </div>
      </div>
    </header>
    <main class="mx-auto max-w-6xl px-6 py-8 pb-16">
      <div v-if="auth.mode === 'demo'" class="mb-6 rounded-2xl border border-mosquito-line bg-white/80 px-4 py-3 text-xs text-mosquito-ink/70">
        当前为演示数据预览，未接入真实鉴权与生产数据源。
      </div>
      <div v-if="showReportPanel" class="mb-6 rounded-2xl border border-mosquito-line bg-white/90 p-4">
        <ExportFieldPanel
          title="导出运营报表"
          :fields="reportFields"
          :selected="reportSelected"
          @update:selected="setReportSelected"
          @export="exportReport"
        />
      </div>
      <router-view />
    </main>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { computed, ref, watch } from 'vue'
import { useAuthStore } from './stores/auth'
import { downloadCsv } from './utils/export'
import ExportFieldPanel, { type ExportField } from './components/ExportFieldPanel.vue'
import { useExportFields } from './composables/useExportFields'

const route = useRoute()
const auth = useAuthStore()
const selectedRole = ref(auth.role)

const roleLabel = computed(() => {
  if (auth.role === 'admin') return '管理员'
  if (auth.role === 'operator') return '运营'
  return '只读'
})

const onRoleChange = () => {
  auth.setRole(selectedRole.value)
}

watch(
  () => auth.role,
  (value) => {
    selectedRole.value = value
  }
)

const showReportPanel = ref(false)
const reportFields: ExportField[] = [
  { key: 'visits', label: '访问', required: true },
  { key: 'shares', label: '分享' },
  { key: 'conversions', label: '转化' },
  { key: 'newUsers', label: '新增' }
]
const reportData: Record<string, string> = {
  visits: '48210',
  shares: '12800',
  conversions: '3840',
  newUsers: '920'
}
const { selected: reportSelected, setSelected: setReportSelected } = useExportFields(
  reportFields,
  reportFields.map((field) => field.key)
)

const toggleReportPanel = () => {
  showReportPanel.value = !showReportPanel.value
}

const exportReport = () => {
  const rows = reportFields
    .filter((field) => reportSelected.value.includes(field.key))
    .map((field) => [field.label, reportData[field.key] ?? ''])
  downloadCsv('admin-report-demo.csv', ['指标', '值'], rows)
  showReportPanel.value = false
}
</script>
