import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Plus, Search, Edit, Trash2, CreditCard, TrendingUp, TrendingDown } from 'lucide-react';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { toast } from 'sonner';

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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/client/components/ui/form';
import { Badge } from '@/client/components/ui/badge';
import { Skeleton } from '@/client/components/ui/skeleton';
import { DataTablePagination } from '@/client/admin/components/DataTablePagination';

import { userCardBalanceRecordClient } from '@/client/api';
import type { InferRequestType, InferResponseType } from 'hono/client';
import { CreateUserCardBalanceRecordDto, UpdateUserCardBalanceRecordDto } from '@d8d/server/modules/user-card-balance-records/user-card-balance-record.schema';
import { UserSelector } from '@/client/admin/components/UserSelector';
import { UserCardSelector } from '@/client/admin/components/UserCardSelector';

type CreateRequest = InferRequestType<typeof userCardBalanceRecordClient.$post>['json'];
type UpdateRequest = InferRequestType<typeof userCardBalanceRecordClient[':id']['$put']>['json'];
type UserCardBalanceRecordResponse = InferResponseType<typeof userCardBalanceRecordClient.$get, 200>['data'][0];

const createFormSchema = CreateUserCardBalanceRecordDto;
const updateFormSchema = UpdateUserCardBalanceRecordDto;

