import { useNavigate, useParams } from "react-router-dom";
import ViewExternalRecord from "../components/ViewExternalRecord";
import { attachmentResponse } from "../hooks/useCreateExternalLetterRecord";
import { useEffect } from "react";

const ViewExternalRecordPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();

  // Verify we have a valid ID
  if (!id) {
    return <div className="p-4 text-red-500">Error: Invalid record ID</div>;
  }

  const { data: attachment, isLoading, error } = attachmentResponse(id); // Fixed: using id instead of undefined itemId

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
  }, [attachment, isLoading, error]);

  if (isLoading) {
    return <div className="p-4 text-center">Loading record...</div>;
  }

  if (error) {
    return (
      <div className="p-4 text-center text-red-500">
        Error loading record: {error.message}
      </div>
    );
  }

  return (
    <ViewExternalRecord
      itemId={id}
      onBack={() => navigate("/external-portal/portal-outgoing")}
    />
  );
};

export default ViewExternalRecordPage;
