import LoadingSpinner from "./LoadingSpinner";
import QuotationCard from "./QuotationCard";
import AgreementCard from "./AgreementCard";
import SiteVisitCard from "./SiteVisitCard";

interface Quotation {
  status: string;
  original_name: string;
  file_name: string;
}

interface Agreement {
  original_name: string;
  file_name: string;
}

interface SiteVisit {
  visit_date: string;
  remark: string;
  photos: Array<{ original_name?: string; fileName: string }>;
}

interface CertificatesTabProps {
  isTMR: boolean;
  loading: boolean;
  quotations: Quotation[];
  agreements: Agreement[];
  siteVisits: SiteVisit[];
  onDownloadQuotation: (fileName: string) => void;
  onDownloadAgreement: (fileName: string) => void;
  onDownloadSiteVisit: (fileName: string) => void;
}

export default function CertificatesTab({
  isTMR,
  loading,
  quotations,
  agreements,
  siteVisits,
  onDownloadQuotation,
  onDownloadAgreement,
  onDownloadSiteVisit
}: CertificatesTabProps) {
  if (loading) return <LoadingSpinner />;

  const approvedQuotations = quotations?.filter(q => q.status === 'Approved') || [];

  return (
    <div className="space-y-6">
      {!isTMR && (
      <div>
        <h3 className="text-lg font-semibold text-gray-800 mb-4">Approved Quotations</h3>
        {approvedQuotations.length === 0 ? (
          <p className="text-gray-500">No approved quotations</p>
        ) : (
          <div className="grid gap-3">
            {approvedQuotations.map((quotation, index) => (
              <QuotationCard
                key={index}
                originalName={quotation.original_name}
                onDownload={() => onDownloadQuotation(quotation.file_name)}
              />
            ))}
          </div>
        )}
      </div>
      )}
      <div>
        <h3 className="text-lg font-semibold text-gray-800 mb-4">Agreement Documents</h3>
        {!agreements || agreements.length === 0 ? (
          <p className="text-gray-500">No agreement documents</p>
        ) : (
          <div className="grid gap-3">
            {agreements.map((agreement, index) => (
              <AgreementCard
                key={index}
                originalName={agreement.original_name}
                onDownload={() => onDownloadAgreement(agreement.file_name)}
              />
            ))}
          </div>
        )}
      </div>

      <div>
        <h3 className="text-lg font-semibold text-gray-800 mb-4">Site Visit Documents</h3>
        {!siteVisits || siteVisits.length === 0 ? (
          <p className="text-gray-500">No site visit documents</p>
        ) : (
          <div className="grid gap-3">
            {siteVisits.map((visit, index) => (
              <SiteVisitCard
                key={index}
                visitDate={visit.visit_date}
                remark={visit.remark}
                photos={visit.photos}
                onDownloadPhoto={onDownloadSiteVisit}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}