<template>
  <view class="page">
    <!-- 黄色导航栏 -->
    <view class="yellow-header">
      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="header-content">
        <image class="header-logout" src="/static/icon-logout.svg" @click="handleLogout" />
        <text class="header-title">补货管理</text>
      </view>
    </view>
    <view class="header-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view>

    <!-- 预警模式 -->
    <view class="settings-card">
      <view class="setting-row">
        <view class="setting-label">
          <text class="label-icon warning-icon">!</text>
          <text class="label-text">预警模式</text>
          <text class="label-tip">i</text>
        </view>
      </view>
      <view class="radio-row">
        <view class="radio-item" :class="{ active: alertMode === 'standard' }" @click="alertMode = 'standard'">
          <view class="radio-dot" :class="{ checked: alertMode === 'standard' }"></view>
          <text>根据标准库存预警</text>
        </view>
        <view class="radio-item" :class="{ active: alertMode === 'sales' }" @click="alertMode = 'sales'">
          <view class="radio-dot" :class="{ checked: alertMode === 'sales' }"></view>
          <text>根据销量预警</text>
        </view>
      </view>

      <view class="setting-row threshold-row">
        <view class="setting-label">
          <text class="label-icon threshold-icon">%</text>
          <text class="label-text">报警阈值(%)</text>
          <text class="label-tip">i</text>
        </view>
        <view class="threshold-value" @click="editThreshold">
          <text>{{ alertThreshold }}%</text>
          <image class="edit-icon" src="/static/icon-edit.svg" />
        </view>
      </view>

      <view class="setting-row">
        <view class="setting-label">
          <text class="label-icon camera-icon">📷</text>
          <text class="label-text">补货员上货后必须拍照</text>
        </view>
        <view class="toggle-switch" :class="{ on: requirePhoto }" @click="requirePhoto = !requirePhoto">
          <view class="toggle-knob"></view>
        </view>
      </view>
    </view>

    <!-- 统计行 -->
    <view class="stats-row">
      <view class="stat-item" @click="activeFilter = 'all'">
        <text class="stat-num" :class="{ highlight: activeFilter === 'all' }">{{ stats.totalDevices }}</text>
        <text class="stat-label" :class="{ highlight: activeFilter === 'all' }">全部设备</text>
      </view>
      <view class="stat-item" @click="activeFilter = 'pending-order'">
        <text class="stat-num" :class="{ highlight: activeFilter === 'pending-order' }">{{ stats.pendingOrderDevices }}</text>
        <text class="stat-label" :class="{ highlight: activeFilter === 'pending-order' }">待出补货单设备</text>
      </view>
      <view class="stat-item" @click="activeFilter = 'pending-task'">
        <text class="stat-num" :class="{ highlight: activeFilter === 'pending-task' }">{{ stats.pendingTasks }}</text>
        <text class="stat-label" :class="{ highlight: activeFilter === 'pending-task' }">待完成补货单</text>
      </view>
      <view class="stat-item" @click="activeFilter = 'today'">
        <text class="stat-num" :class="{ highlight: activeFilter === 'today' }">{{ stats.todayReplenished }}</text>
        <text class="stat-label" :class="{ highlight: activeFilter === 'today' }">今日已补货(补货记录)</text>
      </view>
    </view>

    <!-- 搜索与筛选 -->
    <view class="search-bar">
      <view class="search-input-wrap">
        <view class="search-icon"></view>
        <input
          class="search-input"
          v-model="searchKeyword"
          placeholder="请输入设备编号/名称"
          placeholder-class="search-placeholder"
          confirm-type="search"
          @confirm="handleSearch"
        />
      </view>
      <view class="search-btn" @click="handleSearch">搜索</view>
      <view class="filter-btn" @click="showFilter = !showFilter">
        <text>筛选</text>
        <view class="filter-icon"></view>
      </view>
    </view>

    <!-- 加载 -->
    <view class="load-tip" v-if="loading">
      <view class="dot-row"><view class="pulse-dot"></view><view class="pulse-dot"></view><view class="pulse-dot"></view></view>
    </view>

    <!-- 设备列表 -->
    <view class="device-section" v-else>
      <view class="empty-state" v-if="filteredDevices.length === 0">
        <text class="empty-text">{{ activeFilter === 'all' ? '暂无绑定的设备' : '没有匹配的设备' }}</text>
        <text class="empty-hint">{{ activeFilter === 'all' ? '请联系管理员绑定设备后开始补货' : '当前筛选条件下没有设备' }}</text>
      </view>

      <view
        class="device-card"
        v-for="(device, index) in filteredDevices"
        :key="device.deviceId || index"
        @click="goToOperation(device)"
      >
        <view class="card-top">
          <text class="device-name">{{ device.deviceId }} - {{ device.name || '' }}</text>
          <view class="order-tag" v-if="device.replenishOrderGenerated">补货单已生成</view>
        </view>

        <view class="card-body">
          <view class="inventory-badge" :class="getInventoryLevel(device.inventoryPercent)">
            <text class="badge-label">库存</text>
            <text class="badge-value">{{ device.inventoryPercent || 0 }}%</text>
          </view>
          <view class="metrics-row">
            <view class="metric-item">
              <text class="metric-value">{{ device.standardStock || 0 }}</text>
              <text class="metric-label">标准库存</text>
            </view>
            <view class="metric-item">
              <text class="metric-value">{{ device.remainingStock || 0 }}</text>
              <text class="metric-label">剩余库存</text>
            </view>
          </view>
        </view>

        <!-- 勾选框 -->
        <view class="card-checkbox" :class="{ checked: device.selected }" @click.stop="toggleSelect(device)">
          <text v-if="device.selected" class="check-mark">✓</text>
        </view>
      </view>
    </view>

    <!-- 底部批量操作栏 -->
    <view class="bottom-bar" v-if="filteredDevices.length > 0">
      <view class="bottom-left">
        <view class="select-all-btn" @click="toggleSelectAll">
          <view class="checkbox-icon" :class="{ checked: allSelected }">
            <text v-if="allSelected" class="check-mark">✓</text>
          </view>
          <text>全选</text>
        </view>
        <text class="selected-count">已选（{{ selectedCount }}）</text>
      </view>
      <view class="batch-btn" @click="handleBatchGenerate">
        <text>批量生成补货单</text>
      </view>
    </view>

    <!-- 阈值编辑弹窗 -->
    <view class="modal-mask" v-if="showThresholdModal" @click="showThresholdModal = false">
      <view class="modal-content" @click.stop>
        <text class="modal-title">设置报警阈值</text>
        <view class="modal-input-wrap">
          <input
            class="modal-input"
            type="number"
            v-model="tempThreshold"
            placeholder="请输入百分比"
          />
          <text class="modal-suffix">%</text>
        </view>
        <view class="modal-actions">
          <view class="modal-btn cancel" @click="showThresholdModal = false">取消</view>
          <view class="modal-btn confirm" @click="confirmThreshold">确定</view>
        </view>
      </view>
    </view>

    <CustomTabBar />
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import CustomTabBar from '@/components/CustomTabBar.vue';
import { getDeviceList, batchGenerateOrders, getReplenisherOrderDetail } from '@/api/replenish';
import { clearAuth } from '@/utils/auth';

