<template>
  <view class="page">
    <view class="header-hero">
      <view class="top-bar">
        <view class="top-left" @click="goBack">
          <AppIcon name="chevronLeft" size="sm" color="white" />
        </view>
        <view class="top-center">
          <text class="page-title">{{ t('printers.title') }}</text>
        </view>
        <view class="top-right" @click="isMenuOpen = true">
          <AppIcon name="menu" size="sm" color="white" />
        </view>
      </view>
    </view>

    <view class="content">
      <view class="info-badge">
        <text class="badge-num">{{ printers.length }}</text>
        <text class="badge-text">{{ t('printers.available') }}</text>
      </view>

      <view v-for="p in printers" :key="p.id" class="printer-card">
        <view class="printer-icon"><AppIcon name="printer" size="md" color="blue" /></view>
        <view class="printer-info">
          <text class="printer-name">{{ t(p.nameKey) }}</text>
          <text class="printer-loc">{{ t(p.locationKey) }}</text>
          <text class="printer-model">{{ p.model }}</text>
        </view>
      </view>
    </view>

    <SideMenu v-model="isMenuOpen" />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import AppIcon from '../../components/AppIcon.vue'
import SideMenu from '../../components/SideMenu.vue'

const { t } = useI18n()
const isMenuOpen = ref(false)
const printers = [
  { id: '1', nameKey: 'printers.printer1.name', locationKey: 'printers.printer1.location', model: 'Zebra ZD620' },
  { id: '2', nameKey: 'printers.printer2.name', locationKey: 'printers.printer2.location', model: 'Zebra ZD620' },
  { id: '3', nameKey: 'printers.printer3.name', locationKey: 'printers.printer3.location', model: 'Zebra ZD420' },
  { id: '4', nameKey: 'printers.printer4.name', locationKey: 'printers.printer4.location', model: 'Zebra ZD420' },
]

const goBack = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    uni.navigateBack()
  } else {
    uni.redirectTo({ url: '/pages/index/index' })
  }
}
</script>

<style scoped>
.page { min-height: 100vh; background: #f9fafb; }

.header-hero {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
  padding: 48rpx 32rpx 24rpx;
}
.top-bar { height: 96rpx; display: flex; align-items: center; justify-content: space-between; }
.top-left, .top-right { width: 64rpx; height: 64rpx; border-radius: 999rpx; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; }
.top-center { flex: 1; text-align: center; }
.page-title { font-size: 34rpx; font-weight: 600; color: #fff; }

.content { padding: 48rpx; }
.info-badge { display: flex; align-items: center; gap: 12rpx; margin-bottom: 32rpx; }
.badge-num { font-size: 40rpx; font-weight: 700; color: var(--theme-primary); }
.badge-text { font-size: 28rpx; color: #6b7280; }
.printer-card { background: #fff; padding: 32rpx; border-radius: 20rpx; margin-bottom: 24rpx; display: flex; align-items: flex-start; gap: 32rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); }
.printer-icon { padding: 16rpx; background: #eff6ff; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; }
.printer-name { font-size: 32rpx; font-weight: 600; color: #111827; display: block; margin-bottom: 8rpx; }
.printer-loc { font-size: 28rpx; color: #6b7280; display: block; margin-bottom: 8rpx; }
.printer-model { font-size: 28rpx; color: #9ca3af; }
</style>