export const UserCardBalanceRecordsPage = () => {
  const queryClient = useQueryClient();
  const [searchParams, setSearchParams] = useState({ page: 1, limit: 10, search: '', type: '' });
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isCreateForm, setIsCreateForm] = useState(true);
  const [editingRecord, setEditingRecord] = useState<UserCardBalanceRecordResponse | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [recordToDelete, setRecordToDelete] = useState<number | null>(null);

  // 表单实例
  const createForm = useForm<CreateRequest>({
    resolver: zodResolver(createFormSchema),
    defaultValues: {
      userId: 0,
      cardNo: '',
      amount: 0,
      amountBefore: 0,
      amountAfter: 0,
      orderNo: '',
      type: 1,
      remark: ''
    }
  });

  const updateForm = useForm<UpdateRequest>({
    resolver: zodResolver(updateFormSchema),
    defaultValues: {}
  });

  // 数据查询
  const { data, isLoading, refetch } = useQuery({
    queryKey: ['userCardBalanceRecords', searchParams],
    queryFn: async () => {
      const res = await userCardBalanceRecordClient.$get({
        query: {
          page: searchParams.page,
          pageSize: searchParams.limit,
          keyword: searchParams.search,
          ...(searchParams.type && { filters: JSON.stringify({ type: parseInt(searchParams.type) }) })
        }
      });
      if (res.status !== 200) throw new Error('获取余额记录列表失败');
      return await res.json();
    }
  });

  // 创建余额记录
  const createMutation = useMutation({
    mutationFn: async (data: CreateRequest) => {
      const res = await userCardBalanceRecordClient.$post({ json: data });
      if (res.status !== 201) throw new Error('创建余额记录失败');
      return await res.json();
    },
    onSuccess: () => {
      toast.success('余额记录创建成功');
      setIsModalOpen(false);
      createForm.reset();
      refetch();
    },
    onError: (error) => {
      toast.error(error.message || '创建余额记录失败');
    }
  });

  // 更新余额记录
  const updateMutation = useMutation({
    mutationFn: async ({ id, data }: { id: number; data: UpdateRequest }) => {
      const res = await userCardBalanceRecordClient[':id']['$put']({
        param: { id: id.toString() },
        json: data
      });
      if (res.status !== 200) throw new Error('更新余额记录失败');
      return await res.json();
    },
    onSuccess: () => {
      toast.success('余额记录更新成功');
      setIsModalOpen(false);
      updateForm.reset();
      refetch();
    },
    onError: (error) => {
      toast.error(error.message || '更新余额记录失败');
    }
  });

  // 删除余额记录
  const deleteMutation = useMutation({
    mutationFn: async (id: number) => {
      const res = await userCardBalanceRecordClient[':id']['$delete']({
        param: { id: id.toString() }
      });
      if (res.status !== 204) throw new Error('删除余额记录失败');
      return res;
    },
    onSuccess: () => {
      toast.success('余额记录删除成功');
      setDeleteDialogOpen(false);
      refetch();
    },
    onError: (error) => {
      toast.error(error.message || '删除余额记录失败');
    }
  });

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

  // 处理创建余额记录
  const handleCreateRecord = () => {
    setIsCreateForm(true);
    setEditingRecord(null);
    createForm.reset();
    setIsModalOpen(true);
  };

  // 处理编辑余额记录
  const handleEditRecord = (record: UserCardBalanceRecordResponse) => {
    setIsCreateForm(false);
    setEditingRecord(record);
    updateForm.reset({
      userId: record.userId,
      cardNo: record.cardNo,
      amount: record.amount,
      amountBefore: record.amountBefore,
      amountAfter: record.amountAfter,
      orderNo: record.orderNo,
      type: record.type,
      remark: record.remark || undefined
    });
    setIsModalOpen(true);
  };

  // 处理删除余额记录
  const handleDeleteRecord = (id: number) => {
    setRecordToDelete(id);
    setDeleteDialogOpen(true);
  };

  // 确认删除
  const confirmDelete = () => {
    if (recordToDelete) {
      deleteMutation.mutate(recordToDelete);
    }
  };

  // 计算总计
  const totalAmount = data?.data.reduce((sum, record) => sum + record.amount, 0) || 0;
  const totalConsumption = data?.data.filter(r => r.type === 1).reduce((sum, record) => sum + record.amount, 0) || 0;
  const totalRefund = data?.data.filter(r => r.type === 2).reduce((sum, record) => sum + record.amount, 0) || 0;

  // 加载状态
  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>
          <CardContent className="pt-6">
            <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">
        <div>
          <h1 className="text-2xl font-bold">用户卡余额记录</h1>
          <p className="text-muted-foreground">管理用户卡余额变动记录</p>
        </div>
        <Button onClick={handleCreateRecord}>
          <Plus className="mr-2 h-4 w-4" />
          创建记录
        </Button>
      </div>

      {/* 统计卡片 */}
      <div className="grid gap-4 md:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">总变动金额</CardTitle>
            <CreditCard className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">¥{totalAmount.toFixed(2)}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">总消费</CardTitle>
            <TrendingDown className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-red-600">¥{totalConsumption.toFixed(2)}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">总退款</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">¥{totalRefund.toFixed(2)}</div>
          </CardContent>
        </Card>
      </div>

      {/* 搜索区域 */}
      <Card>
        <CardHeader>
          <CardTitle>余额记录列表</CardTitle>
          <CardDescription>查看和管理所有余额变动记录</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSearch} className="flex gap-2 flex-wrap">
            <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
              className="px-3 py-2 border rounded-md"
              value={searchParams.type}
              onChange={(e) => setSearchParams(prev => ({ ...prev, type: e.target.value, page: 1 }))}
            >
              <option value="">全部类型</option>
              <option value="1">消费</option>
              <option value="2">退款</option>
            </select>
            <Button type="submit" variant="outline">
              搜索
            </Button>
          </form>
        </CardContent>
      </Card>

      {/* 数据表格 */}
      <Card>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>ID</TableHead>
                <TableHead>用户</TableHead>
                <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((record) => (
                <TableRow key={record.id}>
                  <TableCell>{record.id}</TableCell>
                  <TableCell>{record.user?.name || record.user?.username || '-'}</TableCell>
                  <TableCell>{record.cardNo}</TableCell>
                  <TableCell>
                    <span className={record.type === 1 ? 'text-red-600' : 'text-green-600'}>
                      {record.type === 1 ? '-' : '+'}¥{record.amount.toFixed(2)}
                    </span>
                  </TableCell>
                  <TableCell>¥{record.amountBefore.toFixed(2)}</TableCell>
                  <TableCell>¥{record.amountAfter.toFixed(2)}</TableCell>
                  <TableCell className="font-mono text-xs">{record.orderNo}</TableCell>
                  <TableCell>
                    <Badge variant={record.type === 1 ? 'destructive' : 'default'}>
                      {record.type === 1 ? (
                        <>
                          <TrendingDown className="h-3 w-3 mr-1" />
                          消费
                        </>
                      ) : (
                        <>
                          <TrendingUp className="h-3 w-3 mr-1" />
                          退款
                        </>
                      )}
                    </Badge>
                  </TableCell>
                  <TableCell>{record.remark || '-'}</TableCell>
                  <TableCell>
                    {format(new Date(record.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={() => handleEditRecord(record)}
                      >
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => handleDeleteRecord(record.id)}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          
          {data?.data.length === 0 && (
            <div className="text-center py-8">
              <p className="text-muted-foreground">暂无余额记录数据</p>
            </div>
          )}
        </CardContent>
      </Card>

      {/* 分页 */}
      {data && data.data.length > 0 && (
        <DataTablePagination
          currentPage={searchParams.page}
          pageSize={searchParams.limit}
          totalCount={data.pagination.total || 0}
          onPageChange={(page, limit) => setSearchParams(prev => ({ ...prev, page, limit }))}
        />
      )}

      {/* 创建/编辑模态框 */}
      <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((data) => createMutation.mutate(data))} className="space-y-4">
                <FormField
                  control={createForm.control}
                  name="userId"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        用户 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <UserSelector
                          value={field.value}
                          onChange={field.onChange}
                          placeholder="选择用户"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="cardNo"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        卡号 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <UserCardSelector
                          userId={createForm.watch('userId')}
                          value={field.value}
                          onChange={field.onChange}
                          placeholder="选择用户卡"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="amount"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        变动金额 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          step="0.01"
                          placeholder="0.00"
                          {...field}
                          onChange={(e) => field.onChange(parseFloat(e.target.value))}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="amountBefore"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        变动前金额 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          step="0.01"
                          placeholder="0.00"
                          {...field}
                          onChange={(e) => field.onChange(parseFloat(e.target.value))}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="amountAfter"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        变动后金额 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          step="0.01"
                          placeholder="0.00"
                          {...field}
                          onChange={(e) => field.onChange(parseFloat(e.target.value))}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="orderNo"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        订单号 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input placeholder="请输入订单号" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="type"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>类型</FormLabel>
                      <FormControl>
                        <select
                          {...field}
                          className="w-full px-3 py-2 border rounded-md"
                          onChange={(e) => field.onChange(parseInt(e.target.value))}
                        >
                          <option value={1}>消费</option>
                          <option value={2}>退款</option>
                        </select>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="remark"
                  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" disabled={createMutation.isPending}>
                    {createMutation.isPending ? '创建中...' : '创建'}
                  </Button>
                </DialogFooter>
              </form>
            </Form>
          ) : (
            <Form {...updateForm}>
              <form onSubmit={updateForm.handleSubmit((data) => updateMutation.mutate({ id: editingRecord!.id, data }))} className="space-y-4">
                <FormField
                  control={updateForm.control}
                  name="userId"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        用户 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <UserSelector
                          value={field.value || editingRecord?.userId || 0}
                          onChange={field.onChange}
                          placeholder="选择用户"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="cardNo"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        卡号 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <UserCardSelector
                          userId={updateForm.watch('userId') || editingRecord?.userId || 0}
                          value={field.value || editingRecord?.cardNo || ''}
                          onChange={field.onChange}
                          placeholder="选择用户卡"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="amount"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        变动金额 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          step="0.01"
                          placeholder="0.00"
                          {...field}
                          onChange={(e) => field.onChange(parseFloat(e.target.value))}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="amountBefore"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        变动前金额 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          step="0.01"
                          placeholder="0.00"
                          {...field}
                          onChange={(e) => field.onChange(parseFloat(e.target.value))}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="amountAfter"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        变动后金额 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          step="0.01"
                          placeholder="0.00"
                          {...field}
                          onChange={(e) => field.onChange(parseFloat(e.target.value))}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="orderNo"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        订单号 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input placeholder="请输入订单号" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="type"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>类型</FormLabel>
                      <FormControl>
                        <select
                          {...field}
                          className="w-full px-3 py-2 border rounded-md"
                          onChange={(e) => field.onChange(parseInt(e.target.value))}
                        >
                          <option value={1}>消费</option>
                          <option value={2}>退款</option>
                        </select>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="remark"
                  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" disabled={updateMutation.isPending}>
                    {updateMutation.isPending ? '更新中...' : '更新'}
                  </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} disabled={deleteMutation.isPending}>
              {deleteMutation.isPending ? '删除中...' : '删除'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};