const statusBarHeight = ref(0);

// 设置
const alertMode = ref<'standard' | 'sales'>('standard');
const alertThreshold = ref(80);
const requirePhoto = ref(false);
const showThresholdModal = ref(false);
const tempThreshold = ref(80);

// 搜索筛选
const searchKeyword = ref('');
const showFilter = ref(false);
const activeFilter = ref('all');

// 数据
const deviceList = ref<any[]>([]);
const loading = ref(true);

// 统计
const stats = ref({
  totalDevices: 0,
  pendingOrderDevices: 0,
  pendingTasks: 0,
  todayReplenished: 0
});

const filteredDevices = computed(() => {
  let list = deviceList.value;
  // 关键词筛选
  if (searchKeyword.value) {
    const kw = searchKeyword.value.toLowerCase();
    list = list.filter(d =>
      (d.deviceId || '').toLowerCase().includes(kw) ||
      (d.name || '').toLowerCase().includes(kw)
    );
  }
  // 标签筛选
  switch (activeFilter.value) {
    case 'pending-order':
      return list.filter(d => !d.replenishOrderGenerated);
    case 'pending-task':
      return list.filter(d => d.replenishOrderGenerated && !d.todayReplenished);
    case 'today':
      return list.filter(d => d.todayReplenished);
    default:
      return list;
  }
});

const selectedCount = computed(() => deviceList.value.filter(d => d.selected).length);
const allSelected = computed(() => filteredDevices.value.length > 0 && filteredDevices.value.every(d => d.selected));

const getInventoryLevel = (percent: number): string => {
  if (percent <= 30) return 'danger';
  if (percent <= 60) return 'warning';
  return 'normal';
};

const editThreshold = () => {
  tempThreshold.value = alertThreshold.value;
  showThresholdModal.value = true;
};

