Twilioapp-admin/pages/dashboard/orders.tsx

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';
import DashboardLayout from '../../components/Layout/DashboardLayout';
import { toast } from 'react-hot-toast';
import {
  MagnifyingGlassIcon,
  PlusIcon,
  EyeIcon,
  PencilIcon,
  TrashIcon,
  ClockIcon,
  CheckCircleIcon,
  XCircleIcon,
  ExclamationTriangleIcon,
  ArrowDownTrayIcon,
  PhoneIcon,
  VideoCameraIcon,
  UserIcon,
  LanguageIcon,
  CalendarIcon,
  CurrencyDollarIcon,
  DocumentTextIcon,
  PlayIcon,
  PauseIcon,
  StopIcon
} from '@heroicons/react/24/outline';
import { getDemoData } from '../../lib/demo-data';
import { formatTime } from '../../lib/utils';

interface Order {
  id: string;
  order_number: string;
  user_name: string;
  user_email: string;
  interpreter_name: string;
  language_pair: string;
  service_type: 'audio' | 'video' | 'onsite';
  start_time: string;
  end_time?: string;
  duration?: number;
  status: 'pending' | 'confirmed' | 'in_progress' | 'completed' | 'cancelled' | 'failed';
  amount: number;
  payment_status: 'pending' | 'paid' | 'failed' | 'refunded';
  notes?: string;
  created_at: string;
  updated_at: string;
}

interface OrderFilters {
  search: string;
  status: string;
  service_type: string;
  payment_status: string;
  date_range: string;
}

