mini-starter/src/client/admin/pages/Passengers.tsx

import React, { useState, useMemo, useCallback } from 'react';
import { useQuery } from '@tanstack/react-query';
import { format } from 'date-fns';
import { Search, Filter, X, Download } from 'lucide-react';
import { passengerClient } from '@/client/api';
import type { InferResponseType } from 'hono/client';
import * as XLSX from 'xlsx';
import { Button } from '@/client/components/ui/button';
import { Input } from '@/client/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/client/components/ui/table';
import { Badge } from '@/client/components/ui/badge';
import { DataTablePagination } from '@/client/admin/components/DataTablePagination';
import { Skeleton } from '@/client/components/ui/skeleton';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/client/components/ui/select';
import { toast } from 'sonner';

// 使用RPC方式提取类型
type PassengerResponse = InferResponseType<typeof passengerClient.$get, 200>['data'][0];

export const PassengersPage = () => {
  const [searchParams, setSearchParams] = useState({
    page: 1,
    limit: 10,
    keyword: ''
  });
  const [filters, setFilters] = useState({
    userId: undefined as number | undefined,
    idType: undefined as string | undefined
  });
  const [showFilters, setShowFilters] = useState(false);

  const { data: passengersData, isLoading } = useQuery({
    queryKey: ['passengers', searchParams, filters],
    queryFn: async () => {
      const filterParams: Record<string, unknown> = {};

      if (filters.userId !== undefined) {
        filterParams.userId = filters.userId;
      }

      if (filters.idType !== undefined) {
        filterParams.idType = filters.idType;
      }

      const res = await passengerClient.$get({
        query: {
          page: searchParams.page,
          pageSize: searchParams.limit,
          keyword: searchParams.keyword,
          filters: Object.keys(filterParams).length > 0 ? JSON.stringify(filterParams) : undefined
        }
      });
      if (res.status !== 200) {
        throw new Error('获取乘客列表失败');
      }
      return await res.json();
    }
  });

  const passengers = passengersData?.data || [];
  const totalCount = passengersData?.pagination?.total || 0;

  // 防抖搜索函数
  const debounce = (func: Function, delay: number) => {
    let timeoutId: NodeJS.Timeout;
    return (...args: any[]) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func(...args), delay);
    };
  };

  // 使用useCallback包装防抖搜索
  const debouncedSearch = useCallback(
    debounce((keyword: string) => {
      setSearchParams(prev => ({ ...prev, keyword, page: 1 }));
    }, 300),
    []
  );

  // 处理搜索输入变化
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const keyword = e.target.value;
    setSearchParams(prev => ({ ...prev, keyword }));
    debouncedSearch(keyword);
  };

  // 处理搜索表单提交
  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setSearchParams(prev => ({ ...prev, page: 1 }));
  };

  // 处理分页
  const handlePageChange = (page: number, limit: number) => {
    setSearchParams(prev => ({ ...prev, page, limit }));
  };

  // 处理过滤条件变化
  const handleFilterChange = (newFilters: Partial<typeof filters>) => {
    setFilters(prev => ({ ...prev, ...newFilters }));
    setSearchParams(prev => ({ ...prev, page: 1 }));
  };

  // 重置所有过滤条件
  const resetFilters = () => {
    setFilters({
      userId: undefined,
      idType: undefined
    });
    setSearchParams(prev => ({ ...prev, page: 1 }));
  };

  // 检查是否有活跃的过滤条件
  const hasActiveFilters = useMemo(() => {
    return filters.userId !== undefined || filters.idType !== undefined;
  }, [filters]);

  // 导出乘客数据
  const handleExport = async () => {
    try {
      const res = await passengerClient.$get({
        query: {
          page: 1,
          pageSize: totalCount,
          keyword: searchParams.keyword,
          filters: hasActiveFilters ? JSON.stringify(filters) : undefined
        }
      });

      if (res.status !== 200) {
        throw new Error('获取导出数据失败');
      }

      const data = await res.json();
      const passengers = data.data;

      // 准备Excel数据
      const excelData = passengers.map((passenger: PassengerResponse) => ({
        '姓名': passenger.name,
        '证件类型': passenger.idType,
        '证件号码': passenger.idNumber,
        '手机号': passenger.phone,
        '默认乘客': passenger.isDefault ? '是' : '否',
        '所属用户': passenger.user?.username || '未知用户',
        '创建时间': format(new Date(passenger.createdAt), 'yyyy-MM-dd HH:mm')
      }));

      // 创建工作簿
      const wb = XLSX.utils.book_new();

      // 创建工作表
      const ws = XLSX.utils.json_to_sheet(excelData);

      // 设置列宽
      const colWidths = [
        { wch: 12 }, // 姓名
        { wch: 12 }, // 证件类型
        { wch: 20 }, // 证件号码
        { wch: 15 }, // 手机号
        { wch: 10 }, // 默认乘客
        { wch: 15 }, // 所属用户
        { wch: 20 }  // 创建时间
      ];
      ws['!cols'] = colWidths;

      // 添加工作表到工作簿
      XLSX.utils.book_append_sheet(wb, ws, '乘客信息');

      // 生成Excel文件并下载
      const fileName = `乘客信息_${format(new Date(), 'yyyy-MM-dd_HH-mm')}.xlsx`;
      XLSX.writeFile(wb, fileName);

      toast.success('导出成功');
    } catch (error) {
      console.error('导出失败:', error);
      toast.error('导出失败，请重试');
    }
  };

  // 渲染表格部分的骨架屏
  const renderTableSkeleton = () => (
    <div className="space-y-2">
      {Array.from({ length: 5 }).map((_, index) => (
        <div key={index} className="flex space-x-4">
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 w-16" />
        </div>
      ))}
    </div>
  );

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">乘客信息管理</h1>
        <Button onClick={handleExport}>
          <Download className="mr-2 h-4 w-4" />
          导出数据
        </Button>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>乘客列表</CardTitle>
          <CardDescription>
            管理系统中的所有乘客信息，共 {totalCount} 位乘客
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="mb-4 space-y-4">
            <form onSubmit={handleSearch} className="flex gap-2">
              <div className="relative flex-1 max-w-sm">
                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="搜索乘客姓名、手机号或证件号码..."
                  value={searchParams.keyword}
                  onChange={handleSearchChange}
                  className="pl-8"
                />
              </div>
              <Button type="submit" variant="outline">
                搜索
              </Button>
              <Button
                type="button"
                variant="outline"
                onClick={() => setShowFilters(!showFilters)}
                className="flex items-center gap-2"
              >
                <Filter className="h-4 w-4" />
                高级筛选
                {hasActiveFilters && (
                  <Badge variant="secondary" className="ml-1">
                    {Object.values(filters).filter(v => v !== undefined).length}
                  </Badge>
                )}
              </Button>
              {hasActiveFilters && (
                <Button
                  type="button"
                  variant="ghost"
                  onClick={resetFilters}
                  className="flex items-center gap-2"
                >
                  <X className="h-4 w-4" />
                  重置
                </Button>
              )}
            </form>

            {showFilters && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 border rounded-lg bg-muted/50">
                {/* 证件类型筛选 */}
                <div className="space-y-2">
                  <label className="text-sm font-medium">证件类型</label>
                  <Select
                    value={filters.idType || 'all'}
                    onValueChange={(value) =>
                      handleFilterChange({
                        idType: value === 'all' ? undefined : value
                      })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="选择证件类型" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">全部类型</SelectItem>
                      <SelectItem value="身份证">身份证</SelectItem>
                      <SelectItem value="港澳通行证">港澳通行证</SelectItem>
                      <SelectItem value="台湾通行证">台湾通行证</SelectItem>
                      <SelectItem value="护照">护照</SelectItem>
                      <SelectItem value="其他证件">其他证件</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                {/* 用户筛选 */}
                <div className="space-y-2">
                  <label className="text-sm font-medium">所属用户</label>
                  <Input
                    type="number"
                    placeholder="输入用户ID"
                    value={filters.userId || ''}
                    onChange={(e) =>
                      handleFilterChange({
                        userId: e.target.value ? parseInt(e.target.value) : undefined
                      })
                    }
                  />
                </div>
              </div>
            )}

            {/* 过滤条件标签 */}
            {hasActiveFilters && (
              <div className="flex flex-wrap gap-2">
                {filters.idType && (
                  <Badge variant="secondary" className="flex items-center gap-1">
                    证件类型: {filters.idType}
                    <X
                      className="h-3 w-3 cursor-pointer"
                      onClick={() => handleFilterChange({ idType: undefined })}
                    />
                  </Badge>
                )}
                {filters.userId !== undefined && (
                  <Badge variant="secondary" className="flex items-center gap-1">
                    用户ID: {filters.userId}
                    <X
                      className="h-3 w-3 cursor-pointer"
                      onClick={() => handleFilterChange({ userId: undefined })}
                    />
                  </Badge>
                )}
              </div>
            )}
          </div>

          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>姓名</TableHead>
                  <TableHead>证件类型</TableHead>
                  <TableHead>证件号码</TableHead>
                  <TableHead>手机号</TableHead>
                  <TableHead>默认乘客</TableHead>
                  <TableHead>所属用户</TableHead>
                  <TableHead>创建时间</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {isLoading ? (
                  // 显示表格骨架屏
                  <TableRow>
                    <TableCell colSpan={7} className="p-4">
                      {renderTableSkeleton()}
                    </TableCell>
                  </TableRow>
                ) : (
                  // 显示实际乘客数据
                  passengers.map((passenger) => (
                    <TableRow key={passenger.id}>
                      <TableCell className="font-medium">{passenger.name}</TableCell>
                      <TableCell>
                        <Badge variant="outline">
                          {passenger.idType}
                        </Badge>
                      </TableCell>
                      <TableCell>{passenger.idNumber}</TableCell>
                      <TableCell>{passenger.phone}</TableCell>
                      <TableCell>
                        <Badge
                          variant={passenger.isDefault ? 'default' : 'secondary'}
                        className="capitalize"
                        >
                          {passenger.isDefault ? '是' : '否'}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        {passenger.user?.username || '未知用户'}
                      </TableCell>
                      <TableCell>
                        {format(new Date(passenger.createdAt), 'yyyy-MM-dd HH:mm')}
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>

          <DataTablePagination
            currentPage={searchParams.page}
            totalCount={totalCount}
            pageSize={searchParams.limit}
            onPageChange={handlePageChange}
          />
        </CardContent>
      </Card>
    </div>
  );
};