'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Plus, ClipboardList, Loader2 } from 'lucide-react';
import { ApplicationDetailsDialog } from '@/components/application-details-dialog';
import { getApplicationRecord, ApplicationRecord } from '@/lib/api/compatibility-certifications';
import { DataPagination } from '@/components/ui/data-pagination';
import { StatusBadge } from '@/components/status-badge';

interface PaginationInfo {
  page: number;
  pageSize: number;
  total: number;
  totalPages: number;
}

export function ApplicationRecords() {
  const [searchTerm, setSearchTerm] = useState('');
  const router = useRouter();
  const [selectedApplication, setSelectedApplication] = useState<any>(null);
  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  const [applicationData, setApplicationData] = useState<ApplicationRecord[]>([]);

  const [pagination, setPagination] = useState<PaginationInfo>({
    page: 1,
    pageSize: 10,
    total: 0,
    totalPages: 0,
  });

  const fetchApplicationRecord = async (currentPage: number, perPage: number) => {
    const response = await getApplicationRecord(currentPage, perPage);
    setIsLoading(false);
    if (response && response.data) {
      setApplicationData(response.data);
      setPagination({
        page: response.cur_page,
        pageSize: response.per_page,
        total: response.total_num,
        totalPages: Math.ceil((response.total_num || 0) / response.per_page),
      });
    }
  };

  useEffect(() => {
    fetchApplicationRecord(1, 10);
  }, []);

  const handlePageChange = () => {
    fetchApplicationRecord(1, 10);
  };

  const handleNewApplication = () => {
    router.push('/dashboard/applications/new');
  };

  const handleViewDetails = (application: any) => {
    setSelectedApplication(application);
    setIsDetailsOpen(true);
  };

  const handleResubmit = (applicationId: string) => {
    router.push(`/dashboard/applications/new?resubmit=${applicationId}`);
  };

  return (
    <>
      <div className="relative">
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>申请编号</TableHead>
                <TableHead>产品名称</TableHead>
                <TableHead>申请时间</TableHead>
                <TableHead className='whitespace-nowrap'>申请状态</TableHead>
                <TableHead>备注</TableHead>
                <TableHead>操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                <TableRow>
                  <TableCell colSpan={6} className="h-32">
                    <div className="flex items-center justify-center">
                      <Loader2 className="h-6 w-6 animate-spin text-blue-600 mr-2" />
                      <span className="text-gray-500">加载中...</span>
                    </div>
                  </TableCell>
                </TableRow>
              ) : applicationData.length > 0 ? (
                applicationData.map((item) => (
                  <TableRow key={item.number}>
                    <TableCell className="font-mono">{item.number}</TableCell>
                    <TableCell>{item.product_name}</TableCell>
                    <TableCell>{item.created_at}</TableCell>
                    <TableCell>
                      <StatusBadge status={item.status} />
                    </TableCell>
                    <TableCell>{item.staff_comment}</TableCell>
                    <TableCell className="text-center">
                      <div className="flex items-center gap-4">
                        {/* <Button
                          variant="link"
                          className='px-0'
                          size="sm"
                          onClick={() => handleViewDetails(item.number)}
                        >
                          查看详情
                        </Button> */}
                        {item.status === 'rejected' && (
                          <Button
                            variant="link"
                            className='px-0'
                            size="sm"
                            onClick={() => handleResubmit(item.number)}
                          >
                            重新提交
                          </Button>
                        )}
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={6} className="h-32">
                    <div className="flex flex-col items-center justify-center text-center">
                      <div className="rounded-full bg-gray-100 p-4 mb-4">
                        <ClipboardList className="h-10 w-10 text-gray-400" />
                      </div>
                      <h3 className="text-lg font-medium mb-2">暂无申请记录</h3>
                      <p className="text-gray-500 mb-6 max-w-lg">
                        您还没有提交过适配申请。点击下方按钮创建您的第一个适配申请。
                      </p>
                      <Button onClick={handleNewApplication}>
                        <Plus className="h-4 w-4 mr-2" />
                        新建适配申请
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
        <div className="flex items-center justify-end mt-4 text-sm text-gray-500">
          {!isLoading && applicationData.length > 0 && pagination.totalPages > 1 && (
            <DataPagination
              currentPage={pagination.page}
              totalPages={pagination.totalPages}
              pageSize={pagination.pageSize}
              total={pagination.total}
              onPageChange={handlePageChange}
              disabled={isLoading}
              showSizeChanger={false}
              showTotal={true}
              className="mt-4"
            />
          )}
        </div>
      </div>

      {selectedApplication && (
        <ApplicationDetailsDialog
          application={selectedApplication}
          open={isDetailsOpen}
          onOpenChange={setIsDetailsOpen}
        />
      )}
    </>
  );
}