<template>
  <view class="page-merchant">
    <!-- 未登录商家账号 -->
    <view v-if="!sellerStore.isSellerLoggedIn()" class="empty-state">
      <view class="empty-icon">
        <u-icon name="shop" :size="120" color="#667eea" />
      </view>
      <text class="empty-title">欢迎成为商家</text>
      <text class="empty-desc">注册商家账号，开启您的民宿事业</text>
      <button class="primary-btn" @tap="goSellerRegister">
        <text class="btn-text">立即注册/登录</text>
      </button>
    </view>

    <!-- 已登录但未申请店铺 -->
    <view v-else-if="!sellerStore.hasMerchant()" class="create-shop-state">
      <view class="welcome-card">
        <view class="welcome-icon">
          <u-icon name="account-fill" :size="80" color="#fff" />
        </view>
        <text class="welcome-title">你好，{{ sellerStore.sellerInfo?.contactName }}</text>
        <text class="welcome-phone">{{ sellerStore.sellerInfo?.phone }}</text>
      </view>

      <view class="create-card">
        <view class="create-icon">
          <u-icon name="home" :size="80" color="#667eea" />
        </view>
        <text class="create-title">创建您的店铺</text>
        <text class="create-desc">完成店铺信息填写，提交审核后即可开始营业</text>

        <view class="create-steps">
          <view class="step-item">
            <view class="step-number">1</view>
            <text class="step-text">填写店铺信息</text>
          </view>
          <view class="step-divider"></view>
          <view class="step-item">
            <view class="step-number">2</view>
            <text class="step-text">等待平台审核</text>
          </view>
          <view class="step-divider"></view>
          <view class="step-item">
            <view class="step-number">3</view>
            <text class="step-text">开始营业</text>
          </view>
        </view>

        <button class="primary-btn large" @tap="goCreateShop">
          <text class="btn-text">立即创建店铺</text>
        </button>
      </view>

      <button class="text-btn" @tap="handleLogoutSeller">
        <text class="text-btn-label">退出商家账号</text>
      </button>
    </view>

    <!-- 已有店铺：加载中 -->
    <loading-state v-if="isLoading" />

    <!-- 已有店铺 -->
    <view v-else-if="merchant" class="merchant-content">
      <!-- 店铺头部 -->
      <view class="shop-header-wrapper">
        <view class="shop-header">
          <view class="header-bg"></view>
          <view class="header-content">
            <view class="shop-main">
              <image class="shop-avatar" :src="merchant.coverImage || merchant.logo || '/static/default-avatar.png'" mode="aspectFill" />
              <view class="shop-info">
                <text class="shop-name">{{ merchant.shopName }}</text>
                <view class="shop-meta">
                  <view :class="['status-badge', `status-${merchant.status}`]">
                    <text class="status-text">{{ statusText }}</text>
                  </view>
                  <text v-if="merchant.status === 'pending'" class="status-tip">等待审核中</text>
                </view>
              </view>
            </view>

            <button
              v-if="merchant.status === 'approved' || merchant.status === 'rejected'"
              class="edit-shop-btn"
              @tap="goEditShop"
            >
              <u-icon name="edit-pen" :size="20" color="#667eea" />
            </button>
          </view>
        </view>
      </view>

      <!-- 审核拒绝原因 -->
      <view v-if="merchant.status === 'rejected' && merchant.rejectReason" class="alert-card reject">
        <view class="alert-header">
          <view class="alert-icon">
            <u-icon name="error-circle-fill" :size="40" color="#fa5252" />
          </view>
          <text class="alert-title">审核未通过</text>
        </view>
        <text class="alert-content">{{ merchant.rejectReason }}</text>
        <text class="alert-tip">请修改店铺信息后重新提交审核</text>
      </view>

      <!-- 审核中提示 -->
      <view v-if="merchant.status === 'pending'" class="alert-card pending">
        <view class="alert-header">
          <view class="alert-icon">
            <u-icon name="clock-fill" :size="40" color="#fab005" />
          </view>
          <text class="alert-title">审核中</text>
        </view>
        <text class="alert-content">您的店铺信息正在审核中，请耐心等待</text>
        <text class="alert-tip">审核通过后即可开始营业</text>
      </view>

      <!-- 冻结提示 -->
      <view v-if="merchant.status === 'frozen'" class="alert-card frozen">
        <view class="alert-header">
          <view class="alert-icon">
            <u-icon name="lock-fill" :size="40" color="#868e96" />
          </view>
          <text class="alert-title">店铺已冻结</text>
        </view>
        <text class="alert-content">您的店铺已被平台冻结</text>
        <text class="alert-tip">如有疑问，请联系平台客服</text>
      </view>

      <!-- 数据概览（仅审核通过显示） -->
      <view v-if="merchant.status === 'approved'" class="stats-section">
        <view class="section-header">
          <text class="section-title">今日数据</text>
        </view>
        <view class="stats-grid">
          <view class="stat-card primary">
            <view class="stat-icon-box">
              <u-icon name="file-text" size="24" color="#333"></u-icon>
            </view>
            <text class="stat-value">0</text>
            <text class="stat-label">今日订单</text>
          </view>
          <view class="stat-card success">
            <view class="stat-icon-box">
              <u-icon name="home" size="24" color="#333"></u-icon>
            </view>
            <text class="stat-value">0</text>
            <text class="stat-label">在售房源</text>
          </view>
          <view class="stat-card warning">
            <view class="stat-icon-box">
              <u-icon name="rmb-circle" size="24" color="#333"></u-icon>
            </view>
            <text class="stat-value">¥0</text>
            <text class="stat-label">今日收入</text>
          </view>
          <view class="stat-card info">
            <view class="stat-icon-box">
              <u-icon name="star" size="24" color="#333"></u-icon>
            </view>
            <text class="stat-value">{{ merchant.rating || '5.0' }}</text>
            <text class="stat-label">店铺评分</text>
          </view>
        </view>
      </view>

      <!-- 功能菜单（仅审核通过显示） -->
      <view v-if="merchant.status === 'approved'" class="menu-section">
        <view class="section-header">
          <text class="section-title">快捷功能</text>
        </view>
        <view class="menu-grid">
          <view class="menu-card" @tap="navigateTo('/pages/seller/wallet')">
            <view class="menu-icon-wrapper primary">
              <u-icon name="rmb-circle" size="32" color="#333"></u-icon>
            </view>
            <text class="menu-label">我的钱包</text>
            <text class="menu-desc">余额和财务管理</text>
          </view>
          <view class="menu-card" @tap="navigateTo('/pages/seller/orders')">
            <view class="menu-icon-wrapper success">
              <u-icon name="list" size="32" color="#333"></u-icon>
            </view>
            <text class="menu-label">订单管理</text>
            <text class="menu-desc">查看和处理订单</text>
          </view>
          <view class="menu-card" @tap="navigateTo('/pages/seller/rooms')">
            <view class="menu-icon-wrapper warning">
              <u-icon name="home" size="40" color="#333"></u-icon>
            </view>
            <text class="menu-label">房源管理</text>
            <text class="menu-desc">管理房源信息</text>
          </view>
          <view class="menu-card" @tap="navigateTo('/pages/seller/room-calendar')">
            <view class="menu-icon-wrapper info">
              <u-icon name="calendar" size="32" color="#333"></u-icon>
            </view>
            <text class="menu-label">房量房价</text>
            <text class="menu-desc">设置价格日历</text>
          </view>
          <view class="menu-card" @tap="navigateTo('/pages/seller/shop-create?mode=edit')">
            <view class="menu-icon-wrapper primary">
              <u-icon name="setting" size="32" color="#333"></u-icon>
            </view>
            <text class="menu-label">店铺设置</text>
            <text class="menu-desc">修改店铺信息</text>
          </view>
        </view>
      </view>

      <!-- 店铺信息 -->
      <view v-if="merchant.status !== 'pending'" class="info-section">
        <view class="section-header">
          <text class="section-title">店铺信息</text>
        </view>
        <view class="info-card">
          <view class="info-item">
            <view class="info-icon-box">
              <u-icon name="phone" size="22" color="#333"></u-icon>
            </view>
            <view class="info-content">
              <text class="info-label">联系电话</text>
              <text class="info-value">{{ merchant.phone }}</text>
            </view>
          </view>
          <view class="info-item" v-if="merchant.city">
            <view class="info-icon-box">
              <u-icon name="map" size="22" color="#333"></u-icon>
            </view>
            <view class="info-content">
              <text class="info-label">所在城市</text>
              <text class="info-value">{{ merchant.province }} {{ merchant.city }} {{ merchant.district }}</text>
            </view>
          </view>
          <view class="info-item" v-if="merchant.address">
            <view class="info-icon-box">
              <u-icon name="home-fill" size="22" color="#333"></u-icon>
            </view>
            <view class="info-content">
              <text class="info-label">详细地址</text>
              <text class="info-value">{{ merchant.address }}</text>
            </view>
          </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';
