<template>
  <view class="claims-page">
    <!-- 导航栏 -->
    <view class="navbar">
      <view class="navbar-title">理赔管理</view>
      <view class="navbar-actions">
        <view class="search-btn" @click="showSearch = !showSearch">
          <uni-icons type="search" size="18" />
        </view>
        <view class="filter-btn" @click="showFilter = true">
          <uni-icons type="tune" size="18" />
        </view>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view v-if="showSearch" class="search-bar">
      <view class="search-input">
        <uni-icons type="search" size="16" color="#999" />
        <input 
          v-model="searchKeyword" 
          placeholder="搜索理赔单号、投保人..." 
          @input="onSearch"
        />
      </view>
    </view>

    <!-- 统计概览 -->
    <view class="overview-section">
      <view class="overview-title">理赔概览</view>
      <view class="overview-grid">
        <view 
          v-for="(item, index) in overviewData" 
          :key="index"
          class="overview-item"
          :class="item.type"
        >
          <view class="overview-icon">
            <uni-icons :type="item.icon" size="20" color="#fff" />
          </view>
          <view class="overview-info">
            <view class="overview-value">{{ item.value }}</view>
            <view class="overview-label">{{ item.label }}</view>
          </view>
          <view class="overview-trend" :class="item.trend">
            <uni-icons 
              :type="item.trend === 'up' ? 'arrowup' : 'arrowdown'" 
              size="12" 
            />
            <text>{{ item.change }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 快捷操作 -->
    <view class="quick-actions">
      <scroll-view class="actions-scroll" scroll-x>
        <view 
          v-for="action in quickActions" 
          :key="action.id"
          class="action-item"
          @click="handleQuickAction(action.id)"
        >
          <view class="action-icon" :style="{ backgroundColor: action.color }">
            <uni-icons :type="action.icon" size="18" color="#fff" />
          </view>
          <text class="action-text">{{ action.text }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 理赔列表 -->
    <view class="claims-section">
      <view class="section-header">
        <view class="section-title">理赔申请</view>
        <view class="section-tabs">
          <view 
            v-for="tab in statusTabs" 
            :key="tab.value"
            class="tab-item"
            :class="{ active: activeTab === tab.value }"
            @click="switchTab(tab.value)"
          >
            {{ tab.label }}
            <view v-if="tab.count > 0" class="tab-badge">{{ tab.count }}</view>
          </view>
        </view>
      </view>

      <scroll-view 
        class="claims-list" 
        scroll-y
        @scrolltolower="loadMore"
        :refresher-enabled="true"
        :refresher-triggered="refreshing"
        @refresherrefresh="onRefresh"
      >
        <view 
          v-for="claim in claimsList" 
          :key="claim.id"
          class="claim-card"
          @click="goToDetail(claim.id)"
        >
          <!-- 理赔头部 -->
          <view class="claim-header">
            <view class="claim-number">
              <text class="label">理赔单号：</text>
              <text class="value">{{ claim.claimNumber }}</text>
            </view>
            <view class="claim-status" :class="claim.status">
              {{ getStatusText(claim.status) }}
            </view>
          </view>

          <!-- 基本信息 -->
          <view class="claim-info">
            <view class="info-row">
              <view class="info-item">
                <text class="label">投保人：</text>
                <text class="value">{{ claim.insuredName }}</text>
              </view>
              <view class="info-item">
                <text class="label">保险类型：</text>
                <text class="value">{{ claim.insuranceType }}</text>
              </view>
            </view>
            <view class="info-row">
              <view class="info-item">
                <text class="label">出险时间：</text>
                <text class="value">{{ formatDate(claim.incidentDate) }}</text>
              </view>
              <view class="info-item">
                <text class="label">申请时间：</text>
                <text class="value">{{ formatDate(claim.applyDate) }}</text>
              </view>
            </view>
          </view>

          <!-- 理赔金额 -->
          <view class="claim-amount">
            <view class="amount-item">
              <text class="amount-label">申请金额</text>
              <text class="amount-value apply">¥{{ formatNumber(claim.applyAmount) }}</text>
            </view>
            <view v-if="claim.approvedAmount" class="amount-item">
              <text class="amount-label">核定金额</text>
              <text class="amount-value approved">¥{{ formatNumber(claim.approvedAmount) }}</text>
            </view>
          </view>

          <!-- 理赔进度 -->
          <view class="claim-progress">
            <view class="progress-header">
              <text class="progress-label">处理进度</text>
              <text class="progress-step">{{ claim.currentStep }}/{{ claim.totalSteps }}</text>
            </view>
            <view class="progress-bar">
              <view 
                class="progress-fill" 
                :style="{ width: (claim.currentStep / claim.totalSteps * 100) + '%' }"
              ></view>
            </view>
            <view class="progress-steps">
              <view 
                v-for="(step, index) in claim.steps" 
                :key="index"
                class="step-item"
                :class="{ 
                  completed: index < claim.currentStep,
                  current: index === claim.currentStep - 1
                }"
              >
                <view class="step-dot"></view>
                <text class="step-text">{{ step }}</text>
              </view>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="claim-actions">
            <button 
              v-if="claim.status === 'submitted'"
              class="action-btn primary"
              @click.stop="reviewClaim(claim.id)"
            >
              审核
            </button>
            <button 
              v-if="claim.status === 'reviewing'"
              class="action-btn warning"
              @click.stop="approveClaim(claim.id)"
            >
              核定
            </button>
            <button 
              v-if="claim.status === 'approved'"
              class="action-btn success"
              @click.stop="payClaim(claim.id)"
            >
              支付
            </button>
            <button 
              class="action-btn secondary"
              @click.stop="viewDetails(claim.id)"
            >
              详情
            </button>
          </view>
        </view>

        <!-- 加载更多 -->
        <view v-if="loading" class="loading-more">
          <uni-loading type="snow" />
          <text>加载中...</text>
        </view>
        
        <!-- 没有更多数据 -->
        <view v-if="!hasMore && claimsList.length > 0" class="no-more">
          没有更多数据了
        </view>

        <!-- 空状态 -->
        <view v-if="claimsList.length === 0 && !loading" class="empty-state">
          <image src="/static/images/empty-claims.png" class="empty-image" />
          <text class="empty-text">暂无理赔申请</text>
        </view>
      </scroll-view>
    </view>

    <!-- 筛选弹窗 -->
    <uni-popup ref="filterPopup" type="bottom">
      <view class="filter-popup">
        <view class="filter-header">
          <text>筛选条件</text>
          <view class="filter-actions">
            <text @click="resetFilter">重置</text>
            <text @click="applyFilter">确定</text>
          </view>
        </view>
        
        <view class="filter-content">
          <!-- 保险类型 -->
          <view class="filter-section">
            <view class="section-title">保险类型</view>
            <view class="type-options">
              <view 
                v-for="type in insuranceTypes" 
                :key="type.value"
                class="type-item"
                :class="{ active: filterData.insuranceType === type.value }"
                @click="filterData.insuranceType = type.value"
              >
                {{ type.label }}
              </view>
            </view>
          </view>

          <!-- 金额范围 -->
          <view class="filter-section">
            <view class="section-title">理赔金额</view>
            <view class="amount-range">
              <input 
                v-model="filterData.minAmount" 
                type="number" 
                placeholder="最低金额"
                class="amount-input"
              />
              <text class="separator">-</text>
              <input 
                v-model="filterData.maxAmount" 
                type="number" 
                placeholder="最高金额"
                class="amount-input"
              />
            </view>
          </view>

          <!-- 时间范围 -->
          <view class="filter-section">
            <view class="section-title">申请时间</view>
            <view class="date-range">
              <picker 
                mode="date" 
                :value="filterData.startDate" 
                @change="onStartDateChange"
              >
                <view class="date-picker">
                  {{ filterData.startDate || '开始日期' }}
                </view>
              </picker>
              <text class="separator">至</text>
              <picker 
                mode="date" 
                :value="filterData.endDate" 
                @change="onEndDateChange"
              >
                <view class="date-picker">
                  {{ filterData.endDate || '结束日期' }}
                </view>
              </picker>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 悬浮按钮 -->
    <view class="fab-button" @click="goToApply">
      <uni-icons type="plus" size="24" color="#fff" />
    </view>
  </view>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRequest } from '@/common/utils/request'