const confirmThreshold = () => {
  const val = parseInt(tempThreshold.value);
  if (val >= 0 && val <= 100) {
    alertThreshold.value = val;
  }
  showThresholdModal.value = false;
};

const toggleSelect = (device: any) => {
  device.selected = !device.selected;
};

const toggleSelectAll = () => {
  const shouldSelect = !allSelected.value;
  filteredDevices.value.forEach(d => { d.selected = shouldSelect; });
};

const handleSearch = () => {
  // 触发筛选
};

const goToOperation = async (device: any) => {
  if (device.replenishOrderGenerated && device.pendingOrderId) {
    try {
      const data = await getReplenisherOrderDetail(device.pendingOrderId);
      if (data?.items?.length) {
        const orderData = {
          orderId: device.pendingOrderId,
          orderNo: device.pendingOrderNo || '',
          items: data.items.map((item: any) => ({
            productCode: (item.productCode || '').trim(),
            productName: item.productName,
            plannedQuantity: item.plannedQuantity || item.quantity || 0,
            shelfNum: item.shelfNum,
            position: item.position
          }))
        };
        uni.setStorageSync('pendingReplenishOrder', JSON.stringify(orderData));
        uni.navigateTo({ url: `/pages/replenish/operation?deviceId=${device.deviceId}&orderId=${device.pendingOrderId}` });
        return;
      }
    } catch { /* fallback to manual */ }
  }
  uni.navigateTo({ url: `/pages/replenish/operation?deviceId=${device.deviceId}` });
};

const handleBatchGenerate = async () => {
  const selected = deviceList.value.filter(d => d.selected);
  if (selected.length === 0) {
    uni.showToast({ title: '请先选择设备', icon: 'none' });
    return;
  }
  try {
    const ids = selected.map(d => d.deviceId);
    await batchGenerateOrders({ deviceIds: ids });
    uni.showToast({ title: `已为${selected.length}台设备生成补货单`, icon: 'success' });
    // 刷新数据
    await loadData();
  } catch (e: any) {
    uni.showToast({ title: e.message || '生成失败', icon: 'none' });
  }
};

const handleLogout = () => {
  uni.showModal({
    title: '退出登录',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        clearAuth();
        uni.reLaunch({ url: '/pages/login/login' });
      }
    }
  });
};

const loadData = async () => {
  loading.value = true;
  try {
    const devices = await getDeviceList();
    deviceList.value = (devices || []).map(d => ({ ...d, selected: false }));
    stats.value = {
      totalDevices: deviceList.value.length,
      pendingOrderDevices: deviceList.value.filter(d => !d.replenishOrderGenerated).length,
      pendingTasks: deviceList.value.filter(d => d.replenishOrderGenerated && !d.todayReplenished).length,
      todayReplenished: deviceList.value.filter(d => d.todayReplenished).length
    };
  } catch (e: any) {
    uni.showToast({ title: e.message || '加载失败', icon: 'none' });
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 20;
});

onShow(async () => {
  await loadData();
});
</script>

<style lang="scss" scoped>
.page { min-height: 100vh; background: $bg-color-page; padding-bottom: 160rpx; }

// ====== 黄色导航栏 ======
.yellow-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: $primary-color;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
.header-content {
  display: flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 16rpx; position: relative;
}
.header-title { font-size: $font-size-xl; font-weight: 700; color: $text-color-primary; }
.header-logout { position: absolute; left: 24rpx; width: 40rpx; height: 40rpx;
  &:active { opacity: 0.7; }
}
.header-placeholder { width: 100%; }

