<template>
  <view class="orders-page">
    <!-- 顶部栏 -->
    <view class="page-header">
      <view class="header-content">
        <text class="page-title">订单管理</text>
        <view class="header-stats">
          <view class="stat-item">
            <text class="stat-value">{{ stats.pendingCount }}</text>
            <text class="stat-label">待处理</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value">{{ stats.todayCount }}</text>
            <text class="stat-label">今日订单</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-box">
        <u-icon name="search" size="36" color="#9CA3AF"></u-icon>
        <input
          class="search-input"
          v-model="searchOrderNo"
          placeholder="搜索订单号/客户姓名/手机号"
          @confirm="handleSearch"
        />
        <view v-if="searchOrderNo" class="clear-btn" @tap="clearSearch">
          <u-icon name="close-circle-fill" size="32" color="#D1D5DB"></u-icon>
        </view>
      </view>
    </view>

    <!-- 状态标签栏 -->
    <scroll-view scroll-x class="tabs-container" :show-scrollbar="false">
      <view class="tabs-wrapper">
        <view
          v-for="tab in tabs"
          :key="tab.value"
          :class="['tab-chip', { active: currentTab === tab.value }]"
          @tap="switchTab(tab.value)"
        >
          <text class="tab-label">{{ tab.label }}</text>
          <view v-if="tab.badge && tab.badge > 0" class="tab-badge">{{ tab.badge }}</view>
        </view>
      </view>
    </scroll-view>

    <!-- 订单列表 -->
    <scroll-view scroll-y class="orders-container" @scrolltolower="loadMore">
      <view class="orders-list">
        <!-- 订单卡片 -->
        <view
          v-for="order in displayOrders"
          :key="order.id"
          class="order-card"
          @tap="goDetail(order)"
        >
          <!-- 订单头部 -->
          <view class="order-header">
            <view class="order-info">
              <text class="order-no">订单号：{{ order.orderNo }}</text>
              <view :class="['status-badge', `status-${order.status}`]">
                <text class="status-text">{{ getStatusText(order.status) }}</text>
              </view>
            </view>
          </view>

          <!-- 房间信息 -->
          <view class="order-content">
            <image
              v-if="order.roomImage"
              class="room-image"
              :src="order.roomImage"
              mode="aspectFill"
            />
            <view class="room-placeholder" v-else>
              <u-icon name="image" size="60" color="#D1D5DB"></u-icon>
            </view>
            <view class="order-details">
              <text class="room-name">{{ order.roomName }}</text>
              <view class="date-range">
                <u-icon name="calendar" size="28" color="#6B7280"></u-icon>
                <text class="date-text">{{ formatDateRange(order.checkInDate, order.checkOutDate) }}</text>
              </view>
              <view class="nights-info">
                <text class="nights-text">共{{ order.nights }}晚</text>
                <text class="amount-text">¥{{ order.totalAmount }}</text>
              </view>
            </view>
          </view>

          <!-- 客户信息 -->
          <view class="guest-section">
            <view class="guest-item">
              <u-icon name="account" size="28" color="#6B7280"></u-icon>
              <text class="guest-text">{{ order.userName }}</text>
            </view>
            <view class="order-time">
              <u-icon name="clock" size="28" color="#9CA3AF"></u-icon>
              <text class="time-text">{{ formatTime(order.createTime) }}</text>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view v-if="getOrderActions(order.status).length > 0" class="order-actions">
            <view
              v-for="action in getOrderActions(order.status)"
              :key="action.type"
              :class="['action-button', action.type]"
              @tap.stop="handleOrderAction(action.type, order)"
            >
              <u-icon v-if="action.icon" :name="action.icon" size="28" :color="action.iconColor"></u-icon>
              <text class="action-text">{{ action.label }}</text>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="orderList.length === 0 && !loading" class="empty-container">
          <view class="empty-icon">
            <u-icon name="file-text" size="120" color="#D1D5DB"></u-icon>
          </view>
          <text class="empty-title">暂无订单</text>
          <text class="empty-desc">{{ getEmptyText() }}</text>
        </view>

        <!-- 加载状态 -->
        <loading-state v-if="loading && orderList.length === 0" text="加载中..." color="#667eea" />

        <!-- 加载更多 -->
        <loading-state v-if="loading && orderList.length > 0" size="small" text="加载中..." color="#667eea" />

        <!-- 没有更多 -->
        <view v-if="!loading && orderList.length > 0 && !hasMore" class="no-more">
          <text class="no-more-text">没有更多订单了</text>
        </view>
      </view>
    </scroll-view>

    <!-- 拒绝订单弹窗 -->
    <view v-if="showRejectModal" class="modal-overlay" @tap="closeRejectModal">
      <view class="modal-container" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">拒绝订单</text>
          <view class="modal-close" @tap="closeRejectModal">
            <u-icon name="close" size="40" color="#6B7280"></u-icon>
          </view>
        </view>
        <view class="modal-body">
          <view class="input-label">
            <text class="label-text">拒绝原因</text>
            <text class="label-required">*</text>
          </view>
          <textarea
            class="reason-textarea"
            v-model="rejectReason"
            placeholder="请详细说明拒绝原因，以便客户了解情况"
            maxlength="200"
            :show-confirm-bar="false"
          />
          <view class="char-count">
            <text class="count-text">{{ rejectReason.length }}/200</text>
          </view>
        </view>
        <view class="modal-footer">
          <view class="footer-button cancel" @tap="closeRejectModal">
            <text class="button-text">取消</text>
          </view>
          <view class="footer-button confirm" @tap="submitReject">
            <text class="button-text">确认拒绝</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { getSellerOrders, confirmOrder, rejectOrder, checkinOrder } from '@/api/seller/order';
