<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">{{ t('location.title') }}</text>
          <LocationPicker />
        </view>
        <view class="top-right" @click="isMenuOpen = true">
          <AppIcon name="menu" size="sm" color="white" />
        </view>
      </view>
    </view>

    <view class="content">
      <view class="store-highlight">
        <view class="store-highlight-header">
          <view class="store-pin-icon">
            <AppIcon name="mapPin" size="md" color="white" />
          </view>
          <view class="store-highlight-texts">
            <text class="store-badge-label">{{ t('location.currentStore') }}</text>
            <text class="store-highlight-name">{{ currentStore.locationName }}</text>
          </view>
        </view>
        <view class="store-address-block">
          <text class="store-address-line">{{ currentStore.fullAddress }}</text>
        </view>
      </view>

      <view class="info-section">
        <text class="section-label">{{ t('location.contactInfo') }}</text>
        <view class="info-card">
          <view class="info-item">
            <view class="info-icon-box green">
              <AppIcon name="phone" size="sm" color="green" />
            </view>
            <view class="info-texts">
              <text class="info-key">{{ t('location.storePhone') }}</text>
              <text class="info-val">{{ currentStore.phone }}</text>
            </view>
          </view>
          <view class="info-divider" />
          <view class="info-item">
            <view class="info-icon-box purple">
              <AppIcon name="clock" size="sm" color="purple" />
            </view>
            <view class="info-texts">
              <text class="info-key">{{ t('location.operatingHours') }}</text>
              <text class="info-val">{{ currentStore.hours }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="info-section">
        <text class="section-label">{{ t('location.storeManager') }}</text>
        <view class="info-card">
          <view class="info-item">
            <view class="info-icon-box blue">
              <AppIcon name="user" size="sm" color="blue" />
            </view>
            <view class="info-texts">
              <text class="info-key">{{ t('location.name') }}</text>
              <text class="info-val">{{ currentStore.manager }}</text>
            </view>
          </view>
          <view class="info-divider" />
          <view class="info-item">
            <view class="info-icon-box green">
              <AppIcon name="phone" size="sm" color="green" />
            </view>
            <view class="info-texts">
              <text class="info-key">{{ t('location.phone') }}</text>
              <text class="info-val">{{ currentStore.managerPhone }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="switch-btn" @click="showDialog = true">
        <AppIcon name="refresh" size="sm" color="primary" />
        <text class="switch-btn-text">{{ t('location.switchStore') }}</text>
      </view>
    </view>

    <view v-if="showDialog" class="modal-mask" @click="showDialog = false">
      <view class="modal" @click.stop>
        <text class="modal-title">{{ t('location.switchStore') }}</text>
        <text class="modal-desc">{{ t('location.selectNewStore') }}</text>
        <view class="store-list">
          <view
            v-for="s in stores"
            :key="s.id"
            class="store-item"
            :class="{ selected: selectedId === s.id }"
            @click="selectedId = s.id"
          >
            <view class="store-icon" :class="{ selected: selectedId === s.id }">
              <AppIcon name="mapPin" size="sm" :color="selectedId === s.id ? 'white' : 'gray'" />
            </view>
            <view class="store-info-col">
              <text class="store-item-name">{{ s.locationName }}</text>
              <text class="store-item-addr">{{ s.fullAddress }}</text>
            </view>
            <view v-if="selectedId === s.id" class="check-circle">
              <AppIcon name="check" size="sm" color="white" />
            </view>
          </view>
        </view>
        <view class="modal-actions">
          <view class="btn-cancel" @click="showDialog = false">
            <text class="btn-cancel-text">{{ t('common.cancel') }}</text>
          </view>
          <view class="btn-confirm" :class="{ disabled: selectedId === currentStore.id }" @click="handleSwitch">
            <text class="btn-confirm-text">{{ t('location.confirmSwitch') }}</text>
          </view>
        </view>
      </view>
    </view>

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

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { onShow } from '@dcloudio/uni-app'
import AppIcon from '../../components/AppIcon.vue'
import SideMenu from '../../components/SideMenu.vue'
import LocationPicker from '../../components/LocationPicker.vue'
import { getStatusBarHeight } from '../../utils/statusBar'
import { getBoundLocations, switchStore, getCurrentStoreId } from '../../utils/stores'

const { t } = useI18n()
const statusBarHeight = getStatusBarHeight()
const isMenuOpen = ref(false)
const showDialog = ref(false)
const selectedId = ref(getCurrentStoreId())

const stores = computed(() => getBoundLocations().filter((s) => s.state !== false))

const EM = '—'

const currentStore = computed(() => {
  const list = stores.value
  const id = selectedId.value || getCurrentStoreId()
  const row = list.find((s) => s.id === id) || list[0]
  if (!row) {
    return {
      id: '',
      locationName: EM,
      fullAddress: EM,
      phone: EM,
      hours: EM,
      manager: EM,
      managerPhone: EM,
    }
  }
  return {
    id: row.id,
    locationName: row.locationName,
    fullAddress: row.fullAddress || EM,
    phone: EM,
    hours: EM,
    manager: EM,
    managerPhone: EM,
  }
})

onShow(() => {
  selectedId.value = getCurrentStoreId()
})

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

const handleSwitch = () => {
  if (selectedId.value === currentStore.value.id) return
  const s = stores.value.find((x) => x.id === selectedId.value)
  if (s) {
    switchStore(s.id, s.locationName, s.locationCode)
    uni.showToast({ title: t('location.storeSwitched'), icon: 'success' })
    showDialog.value = false
  }
}
</script>

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

.header-hero {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
  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 {
  padding: 32rpx;
}

.store-highlight {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
  border-radius: 20rpx;
  padding: 36rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 8rpx 24rpx var(--theme-primary-shadow);
}

.store-highlight-header {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.store-pin-icon {
  width: 72rpx;
  height: 72rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.store-highlight-texts {
  flex: 1;
  min-width: 0;
}

.store-badge-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.75);
  display: block;
  margin-bottom: 4rpx;
  font-weight: 500;
}

.store-highlight-name {
  font-size: 36rpx;
  font-weight: 700;
  color: #fff;
}

.store-address-block {
  padding-top: 16rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
}

.store-address-line {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.85);
  display: block;
  line-height: 1.6;
}

.info-section {
  margin-bottom: 28rpx;
}

.section-label {
  font-size: 28rpx;
  font-weight: 600;
  color: #6b7280;
  display: block;
  margin-bottom: 16rpx;
}

.info-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 0 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.info-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 28rpx 0;
}

.info-divider {
  height: 1rpx;
  background: #f3f4f6;
}

.info-icon-box {
  width: 64rpx;
  height: 64rpx;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-icon-box.green {
  background: #f0fdf4;
}

.info-icon-box.purple {
  background: #faf5ff;
}

.info-icon-box.blue {
  background: #eff6ff;
}

.info-texts {
  flex: 1;
  min-width: 0;
}

.info-key {
  font-size: 26rpx;
  color: #6b7280;
  display: block;
  margin-bottom: 4rpx;
}

.info-val {
  font-size: 30rpx;
  font-weight: 600;
  color: #111827;
}

.switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  width: 100%;
  height: 92rpx;
  border: 2rpx solid var(--theme-primary);
  border-radius: 16rpx;
  background: #fff;
  margin-top: 8rpx;
}

.switch-btn-text {
  font-size: 30rpx;
  font-weight: 600;
  color: var(--theme-primary);
  line-height: 1;
}

.modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48rpx;
}

