import React from "react";
import { Loader2, AlertCircle } from "lucide-react";
import { IncomingReportAccordion } from "./IncomingReportAccordion";
import { useIncomingReport } from "../hooks/useIncomingReport";
import { Button } from "@/shared/common/ui/button";

interface IncomingReportSectionProps {
  positionId?: string;
}

export const IncomingReportSection: React.FC<IncomingReportSectionProps> = ({
  positionId,
}) => {
  const { data, isLoading, isError, error, refetch } =
    useIncomingReport(positionId);

  if (!positionId) {
    return (
      <div className="p-6 text-center text-gray-500 dark:text-gray-400">
        No position selected
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="p-6 flex items-center justify-center h-64">
        <div className="flex flex-col items-center gap-2">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
          <div className="text-sm text-muted-foreground">
            Loading incoming report...
          </div>
        </div>
      </div>
    );
  }

  if (isError) {
    return (
      <div className="p-6 flex items-center justify-center h-64">
        <div className="flex flex-col items-center gap-4">
          <AlertCircle className="h-12 w-12 text-red-500" />
          <div className="text-red-500 font-medium">
            Error loading incoming report
          </div>
          <p className="text-gray-500 text-center max-w-md mb-4">
            {error instanceof Error
              ? error.message
              : "There was an issue loading the report data."}
          </p>
          <Button
            onClick={() => refetch()}
            className="bg-primary hover:bg-primary/90 text-primary-foreground"
          >
            Retry
          </Button>
        </div>
      </div>
    );
  }

  if (!data || Object.keys(data).length === 0) {
    return (
      <div className="p-6 text-center text-gray-500 dark:text-gray-400">
        No incoming report data available
      </div>
    );
  }

  return <IncomingReportAccordion data={data} title="Incoming Report" />;
};