// ====== 设置卡片 ======
.settings-card {
  margin: 16rpx 24rpx; padding: 24rpx; background: $bg-color-card;
  border-radius: $radius-md; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12rpx 0;
}
.setting-label {
  display: flex; align-items: center; gap: 8rpx;
  .label-icon {
    width: 32rpx; height: 32rpx; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: $font-size-xs; font-weight: 700; color: $text-color-primary;
  }
  .warning-icon { background: $warning-color; }
  .threshold-icon { background: $primary-color; font-size: 16rpx; }
  .camera-icon { background: $primary-color; font-size: 16rpx; }
  .label-text { font-size: $font-size-base; font-weight: 600; color: $text-color-primary; }
  .label-tip {
    width: 28rpx; height: 28rpx; border-radius: 50%;
    background: $warning-color-bg; color: $warning-color;
    font-size: 18rpx; font-weight: 700; font-style: italic;
    display: flex; align-items: center; justify-content: center;
  }
}
.radio-row { display: flex; gap: 32rpx; padding: 8rpx 0 16rpx;
  .radio-item { display: flex; align-items: center; gap: 8rpx; font-size: $font-size-sm; color: $text-color-secondary;
    .radio-dot { width: 28rpx; height: 28rpx; border-radius: 50%; border: 3rpx solid $border-color;
      &.checked { border-color: $primary-color; background: $primary-color;
        &::after { content: ''; display: block; width: 10rpx; height: 10rpx; border-radius: 50%; background: #fff; margin: 6rpx auto; }
      }
    }
    &.active { color: $text-color-primary; font-weight: 500; }
  }
}
.threshold-row { border-top: 1rpx solid $border-color-light;
  .threshold-value { display: flex; align-items: center; gap: 8rpx; font-size: $font-size-lg; font-weight: 700; color: $text-color-primary;
    .edit-icon { width: 32rpx; height: 32rpx; flex-shrink: 0; }
  }
}
.toggle-switch {
  width: 80rpx; height: 44rpx; border-radius: 22rpx;
  background: $border-color; position: relative; transition: background 0.3s;
  .toggle-knob {
    width: 38rpx; height: 38rpx; border-radius: 50%; background: #fff;
    position: absolute; top: 3rpx; left: 3rpx; transition: left 0.3s;
    box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.15);
  }
  &.on { background: $primary-color;
    .toggle-knob { left: 39rpx; }
  }
}

// ====== 统计行 ======
.stats-row {
  display: flex; padding: 16rpx 24rpx; gap: 0;
  .stat-item { flex: 1; text-align: center; padding: 12rpx 0;
    .stat-num { display: block; font-size: 40rpx; font-weight: 800; color: $text-color-primary; line-height: 1.2;
      &.highlight { color: $primary-color-dark; }
    }
    .stat-label { display: block; font-size: $font-size-xs; color: $text-color-muted; margin-top: 4rpx; line-height: 1.3;
      &.highlight { color: $primary-color; font-weight: 600; }
    }
  }
}

// ====== 搜索栏 ======
.search-bar {
  display: flex; align-items: center; gap: 12rpx; padding: 0 24rpx; margin-bottom: 16rpx;
}
.search-input-wrap {
  flex: 1; display: flex; align-items: center; background: $bg-color-card;
  border-radius: $radius-base; padding: 0 16rpx; height: 72rpx;
  border: 1rpx solid $border-color;
  .search-icon { width: 32rpx; height: 32rpx; margin-right: 8rpx; flex-shrink: 0; position: relative;
    &::before { content: ''; position: absolute; top: 2rpx; left: 2rpx; width: 18rpx; height: 18rpx; border: 2.5rpx solid $text-color-placeholder; border-radius: 50%; }
    &::after { content: ''; position: absolute; bottom: 2rpx; right: 2rpx; width: 2.5rpx; height: 10rpx; background: $text-color-placeholder; border-radius: 1rpx; transform: rotate(-45deg); transform-origin: top center; }
  }
  .search-input { flex: 1; font-size: $font-size-base; color: $text-color-primary; }
}
.search-placeholder { color: $text-color-placeholder; }
.search-btn {
  padding: 0 28rpx; height: 72rpx; line-height: 72rpx;
  background: $primary-color; border-radius: $radius-base;
  font-size: $font-size-base; font-weight: 600; color: #1e293b;
  &:active { opacity: 0.8; }
}
.filter-btn {
  display: flex; align-items: center; gap: 4rpx; padding: 0 20rpx; height: 72rpx; line-height: 72rpx;
  background: $bg-color-card; border-radius: $radius-base; border: 1rpx solid $border-color;
  font-size: $font-size-sm; color: $text-color-secondary;
  .filter-icon { width: 0; height: 0; border-left: 8rpx solid transparent; border-right: 8rpx solid transparent; border-top: 10rpx solid $text-color-secondary; }
  &:active { opacity: 0.7; }
}

