import { useNavigate, useParams } from "react-router-dom";
import { attachmentResponse } from "@/external-portal/hooks/useCreateExternalLetterRecord";
import ViewExternalRecord from "@/external-portal/components/ViewExternalRecord";
import { useTranslation } from "react-i18next";

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

  if (!id) {
    return (
      <div className="p-4 text-red-500">{t("migration.invalidRecordId")}</div>
    );
  }

  const { isLoading, error } = attachmentResponse(id);

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

  if (error) {
    return (
      <div className="p-4 text-center text-red-500">
        {t("migration.errorLoadingRecord", { message: error.message })}
      </div>
    );
  }

  return (
    <ViewExternalRecord
      itemId={id}
      onBack={() => navigate("/user-management/migrated-records-management")}
    />
  );
};

export default ViewMigratedDataPage;
