<script setup lang="ts">
import { usePlatformAuth } from '~/composables/usePlatformAuth'
const { isLoggedIn, user, logout } = usePlatformAuth()

const ROLE_LABELS: Record<string,string> = { ADMIN:'系统管理员', RECEPTIONIST:'受理员', ASSESSOR:'评估员', PLANNER:'方案制定员', DISPATCHER:'调度员', STAFF:'服务人员', SETTLER:'结算员', SUPERVISOR:'监管员', REVIEWER:'复核员' }
const roleLabel = computed(() => ROLE_LABELS[user.value?.userRole || ''] || user.value?.userRole || '')

const menuItems = [
  { key: 'dashboard', label: '工作台', icon: 'chart', href: '/platform' },
  { key: 'applications', label: '服务申请', icon: 'clipboard', href: '/platform/applications' },
  { key: 'work-orders', label: '工单管理', icon: 'document', href: '/platform/work-orders' },
]

onMounted(() => {
  if (!isLoggedIn.value) { navigateTo('/platform/login') }
})
</script>

<template>
  <div class="min-h-screen bg-surface flex">
    <!-- Sidebar -->
    <aside class="hidden lg:flex flex-col w-56 bg-white border-r shrink-0">
      <div class="p-4 border-b">
        <NuxtLink to="/platform" class="flex items-center gap-2 font-bold text-primary">
          <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-xs font-mono">H</div>
          <span class="text-sm">智慧医养平台</span>
        </NuxtLink>
      </div>
      <nav class="flex-1 p-3 space-y-1">
        <NuxtLink v-for="m in menuItems" :key="m.key" :to="m.href"
          class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors"
          :class="$route.path === m.href ? 'bg-primary-50 text-primary font-medium' : 'text-text-secondary hover:bg-gray-50'">
          <AppIcon :name="m.icon" class="w-4 h-4" /> {{ m.label }}
        </NuxtLink>
      </nav>
      <div class="p-3 border-t">
        <div class="flex items-center gap-2 px-3 py-2 text-sm">
          <div class="w-7 h-7 rounded-full bg-primary-50 text-primary flex items-center justify-center text-xs font-bold">{{ user?.userName?.charAt(0) }}</div>
          <div class="min-w-0">
            <div class="text-xs font-medium truncate">{{ user?.userName }}</div>
            <div class="text-xs text-text-secondary">{{ roleLabel }}</div>
          </div>
        </div>
        <button @click="logout(); navigateTo('/platform/login')"
          class="w-full mt-2 px-3 py-2 text-xs text-text-secondary hover:text-red-500 transition-colors text-left rounded-lg hover:bg-red-50">退出登录</button>
      </div>
    </aside>

    <!-- Mobile header -->
    <div class="lg:hidden bg-white border-b px-4 py-3 flex items-center justify-between w-full">
      <NuxtLink to="/platform" class="font-bold text-primary text-sm">智慧医养平台</NuxtLink>
      <div class="flex items-center gap-2">
        <span class="text-xs text-text-secondary">{{ roleLabel }}</span>
        <button @click="logout(); navigateTo('/platform/login')" class="text-xs text-red-500">退出</button>
      </div>
    </div>

    <main class="flex-1 overflow-auto">
      <slot />
    </main>
  </div>
</template>
