<template>
  <view class="page">
    <view class="header">
      <view class="header-top">
        <view class="menu-button" @click="isMenuOpen = true">
          <AppIcon name="menu" size="sm" color="primary" />
        </view>
        <view>
          <text class="title">{{ t('more.title') }}</text>
          <text class="subtitle">{{ userName }}</text>
        </view>
      </view>
    </view>

    <view class="menu-list">
      <view class="menu-item" @click="navTo('/pages/more/profile')">
        <view class="menu-icon blue"><AppIcon name="user" size="md" color="blue" /></view>
        <view class="menu-content">
          <text class="menu-title">{{ t('more.profile') }}</text>
          <text class="menu-desc">{{ t('more.profile.desc') }}</text>
        </view>
        <AppIcon name="chevronRight" size="sm" color="gray" />
      </view>
      <view class="menu-item" @click="navTo('/pages/more/printers')">
        <view class="menu-icon gray"><AppIcon name="printer" size="md" color="gray" /></view>
        <view class="menu-content">
          <text class="menu-title">{{ t('more.printers') }}</text>
          <text class="menu-desc">{{ t('more.printers.desc') }}</text>
        </view>
        <AppIcon name="chevronRight" size="sm" color="gray" />
      </view>
      <view class="menu-item" @click="navTo('/pages/more/location')">
        <view class="menu-icon gray"><AppIcon name="mapPin" size="md" color="gray" /></view>
        <view class="menu-content">
          <text class="menu-title">{{ t('more.location') }}</text>
          <text class="menu-desc">{{ t('more.location.desc') }}</text>
        </view>
        <AppIcon name="chevronRight" size="sm" color="gray" />
      </view>
      <view class="menu-item" @click="navTo('/pages/more/sync')">
        <view class="menu-icon gray"><AppIcon name="refresh" size="md" color="gray" /></view>
        <view class="menu-content">
          <text class="menu-title">{{ t('more.sync') }}</text>
          <text class="menu-desc">{{ t('more.sync.desc') }}</text>
        </view>
        <AppIcon name="chevronRight" size="sm" color="gray" />
      </view>
      <view class="menu-item" @click="navTo('/pages/more/language')">
        <view class="menu-icon gray"><AppIcon name="globe" size="md" color="gray" /></view>
        <view class="menu-content">
          <text class="menu-title">{{ t('more.language') }}</text>
          <text class="menu-desc">{{ t('more.language.desc') }}</text>
        </view>
        <AppIcon name="chevronRight" size="sm" color="gray" />
      </view>
      <view class="menu-item" @click="navTo('/pages/more/support')">
        <view class="menu-icon gray"><AppIcon name="help" size="md" color="gray" /></view>
        <view class="menu-content">
          <text class="menu-title">{{ t('more.support') }}</text>
          <text class="menu-desc">{{ t('more.support.desc') }}</text>
        </view>
        <AppIcon name="chevronRight" size="sm" color="gray" />
      </view>
      <view class="menu-item logout" @click="showLogout = true">
        <view class="menu-icon red"><AppIcon name="logout" size="md" color="red" /></view>
        <view class="menu-content">
          <text class="menu-title red">{{ t('more.logout') }}</text>
          <text class="menu-desc">Sign out of your account</text>
        </view>
        <AppIcon name="chevronRight" size="sm" color="gray" />
      </view>
    </view>

    <view class="app-info">
      <text>Food Label System</text>
      <text>Version 1.0.0</text>
    </view>

    <view v-if="showLogout" class="modal-mask" @click="showLogout = false">
      <view class="modal" @click.stop>
        <text class="modal-title">Confirm Logout</text>
        <text class="modal-desc">Are you sure you want to logout?</text>
        <view class="modal-actions">
          <button class="btn-cancel" @click="showLogout = false">{{ t('common.cancel') }}</button>
          <button class="btn-logout" @click="handleLogout">{{ t('more.logout') }}</button>
        </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 userName = 'John Smith'
const showLogout = ref(false)
const isMenuOpen = ref(false)

const navTo = (path: string) => uni.navigateTo({ url: path })

const handleLogout = () => {
  uni.removeStorageSync('isLoggedIn')
  uni.removeStorageSync('userName')
  uni.removeStorageSync('storeName')
  uni.removeStorageSync('storeId')
  uni.redirectTo({ url: '/pages/login/login' })
}
</script>

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

.header {
  background: #fff;
  border-bottom: 1rpx solid #e5e7eb;
  padding: 48rpx;
}

.header-top {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.menu-button {
  width: 64rpx;
  height: 64rpx;
  border-radius: 999rpx;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title { font-size: 48rpx; font-weight: 600; color: #111827; display: block; margin-bottom: 8rpx; }
.subtitle { font-size: 32rpx; color: #4b5563; }

.menu-list {
  padding: 48rpx;
}

.menu-item {
  background: #fff;
  padding: 32rpx 40rpx;
  border-radius: 20rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}

.menu-item.logout {
  border: 1rpx solid #fecaca;
}

.menu-icon {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-icon.blue { background: #dbeafe; }
.menu-icon.gray { background: #f3f4f6; }
.menu-icon.red { background: #fee2e2; }

.menu-content { flex: 1; min-width: 0; }
.menu-title { font-size: 32rpx; font-weight: 600; color: #111827; display: block; }
.menu-title.red { color: #dc2626; }
.menu-desc { font-size: 28rpx; color: #4b5563; }

.app-info {
  text-align: center;
  padding: 48rpx;
}

.app-info text {
  display: block;
  font-size: 28rpx;
  color: #6b7280;
  margin-bottom: 8rpx;
}

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

.modal {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 48rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
}

.modal-title { font-size: 40rpx; font-weight: 600; color: #111827; display: block; margin-bottom: 16rpx; }
.modal-desc { font-size: 28rpx; color: #4b5563; display: block; margin-bottom: 48rpx; }

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

.btn-cancel, .btn-logout {
  flex: 1;
  height: 88rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 600;
  border: none;
}

.btn-cancel { background: #f3f4f6; color: #374151; }
.btn-logout { background: #dc2626; color: #fff; }
</style>