import LoadingState from '@/components/base/LoadingState.vue';

const tabs = [
  { label: '全部', value: '', badge: 0 },
  { label: '待确认', value: 'pending_confirm', badge: 0 },
  { label: '待入住', value: 'pending_checkin', badge: 0 },
  { label: '已入住', value: 'checked_in', badge: 0 },
  { label: '已完成', value: 'completed', badge: 0 },
  { label: '已取消', value: 'cancelled', badge: 0 },
];

const orderList = ref<any[]>([]);
const currentTab = ref('');
const searchOrderNo = ref('');
const page = ref(1);
const loading = ref(false);
const hasMore = ref(true);
const showRejectModal = ref(false);
const rejectReason = ref('');
const currentOrderId = ref(0);

const stats = ref({
  pendingCount: 0,
  todayCount: 0,
});

const displayOrders = computed(() => {
  return orderList.value.map(order => ({
    id: order.id,
    orderNo: order.orderNo,
    status: order.status,
    roomName: order.room?.name || '未知房间',
    roomImage: order.room?.coverImage,
    merchantName: order.merchant?.shopName || '',
    checkInDate: order.checkInDate,
    checkOutDate: order.checkOutDate,
    nights: order.nights,
    totalAmount: order.payAmount,
    userName: order.contactName,
    userPhone: order.contactPhone,
    createTime: order.createdAt,
    payTime: order.paidAt,
    confirmTime: order.confirmedAt,
  }));
});

onMounted(() => {
  fetchOrders(true);
  fetchStats();
});

async function fetchOrders(reset = false) {
  if (loading.value) return;
  loading.value = true;
  if (reset) {
    page.value = 1;
    hasMore.value = true;
    orderList.value = []; // 立即清空列表，避免显示旧数据
  }

  try {
    const res = await getSellerOrders({
      page: page.value,
      pageSize: 10,
      status: currentTab.value || undefined,
      orderNo: searchOrderNo.value || undefined,
    });
    const list = res.data?.list || [];
    orderList.value = reset ? list : [...orderList.value, ...list];
    hasMore.value = list.length >= 10;
    if (list.length > 0) {
      page.value++;
    }
  } catch (e) {
    console.error(e);
    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
  } finally {
    loading.value = false;
  }
}

async function fetchStats() {
  try {
    const [pendingRes, todayRes] = await Promise.all([
      getSellerOrders({ page: 1, pageSize: 1, status: 'pending_confirm' }),
      getSellerOrders({ page: 1, pageSize: 100 }),
    ]);
    stats.value.pendingCount = pendingRes.data?.total || 0;
    const today = new Date().toISOString().split('T')[0];
    stats.value.todayCount = (todayRes.data?.list || []).filter((order: any) => {
      return order.createdAt?.startsWith(today);
    }).length;
  } catch (e) {
    console.error(e);
  }
}

function switchTab(value: string) {
  if (currentTab.value === value) return;
  currentTab.value = value;
  fetchOrders(true);
}

function handleSearch() {
  fetchOrders(true);
}

function clearSearch() {
  searchOrderNo.value = '';
  fetchOrders(true);
}

function loadMore() {
  if (!hasMore.value || loading.value) return;
  fetchOrders();
}

