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

import { classroomDataClient } from '@/client/api';
import type { InferResponseType, InferRequestType } from 'hono/client';
import { ClassroomStatus, ClassroomStatusNameMap, CreateClassroomDataDto, UpdateClassroomDataDto } from '@/server/modules/classroom/classroom-data.schema';

import { Button } from '@/client/components/ui/button';
import { Input } from '@/client/components/ui/input';
import { Badge } from '@/client/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/client/components/ui/select';
import { Skeleton } from '@/client/components/ui/skeleton';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/client/components/ui/alert-dialog';

import { DataTablePagination } from '@/client/admin/components/DataTablePagination';

type ClassroomDataListResponse = InferResponseType<typeof classroomDataClient.$get, 200>;
type ClassroomDataItem = ClassroomDataListResponse['data'][0];
type CreateClassroomDataRequest = InferRequestType<typeof classroomDataClient.$post>['json'];
type UpdateClassroomDataRequest = InferRequestType<typeof classroomDataClient[':id']['$put']>['json'];

// 表单schema
const createFormSchema = CreateClassroomDataDto;
const updateFormSchema = UpdateClassroomDataDto;

export const ClassroomDataPage: React.FC = () => {
  const [searchParams, setSearchParams] = useState({
    page: 1,
    limit: 10,
    search: ''
  });
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isCreateForm, setIsCreateForm] = useState(true);
  const [editingItem, setEditingItem] = useState<ClassroomDataItem | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [itemToDelete, setItemToDelete] = useState<number | null>(null);

  // 创建表单
  const createForm = useForm<CreateClassroomDataRequest>({
    resolver: zodResolver(createFormSchema),
    defaultValues: {
      classroomNo: null,
      trainingDate: null,
      holdingStock: null,
      holdingCash: null,
      price: null,
      code: null,
      status: null,
      spare: null
    }
  });

  // 更新表单
  const updateForm = useForm<UpdateClassroomDataRequest>({
    resolver: zodResolver(updateFormSchema),
    defaultValues: {
      classroomNo: null,
      trainingDate: null,
      holdingStock: null,
      holdingCash: null,
      price: null,
      code: null,
      status: null,
      spare: null
    }
  });

  // 获取数据列表
  const { data: classroomData, isLoading, refetch } = useQuery({
    queryKey: ['classroom-data', searchParams],
    queryFn: async () => {
      const res = await classroomDataClient.$get({
        query: {
          page: searchParams.page,
          pageSize: searchParams.limit,
          keyword: searchParams.search
        }
      });
      if (res.status !== 200) {
        throw new Error('获取教室数据失败');
      }
      return await res.json();
    }
  });

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

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

  // 打开创建对话框
  const showCreateModal = () => {
    setIsCreateForm(true);
    setEditingItem(null);
    createForm.reset();
    setIsModalOpen(true);
  };

  // 打开编辑对话框
  const showEditModal = (item: ClassroomDataItem) => {
    setIsCreateForm(false);
    setEditingItem(item);
    updateForm.reset({
      classroomNo: item.classroomNo || null,
      trainingDate: item.trainingDate ? new Date(item.trainingDate) : null,
      holdingStock: item.holdingStock || null,
      holdingCash: item.holdingCash || null,
      price: item.price || null,
      code: item.code || null,
      status: item.status,
      spare: item.spare || null
    });
    setIsModalOpen(true);
  };

  // 处理创建提交
  const handleCreateSubmit = async (formData: CreateClassroomDataRequest) => {
    try {
      const res = await classroomDataClient.$post({ json: formData });
      if (res.status !== 201) {
        const error = await res.json();
        throw new Error(error.message || '创建教室数据失败');
      }
      toast.success('教室数据创建成功');
      setIsModalOpen(false);
      createForm.reset();
      refetch();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : '创建失败，请重试');
    }
  };

  // 处理更新提交
  const handleUpdateSubmit = async (formData: UpdateClassroomDataRequest) => {
    if (!editingItem) return;
    
    try {
      const res = await classroomDataClient[':id']['$put']({
        param: { id: editingItem.id.toString() },
        json: formData
      });
      if (res.status !== 200) {
        const error = await res.json();
        throw new Error(error.message || '更新教室数据失败');
      }
      toast.success('教室数据更新成功');
      setIsModalOpen(false);
      updateForm.reset();
      refetch();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : '更新失败，请重试');
    }
  };

  // 打开删除确认对话框
  const showDeleteDialog = (id: number) => {
    setItemToDelete(id);
    setDeleteDialogOpen(true);
  };

  // 处理删除
  const handleDelete = async () => {
    if (!itemToDelete) return;
    
    try {
      const res = await classroomDataClient[':id']['$delete']({
        param: { id: itemToDelete.toString() }
      });
      if (res.status !== 204) {
        throw new Error('删除教室数据失败');
      }
      toast.success('教室数据删除成功');
      setDeleteDialogOpen(false);
      setItemToDelete(null);
      refetch();
    } catch (error) {
      toast.error('删除失败，请重试');
    }
  };

  // 复制链接到剪贴板
  const copyLink = (type: 'exam' | 'stock' | 'admin', classroomNo: string, stockCode: string) => {
    const baseUrl = window.location.origin;
    let url = '';
    let successMsg = '';

    switch(type) {
      case 'exam':
        url = `${baseUrl}/mobile/exam/card?classroom=${classroomNo}`;
        successMsg = '答题卡链接已复制';
        break;
      case 'stock':
        url = `${baseUrl}/mobile/stock?classroom=${classroomNo}&code=${stockCode}`;
        successMsg = '股票训练链接已复制';
        break;
      case 'admin':
        url = `${baseUrl}/mobile/exam/admin?classroom=${classroomNo}`;
        successMsg = '管理员链接已复制';
        break;
    }

    navigator.clipboard.writeText(url).then(() => {
      toast.success(successMsg);
    }).catch(() => {
      toast.error('复制失败，请手动复制');
    });
  };

  // 加载状态
  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={showCreateModal}>
          <Plus className="mr-2 h-4 w-4" />
          添加数据
        </Button>
      </div>

      {/* 搜索区域 */}
      <Card>
        <CardHeader>
          <CardTitle>教室数据列表</CardTitle>
          <CardDescription>管理教室训练数据</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSearch} className="flex gap-2 mb-4">
            <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>
            <Button type="submit" variant="outline">
              搜索
            </Button>
          </form>

          {/* 数据表格 */}
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>ID</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.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell className="font-medium">{item.id}</TableCell>
                    <TableCell>{item.classroomNo || '-'}</TableCell>
                    <TableCell>
                      {item.trainingDate ? format(new Date(item.trainingDate), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}
                    </TableCell>
                    <TableCell>{item.holdingStock || '-'}</TableCell>
                    <TableCell>{item.holdingCash || '-'}</TableCell>
                    <TableCell>{item.price || '-'}</TableCell>
                    <TableCell>{item.code || '-'}</TableCell>
                    <TableCell>
                      <Badge 
                        variant={item.status === ClassroomStatus.OPEN ? 'default' : 'secondary'}
                        className={item.status === ClassroomStatus.OPEN ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}
                      >
                        {item.status !== null ? ClassroomStatusNameMap[item.status] : '-'}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-col gap-1">
                        <Button
                          variant="link"
                          size="sm"
                          onClick={() => copyLink('stock', item.classroomNo || '', item.code || '')}
                          className="h-6 p-0 text-xs"
                        >
                          <Copy className="mr-1 h-3 w-3" />
                          股票训练
                        </Button>
                        <Button
                          variant="link"
                          size="sm"
                          onClick={() => copyLink('exam', item.classroomNo || '', item.code || '')}
                          className="h-6 p-0 text-xs"
                        >
                          <Copy className="mr-1 h-3 w-3" />
                          答题卡
                        </Button>
                        <Button
                          variant="link"
                          size="sm"
                          onClick={() => copyLink('admin', item.classroomNo || '', item.code || '')}
                          className="h-6 p-0 text-xs"
                        >
                          <Copy className="mr-1 h-3 w-3" />
                          管理员
                        </Button>
                      </div>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => showEditModal(item)}
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => showDeleteDialog(item.id)}
                          className="text-destructive hover:text-destructive"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          {data.length === 0 && (
            <div className="text-center py-8">
              <p className="text-muted-foreground">暂无数据</p>
            </div>
          )}

          {/* 分页 */}
          <DataTablePagination
            currentPage={searchParams.page}
            pageSize={searchParams.limit}
            totalCount={totalCount}
            onPageChange={(page, limit) => setSearchParams(prev => ({ ...prev, page, limit }))}
          />
        </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="classroomNo"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>教室号</FormLabel>
                      <FormControl>
                        <Input 
                          placeholder="请输入教室号" 
                          value={field.value || ''}
                          onChange={(e) => field.onChange(e.target.value || null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="trainingDate"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>训练日期</FormLabel>
                      <FormControl>
                        <Input
                          type="datetime-local"
                          value={field.value ? format(new Date(field.value), "yyyy-MM-dd'T'HH:mm") : ''}
                          onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="holdingStock"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>持股</FormLabel>
                      <FormControl>
                        <Input 
                          placeholder="请输入持股信息" 
                          value={field.value || ''}
                          onChange={(e) => field.onChange(e.target.value || null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="holdingCash"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>持币</FormLabel>
                      <FormControl>
                        <Input 
                          placeholder="请输入持币信息" 
                          value={field.value || ''}
                          onChange={(e) => field.onChange(e.target.value || null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="price"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>价格</FormLabel>
                      <FormControl>
                        <Input 
                          placeholder="请输入价格" 
                          value={field.value || ''}
                          onChange={(e) => field.onChange(e.target.value || null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="code"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>代码</FormLabel>
                      <FormControl>
                        <Input 
                          placeholder="请输入代码" 
                          value={field.value || ''}
                          onChange={(e) => field.onChange(e.target.value || null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="status"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>状态</FormLabel>
                      <Select
                        onValueChange={(value) => field.onChange(value ? parseInt(value) : null)}
                        value={field.value?.toString() || ''}
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="请选择状态" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value={ClassroomStatus.OPEN.toString()}>开放</SelectItem>
                          <SelectItem value={ClassroomStatus.CLOSED.toString()}>关闭</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="spare"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>备用</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="请输入备用信息"
                          value={field.value || ''}
                          onChange={(e) => field.onChange(e.target.value || null)}
                        />
                      </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="classroomNo"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>教室号</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="请输入教室号"
                          value={field.value || ''}
                          onChange={(e) => field.onChange(e.target.value || null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="trainingDate"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>训练日期</FormLabel>
                      <FormControl>
                        <Input
                          type="datetime-local"
                          value={field.value ? format(new Date(field.value), "yyyy-MM-dd'T'HH:mm") : ''}
                          onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="holdingStock"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>持股</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="请输入持股信息"
                          value={field.value || ''}
                          onChange={(e) => field.onChange(e.target.value || null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="holdingCash"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>持币</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="请输入持币信息"
                          value={field.value || ''}
                          onChange={(e) => field.onChange(e.target.value || null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="price"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>价格</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="请输入价格"
                          value={field.value || ''}
                          onChange={(e) => field.onChange(e.target.value || null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="code"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>代码</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="请输入代码"
                          value={field.value || ''}
                          onChange={(e) => field.onChange(e.target.value || null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="status"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>状态</FormLabel>
                      <Select
                        onValueChange={(value) => field.onChange(value ? parseInt(value) : null)}
                        value={field.value?.toString() || ''}
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="请选择状态" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value={ClassroomStatus.OPEN.toString()}>开放</SelectItem>
                          <SelectItem value={ClassroomStatus.CLOSED.toString()}>关闭</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="spare"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>备用</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="请输入备用信息"
                          value={field.value || ''}
                          onChange={(e) => field.onChange(e.target.value || null)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <DialogFooter>
                  <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
                    取消
                  </Button>
                  <Button type="submit">更新</Button>
                </DialogFooter>
              </form>
            </Form>
          )}
        </DialogContent>
      </Dialog>

      {/* 删除确认对话框 */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>确认删除</AlertDialogTitle>
            <AlertDialogDescription>
              确定要删除这个教室数据吗？此操作无法撤销。
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>取消</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete}>删除</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

export default ClassroomDataPage;