'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { History, Plus, Loader2 } from 'lucide-react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { StatusBadge } from '@/components/status-badge';
import { EmptyRecent } from './empty-recent';
import { getApplicationRecord, ApplicationRecord } from '@/lib/api/compatibility-certifications';

export function RecentApplications() {
  const router = useRouter();
  const [applicationData, setApplicationData] = useState<ApplicationRecord[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  const fetchApplicationRecord = async (currentPage: number, perPage: number) => {
    const response = await getApplicationRecord(currentPage, perPage);
    setIsLoading(false);
    if (response && response.data) {
      setApplicationData(response.data.slice(0, 2));
    }
  };

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

  const handleViewAllRecords = () => {
    router.push('/dashboard/applications/records');
  };

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

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

  return (
    <div className="space-y-2 bg-white p-6 rounded-md">
      <div className="flex justify-between items-center gap-2 mb-6">
        <h2 className="text-lg font-semibold">适配申请</h2>
        {applicationData.length > 0 && (
          <div className="flex gap-2">
            <Button variant="outline" onClick={handleViewAllRecords}>
              <History className="h-4 w-4" />
              查看申请记录
            </Button>
            <Button onClick={handleNewApplication}>
              <Plus className="h-4 w-4" />
              申请适配
            </Button>
          </div>
        )}
      </div>
      <div className="space-y-4">
        {isLoading && (
          <div className="flex items-center justify-center py-8">
            <Loader2 className="h-6 w-6 animate-spin text-blue-600 mr-2" />
          </div>
        )}
        {!isLoading &&
          applicationData.length > 0 &&
          applicationData.map((application) => (
            <Card key={application.number} className="p-4">
              <div className="flex flex-col gap-2">
                <div className="flex items-center justify-between">
                  <h3 className="font-medium">{application.product_name}</h3>
                  <StatusBadge status={application.status} />
                </div>
                <div className="flex items-center justify-between">
                  <div className="text-sm text-gray-500">申请时间: {application.created_at}</div>
                  {application.status === 'rejected' && (
                    <Button
                      variant="link"
                      className="px-0"
                      size="sm"
                      onClick={() => handleResubmit(application.number)}
                    >
                      重新提交
                    </Button>
                  )}
                </div>
              </div>
            </Card>
          ))}
        {!isLoading && !applicationData.length && <EmptyRecent />}
      </div>
    </div>
  );
}