<template>
  <view class="page">
    <view class="header-hero" :style="{ paddingTop: statusBarHeight + 'px' }">
      <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">Print Log</text>
          <LocationPicker />
        </view>
        <view class="top-right" @click="isMenuOpen = true">
          <AppIcon name="menu" size="sm" color="white" />
        </view>
      </view>
    </view>

    <view class="view-toggle">
      <view
        class="toggle-btn"
        :class="{ active: viewMode === 'card' }"
        @click="viewMode = 'card'"
      >
        <AppIcon name="squares" size="sm" :color="viewMode === 'card' ? 'white' : 'gray'" />
        <text class="toggle-text">Card</text>
      </view>
      <view
        class="toggle-btn"
        :class="{ active: viewMode === 'list' }"
        @click="viewMode = 'list'"
      >
        <AppIcon name="list" size="sm" :color="viewMode === 'list' ? 'white' : 'gray'" />
        <text class="toggle-text">List</text>
      </view>
    </view>

    <scroll-view class="content" scroll-y>
      <!-- 卡片视图 -->
      <view v-if="viewMode === 'card'" class="log-list">
        <view
          v-for="row in printLogData"
          :key="row.labelId"
          class="log-card"
        >
          <view class="card-header">
            <text class="product-name">{{ row.productName }}</text>
            <text class="label-id">{{ row.labelId }}</text>
          </view>
          <view class="card-tags">
            <text class="tag">{{ row.category }}</text>
            <text class="tag">{{ row.template }}</text>
          </view>
          <view class="card-details">
            <view class="detail-row">
              <AppIcon name="clock" size="sm" color="gray" />
              <text class="detail-text">{{ row.printedAt }}</text>
            </view>
            <view class="detail-row">
              <AppIcon name="user" size="sm" color="gray" />
              <text class="detail-text">{{ row.printedBy }}</text>
            </view>
            <view class="detail-row">
              <AppIcon name="mapPin" size="sm" color="gray" />
              <text class="detail-text">{{ row.location }}</text>
            </view>
            <view class="detail-row">
              <AppIcon name="calendar" size="sm" color="gray" />
              <text class="detail-text">Expires {{ row.expiryDate }}</text>
            </view>
          </view>
          <view class="card-footer">
            <view class="reprint-btn" @click="handleReprint(row)">
              <AppIcon name="printer" size="sm" color="white" />
              <text class="reprint-text">Reprint</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 列表视图 -->
      <view v-else class="log-table-wrap">
        <view class="log-table">
          <view class="log-table-header">
            <text class="th th-product">Product</text>
            <text class="th th-id">Label ID</text>
            <text class="th th-printed">Printed At</text>
            <text class="th th-expires">Expires</text>
            <text class="th th-action">Action</text>
          </view>
          <view
            v-for="row in printLogData"
            :key="row.labelId"
            class="log-table-row"
          >
            <text class="td td-product">{{ row.productName }}</text>
            <text class="td td-id">{{ row.labelId }}</text>
            <text class="td td-printed">{{ row.printedAt }}</text>
            <text class="td td-expires">{{ row.expiryDate }}</text>
            <view class="td td-action">
              <view class="reprint-btn-sm" @click="handleReprint(row)">
                <AppIcon name="printer" size="sm" color="white" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

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

<script setup lang="ts">
import { ref } from 'vue'
import AppIcon from '../../components/AppIcon.vue'
import SideMenu from '../../components/SideMenu.vue'
import LocationPicker from '../../components/LocationPicker.vue'
import { getStatusBarHeight } from '../../utils/statusBar'
import { printLogList } from '../../utils/printLog'

const statusBarHeight = getStatusBarHeight()
const isMenuOpen = ref(false)
const viewMode = ref<'card' | 'list'>('card')

const printLogData = ref(printLogList)

const handleReprint = (row: any) => {
  uni.navigateTo({ url: `/pages/more/print-detail?labelId=${encodeURIComponent(row.labelId)}` })
}

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: #f3f4f6;
  display: flex;
  flex-direction: column;
}