import { formatNumber, formatDate } from '@/common/utils/format'
import { showToast, showLoading, hideLoading } from '@/common/utils/uni-helper'

export default {
  name: 'ClaimsPage',
  setup() {
    const request = useRequest()
    
    // 响应式数据
    const claimsList = ref([])
    const loading = ref(false)
    const refreshing = ref(false)
    const hasMore = ref(true)
    const currentPage = ref(1)
    const showSearch = ref(false)
    const showFilter = ref(false)
    const searchKeyword = ref('')
    const activeTab = ref('all')
    
    // 概览数据
    const overviewData = ref([
      {
        type: 'total',
        icon: 'list',
        value: '1,234',
        label: '总申请数',
        trend: 'up',
        change: '12%'
      },
      {
        type: 'pending',
        icon: 'clock',
        value: '89',
        label: '待处理',
        trend: 'down',
        change: '5%'
      },
      {
        type: 'approved',
        icon: 'checkmarkempty',
        value: '945',
        label: '已核定',
        trend: 'up',
        change: '8%'
      },
      {
        type: 'paid',
        icon: 'wallet',
        value: '¥890万',
        label: '已支付',
        trend: 'up',
        change: '15%'
      }
    ])
    
    // 快捷操作
    const quickActions = ref([
      { id: 'apply', icon: 'plus', color: '#2E8B57', text: '新增申请' },
      { id: 'review', icon: 'eye', color: '#007AFF', text: '批量审核' },
      { id: 'export', icon: 'download', color: '#FF9500', text: '导出报告' },
      { id: 'stats', icon: 'bars', color: '#5856D6', text: '统计分析' }
    ])
    
    // 状态标签
    const statusTabs = ref([
      { value: 'all', label: '全部', count: 0 },
      { value: 'submitted', label: '待审核', count: 0 },
      { value: 'reviewing', label: '审核中', count: 0 },
      { value: 'approved', label: '已核定', count: 0 },
      { value: 'paid', label: '已支付', count: 0 }
    ])
    
    // 筛选数据
    const filterData = reactive({
      insuranceType: '',
      minAmount: '',
      maxAmount: '',
      startDate: '',
      endDate: ''
    })
    
    // 保险类型选项
    const insuranceTypes = ref([
      { value: '', label: '全部' },
      { value: 'livestock', label: '牲畜保险' },
      { value: 'crop', label: '农作物保险' },
      { value: 'equipment', label: '农机保险' },
      { value: 'weather', label: '天气保险' }
    ])
    
    // 获取理赔列表
    const getClaimsList = async (isRefresh = false) => {
      if (loading.value && !isRefresh) return
      
      try {
        loading.value = true
        
        const params = {
          page: isRefresh ? 1 : currentPage.value,
          pageSize: 10,
          status: activeTab.value === 'all' ? '' : activeTab.value,
          keyword: searchKeyword.value,
          ...filterData
        }
        
        const response = await request.get('/api/claims/list', params)
        
        if (isRefresh) {
          claimsList.value = response.data.list
          currentPage.value = 1
        } else {
          claimsList.value.push(...response.data.list)
        }
        
        hasMore.value = response.data.hasMore
        currentPage.value++
        
      } catch (error) {
        showToast('获取数据失败')
      } finally {
        loading.value = false
        refreshing.value = false
      }
    }
    
    // 获取概览数据
    const getOverviewData = async () => {
      try {
        const response = await request.get('/api/claims/overview')
        overviewData.value = response.data
      } catch (error) {
        console.error('获取概览数据失败', error)
      }
    }
    
    // 获取状态统计
    const getStatusStats = async () => {
      try {
        const response = await request.get('/api/claims/status-stats')
        statusTabs.value.forEach(tab => {
          const stat = response.data.find(item => item.status === tab.value)
          if (stat) {
            tab.count = stat.count
          }
        })
      } catch (error) {
        console.error('获取状态统计失败', error)
      }
    }
    
    // 搜索
    const onSearch = () => {
      currentPage.value = 1
      getClaimsList(true)
    }
    
    // 切换标签
    const switchTab = (tabValue) => {
      activeTab.value = tabValue
      currentPage.value = 1
      getClaimsList(true)
    }
    
    // 下拉刷新
    const onRefresh = () => {
      refreshing.value = true
      getClaimsList(true)
      getOverviewData()
      getStatusStats()
    }
    
    // 加载更多
    const loadMore = () => {
      if (hasMore.value && !loading.value) {
        getClaimsList()
      }
    }
    
    // 快捷操作处理
    const handleQuickAction = (actionId) => {
      switch (actionId) {
        case 'apply':
          goToApply()
          break
        case 'review':
          batchReview()
          break
        case 'export':
          exportReport()
          break
        case 'stats':
          goToStats()
          break
      }
    }
    
    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        submitted: '待审核',
        reviewing: '审核中',
        approved: '已核定',
        rejected: '已拒绝',
        paid: '已支付'
      }
      return statusMap[status] || '未知'
    }
    
    // 审核理赔
    const reviewClaim = (claimId) => {
      uni.navigateTo({
        url: `/pages/claim-review/claim-review?id=${claimId}`
      })
    }
    
    // 核定理赔
    const approveClaim = (claimId) => {
      uni.navigateTo({
        url: `/pages/claim-approve/claim-approve?id=${claimId}`
      })
    }
    
    // 支付理赔
    const payClaim = async (claimId) => {
      try {
        showLoading('处理中...')
        await request.post(`/api/claims/${claimId}/pay`)
        showToast('支付成功')
        getClaimsList(true)
      } catch (error) {
        showToast('支付失败')
      } finally {
        hideLoading()
      }
    }
    
    // 查看详情
    const viewDetails = (claimId) => {
      uni.navigateTo({
        url: `/pages/claim-detail/claim-detail?id=${claimId}`
      })
    }
    
    // 跳转到详情页
    const goToDetail = (claimId) => {
      uni.navigateTo({
        url: `/pages/claim-detail/claim-detail?id=${claimId}`
      })
    }
    
    // 跳转到申请页
    const goToApply = () => {
      uni.navigateTo({
        url: '/pages/claim-apply/claim-apply'
      })
    }
    
    // 批量审核
    const batchReview = () => {
      uni.navigateTo({
        url: '/pages/batch-review/batch-review'
      })
    }
    
    // 导出报告
    const exportReport = async () => {
      try {
        showLoading('导出中...')
        await request.post('/api/claims/export')
        showToast('导出成功')
      } catch (error) {
        showToast('导出失败')
      } finally {
        hideLoading()
      }
    }
    
    // 跳转到统计页
    const goToStats = () => {
      uni.navigateTo({
        url: '/pages/claim-stats/claim-stats'
      })
    }
    
    // 日期选择
    const onStartDateChange = (e) => {
      filterData.startDate = e.detail.value
    }
    
    const onEndDateChange = (e) => {
      filterData.endDate = e.detail.value
    }
    
    // 重置筛选
    const resetFilter = () => {
      Object.keys(filterData).forEach(key => {
        filterData[key] = ''
      })
    }
    
    // 应用筛选
    const applyFilter = () => {
      showFilter.value = false
      currentPage.value = 1
      getClaimsList(true)
    }
    
    // 页面加载
    onMounted(() => {
      getClaimsList(true)
      getOverviewData()
      getStatusStats()
    })
    
    return {
      claimsList,
      loading,
      refreshing,
      hasMore,
      showSearch,
      showFilter,
      searchKeyword,
      activeTab,
      overviewData,
      quickActions,
      statusTabs,
      filterData,
      insuranceTypes,
      formatNumber,
      formatDate,
      onSearch,
      switchTab,
      onRefresh,
      loadMore,
      handleQuickAction,
      getStatusText,
      reviewClaim,
      approveClaim,
      payClaim,
      viewDetails,
      goToDetail,
      goToApply,
      onStartDateChange,
      onEndDateChange,
      resetFilter,
      applyFilter
    }
  }
}
</script>

