'use client';

import { useEffect, useState } from 'react';
import { apiClient } from '@/lib/api';
import { Skeleton } from '@/components/ui/skeleton';
import RequestsUnderReviewCard from './under-review-request-card';

interface RequestData {
  id: number;
  request_number: string;
  created_at: string;
  project_name: string;
  sample_category: string;
  sample_sub_categories: string[];
  sample_location: string;
  date_time: string;
  is_urgent: boolean;
  status: string;
}

export default function RequestsUnderReviewGrid() {
  const [requests, setRequests] = useState<RequestData[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchRequests = async () => {
      try {
        const response = await apiClient.get<{ data: RequestData[] }>(
          '/contractor/test-requests/pending',
          { requireAuth: true },
        );
        setRequests(response.data.data);
      } catch (error) {
        console.error('Error fetching pending requests:', error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchRequests();
  }, []);

  if (isLoading) {
    return (
      <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2">
        {[1, 2, 3, 4].map((i) => (
          <Skeleton key={i} className="h-[300px] w-full rounded-xl" />
        ))}
      </div>
    );
  }

  if (requests.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-20 bg-card/40 rounded-2xl border border-dashed border-border">
        <p className="text-muted-foreground font-medium">
          No requests under review found.
        </p>
      </div>
    );
  }

  return (
    <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2">
      {requests.map((r) => (
        <RequestsUnderReviewCard
          key={r.id}
          requestNumber={r.request_number}
          submitTime={r.created_at}
          projectName={r.project_name}
          sampleCategory={r.sample_category}
          sampleSubCategories={r.sample_sub_categories}
          sampleLocation={r.sample_location}
          dateTime={r.date_time}
          isUrgent={r.is_urgent}
        />
      ))}
    </div>
  );
}