function goDetail(order: any) {
  uni.navigateTo({ url: `/pages/seller/order-detail?orderNo=${order.orderNo}` });
}

function getStatusText(status: string): string {
  const statusMap: Record<string, string> = {
    pending_pay: '待支付',
    pending_confirm: '待确认',
    pending_checkin: '待入住',
    checked_in: '已入住',
    completed: '已完成',
    cancelled: '已取消',
    refunding: '退款中',
    refunded: '已退款',
  };
  return statusMap[status] || status;
}

function formatDateRange(checkIn: string, checkOut: string): string {
  if (!checkIn || !checkOut) return '日期待定';
  const inDate = checkIn.split('T')[0].substring(5).replace('-', '/');
  const outDate = checkOut.split('T')[0].substring(5).replace('-', '/');
  return `${inDate} - ${outDate}`;
}

function formatTime(time: string): string {
  if (!time) return '';
  const date = new Date(time);
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  const minutes = Math.floor(diff / 60000);
  const hours = Math.floor(diff / 3600000);
  const days = Math.floor(diff / 86400000);

  if (minutes < 1) return '刚刚';
  if (minutes < 60) return `${minutes}分钟前`;
  if (hours < 24) return `${hours}小时前`;
  if (days < 7) return `${days}天前`;

  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours().toString().padStart(2, '0');
  const minute = date.getMinutes().toString().padStart(2, '0');
  return `${month}/${day} ${hour}:${minute}`;
}

function getEmptyText(): string {
  if (searchOrderNo.value) return '未找到相关订单';
  if (currentTab.value === 'pending_confirm') return '暂无待确认订单';
  if (currentTab.value === 'pending_checkin') return '暂无待入住订单';
  if (currentTab.value === 'checked_in') return '暂无已入住订单';
  if (currentTab.value === 'completed') return '暂无已完成订单';
  if (currentTab.value === 'cancelled') return '暂无已取消订单';
  return '还没有订单，等待客户预订吧';
}

function getOrderActions(status: string) {
  const actions: Array<{ type: string; label: string; icon?: string; iconColor?: string }> = [];

  if (status === 'pending_confirm') {
    actions.push(
      { type: 'reject', label: '拒绝', icon: 'close-circle', iconColor: '#EF4444' },
      { type: 'confirm', label: '确认接单', icon: 'checkmark-circle', iconColor: '#10B981' }
    );
  } else if (status === 'pending_checkin') {
    actions.push(
      { type: 'contact', label: '联系客户', icon: 'phone', iconColor: '#3B82F6' },
      { type: 'checkin', label: '办理入住', icon: 'home', iconColor: '#10B981' }
    );
  } else if (status === 'checked_in') {
    actions.push(
      { type: 'contact', label: '联系客户', icon: 'phone', iconColor: '#3B82F6' }
    );
  }

  return actions;
}

function handleOrderAction(type: string, order: any) {
  switch (type) {
    case 'confirm':
      handleConfirm(order.id);
      break;
    case 'reject':
      handleReject(order.id);
      break;
    case 'checkin':
      handleCheckin(order.id);
      break;
    case 'contact':
      handleContact(order);
      break;
  }
}

function handleConfirm(id: number) {
  uni.showModal({
    title: '确认接单',
    content: '确认接受此订单？接单后请及时为客户安排房间。',
    confirmText: '确认接单',
    cancelText: '再想想',
    success: async (res) => {
      if (res.confirm) {
        try {
          await confirmOrder(id);
          uni.showToast({ title: '接单成功', icon: 'success' });
          fetchOrders(true);
          fetchStats();
        } catch (e: any) {
          uni.showToast({ title: e.message || '操作失败，请重试', icon: 'none' });
        }
      }
    },
  });
}

function handleReject(id: number) {
  currentOrderId.value = id;
  rejectReason.value = '';
  showRejectModal.value = true;
}

function closeRejectModal() {
  showRejectModal.value = false;
  rejectReason.value = '';
}

async function submitReject() {
  if (!rejectReason.value.trim()) {
    uni.showToast({ title: '请填写拒绝原因', icon: 'none' });
    return;
  }

  if (rejectReason.value.trim().length < 5) {
    uni.showToast({ title: '拒绝原因至少5个字', icon: 'none' });
    return;
  }

  try {
    await rejectOrder(currentOrderId.value, rejectReason.value.trim());
    uni.showToast({ title: '已拒绝订单', icon: 'success' });
    showRejectModal.value = false;
    fetchOrders(true);
    fetchStats();
  } catch (e: any) {
    uni.showToast({ title: e.message || '操作失败，请重试', icon: 'none' });
  }
}