// ====== 加载 ======
.load-tip { display: flex; justify-content: center; padding: 100rpx 0; }
.dot-row { display: flex; gap: $spacing-1; }
.pulse-dot { width: 10rpx; height: 10rpx; background: $text-color-placeholder; border-radius: 50%; animation: pulse 1.2s ease-in-out infinite;
  &:nth-child(2) { animation-delay: 0.2s; } &:nth-child(3) { animation-delay: 0.4s; }
}
@keyframes pulse { 0%,80%,100% { transform: scale(0.5); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

// ====== 设备列表 ======
.device-section { padding: 0 24rpx; }

.empty-state { display: flex; flex-direction: column; align-items: center; padding: 120rpx 0;
  .empty-text { font-size: $font-size-base; color: $text-color-secondary; margin-bottom: $spacing-1; }
  .empty-hint { font-size: $font-size-sm; color: $text-color-muted; }
}

.device-card {
  position: relative;
  margin-bottom: 16rpx; padding: 24rpx; padding-right: 72rpx;
  background: $bg-color-card; border-radius: $radius-md;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  &:active { opacity: 0.7; }
}
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16rpx;
  .device-name { font-size: $font-size-base; font-weight: 600; color: $text-color-primary; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .order-tag { padding: 4rpx 16rpx; background: $primary-color; border-radius: 6rpx; font-size: 22rpx; font-weight: 600; color: #1e293b; flex-shrink: 0; margin-left: 12rpx; }
}
.card-body { display: flex; align-items: center; gap: 16rpx;
  .inventory-badge {
    width: 100rpx; padding: 12rpx 0; border-radius: $radius-sm; text-align: center; flex-shrink: 0;
    .badge-label { display: block; font-size: $font-size-xs; color: #fff; }
    .badge-value { display: block; font-size: $font-size-lg; font-weight: 800; color: #fff; }
    &.danger { background: $error-color; }
    &.warning { background: $accent-color; }
    &.normal { background: $success-color; }
  }
  .metrics-row { flex: 1; display: flex; flex-wrap: wrap;
    .metric-item { width: 50%; margin-bottom: 8rpx; display: flex; flex-direction: column; align-items: center;
      .metric-value { font-size: $font-size-md; font-weight: 700; color: $text-color-primary; }
      .metric-label { font-size: 22rpx; color: $text-color-muted; margin-top: 2rpx; }
      .info-tip { font-size: 18rpx; color: $warning-color; font-style: italic; margin-left: 2rpx; }
    }
  }
}
.card-checkbox {
  position: absolute; right: 24rpx; top: 50%; transform: translateY(-50%);
  width: 40rpx; height: 40rpx; border-radius: 8rpx; border: 3rpx solid $border-color;
  display: flex; align-items: center; justify-content: center;
  &.checked { background: $primary-color; border-color: $primary-color;
    .check-mark { color: #fff; font-size: 24rpx; font-weight: 700; }
  }
}

// ====== 底部批量操作栏 ======
.bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16rpx 24rpx; padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  background: $bg-color-card; border-top: 1rpx solid $border-color-light;
  z-index: 100;
}
.bottom-left { display: flex; align-items: center; gap: 16rpx;
  .select-all-btn { display: flex; align-items: center; gap: 8rpx; font-size: $font-size-sm; color: $text-color-secondary;
    .checkbox-icon { width: 36rpx; height: 36rpx; border-radius: 8rpx; border: 3rpx solid $border-color;
      display: flex; align-items: center; justify-content: center;
      &.checked { background: $primary-color; border-color: $primary-color;
        .check-mark { color: #fff; font-size: 22rpx; font-weight: 700; }
      }
    }
  }
  .selected-count { font-size: $font-size-sm; color: $text-color-muted; }
}
.batch-btn {
  padding: 16rpx 32rpx; background: $primary-color; border-radius: $radius-base;
  font-size: $font-size-base; font-weight: 600; color: #1e293b;
  &:active { opacity: 0.8; }
}

// ====== 阈值弹窗 ======
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.modal-content {
  width: 560rpx; background: $bg-color-card; border-radius: $radius-lg; padding: 32rpx;
}
.modal-title { display: block; font-size: $font-size-lg; font-weight: 700; color: $text-color-primary; text-align: center; margin-bottom: 24rpx; }
.modal-input-wrap {
  display: flex; align-items: center; background: $bg-color-page; border-radius: $radius-base;
  padding: 0 20rpx; height: 80rpx; border: 1rpx solid $border-color;
  .modal-input { flex: 1; font-size: $font-size-lg; color: $text-color-primary; text-align: center; }
  .modal-suffix { font-size: $font-size-lg; color: $text-color-muted; margin-left: 8rpx; }
}
.modal-actions { display: flex; gap: 16rpx; margin-top: 24rpx;
  .modal-btn { flex: 1; height: 72rpx; line-height: 72rpx; text-align: center; border-radius: $radius-base; font-size: $font-size-base; font-weight: 600;
    &.cancel { background: $bg-color-page; color: $text-color-secondary; }
    &.confirm { background: $primary-color; color: #1e293b; }
    &:active { opacity: 0.8; }
  }
}
</style>
