<template>
  <header class="status-bar">
    <!-- Logo 区域 -->
    <div
      class="status-logo"
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd"
      @mousedown="handleMouseDown"
      @mouseup="handleMouseUp"
    >
      <div class="logo-icon">
        <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="20" cy="14" r="8" fill="currentColor" />
          <rect x="10" y="24" width="20" height="12" rx="4" fill="currentColor" />
          <circle cx="15" cy="12" r="2" fill="white" />
          <circle cx="25" cy="12" r="2" fill="white" />
        </svg>
      </div>
      <span class="logo-text">{{ title }}</span>
    </div>

    <!-- 中央信息 -->
    <div class="status-center">
      <div class="status-time">{{ currentTime }}</div>
      <div class="status-date">{{ currentDate }}</div>
    </div>

    <!-- 右侧状态 -->
    <div class="status-right">
      <!-- 网络状态 -->
      <div class="status-item" :class="{ 'offline': !networkOk }">
        <span class="status-icon icon-network"></span>
        <span class="status-label">{{ networkOk ? '在线' : '离线' }}</span>
      </div>

      <!-- 充电状态 -->
      <div v-if="isCharging" class="status-item charging">
        <span class="status-icon icon-charging"></span>
        <span class="status-label">充电中</span>
      </div>

      <!-- 电量 -->
      <div class="status-item" :class="batteryClass">
        <span class="status-icon icon-battery"></span>
        <span class="status-label">{{ batteryLevel }}%</span>
      </div>

      <!-- 故障提示 -->
      <div v-if="hasFault" class="status-item fault">
        <span class="status-icon icon-fault"></span>
        <span class="status-label">故障</span>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useScreenStore } from '@/stores/screen'
import { formatTimeShort, formatDateCN } from '@/utils/time'

const props = defineProps({
  logo: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '迎宾巡逻机器人'
  }
})

const emit = defineEmits(['logo-long-press'])

const screenStore = useScreenStore()

// 时间
const currentTime = ref(formatTimeShort())
const currentDate = ref(formatDateCN())

// 状态
const batteryLevel = computed(() => screenStore.robotStatus.batteryLevel)
const networkOk = computed(() => screenStore.networkOk)
const isCharging = computed(() => screenStore.isCharging)
const hasFault = computed(() => screenStore.hasFault)

const batteryClass = computed(() => {
  const level = batteryLevel.value
  if (level <= 20) return 'battery-low'
  if (level <= 50) return 'battery-mid'
  return 'battery-high'
})

// 长按检测
let pressTimer = null
let pressStartTime = 0
const LONG_PRESS_DURATION = 5000 // 5秒

const handleTouchStart = () => {
  pressStartTime = Date.now()
  pressTimer = setTimeout(() => {
    emit('logo-long-press')
  }, LONG_PRESS_DURATION)
}

const handleTouchEnd = () => {
  if (pressTimer) {
    clearTimeout(pressTimer)
    pressTimer = null
  }
}

const handleMouseDown = () => {
  handleTouchStart()
}

const handleMouseUp = () => {
  handleTouchEnd()
}

// 更新时间
let timer = null

const updateTime = () => {
  currentTime.value = formatTimeShort()
  currentDate.value = formatDateCN()
}

onMounted(() => {
  timer = setInterval(updateTime, 1000)
  updateTime()
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.status-bar {
  height: var(--status-bar-height);
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  backdrop-filter: blur(10px);
}

.status-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.logo-icon {
  width: 48px;
  height: 48px;
  color: var(--primary);
}

.logo-icon svg {
  width: 100%;
  height: 100%;
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 1px;
}

.status-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.status-time {
  font-size: 34px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 1.5px;
  line-height: 1;
}

.status-date {
  font-size: 17px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-page);
  font-size: 17px;
  color: var(--text-secondary);
}

.status-icon {
  width: 20px;
  height: 20px;
}

.icon-network {
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0'/%3E%3Cpath d='M1.42 9a16 16 0 0 1 21.16 0'/%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Ccircle cx='12' cy='20' r='1'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0'/%3E%3Cpath d='M1.42 9a16 16 0 0 1 21.16 0'/%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Ccircle cx='12' cy='20' r='1'/%3E%3C/svg%3E") center/contain no-repeat;
}

.icon-battery {
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='7' width='18' height='10' rx='2'/%3E%3Cpath d='M22 11v2'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='7' width='18' height='10' rx='2'/%3E%3Cpath d='M22 11v2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.icon-charging {
  background: var(--success);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3.19'/%3E%3Cline x1='23' y1='13' x2='23' y2='11'/%3E%3Cpolyline points='11 6 7 12 13 12 9 18'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3.19'/%3E%3Cline x1='23' y1='13' x2='23' y2='11'/%3E%3Cpolyline points='11 6 7 12 13 12 9 18'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: pulse 1.5s ease-in-out infinite;
}

.icon-fault {
  background: var(--danger);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 电量状态 */
.battery-high {
  color: var(--success);
}

.battery-mid {
  color: var(--warning);
}

.battery-low {
  color: var(--danger);
  animation: pulse 1s ease-in-out infinite;
}

.offline {
  color: var(--danger);
}

.charging {
  color: var(--success);
}

.fault {
  color: var(--danger);
  background: var(--danger-soft);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
</style>