function handleCheckin(id: number) {
  uni.showModal({
    title: '办理入住',
    content: '确认客户已到店并完成入住手续？',
    confirmText: '确认入住',
    cancelText: '取消',
    success: async (res) => {
      if (res.confirm) {
        try {
          await checkinOrder(id);
          uni.showToast({ title: '入住办理成功', icon: 'success' });
          fetchOrders(true);
          fetchStats();
        } catch (e: any) {
          uni.showToast({ title: e.message || '操作失败，请重试', icon: 'none' });
        }
      }
    },
  });
}

function handleContact(order: any) {
  if (!order.userPhone) {
    uni.showToast({ title: '客户未留联系方式', icon: 'none' });
    return;
  }
  uni.showActionSheet({
    itemList: [`拨打电话：${order.userPhone}`],
    success: (res) => {
      if (res.tapIndex === 0) {
        uni.makePhoneCall({
          phoneNumber: order.userPhone,
        });
      }
    },
  });
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/common.scss';

.orders-page {
  min-height: 100vh;
  background: #F9FAFB;
  display: flex;
  flex-direction: column;
}

/* 顶部栏 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 48rpx 32rpx 32rpx;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 40rpx;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5rpx;
}

.header-stats {
  display: flex;
  align-items: center;
  gap: 24rpx;
  background: rgba(255, 255, 255, 0.15);
  padding: 16rpx 24rpx;
  border-radius: 40rpx;
  backdrop-filter: blur(10rpx);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.stat-value {
  font-size: 32rpx;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
}

.stat-label {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.85);
}

.stat-divider {
  width: 2rpx;
  height: 32rpx;
  background: rgba(255, 255, 255, 0.3);
}

/* 搜索栏 */
.search-section {
  background: #FFFFFF;
  padding: 24rpx 32rpx;
  border-bottom: 2rpx solid #F3F4F6;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 16rpx;
  background: #F9FAFB;
  border: 2rpx solid #E5E7EB;
  border-radius: 48rpx;
  padding: 0 28rpx;
  height: 80rpx;
  transition: all 0.3s ease;

  &:focus-within {
    background: #FFFFFF;
    border-color: #3B82F6;
    box-shadow: 0 0 0 6rpx rgba(59, 130, 246, 0.1);
  }
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #111827;
  height: 100%;
}

.clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx;
}

/* 标签栏 */
.tabs-container {
  background: #FFFFFF;
  border-bottom: 2rpx solid #F3F4F6;
  white-space: nowrap;
}

.tabs-wrapper {
  display: inline-flex;
  gap: 16rpx;
  padding: 24rpx 32rpx;
}

.tab-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8rpx;
  padding: 16rpx 32rpx;
  background: #F3F4F6;
  border-radius: 40rpx;
  transition: all 0.3s ease;

  &.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);

    .tab-label {
      color: #FFFFFF;
      font-weight: 600;
    }

    .tab-badge {
      background: #FFFFFF;
      color: #667eea;
    }
  }
}

.tab-label {
  font-size: 26rpx;
  color: #6B7280;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.tab-badge {
  min-width: 32rpx;
  height: 32rpx;
  padding: 0 8rpx;
  background: #EF4444;
  color: #FFFFFF;
  font-size: 20rpx;
  font-weight: 600;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 订单容器 */
.orders-container {
  flex: 1;
  height: 0;
}

.orders-list {
  padding: 24rpx 32rpx;
}

/* 订单卡片 */
.order-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }
}

.order-header {
  margin-bottom: 24rpx;
}

.order-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-no {
  font-size: 24rpx;
  color: #9CA3AF;
  font-weight: 500;
}

.status-badge {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 600;

  &.status-pending_pay {
    background: #FEF3C7;
    color: #D97706;
  }

  &.status-pending_confirm {
    background: #DBEAFE;
    color: #2563EB;
  }

  &.status-pending_checkin {
    background: #D1FAE5;
    color: #059669;
  }

  &.status-checked_in {
    background: #E0E7FF;
    color: #6366F1;
  }

  &.status-completed {
    background: #D1FAE5;
    color: #10B981;
  }

  &.status-cancelled {
    background: #F3F4F6;
    color: #6B7280;
  }

  &.status-refunding,
  &.status-refunded {
    background: #FEE2E2;
    color: #DC2626;
  }
}