.modal {
  width: 100%;
  max-width: 620rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
}

.modal-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #111827;
  display: block;
  margin-bottom: 12rpx;
}

.modal-desc {
  font-size: 28rpx;
  color: #6b7280;
  display: block;
  margin-bottom: 32rpx;
}

.store-list {
  margin-bottom: 32rpx;
}

.store-item {
  padding: 28rpx;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  border: 2rpx solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.store-item.selected {
  border-color: var(--theme-primary);
  background: var(--theme-primary-light);
}

.store-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 14rpx;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.store-icon.selected {
  background: var(--theme-primary);
}

.store-info-col {
  flex: 1;
  min-width: 0;
}

.store-item-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #111827;
  display: block;
  margin-bottom: 4rpx;
}

.store-item-addr {
  font-size: 26rpx;
  color: #6b7280;
  display: block;
}

.check-circle {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: var(--theme-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal-actions {
  display: flex;
  gap: 20rpx;
}

.btn-cancel {
  flex: 1;
  height: 88rpx;
  background: #f3f4f6;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-cancel-text {
  font-size: 30rpx;
  font-weight: 500;
  color: #374151;
  line-height: 1;
}

.btn-confirm {
  flex: 1;
  height: 88rpx;
  background: var(--theme-primary);
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-confirm.disabled {
  opacity: 0.4;
}

.btn-confirm-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
</style>