import BaseButton from '@/components/base/BaseButton.vue';
import BaseCard from '@/components/base/BaseCard.vue';
import LoadingState from '@/components/base/LoadingState.vue';
import StatusBadge from '@/components/base/StatusBadge.vue';

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

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()) {
    isLoading.value = true;
    try {
      const res = await getMyMerchant();
      merchant.value = res.data;

      // 同步更新 sellerStore 中的店铺状态
      if (sellerStore.sellerInfo) {
        if (res.data) {
          // 有店铺数据，更新状态
          sellerStore.updateMerchantInfo(res.data.id, res.data.status);
        } else {
          // 没有店铺数据，清空 merchantId
          sellerStore.sellerInfo.merchantId = undefined;
          sellerStore.sellerInfo.merchantStatus = undefined;
          uni.setStorageSync('sellerInfo', sellerStore.sellerInfo);
        }
      }
    } catch (error) {
      console.error('获取店铺信息失败:', error);
      merchant.value = null;
    } finally {
      isLoading.value = false;
    }
  }
});

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-create?mode=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>
@import '@/static/styles/common.scss';

.page-merchant {
  min-height: 100vh;
  background: $bg-page;
  padding-bottom: 40rpx;
}

/* ========== 空状态 ========== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 48rpx;
}

.empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacing-2xl;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20rpx); }
}

.empty-title {
  font-size: $font-2xl;
  font-weight: $font-bold;
  color: $text-primary;
  margin-bottom: $spacing-md;
}

.empty-desc {
  font-size: $font-base;
  color: $text-secondary;
  margin-bottom: $spacing-3xl;
  text-align: center;
  line-height: 1.6;
}

/* ========== 创建店铺状态 ========== */
.create-shop-state {
  padding: $spacing-2xl;
}