<style lang="scss" scoped>
.claims-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: $bg-secondary;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $spacing-md;
  background-color: $white;
  border-bottom: 1px solid $border-color;
  
  .navbar-title {
    font-size: $font-size-lg;
    font-weight: $font-weight-medium;
    color: $text-primary;
  }
  
  .navbar-actions {
    display: flex;
    gap: $spacing-sm;
    
    .search-btn,
    .filter-btn {
      padding: $spacing-xs;
      color: $primary-color;
    }
  }
}

.search-bar {
  padding: $spacing-md;
  background-color: $white;
  border-bottom: 1px solid $border-color;
  
  .search-input {
    display: flex;
    align-items: center;
    background-color: $bg-light;
    border-radius: $border-radius-lg;
    padding: $spacing-sm $spacing-md;
    gap: $spacing-sm;
    
    input {
      flex: 1;
      font-size: $font-size-base;
    }
  }
}

.overview-section {
  background-color: $white;
  padding: $spacing-md;
  
  .overview-title {
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    color: $text-primary;
    margin-bottom: $spacing-md;
  }
  
  .overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-md;
    
    .overview-item {
      padding: $spacing-md;
      border-radius: $border-radius-lg;
      position: relative;
      overflow: hidden;
      
      &.total {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      
      &.pending {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }
      
      &.approved {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }
      
      &.paid {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
      
      .overview-icon {
        width: 32px;
        height: 32px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: $spacing-sm;
      }
      
      .overview-info {
        color: $white;
        margin-bottom: $spacing-sm;
        
        .overview-value {
          font-size: $font-size-xl;
          font-weight: $font-weight-bold;
          line-height: 1.2;
        }
        
        .overview-label {
          font-size: $font-size-sm;
          opacity: 0.9;
        }
      }
      
      .overview-trend {
        position: absolute;
        top: $spacing-sm;
        right: $spacing-sm;
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: $font-size-xs;
        color: $white;
        
        &.up {
          color: #4ade80;
        }
        
        &.down {
          color: #f87171;
        }
      }
    }
  }
}

.quick-actions {
  background-color: $white;
  padding: $spacing-md;
  margin-top: $spacing-sm;
  
  .actions-scroll {
    white-space: nowrap;
    
    .action-item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: $spacing-xs;
      margin-right: $spacing-lg;
      
      .action-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .action-text {
        font-size: $font-size-sm;
        color: $text-secondary;
      }
    }
  }
}

