import { AlertCircle, Loader2 } from "lucide-react";
import ARCApplicationsSection from "./report-sections/ARCApplicationsSection";
import BidsQuotesSection from "./report-sections/BidsQuotesSection";
import BoardVotesSection from "./report-sections/BoardVotesSection";
import CallLogsSection from "./report-sections/CallLogsSection";
import CollectionsSection from "./report-sections/CollectionsSection";
import EstoppelsSection from "./report-sections/EstoppelsSection";
import HomeownerRequestsSection from "./report-sections/HomeownerRequestsSection";
import LegalMattersSection from "./report-sections/LegalMattersSection";
import OwnerUpdatesSection from "./report-sections/OwnerUpdatesSection";
import StatusUpdatesSection from "./report-sections/StatusUpdatesSection";
import ViolationsSection from "./report-sections/ViolationsSection";

interface ReportPreviewPanelProps {
  data: Record<string, any[]>;
  loading: boolean;
}

export default function ReportPreviewPanel({ data, loading }: ReportPreviewPanelProps) {
  if (loading) {
    return (
      <div className="flex items-center justify-center h-64 bg-muted/30 rounded-lg border border-dashed">
        <div className="text-center space-y-2">
          <Loader2 className="h-8 w-8 animate-spin text-primary mx-auto" />
          <p className="text-sm text-muted-foreground">Generating preview...</p>
        </div>
      </div>
    );
  }

  const hasData = Object.values(data).some((arr) => arr && arr.length > 0);

  if (!hasData) {
    return (
      <div className="flex flex-col items-center justify-center h-64 bg-muted/30 rounded-lg border border-dashed text-center p-6">
        <AlertCircle className="w-10 h-10 text-muted-foreground/50 mb-2" />
        <h3 className="text-lg font-medium text-foreground">No Activity Found</h3>
        <p className="text-sm text-muted-foreground">There is no data recorded for the selected period.</p>
      </div>
    );
  }

  return (
    <div className="h-[800px] w-full overflow-y-auto rounded-md border p-4 bg-background">
      <div className="space-y-8 max-w-4xl mx-auto">
        {data.statusUpdates?.length > 0 && <StatusUpdatesSection data={data.statusUpdates} />}
        {data.ownerUpdates?.length > 0 && <OwnerUpdatesSection data={data.ownerUpdates} />}
        {data.arcApplications?.length > 0 && <ARCApplicationsSection data={data.arcApplications} />}
        {data.violations?.length > 0 && <ViolationsSection data={data.violations} />}
        {data.collections?.length > 0 && <CollectionsSection data={data.collections} />}
        {data.legalMatters?.length > 0 && <LegalMattersSection data={data.legalMatters} />}
        {data.estoppels?.length > 0 && <EstoppelsSection data={data.estoppels} />}
        {data.homeownerRequests?.length > 0 && <HomeownerRequestsSection data={data.homeownerRequests} />}
        {data.bidsQuotes?.length > 0 && <BidsQuotesSection data={data.bidsQuotes} />}
        {data.boardVotes?.length > 0 && <BoardVotesSection data={data.boardVotes} />}
        {data.callLogs?.length > 0 && <CallLogsSection data={data.callLogs} />}
      </div>
    </div>
  );
}