.status-text {
  line-height: 1;
}

/* 房间信息 */
.order-content {
  display: flex;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.room-image {
  width: 160rpx;
  height: 120rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
  background: #F3F4F6;
}

.room-placeholder {
  width: 160rpx;
  height: 120rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
  background: #F3F4F6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.room-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.date-text {
  font-size: 24rpx;
  color: #6B7280;
}

.nights-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nights-text {
  font-size: 24rpx;
  color: #9CA3AF;
}

.amount-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #EF4444;
}

/* 客户信息 */
.guest-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-top: 2rpx solid #F3F4F6;
  border-bottom: 2rpx solid #F3F4F6;
  margin-bottom: 24rpx;
}

.guest-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.guest-text {
  font-size: 26rpx;
  color: #374151;
  font-weight: 500;
}

.order-time {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.time-text {
  font-size: 24rpx;
  color: #9CA3AF;
}

/* 操作按钮 */
.order-actions {
  display: flex;
  gap: 16rpx;
  justify-content: flex-end;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 16rpx 28rpx;
  border-radius: 40rpx;
  font-size: 26rpx;
  font-weight: 500;
  transition: all 0.3s ease;

  &.reject {
    background: #FEF2F2;
    border: 2rpx solid #FEE2E2;

    .action-text {
      color: #EF4444;
    }

    &:active {
      background: #FEE2E2;
    }
  }

  &.confirm {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.3);

    .action-text {
      color: #FFFFFF;
    }

    &:active {
      transform: scale(0.96);
    }
  }

  &.contact {
    background: #EFF6FF;
    border: 2rpx solid #DBEAFE;

    .action-text {
      color: #3B82F6;
    }

    &:active {
      background: #DBEAFE;
    }
  }

  &.checkin {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);

    .action-text {
      color: #FFFFFF;
    }

    &:active {
      transform: scale(0.96);
    }
  }
}

.action-text {
  line-height: 1;
}

/* 空状态 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 48rpx;
}

.empty-icon {
  margin-bottom: 32rpx;
  opacity: 0.5;
}

.empty-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #6B7280;
  margin-bottom: 16rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #9CA3AF;
  text-align: center;
}

.no-more {
  text-align: center;
  padding: 32rpx 0;
}

.no-more-text {
  font-size: 24rpx;
  color: #D1D5DB;
}

/* 拒绝订单弹窗 */
.modal-overlay {
  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;
  padding: 48rpx;
}

.modal-container {
  width: 100%;
  max-width: 600rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  overflow: hidden;
  animation: modalSlideUp 0.3s ease;
}

@keyframes modalSlideUp {
  from {
    transform: translateY(100rpx);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 32rpx 24rpx;
  border-bottom: 2rpx solid #F3F4F6;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx;
}

.modal-body {
  padding: 32rpx;
}

.input-label {
  display: flex;
  align-items: center;
  gap: 4rpx;
  margin-bottom: 16rpx;
}

.label-text {
  font-size: 28rpx;
  color: #374151;
  font-weight: 500;
}

.label-required {
  font-size: 28rpx;
  color: #EF4444;
}

.reason-textarea {
  width: 100%;
  min-height: 200rpx;
  background: #F9FAFB;
  border: 2rpx solid #E5E7EB;
  border-radius: 16rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #111827;
  line-height: 1.6;
  box-sizing: border-box;
  transition: all 0.3s ease;

  &:focus {
    background: #FFFFFF;
    border-color: #3B82F6;
    box-shadow: 0 0 0 6rpx rgba(59, 130, 246, 0.1);
  }
}

.char-count {
  text-align: right;
  margin-top: 12rpx;
}

.count-text {
  font-size: 24rpx;
  color: #9CA3AF;
}

.modal-footer {
  display: flex;
  gap: 16rpx;
  padding: 24rpx 32rpx 32rpx;
}

.footer-button {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  font-size: 30rpx;
  font-weight: 600;
  transition: all 0.3s ease;

  &.cancel {
    background: #F3F4F6;

    .button-text {
      color: #6B7280;
    }

    &:active {
      background: #E5E7EB;
    }
  }

  &.confirm {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 4rpx 12rpx rgba(239, 68, 68, 0.3);

    .button-text {
      color: #FFFFFF;
    }

    &:active {
      transform: scale(0.98);
    }
  }
}

.button-text {
  line-height: 1;
}
</style>