.header-hero {
  background: linear-gradient(135deg, #1F3A8A, #142a6c);
  padding: 16rpx 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;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #fff;
}

.content {
  flex: 1;
  padding: 24rpx 28rpx 40rpx;
  box-sizing: border-box;
}

.log-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.log-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 0;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
  border: 1rpx solid #e5e7eb;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 28rpx 20rpx;
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

.product-name {
  font-size: 34rpx;
  font-weight: 700;
  color: #111827;
  flex: 1;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.label-id {
  font-size: 22rpx;
  color: #9ca3af;
  flex-shrink: 0;
  margin-left: 16rpx;
  padding: 6rpx 12rpx;
  background: #f3f4f6;
  border-radius: 8rpx;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  padding: 0 28rpx 20rpx;
}

.tag {
  font-size: 24rpx;
  color: #1F3A8A;
  background: #e8ecf5;
  padding: 8rpx 18rpx;
  border-radius: 10rpx;
  font-weight: 500;
}

.card-details {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 24rpx 28rpx;
  background: #fafbfc;
  border-top: 1rpx solid #e5e7eb;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.detail-text {
  font-size: 28rpx;
  color: #4b5563;
  line-height: 1.4;
}

.card-footer {
  padding: 20rpx 28rpx 24rpx;
  background: #fff;
  border-top: 1rpx solid #e5e7eb;
}

.reprint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  padding: 16rpx 32rpx;
  background: linear-gradient(135deg, #1F3A8A, #1447E6);
  border-radius: 14rpx;
  box-shadow: 0 4rpx 12rpx rgba(31, 58, 138, 0.25);
}

.reprint-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}

.reprint-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #fff;
}

.view-toggle {
  display: flex;
  gap: 12rpx;
  padding: 16rpx 28rpx;
  background: #fff;
  border-bottom: 1rpx solid #e5e7eb;
}

.toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
  background: #f3f4f6;
  transition: all 0.2s;
}

.toggle-btn.active {
  background: linear-gradient(135deg, #1F3A8A, #1447E6);
}

.toggle-btn.active .toggle-text {
  color: #fff;
}

.toggle-text {
  font-size: 26rpx;
  font-weight: 500;
  color: #6b7280;
}

.log-table-wrap {
  background: #fff;
  border-radius: 20rpx;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #e5e7eb;
}

/* 确保横向滚动条可见（H5/浏览器） */
.log-table-wrap::-webkit-scrollbar {
  height: 6px;
}
.log-table-wrap::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.log-table-wrap::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.log-table {
  width: max-content;
  min-width: 100%;
}

.log-table-header {
  display: flex;
  padding: 24rpx 28rpx;
  gap: 16rpx;
  background: #fafbfc;
  border-bottom: 1rpx solid #e5e7eb;
  font-size: 24rpx;
  font-weight: 600;
  color: #6b7280;
}

.log-table-row {
  display: flex;
  padding: 24rpx 28rpx;
  gap: 16rpx;
  border-bottom: 1rpx solid #e5e7eb;
  align-items: center;
  font-size: 26rpx;
}

.log-table-row:last-child {
  border-bottom: none;
}

.th, .td {
  flex-shrink: 0;
  white-space: nowrap;
}

.th-product, .td-product { flex: 0 0 auto; min-width: 140rpx; }
.th-id, .td-id { flex: 0 0 auto; min-width: 140rpx; }
.th-printed, .td-printed { flex: 0 0 auto; min-width: 200rpx; }
.th-expires, .td-expires { flex: 0 0 auto; min-width: 200rpx; }
.th-action, .td-action {
  flex: 0 0 80rpx;
  width: 80rpx;
  min-width: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.td-product { color: #111827; font-weight: 500; }
.td-id { color: #6b7280; font-size: 24rpx; }
.td-printed, .td-expires { color: #4b5563; }

.reprint-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64rpx;
  height: 64rpx;
  background: linear-gradient(135deg, #1F3A8A, #1447E6);
  border-radius: 12rpx;
}

.reprint-btn-sm:active {
  opacity: 0.9;
}
</style>