.claims-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: $spacing-sm;
  
  .section-header {
    background-color: $white;
    padding: $spacing-md;
    
    .section-title {
      font-size: $font-size-base;
      font-weight: $font-weight-medium;
      color: $text-primary;
      margin-bottom: $spacing-md;
    }
    
    .section-tabs {
      display: flex;
      gap: $spacing-sm;
      
      .tab-item {
        position: relative;
        padding: $spacing-xs $spacing-sm;
        background-color: $bg-light;
        border-radius: $border-radius-full;
        font-size: $font-size-sm;
        color: $text-secondary;
        
        &.active {
          background-color: $primary-color;
          color: $white;
        }
        
        .tab-badge {
          position: absolute;
          top: -6px;
          right: -6px;
          background-color: $error-color;
          color: $white;
          font-size: $font-size-xs;
          padding: 2px 6px;
          border-radius: $border-radius-full;
          min-width: 16px;
          text-align: center;
        }
      }
    }
  }
  
  .claims-list {
    flex: 1;
    padding: 0 $spacing-md $spacing-md;
  }
}

.claim-card {
  background-color: $white;
  border-radius: $border-radius-lg;
  padding: $spacing-md;
  margin-bottom: $spacing-md;
  box-shadow: $shadow-sm;
  
  .claim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $spacing-md;
    
    .claim-number {
      .label {
        font-size: $font-size-sm;
        color: $text-secondary;
      }
      
      .value {
        font-size: $font-size-base;
        font-weight: $font-weight-medium;
        color: $text-primary;
      }
    }
    
    .claim-status {
      padding: $spacing-xs $spacing-sm;
      border-radius: $border-radius-full;
      font-size: $font-size-xs;
      
      &.submitted {
        background-color: rgba(255, 149, 0, 0.1);
        color: #FF9500;
      }
      
      &.reviewing {
        background-color: rgba(0, 122, 255, 0.1);
        color: #007AFF;
      }
      
      &.approved {
        background-color: rgba(46, 139, 87, 0.1);
        color: $primary-color;
      }
      
      &.rejected {
        background-color: rgba(255, 59, 48, 0.1);
        color: #FF3B30;
      }
      
      &.paid {
        background-color: rgba(52, 199, 89, 0.1);
        color: #34C759;
      }
    }
  }
  
  .claim-info {
    margin-bottom: $spacing-md;
    
    .info-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: $spacing-xs;
      
      .info-item {
        flex: 1;
        
        .label {
          font-size: $font-size-sm;
          color: $text-secondary;
        }
        
        .value {
          font-size: $font-size-sm;
          color: $text-primary;
        }
      }
    }
  }
  
  .claim-amount {
    display: flex;
    justify-content: space-between;
    margin-bottom: $spacing-md;
    
    .amount-item {
      text-align: center;
      
      .amount-label {
        display: block;
        font-size: $font-size-xs;
        color: $text-secondary;
        margin-bottom: $spacing-xs;
      }
      
      .amount-value {
        font-size: $font-size-lg;
        font-weight: $font-weight-bold;
        
        &.apply {
          color: $warning-color;
        }
        
        &.approved {
          color: $primary-color;
        }
      }
    }
  }
  
  .claim-progress {
    margin-bottom: $spacing-md;
    
    .progress-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: $spacing-xs;
      
      .progress-label {
        font-size: $font-size-sm;
        color: $text-secondary;
      }
      
      .progress-step {
        font-size: $font-size-sm;
        color: $primary-color;
        font-weight: $font-weight-medium;
      }
    }
    
    .progress-bar {
      height: 4px;
      background-color: $bg-light;
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: $spacing-sm;
      
      .progress-fill {
        height: 100%;
        background-color: $primary-color;
        transition: width 0.3s ease;
      }
    }
    
    .progress-steps {
      display: flex;
      justify-content: space-between;
      
      .step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: $spacing-xs;
        
        .step-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: $bg-light;
          
          &.completed {
            background-color: $primary-color;
          }
          
          &.current {
            background-color: $warning-color;
          }
        }
        
        .step-text {
          font-size: $font-size-xs;
          color: $text-muted;
          text-align: center;
        }
        
        &.completed .step-text {
          color: $primary-color;
        }
        
        &.current .step-text {
          color: $warning-color;
        }
      }
    }
  }
  
  .claim-actions {
    display: flex;
    gap: $spacing-sm;
    
    .action-btn {
      flex: 1;
      padding: $spacing-sm;
      border-radius: $border-radius-md;
      font-size: $font-size-sm;
      text-align: center;
      
      &.primary {
        background-color: $primary-color;
        color: $white;
      }
      
      &.warning {
        background-color: $warning-color;
        color: $white;
      }
      
      &.success {
        background-color: $success-color;
        color: $white;
      }
      
      &.secondary {
        background-color: $bg-light;
        color: $text-secondary;
      }
    }
  }
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-lg;
  gap: $spacing-sm;
  color: $text-muted;
  font-size: $font-size-sm;
}