export default function Orders() {
  const router = useRouter();
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedOrders, setSelectedOrders] = useState<string[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalCount, setTotalCount] = useState(0);
  const [filters, setFilters] = useState<OrderFilters>({
    search: '',
    status: '',
    service_type: '',
    payment_status: '',
    date_range: ''
  });

  const pageSize = 10;

  useEffect(() => {
    fetchOrders();
  }, [currentPage, filters]);

  const fetchOrders = async () => {
    try {
      setLoading(true);
      
      // 模拟加载延迟
      await new Promise(resolve => setTimeout(resolve, 800));
      
      // 使用演示数据
      const mockOrders: Order[] = [
        {
          id: '1',
          order_number: 'ORD-2024-001',
          user_name: '张先生',
          user_email: 'zhang@example.com',
          interpreter_name: '王翻译',
          language_pair: '中文 ↔ 英文',
          service_type: 'video',
          start_time: '2024-01-20T14:00:00Z',
          end_time: '2024-01-20T15:30:00Z',
          duration: 90,
          status: 'completed',
          amount: 450,
          payment_status: 'paid',
          notes: '商务会议翻译，需要专业术语支持',
          created_at: '2024-01-19T10:00:00Z',
          updated_at: '2024-01-20T15:30:00Z'
        },
        {
          id: '2',
          order_number: 'ORD-2024-002',
          user_name: '李女士',
          user_email: 'li@example.com',
          interpreter_name: '陈口译',
          language_pair: '中文 ↔ 日文',
          service_type: 'audio',
          start_time: '2024-01-21T09:00:00Z',
          status: 'confirmed',
          amount: 300,
          payment_status: 'paid',
          notes: '医疗咨询翻译',
          created_at: '2024-01-20T08:00:00Z',
          updated_at: '2024-01-20T08:30:00Z'
        },
        {
          id: '3',
          order_number: 'ORD-2024-003',
          user_name: '王总',
          user_email: 'wangzong@example.com',
          interpreter_name: '刘同传',
          language_pair: '中文 ↔ 英文',
          service_type: 'onsite',
          start_time: '2024-01-22T10:00:00Z',
          end_time: '2024-01-22T16:00:00Z',
          duration: 360,
          status: 'in_progress',
          amount: 1800,
          payment_status: 'paid',
          notes: '大型会议同声传译',
          created_at: '2024-01-18T15:00:00Z',
          updated_at: '2024-01-22T10:00:00Z'
        },
        {
          id: '4',
          order_number: 'ORD-2024-004',
          user_name: '赵经理',
          user_email: 'zhao@example.com',
          interpreter_name: '李专家',
          language_pair: '中文 ↔ 韩文',
          service_type: 'video',
          start_time: '2024-01-20T16:00:00Z',
          status: 'cancelled',
          amount: 200,
          payment_status: 'refunded',
          notes: '客户临时取消',
          created_at: '2024-01-19T12:00:00Z',
          updated_at: '2024-01-20T14:00:00Z'
        },
        {
          id: '5',
          order_number: 'ORD-2024-005',
          user_name: '孙先生',
          user_email: 'sun@example.com',
          interpreter_name: '张语言',
          language_pair: '中文 ↔ 德文',
          service_type: 'audio',
          start_time: '2024-01-23T13:00:00Z',
          status: 'pending',
          amount: 250,
          payment_status: 'pending',
          notes: '技术文档翻译咨询',
          created_at: '2024-01-20T16:00:00Z',
          updated_at: '2024-01-20T16:00:00Z'
        },
        {
          id: '6',
          order_number: 'ORD-2024-006',
          user_name: '周女士',
          user_email: 'zhou@example.com',
          interpreter_name: '赵技术',
          language_pair: '中文 ↔ 英文',
          service_type: 'video',
          start_time: '2024-01-19T11:00:00Z',
          end_time: '2024-01-19T12:00:00Z',
          duration: 60,
          status: 'failed',
          amount: 200,
          payment_status: 'failed',
          notes: '技术问题导致服务中断',
          created_at: '2024-01-18T20:00:00Z',
          updated_at: '2024-01-19T12:00:00Z'
        }
      ];

      // 应用过滤器
      let filteredOrders = mockOrders;
      
      if (filters.search) {
        filteredOrders = filteredOrders.filter(order => 
          order.order_number.toLowerCase().includes(filters.search.toLowerCase()) ||
          order.user_name.toLowerCase().includes(filters.search.toLowerCase()) ||
          order.user_email.toLowerCase().includes(filters.search.toLowerCase()) ||
          order.interpreter_name.toLowerCase().includes(filters.search.toLowerCase()) ||
          order.language_pair.toLowerCase().includes(filters.search.toLowerCase())
        );
      }
      
      if (filters.status) {
        filteredOrders = filteredOrders.filter(order => order.status === filters.status);
      }
      
      if (filters.service_type) {
        filteredOrders = filteredOrders.filter(order => order.service_type === filters.service_type);
      }
      
      if (filters.payment_status) {
        filteredOrders = filteredOrders.filter(order => order.payment_status === filters.payment_status);
      }

      // 分页
      const startIndex = (currentPage - 1) * pageSize;
      const endIndex = startIndex + pageSize;
      const paginatedOrders = filteredOrders.slice(startIndex, endIndex);
      
      setOrders(paginatedOrders);
      setTotalCount(filteredOrders.length);
      setTotalPages(Math.ceil(filteredOrders.length / pageSize));
      
    } catch (error) {
      console.error('Failed to fetch orders:', error);
      toast.error('加载订单失败');
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = (value: string) => {
    setFilters(prev => ({ ...prev, search: value }));
    setCurrentPage(1);
  };

  const handleFilterChange = (key: keyof OrderFilters, value: string) => {
    setFilters(prev => ({ ...prev, [key]: value }));
    setCurrentPage(1);
  };

  const handleSelectOrder = (orderId: string) => {
    setSelectedOrders(prev => 
      prev.includes(orderId) 
        ? prev.filter(id => id !== orderId)
        : [...prev, orderId]
    );
  };

  const handleSelectAll = () => {
    if (selectedOrders.length === orders.length) {
      setSelectedOrders([]);
    } else {
      setSelectedOrders(orders.map(order => order.id));
    }
  };

  const handleBulkAction = async (action: 'confirm' | 'cancel' | 'delete') => {
    if (selectedOrders.length === 0) {
      toast.error('请选择要操作的订单');
      return;
    }

    try {
      const actionText = action === 'confirm' ? '确认' : action === 'cancel' ? '取消' : '删除';
      toast.loading(`正在${actionText}订单...`, { id: 'bulk-action' });
      
      // 模拟操作延迟
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      toast.success(`成功${actionText} ${selectedOrders.length} 个订单`, { id: 'bulk-action' });
      setSelectedOrders([]);
      fetchOrders();
    } catch (error) {
      toast.error('操作失败', { id: 'bulk-action' });
    }
  };

  const handleExport = async () => {
    try {
      toast.loading('正在导出订单数据...', { id: 'export' });
      
      // 模拟导出延迟
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      toast.success('订单数据导出成功', { id: 'export' });
    } catch (error) {
      toast.error('导出失败', { id: 'export' });
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'completed':
        return 'text-green-800 bg-green-100';
      case 'confirmed':
        return 'text-blue-800 bg-blue-100';
      case 'in_progress':
        return 'text-yellow-800 bg-yellow-100';
      case 'pending':
        return 'text-gray-800 bg-gray-100';
      case 'cancelled':
        return 'text-red-800 bg-red-100';
      case 'failed':
        return 'text-red-800 bg-red-100';
      default:
        return 'text-gray-800 bg-gray-100';
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'completed':
        return '已完成';
      case 'confirmed':
        return '已确认';
      case 'in_progress':
        return '进行中';
      case 'pending':
        return '待确认';
      case 'cancelled':
        return '已取消';
      case 'failed':
        return '失败';
      default:
        return status;
    }
  };

  const getPaymentStatusColor = (status: string) => {
    switch (status) {
      case 'paid':
        return 'text-green-800 bg-green-100';
      case 'pending':
        return 'text-yellow-800 bg-yellow-100';
      case 'failed':
        return 'text-red-800 bg-red-100';
      case 'refunded':
        return 'text-purple-800 bg-purple-100';
      default:
        return 'text-gray-800 bg-gray-100';
    }
  };

  const getPaymentStatusText = (status: string) => {
    switch (status) {
      case 'paid':
        return '已支付';
      case 'pending':
        return '待支付';
      case 'failed':
        return '支付失败';
      case 'refunded':
        return '已退款';
      default:
        return status;
    }
  };

  const getServiceTypeIcon = (type: string) => {
    switch (type) {
      case 'audio':
        return <PhoneIcon className="h-4 w-4 text-blue-500" />;
      case 'video':
        return <VideoCameraIcon className="h-4 w-4 text-green-500" />;
      case 'onsite':
        return <UserIcon className="h-4 w-4 text-purple-500" />;
      default:
        return <PhoneIcon className="h-4 w-4 text-gray-500" />;
    }
  };

  const getServiceTypeText = (type: string) => {
    switch (type) {
      case 'audio':
        return '语音通话';
      case 'video':
        return '视频通话';
      case 'onsite':
        return '现场翻译';
      default:
        return type;
    }
  };

  const formatDuration = (minutes?: number) => {
    if (!minutes) return '-';
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    if (hours > 0) {
      return `${hours}小时${mins}分钟`;
    }
    return `${mins}分钟`;
  };

  return (
    <>
      <Head>
        <title>订单管理 - 翻译服务管理系统</title>
      </Head>
      
      <DashboardLayout title="订单管理">
        <div className="space-y-6">
          {/* 页面标题和操作 */}
          <div className="sm:flex sm:items-center sm:justify-between">
            <div>
              <h1 className="text-2xl font-bold text-gray-900">订单管理</h1>
              <p className="mt-2 text-sm text-gray-700">
                管理所有翻译服务订单，包括订单状态、支付状态和服务详情。
              </p>
            </div>
            <div className="mt-4 sm:mt-0 sm:flex sm:space-x-3">
              <button
                onClick={handleExport}
                className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
              >
                <ArrowDownTrayIcon className="h-4 w-4 mr-2" />
                导出数据
              </button>
              <button
                onClick={() => router.push('/dashboard/orders/new')}
                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
              >
                <PlusIcon className="h-4 w-4 mr-2" />
                创建订单
              </button>
            </div>
          </div>

          {/* 搜索和过滤器 */}
          <div className="bg-white shadow rounded-lg p-6">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
              <div>
                <label htmlFor="search" className="block text-sm font-medium text-gray-700 mb-1">
                  搜索
                </label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
                  </div>
                  <input
                    type="text"
                    id="search"
                    className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="搜索订单号、用户、翻译员..."
                    value={filters.search}
                    onChange={(e) => handleSearch(e.target.value)}
                  />
                </div>
              </div>

              <div>
                <label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
                  订单状态
                </label>
                <select
                  id="status"
                  className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                  value={filters.status}
                  onChange={(e) => handleFilterChange('status', e.target.value)}
                >
                  <option value="">全部状态</option>
                  <option value="pending">待确认</option>
                  <option value="confirmed">已确认</option>
                  <option value="in_progress">进行中</option>
                  <option value="completed">已完成</option>
                  <option value="cancelled">已取消</option>
                  <option value="failed">失败</option>
                </select>
              </div>

              <div>
                <label htmlFor="service_type" className="block text-sm font-medium text-gray-700 mb-1">
                  服务类型
                </label>
                <select
                  id="service_type"
                  className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                  value={filters.service_type}
                  onChange={(e) => handleFilterChange('service_type', e.target.value)}
                >
                  <option value="">全部类型</option>
                  <option value="audio">语音通话</option>
                  <option value="video">视频通话</option>
                  <option value="onsite">现场翻译</option>
                </select>
              </div>

              <div>
                <label htmlFor="payment_status" className="block text-sm font-medium text-gray-700 mb-1">
                  支付状态
                </label>
                <select
                  id="payment_status"
                  className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                  value={filters.payment_status}
                  onChange={(e) => handleFilterChange('payment_status', e.target.value)}
                >
                  <option value="">全部状态</option>
                  <option value="pending">待支付</option>
                  <option value="paid">已支付</option>
                  <option value="failed">支付失败</option>
                  <option value="refunded">已退款</option>
                </select>
              </div>

              <div>
                <label htmlFor="date_range" className="block text-sm font-medium text-gray-700 mb-1">
                  时间范围
                </label>
                <select
                  id="date_range"
                  className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                  value={filters.date_range}
                  onChange={(e) => handleFilterChange('date_range', e.target.value)}
                >
                  <option value="">全部时间</option>
                  <option value="today">今天</option>
                  <option value="week">本周</option>
                  <option value="month">本月</option>
                  <option value="quarter">本季度</option>
                </select>
              </div>
            </div>
          </div>

          {/* 批量操作 */}
          {selectedOrders.length > 0 && (
            <div className="bg-white shadow rounded-lg p-4">
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-700">
                  已选择 {selectedOrders.length} 个订单
                </span>
                <div className="flex space-x-2">
                  <button
                    onClick={() => handleBulkAction('confirm')}
                    className="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-700"
                  >
                    确认订单
                  </button>
                  <button
                    onClick={() => handleBulkAction('cancel')}
                    className="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700"
                  >
                    取消订单
                  </button>
                  <button
                    onClick={() => handleBulkAction('delete')}
                    className="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700"
                  >
                    删除
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* 订单列表 */}
          <div className="bg-white shadow rounded-lg overflow-hidden">
            {loading ? (
              <div className="flex items-center justify-center h-64">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
              </div>
            ) : (
              <>
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th scope="col" className="relative px-6 py-3">
                          <input
                            type="checkbox"
                            className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                            checked={selectedOrders.length === orders.length && orders.length > 0}
                            onChange={handleSelectAll}
                          />
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          订单信息
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          用户/翻译员
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          服务详情
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          时间/时长
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          状态
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          金额
                        </th>
                        <th scope="col" className="relative px-6 py-3">
                          <span className="sr-only">操作</span>
                        </th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {orders.map((order) => (
                        <tr key={order.id} className="hover:bg-gray-50">
                          <td className="relative px-6 py-4">
                            <input
                              type="checkbox"
                              className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                              checked={selectedOrders.includes(order.id)}
                              onChange={() => handleSelectOrder(order.id)}
                            />
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="space-y-1">
                              <div className="text-sm font-medium text-gray-900">
                                {order.order_number}
                              </div>
                              <div className="text-sm text-gray-500">
                                创建于 {formatTime(order.created_at)}
                              </div>
                              {order.notes && (
                                <div className="text-sm text-gray-500 max-w-32 truncate" title={order.notes}>
                                  备注: {order.notes}
                                </div>
                              )}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="space-y-2">
                              <div>
                                <div className="text-sm font-medium text-gray-900">
                                  用户: {order.user_name}
                                </div>
                                <div className="text-sm text-gray-500">
                                  {order.user_email}
                                </div>
                              </div>
                              <div>
                                <div className="text-sm font-medium text-gray-900">
                                  翻译员: {order.interpreter_name}
                                </div>
                              </div>
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="space-y-1">
                              <div className="flex items-center text-sm text-gray-900">
                                {getServiceTypeIcon(order.service_type)}
                                <span className="ml-1">{getServiceTypeText(order.service_type)}</span>
                              </div>
                              <div className="flex items-center text-sm text-gray-500">
                                <LanguageIcon className="h-4 w-4 mr-1 text-gray-400" />
                                {order.language_pair}
                              </div>
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="space-y-1">
                              <div className="flex items-center text-sm text-gray-900">
                                <CalendarIcon className="h-4 w-4 mr-1 text-gray-400" />
                                {new Date(order.start_time).toLocaleString('zh-CN')}
                              </div>
                              <div className="flex items-center text-sm text-gray-500">
                                <ClockIcon className="h-4 w-4 mr-1 text-gray-400" />
                                {formatDuration(order.duration)}
                              </div>
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="space-y-2">
                              <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(order.status)}`}>
                                {getStatusText(order.status)}
                              </span>
                              <div>
                                <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getPaymentStatusColor(order.payment_status)}`}>
                                  {getPaymentStatusText(order.payment_status)}
                                </span>
                              </div>
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="flex items-center text-sm font-medium text-gray-900">
                              <CurrencyDollarIcon className="h-4 w-4 mr-1 text-gray-400" />
                              ¥{order.amount}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <div className="flex items-center space-x-2">
                              <button
                                onClick={() => router.push(`/dashboard/orders/${order.id}`)}
                                className="text-blue-600 hover:text-blue-900"
                                title="查看详情"
                              >
                                <EyeIcon className="h-4 w-4" />
                              </button>
                              <button
                                onClick={() => router.push(`/dashboard/orders/${order.id}/edit`)}
                                className="text-green-600 hover:text-green-900"
                                title="编辑"
                              >
                                <PencilIcon className="h-4 w-4" />
                              </button>
                              <button
                                onClick={() => {
                                  if (confirm('确定要删除这个订单吗？')) {
                                    toast.success('订单删除成功');
                                    fetchOrders();
                                  }
                                }}
                                className="text-red-600 hover:text-red-900"
                                title="删除"
                              >
                                <TrashIcon className="h-4 w-4" />
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                {/* 分页 */}
                {totalPages > 1 && (
                  <div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                    <div className="flex-1 flex justify-between sm:hidden">
                      <button
                        onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
                        disabled={currentPage === 1}
                        className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                      >
                        上一页
                      </button>
                      <button
                        onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
                        disabled={currentPage === totalPages}
                        className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                      >
                        下一页
                      </button>
                    </div>
                    <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                      <div>
                        <p className="text-sm text-gray-700">
                          显示第 <span className="font-medium">{(currentPage - 1) * pageSize + 1}</span> 到{' '}
                          <span className="font-medium">{Math.min(currentPage * pageSize, totalCount)}</span> 项，
                          共 <span className="font-medium">{totalCount}</span> 项
                        </p>
                      </div>
                      <div>
                        <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                          <button
                            onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
                            disabled={currentPage === 1}
                            className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                          >
                            上一页
                          </button>
                          {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                            <button
                              key={page}
                              onClick={() => setCurrentPage(page)}
                              className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
                                page === currentPage
                                  ? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
                                  : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
                              }`}
                            >
                              {page}
                            </button>
                          ))}
                          <button
                            onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
                            disabled={currentPage === totalPages}
                            className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                          >
                            下一页
                          </button>
                        </nav>
                      </div>
                    </div>
                  </div>
                )}
              </>
            )}
          </div>
        </div>
      </DashboardLayout>
    </>
  );
}