.welcome-card {
  background: linear-gradient(135deg, $primary-color, $primary-400);
  border-radius: $radius-xl;
  padding: $spacing-3xl $spacing-2xl;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: $spacing-2xl;
  box-shadow: $shadow-lg;
}

.welcome-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacing-lg;
}

.welcome-title {
  font-size: $font-xl;
  font-weight: $font-bold;
  color: #fff;
  margin-bottom: $spacing-xs;
}

.welcome-phone {
  font-size: $font-base;
  color: rgba(255, 255, 255, 0.9);
}

.create-card {
  background: $bg-card;
  border-radius: $radius-xl;
  padding: $spacing-3xl $spacing-2xl;
  margin-bottom: $spacing-xl;
  box-shadow: $shadow-sm;
}

.create-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacing-lg;
}

.create-title {
  font-size: $font-xl;
  font-weight: $font-bold;
  color: $text-primary;
  text-align: center;
  display: block;
  margin-bottom: $spacing-sm;
}

.create-desc {
  font-size: $font-base;
  color: $text-secondary;
  text-align: center;
  line-height: 1.6;
  display: block;
  margin-bottom: $spacing-3xl;
}

.create-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-3xl;
  padding: 0 $spacing-md;
}

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

.step-number {
  width: 56rpx;
  height: 56rpx;
  background: linear-gradient(135deg, $primary-color, $primary-400);
  border-radius: 50%;
  color: #fff;
  font-size: $font-lg;
  font-weight: $font-bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacing-sm;
  box-shadow: 0 4rpx 12rpx rgba($primary-color, 0.3);
}

