// File Path: monorepo/web/frontend/src/pages/Admin/Facilitator/Detail/Attachment/Detail/Page.jsx

import React, { useMemo, memo } from "react";
import {
  UserGroupIcon,
  PaperClipIcon,
  DocumentTextIcon,
  ChartBarIcon,
} from "@heroicons/react/24/outline";
import { useAttachmentManager } from "../../../../../../services/Services";
import {
  UIXThemeProvider,
  EntityAttachmentDetailPage,
} from "../../../../../../components/UIX";

const AdminFacilitatorDetailAttachmentDetailPageContent = memo(
  function AdminFacilitatorDetailAttachmentDetailPageContent() {
    const attachmentManager = useAttachmentManager();

    // Configuration for EntityAttachmentDetailPage
    const config = useMemo(
      () => ({
        entityType: "facilitator",
        entityIdParam: "aid", // Facilitator uses 'aid' for facilitator ID
        attachmentIdParam: "atid", // and 'atid' for attachment ID

        // Data operations
        onAttachmentFetch: async (attachmentId, onUnauthorized) => {
          return await attachmentManager.getAttachmentDetail(
            attachmentId,
            onUnauthorized,
          );
        },

        // Route configuration
        routes: {
          buildBreadcrumbs: (facilitatorId, attachmentId) => [
            {
              label: "Dashboard",
              href: "/admin/dashboard",
              icon: ChartBarIcon,
            },
            {
              label: "Facilitators",
              icon: UserGroupIcon,
              href: "/admin/facilitators",
            },
            {
              label: "Detail",
              href: `/admin/facilitator/${facilitatorId}`,
            },
            {
              label: "Attachments",
              href: `/admin/facilitator/${facilitatorId}/attachments`,
            },
            {
              label: "Attachment Detail",
              icon: DocumentTextIcon,
              current: true,
            },
          ],

          backPath: `/admin/facilitator/{entityId}/attachments`,
          editPath: `/admin/facilitator/{entityId}/attachment/{attachmentId}/update`,
          deletePath: `/admin/facilitator/{entityId}/attachment/{attachmentId}/delete`,
        },

        // Header configuration
        header: {
          pageTitle: "Facilitator - Attachment Detail",
          pageIcon: PaperClipIcon,
          itemIcon: UserGroupIcon,
          itemType: "Facilitator",
          backLabel: "Back to Attachments",
        },
      }),
      [attachmentManager],
    );

    return <EntityAttachmentDetailPage config={config} />;
  },
);

function AdminFacilitatorDetailAttachmentDetailPage() {
  return (
    <UIXThemeProvider>
      <AdminFacilitatorDetailAttachmentDetailPageContent />
    </UIXThemeProvider>
  );
}

export default AdminFacilitatorDetailAttachmentDetailPage;
