<template>
  <view class="page-merchant">
    <!-- 未登录商家账号 -->
    <view v-if="!sellerStore.isSellerLoggedIn()" class="login-tip">
      <text class="tip-text">请先注册/登录商家账号</text>
      <button class="login-btn" @tap="goSellerRegister">去注册/登录</button>
    </view>

    <!-- 已登录但未申请店铺 -->
    <view v-else-if="!sellerStore.hasMerchant()" class="apply-section">
      <view class="seller-info">
        <text class="seller-name">{{ sellerStore.sellerInfo?.contactName }}</text>
        <text class="seller-phone">{{ sellerStore.sellerInfo?.phone }}</text>
      </view>
      <text class="apply-title">创建店铺</text>
      <text class="apply-desc">完成店铺信息填写，提交审核后即可营业</text>
      <button class="apply-btn" @tap="goCreateShop">创建店铺</button>
      <button class="logout-btn" @tap="handleLogoutSeller">退出商家账号</button>
    </view>

    <!-- 已有店铺：加载中 -->
    <view v-else-if="!merchant" class="loading-section">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 已有店铺 -->
    <view v-else class="merchant-content">
      <!-- 店铺信息 -->
      <view class="shop-header">
        <image class="shop-logo" :src="merchant.logo || '/static/default-avatar.png'" mode="aspectFill" />
        <view class="shop-info">
          <text class="shop-name">{{ merchant.shopName }}</text>
          <view class="status-row">
            <text :class="['shop-status', merchant.status]">{{ statusText }}</text>
            <!-- 审核中状态显示提示 -->
            <text v-if="merchant.status === 'pending'" class="status-tip">等待平台审核</text>
          </view>
        </view>
      </view>

      <!-- 审核拒绝原因 -->
      <view v-if="merchant.status === 'rejected' && merchant.rejectReason" class="reject-section">
        <view class="reject-header">
          <text class="reject-icon">!</text>
          <text class="reject-title">审核拒绝原因</text>
        </view>
        <text class="reject-reason">{{ merchant.rejectReason }}</text>
        <text class="reject-tip">请修改店铺信息后重新提交审核</text>
      </view>

      <!-- 店铺信息卡片（非审核中状态） -->
      <view v-if="merchant.status !== 'pending'" class="shop-detail-card">
        <view class="detail-item">
          <text class="detail-label">联系电话</text>
          <text class="detail-value">{{ merchant.phone }}</text>
        </view>
        <view class="detail-item" v-if="merchant.city">
          <text class="detail-label">所在城市</text>
          <text class="detail-value">{{ merchant.province }} {{ merchant.city }} {{ merchant.district }}</text>
        </view>
        <view class="detail-item" v-if="merchant.address">
          <text class="detail-label">详细地址</text>
          <text class="detail-value">{{ merchant.address }}</text>
        </view>
      </view>

      <!-- 数据概览（仅审核通过显示） -->
      <view v-if="merchant.status === 'approved'" class="stat-grid">
        <view class="stat-item">
          <text class="stat-value">0</text>
          <text class="stat-label">今日订单</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">0</text>
          <text class="stat-label">在售房源</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">0</text>
          <text class="stat-label">今日收入</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ merchant.rating }}</text>
          <text class="stat-label">店铺评分</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-section">
        <!-- 审核通过/拒绝时可修改店铺 -->
        <button
          v-if="merchant.status === 'approved' || merchant.status === 'rejected'"
          class="edit-btn"
          @tap="goEditShop"
        >
          修改店铺信息
        </button>
        <!-- 审核中状态不可修改 -->
        <view v-if="merchant.status === 'pending'" class="pending-tip">
          <text class="pending-text">店铺信息审核中，暂不可修改</text>
        </view>
        <!-- 冻结状态 -->
        <view v-if="merchant.status === 'frozen'" class="frozen-tip">
          <text class="frozen-text">店铺已被冻结，请联系平台客服</text>
        </view>
      </view>

      <!-- 功能菜单（仅审核通过显示） -->
      <view v-if="merchant.status === 'approved'" class="menu-section">
        <view class="menu-group">
          <view class="menu-item" @tap="navigateTo('/pages/seller/orders')">
            <text class="menu-label">订单管理</text>
            <text class="menu-arrow">></text>
          </view>
          <view class="menu-item" @tap="navigateTo('/pages/seller/rooms')">
            <text class="menu-label">房源管理</text>
            <text class="menu-arrow">></text>
          </view>
          <view class="menu-item" @tap="navigateTo('/pages/seller/room-calendar')">
            <text class="menu-label">房量房价</text>
            <text class="menu-arrow">></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useSellerStore } from '@/store/seller';
import { getMyMerchant } from '@/api/seller/merchant';

const sellerStore = useSellerStore();
const merchant = ref<any>(null);

const merchantStatus: Record<string, string> = {
  pending: '审核中',
  approved: '营业中',
  rejected: '已拒绝',
  frozen: '已冻结',
};

const statusText = computed(() => {
  if (!merchant.value) return '';
  return merchantStatus[merchant.value.status] || '';
});