.step-text {
  font-size: $font-xs;
  color: $text-secondary;
  text-align: center;
}

.step-divider {
  width: 60rpx;
  height: 2rpx;
  background: $border-base;
  margin: 0 $spacing-xs;
  margin-bottom: 40rpx;
}

/* ========== 按钮样式 ========== */
.primary-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, $primary-color, $primary-400);
  border-radius: $radius-round;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba($primary-color, 0.3);
  border: none;
  transition: all 0.3s ease;

  &.large {
    height: 96rpx;
  }

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba($primary-color, 0.2);
  }
}

.btn-text {
  font-size: $font-lg;
  font-weight: $font-semibold;
  color: #fff;
}

.text-btn {
  width: 100%;
  height: 88rpx;
  background: transparent;
  border: 1rpx solid $border-base;
  border-radius: $radius-round;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: $spacing-lg;

  &::after {
    border: none;
  }
}

.text-btn-label {
  font-size: $font-base;
  color: $text-secondary;
}

/* ========== 店铺头部 ========== */
.shop-header-wrapper {
  margin-bottom: $spacing-2xl;
}

.shop-header {
  position: relative;
  padding: $spacing-2xl;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  background: linear-gradient(135deg, $primary-color, $primary-400);
  border-radius: 0 0 40rpx 40rpx;
}

.header-content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.shop-main {
  display: flex;
  align-items: center;
  flex: 1;
}

.shop-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: $radius-xl;
  border: 6rpx solid #fff;
  box-shadow: $shadow-lg;
}

.shop-info {
  margin-left: $spacing-xl;
  flex: 1;
}

.shop-name {
  font-size: $font-2xl;
  font-weight: $font-bold;
  color: #fff;
  margin-bottom: $spacing-sm;
  display: block;
}

.shop-meta {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
}

.status-badge {
  padding: 6rpx $spacing-md;
  border-radius: $radius-round;
  font-size: $font-xs;
  font-weight: $font-medium;
  display: inline-flex;
  align-items: center;

  &.status-approved {
    background: rgba(82, 196, 26, 0.15);
    color: $success-color;
  }

  &.status-pending {
    background: rgba(250, 173, 20, 0.15);
    color: $warning-color;
  }

  &.status-rejected {
    background: rgba(245, 34, 45, 0.15);
    color: $error-color;
  }

  &.status-frozen {
    background: rgba(0, 0, 0, 0.1);
    color: $text-secondary;
  }
}

.status-text {
  font-size: $font-xs;
}

.status-tip {
  font-size: $font-xs;
  color: rgba(255, 255, 255, 0.9);
}

.edit-shop-btn {
  width: 64rpx;
  height: 64rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: $shadow-sm;
  border: none;
}

