import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';
import { toast } from 'sonner';
import { z } from 'zod';

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/client/components/ui/table';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/client/components/ui/card';
import { Button } from '@/client/components/ui/button';
import { Input } from '@/client/components/ui/input';
import { Badge } from '@/client/components/ui/badge';
import { Skeleton } from '@/client/components/ui/skeleton';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/client/components/ui/form';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/client/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/client/components/ui/select';
import { Search, Eye, Edit, Trash2, Plus } from 'lucide-react';

import type { InferRequestType, InferResponseType } from 'hono/client';
import { paymentClient } from '@/client/api';
import { CreatePaymentDto, UpdatePaymentDto } from '@/server/modules/payments/payment.schema';
import { PaymentStatus, PaymentType } from '@/server/modules/payments/payment.schema';

// 类型定义
type PaymentResponse = InferResponseType<typeof paymentClient.$get, 200>['data'][0];
type CreateRequest = InferRequestType<typeof paymentClient.$post>['json'];
type UpdateRequest = InferRequestType<typeof paymentClient[':id']['$put']>['json'];

// 表单schema
const createFormSchema = CreatePaymentDto;
const updateFormSchema = UpdatePaymentDto;

export const PaymentsPage = () => {
  const [searchParams, setSearchParams] = useState({
    page: 1,
    limit: 10,
    search: '',
    status: undefined as number | undefined,
    paymentType: undefined as string | undefined,
  });
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isCreateForm, setIsCreateForm] = useState(true);
  const [editingPayment, setEditingPayment] = useState<PaymentResponse | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [paymentToDelete, setPaymentToDelete] = useState<number | null>(null);

  // 创建表单
  const createForm = useForm<CreateRequest>({
    resolver: zodResolver(createFormSchema),
    defaultValues: {
      userId: 0,
      amount: 0,
      documentCount: 1,
      paymentType: PaymentType.RECHARGE,
      paymentMethod: 'alipay',
      description: '',
    },
  });

  // 更新表单
  const updateForm = useForm<UpdateRequest>({
    resolver: zodResolver(updateFormSchema),
  });

  // 获取支付记录列表
  const { data, isLoading, refetch } = useQuery({
    queryKey: ['payments', searchParams],
    queryFn: async () => {
      const res = await paymentClient.$get({
        query: {
          page: searchParams.page,
          pageSize: searchParams.limit,
          keyword: searchParams.search,
          status: searchParams.status,
          paymentType: searchParams.paymentType,
        },
      });
      if (res.status !== 200) throw new Error('获取支付记录失败');
      return await res.json();
    },
  });

  // 打开创建模态框
  const handleCreatePayment = () => {
    setIsCreateForm(true);
    setEditingPayment(null);
    createForm.reset();
    setIsModalOpen(true);
  };

  // 打开编辑模态框
  const handleEditPayment = (payment: PaymentResponse) => {
    setIsCreateForm(false);
    setEditingPayment(payment);
    updateForm.reset({
      amount: payment.amount,
      documentCount: payment.documentCount,
      paymentType: payment.paymentType,
      status: payment.status,
      paymentMethod: payment.paymentMethod || undefined,
      transactionId: payment.transactionId || undefined,
      description: payment.description || undefined,
    });
    setIsModalOpen(true);
  };

  // 打开删除确认
  const handleDeletePayment = (id: number) => {
    setPaymentToDelete(id);
    setDeleteDialogOpen(true);
  };

  // 确认删除
  const confirmDelete = async () => {
    if (!paymentToDelete) return;

    try {
      const res = await paymentClient[':id']['$delete']({
        param: { id: paymentToDelete.toString() },
      });
      
      if (res.status === 204) {
        toast.success('删除成功');
        setDeleteDialogOpen(false);
        refetch();
      } else {
        throw new Error('删除失败');
      }
    } catch (error) {
      toast.error('删除失败，请重试');
    }
  };

  // 创建支付记录
  const handleCreateSubmit = async (data: CreateRequest) => {
    try {
      const res = await paymentClient.$post({ json: data });
      if (res.status === 201) {
        toast.success('创建成功');
        setIsModalOpen(false);
        refetch();
      } else {
        const error = await res.json();
        toast.error(error.message || '创建失败');
      }
    } catch (error) {
      toast.error('操作失败，请重试');
    }
  };

  // 更新支付记录
  const handleUpdateSubmit = async (data: UpdateRequest) => {
    if (!editingPayment) return;

    try {
      const res = await paymentClient[':id']['$put']({
        param: { id: editingPayment.id.toString() },
        json: data,
      });
      
      if (res.status === 200) {
        toast.success('更新成功');
        setIsModalOpen(false);
        refetch();
      } else {
        const error = await res.json();
        toast.error(error.message || '更新失败');
      }
    } catch (error) {
      toast.error('操作失败，请重试');
    }
  };

  // 状态映射
  const getStatusBadge = (status: number) => {
    const statusMap = {
      [PaymentStatus.PENDING]: { label: '待支付', variant: 'secondary' },
      [PaymentStatus.COMPLETED]: { label: '已完成', variant: 'default' },
      [PaymentStatus.FAILED]: { label: '失败', variant: 'destructive' },
      [PaymentStatus.CANCELLED]: { label: '已取消', variant: 'outline' },
    };
    const config = statusMap[status] || { label: '未知', variant: 'secondary' };
    return <Badge variant={config.variant as any}>{config.label}</Badge>;
  };

  // 支付类型映射
  const getPaymentTypeLabel = (type: string) => {
    const typeMap = {
      [PaymentType.RECHARGE]: '充值',
      [PaymentType.CONSUME]: '消费',
      [PaymentType.REFUND]: '退款',
    };
    return typeMap[type as PaymentType] || type;
  };

  // 搜索
  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setSearchParams(prev => ({ ...prev, page: 1 }));
  };

  // 骨架屏
  if (isLoading) {
    return (
      <div className="space-y-4">
        <div className="flex justify-between items-center">
          <Skeleton className="h-8 w-48" />
          <Skeleton className="h-10 w-32" />
        </div>
        <Card>
          <CardHeader>
            <Skeleton className="h-6 w-1/4" />
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="flex gap-4">
                  <Skeleton className="h-10 flex-1" />
                  <Skeleton className="h-10 flex-1" />
                  <Skeleton className="h-10 flex-1" />
                  <Skeleton className="h-10 w-20" />
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* 页面标题 */}
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">支付记录管理</h1>
        <Button onClick={handleCreatePayment}>
          <Plus className="mr-2 h-4 w-4" />
          创建支付
        </Button>
      </div>

      {/* 搜索区域 */}
      <Card>
        <CardHeader>
          <CardTitle>支付记录列表</CardTitle>
          <CardDescription>管理所有用户的支付记录</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSearch} className="mb-4">
            <div 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.search}
                  onChange={(e) => setSearchParams(prev => ({ ...prev, search: e.target.value }))}
                  className="pl-8"
                />
              </div>
              <Select
                value={searchParams.status?.toString() || 'all'}
                onValueChange={(value) => setSearchParams(prev => ({ 
                  ...prev, 
                  status: value === 'all' ? undefined : parseInt(value),
                  page: 1 
                }))}
              >
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="状态" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部状态</SelectItem>
                  <SelectItem value={PaymentStatus.PENDING.toString()}>待支付</SelectItem>
                  <SelectItem value={PaymentStatus.COMPLETED.toString()}>已完成</SelectItem>
                  <SelectItem value={PaymentStatus.FAILED.toString()}>失败</SelectItem>
                  <SelectItem value={PaymentStatus.CANCELLED.toString()}>已取消</SelectItem>
                </SelectContent>
              </Select>
              <Select
                value={searchParams.paymentType || 'all'}
                onValueChange={(value) => setSearchParams(prev => ({ 
                  ...prev, 
                  paymentType: value === 'all' ? undefined : value,
                  page: 1 
                }))}
              >
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部类型</SelectItem>
                  <SelectItem value={PaymentType.RECHARGE}>充值</SelectItem>
                  <SelectItem value={PaymentType.CONSUME}>消费</SelectItem>
                  <SelectItem value={PaymentType.REFUND}>退款</SelectItem>
                </SelectContent>
              </Select>
              <Button type="submit" variant="outline">
                搜索
              </Button>
            </div>
          </form>

          {/* 数据表格 */}
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>订单号</TableHead>
                  <TableHead>用户</TableHead>
                  <TableHead>金额</TableHead>
                  <TableHead>文档次数</TableHead>
                  <TableHead>类型</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>支付方式</TableHead>
                  <TableHead>创建时间</TableHead>
                  <TableHead className="text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data?.data.map((payment) => (
                  <TableRow key={payment.id}>
                    <TableCell className="font-medium">
                      {payment.orderNo}
                    </TableCell>
                    <TableCell>
                      {payment.user?.nickname || payment.user?.username || `用户${payment.userId}`}
                    </TableCell>
                    <TableCell>¥{payment.amount.toFixed(2)}</TableCell>
                    <TableCell>{payment.documentCount}</TableCell>
                    <TableCell>{getPaymentTypeLabel(payment.paymentType)}</TableCell>
                    <TableCell>{getStatusBadge(payment.status)}</TableCell>
                    <TableCell>{payment.paymentMethod || '-'}</TableCell>
                    <TableCell>
                      {format(new Date(payment.createdAt), 'yyyy-MM-dd HH:mm', { locale: zhCN })}
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleEditPayment(payment)}
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleDeletePayment(payment.id)}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          {data?.data.length === 0 && (
            <div className="text-center py-8">
              <p className="text-muted-foreground">暂无支付记录</p>
            </div>
          )}

          {/* 分页 */}
          {data && data.data.length > 0 && (
            <div className="flex items-center justify-between mt-4">
              <p className="text-sm text-muted-foreground">
                共 {data.pagination.total} 条记录
              </p>
              <div className="flex gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setSearchParams(prev => ({ ...prev, page: prev.page - 1 }))}
                  disabled={searchParams.page <= 1}
                >
                  上一页
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setSearchParams(prev => ({ ...prev, page: prev.page + 1 }))}
                  disabled={searchParams.page >= Math.ceil(data.pagination.total / searchParams.limit)}
                >
                  下一页
                </Button>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* 创建/编辑模态框 */}
      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
        <DialogContent className="sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{isCreateForm ? '创建支付记录' : '编辑支付记录'}</DialogTitle>
            <DialogDescription>
              {isCreateForm ? '创建一个新的支付记录' : '编辑现有支付记录信息'}
            </DialogDescription>
          </DialogHeader>

          {isCreateForm ? (
            <Form {...createForm}>
              <form onSubmit={createForm.handleSubmit(handleCreateSubmit)} className="space-y-4">
                <FormField
                  control={createForm.control}
                  name="userId"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>用户ID <span className="text-red-500">*</span></FormLabel>
                      <FormControl>
                        <Input 
                          type="number" 
                          placeholder="请输入用户ID" 
                          {...field} 
                          onChange={(e) => field.onChange(parseInt(e.target.value))}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={createForm.control}
                  name="amount"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>金额 <span className="text-red-500">*</span></FormLabel>
                      <FormControl>
                        <Input 
                          type="number" 
                          step="0.01"
                          placeholder="请输入金额" 
                          {...field} 
                          onChange={(e) => field.onChange(parseFloat(e.target.value))}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={createForm.control}
                  name="documentCount"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>文档次数 <span className="text-red-500">*</span></FormLabel>
                      <FormControl>
                        <Input 
                          type="number" 
                          placeholder="请输入文档次数" 
                          {...field} 
                          onChange={(e) => field.onChange(parseInt(e.target.value))}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={createForm.control}
                  name="paymentType"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>支付类型 <span className="text-red-500">*</span></FormLabel>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="请选择支付类型" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value={PaymentType.RECHARGE}>充值</SelectItem>
                          <SelectItem value={PaymentType.CONSUME}>消费</SelectItem>
                          <SelectItem value={PaymentType.REFUND}>退款</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={createForm.control}
                  name="paymentMethod"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>支付方式</FormLabel>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="请选择支付方式" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="alipay">支付宝</SelectItem>
                          <SelectItem value="wechat">微信支付</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={createForm.control}
                  name="description"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>描述</FormLabel>
                      <FormControl>
                        <Input placeholder="请输入支付描述" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <DialogFooter>
                  <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
                    取消
                  </Button>
                  <Button type="submit">创建</Button>
                </DialogFooter>
              </form>
            </Form>
          ) : (
            <Form {...updateForm}>
              <form onSubmit={updateForm.handleSubmit(handleUpdateSubmit)} className="space-y-4">
                <FormField
                  control={updateForm.control}
                  name="amount"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>金额</FormLabel>
                      <FormControl>
                        <Input 
                          type="number" 
                          step="0.01"
                          placeholder="请输入金额" 
                          {...field} 
                          onChange={(e) => field.onChange(parseFloat(e.target.value))}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={updateForm.control}
                  name="documentCount"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>文档次数</FormLabel>
                      <FormControl>
                        <Input 
                          type="number" 
                          placeholder="请输入文档次数" 
                          {...field} 
                          onChange={(e) => field.onChange(parseInt(e.target.value))}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={updateForm.control}
                  name="status"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>状态</FormLabel>
                      <Select onValueChange={(value) => field.onChange(parseInt(value))} defaultValue={field.value?.toString()}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="请选择状态" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value={PaymentStatus.PENDING.toString()}>待支付</SelectItem>
                          <SelectItem value={PaymentStatus.COMPLETED.toString()}>已完成</SelectItem>
                          <SelectItem value={PaymentStatus.FAILED.toString()}>失败</SelectItem>
                          <SelectItem value={PaymentStatus.CANCELLED.toString()}>已取消</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={updateForm.control}
                  name="paymentMethod"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>支付方式</FormLabel>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="请选择支付方式" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="alipay">支付宝</SelectItem>
                          <SelectItem value="wechat">微信支付</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={updateForm.control}
                  name="transactionId"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>交易ID</FormLabel>
                      <FormControl>
                        <Input placeholder="请输入第三方交易ID" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={updateForm.control}
                  name="description"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>描述</FormLabel>
                      <FormControl>
                        <Input placeholder="请输入支付描述" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <DialogFooter>
                  <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
                    取消
                  </Button>
                  <Button type="submit">更新</Button>
                </DialogFooter>
              </form>
            </Form>
          )}
        </DialogContent>
      </Dialog>

      {/* 删除确认对话框 */}
      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>确认删除</DialogTitle>
            <DialogDescription>
              确定要删除这个支付记录吗？此操作无法撤销。
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
              取消
            </Button>
            <Button variant="destructive" onClick={confirmDelete}>
              删除
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};