<template>
  <div class="supervision-tasks">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1>监管任务导入</h1>
      <div class="header-actions">
        <a-button type="primary" @click="showAddTaskModal">
          <plus-outlined /> 新增监管任务
        </a-button>
        <!-- <a-button type="primary" @click="showBatchAddModal">
          <plus-outlined /> 批量新增
        </a-button> -->
      </div>
    </div>

    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <div class="search-form">
        <a-input
          v-model:value="searchForm.contractNumber"
          placeholder="请输入合同编号"
          class="search-input"
        />
        
        <a-range-picker
          v-model:value="searchForm.dateRange"
          :placeholder="['开始日期', '结束日期']"
          class="date-picker"
        />
        
        <a-select
          v-model:value="searchForm.supervisionStatus"
          placeholder="请选择监管状态"
          class="status-select"
        >
          <a-select-option value="pending">待监管</a-select-option>
          <a-select-option value="supervising">监管中</a-select-option>
          <a-select-option value="completed">已完成</a-select-option>
          <a-select-option value="suspended">已暂停</a-select-option>
        </a-select>
        
        <div class="action-buttons">
          <a-button type="primary" @click="handleSearch">
            <search-outlined /> 搜索
          </a-button>
          <a-button @click="handleExport">
            <download-outlined /> 任务导出
          </a-button>
          <a-button @click="handleReset">
            重置
          </a-button>
        </div>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <a-table
        :columns="columns"
        :data-source="filteredTasks"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        row-key="id"
        :locale="{ emptyText: '暂无数据' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'supervisionStatus'">
            <a-tag :color="getStatusColor(record.supervisionStatus)">
              {{ getStatusName(record.supervisionStatus) }}
            </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small" @click="viewTask(record)">查看</a-button>
              <a-button type="link" size="small" @click="editTask(record)">编辑</a-button>
              <a-button type="link" size="small" @click="deleteTask(record.id)">删除</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 新增监管任务对话框 -->
    <a-modal
      v-model:open="addTaskModalVisible"
      title="新增监管任务"
      width="800px"
      @ok="handleAddTask"
      @cancel="handleCancelAdd"
    >
      <a-form
        ref="addTaskFormRef"
        :model="addTaskForm"
        :rules="addTaskRules"
        layout="vertical"
      >
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="申请单号" name="applicationNumber">
              <a-input v-model:value="addTaskForm.applicationNumber" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="放款合同编号" name="contractNumber">
              <a-input v-model:value="addTaskForm.contractNumber" />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="产品名称" name="productName">
              <a-input v-model:value="addTaskForm.productName" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="客户姓名" name="customerName">
              <a-input v-model:value="addTaskForm.customerName" />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="证件类型" name="idType">
              <a-select v-model:value="addTaskForm.idType">
                <a-select-option value="id_card">身份证</a-select-option>
                <a-select-option value="passport">护照</a-select-option>
                <a-select-option value="other">其他</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="证件号码" name="idNumber">
              <a-input v-model:value="addTaskForm.idNumber" />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="养殖生资种类" name="assetType">
              <a-select v-model:value="addTaskForm.assetType">
                <a-select-option value="cattle">牛</a-select-option>
                <a-select-option value="sheep">羊</a-select-option>
                <a-select-option value="pig">猪</a-select-option>
                <a-select-option value="poultry">家禽</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="监管生资数量" name="assetQuantity">
              <a-input-number v-model:value="addTaskForm.assetQuantity" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="监管起始时间" name="startTime">
              <a-date-picker v-model:value="addTaskForm.startTime" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="监管结束时间" name="endTime">
              <a-date-picker v-model:value="addTaskForm.endTime" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>

    <!-- 任务详情对话框 -->
    <a-modal
      v-model:open="detailModalVisible"
      title="任务详情"
      width="800px"
      :footer="null"
    >
      <div v-if="selectedTask" class="task-detail">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="申请单号">
            {{ selectedTask.applicationNumber }}
          </a-descriptions-item>
          <a-descriptions-item label="放款合同编号">
            {{ selectedTask.contractNumber }}
          </a-descriptions-item>
          <a-descriptions-item label="产品名称">
            {{ selectedTask.productName }}
          </a-descriptions-item>
          <a-descriptions-item label="客户姓名">
            {{ selectedTask.customerName }}
          </a-descriptions-item>
          <a-descriptions-item label="证件类型">
            {{ getIDTypeName(selectedTask.idType) }}
          </a-descriptions-item>
          <a-descriptions-item label="证件号码">
            {{ selectedTask.idNumber }}
          </a-descriptions-item>
          <a-descriptions-item label="养殖生资种类">
            {{ getAssetTypeName(selectedTask.assetType) }}
          </a-descriptions-item>
          <a-descriptions-item label="监管生资数量">
            {{ selectedTask.assetQuantity }}
          </a-descriptions-item>
          <a-descriptions-item label="监管状态">
            <a-tag :color="getStatusColor(selectedTask.supervisionStatus)">
              {{ getStatusName(selectedTask.supervisionStatus) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="任务导入时间">
            {{ selectedTask.importTime }}
          </a-descriptions-item>
          <a-descriptions-item label="监管起始时间">
            {{ selectedTask.startTime }}
          </a-descriptions-item>
          <a-descriptions-item label="监管结束时间">
            {{ selectedTask.endTime }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>

    <!-- 编辑监管任务对话框 -->
    <a-modal
      v-model:open="editModalVisible"
      title="编辑监管任务"
      width="800px"
      @ok="handleEditTask"
      @cancel="handleCancelEdit"
      :confirmLoading="editLoading"
    >
      <a-form
        ref="editTaskFormRef"
        :model="editTaskForm"
        :rules="addTaskRules"
        layout="vertical"
      >
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="申请单号" name="applicationNumber">
              <a-input v-model:value="editTaskForm.applicationNumber" placeholder="请输入申请单号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="放款合同编号" name="contractNumber">
              <a-input v-model:value="editTaskForm.contractNumber" placeholder="请输入放款合同编号" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="产品名称" name="productName">
              <a-input v-model:value="editTaskForm.productName" placeholder="请输入产品名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="客户姓名" name="customerName">
              <a-input v-model:value="editTaskForm.customerName" placeholder="请输入客户姓名" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="证件类型" name="idType">
              <a-select v-model:value="editTaskForm.idType" placeholder="请选择证件类型">
                <a-select-option value="id_card">身份证</a-select-option>
                <a-select-option value="passport">护照</a-select-option>
                <a-select-option value="other">其他</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="证件号码" name="idNumber">
              <a-input v-model:value="editTaskForm.idNumber" placeholder="请输入证件号码" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="养殖生资种类" name="assetType">
              <a-select v-model:value="editTaskForm.assetType" placeholder="请选择养殖生资种类">
                <a-select-option value="cattle">牛</a-select-option>
                <a-select-option value="sheep">羊</a-select-option>
                <a-select-option value="pig">猪</a-select-option>
                <a-select-option value="poultry">家禽</a-select-option>
                <a-select-option value="other">其他</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="监管生资数量" name="assetQuantity">
              <a-input-number 
                v-model:value="editTaskForm.assetQuantity" 
                :min="0" 
                placeholder="请输入监管生资数量"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="监管状态" name="supervisionStatus">
              <a-select v-model:value="editTaskForm.supervisionStatus" placeholder="请选择监管状态">
                <a-select-option value="pending">待监管</a-select-option>
                <a-select-option value="supervising">监管中</a-select-option>
                <a-select-option value="completed">已完成</a-select-option>
                <a-select-option value="suspended">已暂停</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="监管起始时间" name="startTime">
              <a-date-picker 
                v-model:value="editTaskForm.startTime" 
                placeholder="请选择监管起始时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="监管结束时间" name="endTime">
              <a-date-picker 
                v-model:value="editTaskForm.endTime" 
                placeholder="请选择监管结束时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="贷款金额" name="loanAmount">
              <a-input-number 
                v-model:value="editTaskForm.loanAmount" 
                :min="0" 
                :precision="2"
                placeholder="请输入贷款金额"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="利率" name="interestRate">
              <a-input-number 
                v-model:value="editTaskForm.interestRate" 
                :min="0" 
                :max="1"
                :step="0.0001"
                :precision="4"
                placeholder="请输入利率"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="贷款期限（月）" name="loanTerm">
              <a-input-number 
                v-model:value="editTaskForm.loanTerm" 
                :min="0" 
                placeholder="请输入贷款期限"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="监管员姓名" name="supervisorName">
              <a-input v-model:value="editTaskForm.supervisorName" placeholder="请输入监管员姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="监管员电话" name="supervisorPhone">
              <a-input v-model:value="editTaskForm.supervisorPhone" placeholder="请输入监管员电话" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="养殖场地址" name="farmAddress">
          <a-input v-model:value="editTaskForm.farmAddress" placeholder="请输入养殖场地址" />
        </a-form-item>

        <a-form-item label="备注" name="remarks">
          <a-textarea 
            v-model:value="editTaskForm.remarks" 
            placeholder="请输入备注"
            :rows="3"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { api } from '@/utils/api'
import { 
  PlusOutlined, 
  SearchOutlined, 
  DownloadOutlined 
} from '@ant-design/icons-vue'

// 响应式数据
const loading = ref(false)
const addTaskModalVisible = ref(false)
const detailModalVisible = ref(false)
const selectedTask = ref(null)
const addTaskFormRef = ref()

// 编辑相关
const editModalVisible = ref(false)
const editTaskFormRef = ref()
const editTaskForm = ref({})
const editLoading = ref(false)
const currentEditTask = ref(null)

// 搜索表单
const searchForm = ref({
  contractNumber: '',
  dateRange: [],
  supervisionStatus: undefined
})

// 新增任务表单
const addTaskForm = ref({
  applicationNumber: '',
  contractNumber: '',
  productName: '',
  customerName: '',
  idType: '',
  idNumber: '',
  assetType: '',
  assetQuantity: 0,
  startTime: null,
  endTime: null
})

// 表单验证规则
const addTaskRules = {
  applicationNumber: [
    { required: true, message: '请输入申请单号', trigger: 'blur' }
  ],
  contractNumber: [
    { required: true, message: '请输入放款合同编号', trigger: 'blur' }
  ],
  productName: [
    { required: true, message: '请输入产品名称', trigger: 'blur' }
  ],
  customerName: [
    { required: true, message: '请输入客户姓名', trigger: 'blur' }
  ],
  idType: [
    { required: true, message: '请选择证件类型', trigger: 'change' }
  ],
  idNumber: [
    { required: true, message: '请输入证件号码', trigger: 'blur' }
  ],
  assetType: [
    { required: true, message: '请选择养殖生资种类', trigger: 'change' }
  ],
  assetQuantity: [
    { required: true, message: '请输入监管生资数量', trigger: 'blur' }
  ]
}

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `共${total}条`
})

// 表格列配置
const columns = [
  {
    title: '申请单号',
    dataIndex: 'applicationNumber',
    key: 'applicationNumber',
    width: 120,
  },
  {
    title: '放款合同编号',
    dataIndex: 'contractNumber',
    key: 'contractNumber',
    width: 150,
  },
  {
    title: '产品名称',
    dataIndex: 'productName',
    key: 'productName',
    width: 120,
  },
  {
    title: '客户姓名',
    dataIndex: 'customerName',
    key: 'customerName',
    width: 100,
  },
  {
    title: '证件类型',
    dataIndex: 'idType',
    key: 'idType',
    width: 100,
  },
  {
    title: '证件号码',
    dataIndex: 'idNumber',
    key: 'idNumber',
    width: 150,
  },
  {
    title: '养殖生资种类',
    dataIndex: 'assetType',
    key: 'assetType',
    width: 120,
  },
  {
    title: '监管生资数量',
    dataIndex: 'assetQuantity',
    key: 'assetQuantity',
    width: 120,
  },
  {
    title: '监管状态',
    dataIndex: 'supervisionStatus',
    key: 'supervisionStatus',
    width: 100,
  },
  {
    title: '任务导入时间',
    dataIndex: 'importTime',
    key: 'importTime',
    width: 150,
  },
  {
    title: '监管起始时间',
    dataIndex: 'startTime',
    key: 'startTime',
    width: 120,
  },
  {
    title: '监管结束时间',
    dataIndex: 'endTime',
    key: 'endTime',
    width: 120,
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right'
  },
]

// 监管任务数据
const tasks = ref([])

// 计算属性
const filteredTasks = computed(() => {
  return tasks.value
})

// 方法
const getStatusColor = (status) => {
  const colors = {
    'pending': 'orange',
    'supervising': 'blue',
    'completed': 'green',
    'suspended': 'red'
  }
  return colors[status] || 'default'
}

const getStatusName = (status) => {
  const names = {
    'pending': '待监管',
    'supervising': '监管中',
    'completed': '已完成',
    'suspended': '已暂停'
  }
  return names[status] || status
}

const getIDTypeName = (type) => {
  const names = {
    'id_card': '身份证',
    'passport': '护照',
    'other': '其他'
  }
  return names[type] || type
}

const getAssetTypeName = (type) => {
  const names = {
    'cattle': '牛',
    'sheep': '羊',
    'pig': '猪',
    'poultry': '家禽'
  }
  return names[type] || type
}

const showAddTaskModal = () => {
  addTaskModalVisible.value = true
}

const showBatchAddModal = () => {
  message.info('批量新增功能开发中...')
}


const resetAddTaskForm = () => {
  addTaskForm.value = {
    applicationNumber: '',
    contractNumber: '',
    productName: '',
    customerName: '',
    idType: '',
    idNumber: '',
    assetType: '',
    assetQuantity: 0,
    startTime: null,
    endTime: null
  }
}

const viewTask = (task) => {
  selectedTask.value = task
  detailModalVisible.value = true
}

// API调用函数
const fetchTasks = async (params = {}) => {
  try {
    loading.value = true
    // 构建日期范围参数
    let dateRangeParam = ''
    if (searchForm.value.dateRange && Array.isArray(searchForm.value.dateRange) && searchForm.value.dateRange.length === 2) {
      dateRangeParam = `${searchForm.value.dateRange[0].format('YYYY-MM-DD')},${searchForm.value.dateRange[1].format('YYYY-MM-DD')}`
    }
    
    console.log('开始获取监管任务列表...', {
      page: pagination.value.current,
      limit: pagination.value.pageSize,
      search: searchForm.value.contractNumber,
      supervisionStatus: searchForm.value.supervisionStatus,
      dateRange: dateRangeParam
    })
    
    const response = await api.supervisionTasks.getList({
      page: pagination.value.current,
      limit: pagination.value.pageSize,
      search: searchForm.value.contractNumber,
      supervisionStatus: searchForm.value.supervisionStatus,
      dateRange: dateRangeParam,
      ...params
    })
    
    console.log('监管任务列表响应:', response)
    
    if (response.success) {
      tasks.value = response.data.tasks || []
      pagination.value.total = response.data.pagination?.total || 0
      console.log('监管任务数据已更新:', tasks.value.length, '个任务')
    } else {
      console.error('API返回错误:', response.message)
      message.error(response.message || '获取监管任务列表失败')
    }
  } catch (error) {
    console.error('获取监管任务列表失败:', error)
    message.error('获取监管任务列表失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

const handleTableChange = (paginationInfo) => {
  pagination.value = paginationInfo
  fetchTasks()
}

const handleSearch = () => {
  pagination.value.current = 1
  fetchTasks()
}

const handleReset = () => {
  searchForm.value = {
    contractNumber: '',
    dateRange: null,
    supervisionStatus: ''
  }
  pagination.value.current = 1
  fetchTasks()
}

const editTask = async (task) => {
  try {
    // 保存当前编辑的任务
    currentEditTask.value = task
    
    // 填充编辑表单数据
    editTaskForm.value = {
      applicationNumber: task.applicationNumber || '',
      contractNumber: task.contractNumber || '',
      productName: task.productName || '',
      customerName: task.customerName || '',
      idType: task.idType || '',
      idNumber: task.idNumber || '',
      assetType: task.assetType || '',
      assetQuantity: task.assetQuantity || 0,
      supervisionStatus: task.supervisionStatus || '',
      startTime: task.startTime || null,
      endTime: task.endTime || null,
      loanAmount: task.loanAmount || 0,
      interestRate: task.interestRate || 0,
      loanTerm: task.loanTerm || 0,
      supervisorName: task.supervisorName || '',
      supervisorPhone: task.supervisorPhone || '',
      farmAddress: task.farmAddress || '',
      remarks: task.remarks || ''
    }
    
    // 打开编辑对话框
    editModalVisible.value = true
  } catch (error) {
    console.error('打开编辑对话框失败:', error)
    message.error('打开编辑对话框失败')
  }
}

const deleteTask = async (id) => {
  try {
    const response = await api.supervisionTasks.delete(id)
    if (response.success) {
      message.success('任务删除成功')
      await fetchTasks()
    } else {
      message.error(response.message || '删除任务失败')
    }
  } catch (error) {
    console.error('删除任务失败:', error)
    message.error('删除任务失败')
  }
}

const handleAddTask = async () => {
  try {
    await addTaskFormRef.value.validate()
    
    const response = await api.supervisionTasks.create(addTaskForm.value)
    
    if (response.success) {
      message.success('监管任务创建成功')
      addTaskModalVisible.value = false
      addTaskFormRef.value.resetFields()
      await fetchTasks()
    } else {
      message.error(response.message || '创建监管任务失败')
    }
  } catch (error) {
    console.error('创建监管任务失败:', error)
    message.error('创建监管任务失败')
  }
}

const handleCancelAdd = () => {
  addTaskModalVisible.value = false
  addTaskFormRef.value.resetFields()
}

// 编辑任务处理函数
const handleEditTask = async () => {
  try {
    await editTaskFormRef.value.validate()
    editLoading.value = true
    
    const response = await api.supervisionTasks.update(currentEditTask.value.id, editTaskForm.value)
    
    if (response.success) {
      message.success('编辑监管任务成功')
      editModalVisible.value = false
      editTaskFormRef.value.resetFields()
      currentEditTask.value = null
      fetchTasks() // 刷新列表
    } else {
      message.error(response.message || '编辑监管任务失败')
    }
  } catch (error) {
    console.error('编辑监管任务失败:', error)
    message.error('编辑监管任务失败')
  } finally {
    editLoading.value = false
  }
}

const handleCancelEdit = () => {
  editModalVisible.value = false
  editTaskFormRef.value.resetFields()
}

const handleExport = () => {
  message.info('任务导出功能开发中...')
}

onMounted(() => {
  fetchTasks()
})
</script>

<style scoped>
.supervision-tasks {
  padding: 0;
  background: #f0f2f5;
  min-height: calc(100vh - 134px);
  margin: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.search-section {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 24px;
}

.search-form {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  width: 200px;
}

.date-picker {
  width: 300px;
}

.status-select {
  width: 180px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.table-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.task-detail {
  padding: 16px 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .action-buttons {
    margin-left: 0;
    justify-content: flex-end;
  }
  
  .search-input,
  .date-picker,
  .status-select {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .header-actions {
    justify-content: center;
  }
  
  .action-buttons {
    flex-wrap: wrap;
  }
}
</style>