onMounted(async () => {
  if (sellerStore.isSellerLoggedIn() && sellerStore.hasMerchant()) {
    try {
      const res = await getMyMerchant();
      merchant.value = res.data;
      // 同步更新 sellerStore 中的状态
      if (sellerStore.sellerInfo && res.data.status !== sellerStore.sellerInfo.merchantStatus) {
        sellerStore.sellerInfo.merchantStatus = res.data.status;
        uni.setStorageSync('sellerInfo', sellerStore.sellerInfo);
      }
    } catch { /* 获取店铺信息失败 */ }
  }
});

function goSellerRegister() {
  uni.navigateTo({ url: '/pages/seller/register' });
}

function goCreateShop() {
  uni.navigateTo({ url: '/pages/seller/shop-create' });
}

function goEditShop() {
  uni.navigateTo({ url: '/pages/seller/shop-edit' });
}

function handleLogoutSeller() {
  uni.showModal({
    title: '提示',
    content: '确定退出商家账号？',
    success: (res) => {
      if (res.confirm) {
        sellerStore.logoutSeller();
      }
    },
  });
}

function navigateTo(url: string) {
  uni.navigateTo({ url });
}
</script>

<style lang="scss" scoped>
.page-merchant {
  min-height: 100vh;
  background: #f5f5f5;
}

.login-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200rpx 48rpx;
}

.tip-text {
  font-size: 30rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.login-btn {
  background: #FF6B35;
  color: #fff;
  border-radius: 40rpx;
  padding: 20rpx 80rpx;
  font-size: 30rpx;
  border: none;
}

.apply-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 48rpx;
}

.seller-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 48rpx;
}

.seller-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.seller-phone {
  font-size: 28rpx;
  color: #999;
  margin-top: 8rpx;
}

.apply-title {
  font-size: 40rpx;
  font-weight: 700;
  color: #333;
}

.apply-desc {
  font-size: 28rpx;
  color: #999;
  margin: 16rpx 0 48rpx;
}

.apply-btn {
  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
  color: #fff;
  border-radius: 40rpx;
  padding: 24rpx 80rpx;
  font-size: 32rpx;
  font-weight: 600;
  border: none;
}

.logout-btn {
  margin-top: 32rpx;
  background: transparent;
  color: #999;
  border: 1rpx solid #ddd;
  border-radius: 40rpx;
  padding: 20rpx 60rpx;
  font-size: 28rpx;
}

.shop-header {
  display: flex;
  align-items: center;
  padding: 40rpx 24rpx;
  background: linear-gradient(135deg, #FF6B35, #ff8a5c);
}

.shop-logo {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.5);
}

.shop-info {
  margin-left: 24rpx;
  display: flex;
  flex-direction: column;
}

.shop-name {
  font-size: 34rpx;
  font-weight: 600;
  color: #fff;
}

.status-row {
  display: flex;
  align-items: center;
  margin-top: 8rpx;
}

.shop-status {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  color: #fff;

  &.approved { background: rgba(82, 196, 26, 0.8); }
  &.pending { background: rgba(250, 173, 20, 0.8); }
  &.rejected { background: rgba(255, 77, 79, 0.8); }
  &.frozen { background: rgba(140, 140, 140, 0.8); }
}

.status-tip {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 12rpx;
}

.reject-section {
  background: #fff2f0;
  border: 1rpx solid #ffccc7;
  border-radius: 16rpx;
  margin: 24rpx;
  padding: 24rpx;
}

.reject-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.reject-icon {
  width: 32rpx;
  height: 32rpx;
  background: #ff4d4f;
  border-radius: 50%;
  color: #fff;
  font-size: 20rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reject-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #ff4d4f;
  margin-left: 12rpx;
}

.reject-reason {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.reject-tip {
  font-size: 24rpx;
  color: #ff7875;
  margin-top: 12rpx;
}

.shop-detail-card {
  background: #fff;
  border-radius: 16rpx;
  margin: 24rpx;
  padding: 24rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.detail-label {
  font-size: 28rpx;
  color: #999;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
}

.stat-grid {
  display: flex;
  background: #fff;
  margin: 24rpx;
  border-radius: 16rpx;
  padding: 32rpx 0;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: 700;
  color: #333;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}

.action-section {
  padding: 0 24rpx;
  margin-bottom: 24rpx;
}

.edit-btn {
  width: 100%;
  height: 88rpx;
  background: #fff;
  color: #FF6B35;
  border: 2rpx solid #FF6B35;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 600;
}

.pending-tip, .frozen-tip {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  text-align: center;
}

.pending-text {
  font-size: 28rpx;
  color: #faad14;
}

.frozen-text {
  font-size: 28rpx;
  color: #999;
}

.loading-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 200rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.menu-section {
  padding: 0 24rpx;
}

.menu-group {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 24rpx;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child { border-bottom: none; }
}

.menu-label {
  font-size: 30rpx;
  color: #333;
}

.menu-arrow {
  font-size: 28rpx;
  color: #ccc;
}
</style>