/* ========== 提示卡片 ========== */
.alert-card {
  margin: 0 $spacing-xl $spacing-xl;
  padding: $spacing-xl;
  border-radius: $radius-xl;
  box-shadow: $shadow-sm;

  &.reject {
    background: linear-gradient(135deg, #fff5f5, #fff);
    border-left: 6rpx solid $error-color;
  }

  &.pending {
    background: linear-gradient(135deg, #fffbf0, #fff);
    border-left: 6rpx solid $warning-color;
  }

  &.frozen {
    background: linear-gradient(135deg, #f5f5f5, #fff);
    border-left: 6rpx solid $text-tertiary;
  }
}

.alert-header {
  display: flex;
  align-items: center;
  margin-bottom: $spacing-md;
}

.alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: $spacing-sm;
}

.alert-title {
  font-size: $font-lg;
  font-weight: $font-semibold;
  color: $text-primary;
}

.alert-content {
  font-size: $font-base;
  color: $text-primary;
  line-height: 1.6;
  margin-bottom: $spacing-sm;
  display: block;
}

.alert-tip {
  font-size: $font-sm;
  color: $text-secondary;
  display: block;
}

/* ========== 数据统计 ========== */
.stats-section {
  margin: 0 $spacing-xl $spacing-2xl;
}

.section-header {
  margin-bottom: $spacing-lg;
}

.section-title {
  font-size: $font-lg;
  font-weight: $font-bold;
  color: $text-primary;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: $spacing-lg;
}

.stat-card {
  background: $bg-card;
  border-radius: $radius-xl;
  padding: $spacing-xl;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: $shadow-sm;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6rpx;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.3;
  }

  &.primary {
    color: $primary-color;
  }

  &.success {
    color: $success-color;
  }

  &.warning {
    color: $warning-color;
  }

  &.info {
    color: $info-color;
  }
}

.stat-icon-box {
  width: 64rpx;
  height: 64rpx;
  background: #fff;
  border-radius: $radius-lg;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacing-sm;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.stat-value {
  font-size: $font-3xl;
  font-weight: $font-bold;
  color: $text-primary;
  margin-bottom: $spacing-xs;
}

.stat-label {
  font-size: $font-sm;
  color: $text-secondary;
}

/* ========== 店铺信息 ========== */
.info-section {
  margin: 0 $spacing-xl $spacing-2xl;
}

.info-card {
  background: $bg-card;
  border-radius: $radius-xl;
  padding: $spacing-lg;
  box-shadow: $shadow-sm;
}

.info-item {
  display: flex;
  align-items: center;
  padding: $spacing-lg;
  border-radius: $radius-lg;
  margin-bottom: $spacing-sm;
  transition: all 0.2s ease;

  &:last-child {
    margin-bottom: 0;
  }

  &:active {
    background: $bg-hover;
  }
}

.info-icon-box {
  width: 56rpx;
  height: 56rpx;
  background: #fff;
  border-radius: $radius-base;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: $spacing-lg;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: $font-sm;
  color: $text-secondary;
  margin-bottom: 4rpx;
}

.info-value {
  font-size: $font-base;
  color: $text-primary;
  font-weight: $font-medium;
}

/* ========== 功能菜单 ========== */
.menu-section {
  margin: 0 $spacing-xl $spacing-2xl;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: $spacing-lg;

  .menu-card:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }
}

.menu-card {
  background: $bg-card;
  border-radius: $radius-xl;
  padding: $spacing-xl;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: $shadow-sm;
  transition: all 0.3s ease;

  &:active {
    transform: translateY(-4rpx);
    box-shadow: $shadow-md;
  }
}

.menu-icon-wrapper {
  width: 96rpx;
  height: 96rpx;
  background: #fff;
  border-radius: $radius-lg;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacing-md;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: currentColor;
  }

  &.primary {
    color: $primary-color;
  }

  &.success {
    color: $success-color;
  }

  &.warning {
    color: $warning-color;
  }

  &.info {
    color: $info-color;
  }
}

.menu-label {
  font-size: $font-md;
  font-weight: $font-semibold;
  color: $text-primary;
  margin-bottom: 4rpx;
}

.menu-desc {
  font-size: $font-xs;
  color: $text-tertiary;
  text-align: center;
}
</style>