.no-more {
  text-align: center;
  padding: $spacing-lg;
  color: $text-muted;
  font-size: $font-size-sm;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $spacing-5xl;
  
  .empty-image {
    width: 120px;
    height: 120px;
    margin-bottom: $spacing-lg;
  }
  
  .empty-text {
    font-size: $font-size-base;
    color: $text-muted;
  }
}

.filter-popup {
  background-color: $white;
  border-radius: $border-radius-lg $border-radius-lg 0 0;
  max-height: 70vh;
  
  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $spacing-lg;
    border-bottom: 1px solid $border-color;
    
    .filter-actions {
      display: flex;
      gap: $spacing-lg;
      
      text {
        color: $primary-color;
        font-size: $font-size-base;
      }
    }
  }
  
  .filter-content {
    padding: $spacing-lg;
    max-height: 50vh;
    overflow-y: auto;
  }
  
  .filter-section {
    margin-bottom: $spacing-xl;
    
    .section-title {
      font-size: $font-size-base;
      font-weight: $font-weight-medium;
      color: $text-primary;
      margin-bottom: $spacing-md;
    }
    
    .type-options {
      display: flex;
      flex-wrap: wrap;
      gap: $spacing-sm;
      
      .type-item {
        padding: $spacing-sm $spacing-md;
        background-color: $bg-light;
        border-radius: $border-radius-full;
        font-size: $font-size-sm;
        color: $text-secondary;
        
        &.active {
          background-color: $primary-color;
          color: $white;
        }
      }
    }
    
    .amount-range,
    .date-range {
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      
      .amount-input,
      .date-picker {
        flex: 1;
        padding: $spacing-sm;
        border: 1px solid $border-color;
        border-radius: $border-radius-md;
        text-align: center;
        font-size: $font-size-sm;
      }
      
      .separator {
        color: $text-muted;
      }
    }
  }
}

.fab-button {
  position: fixed;
  right: $spacing-lg;
  bottom: 100px;
  width: 56px;
  height: 56px;
  background-color: $primary-color;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: $shadow-lg;
  z-index: 999;
}
</style>