// File: src/components/UIX/EntityAttachmentDetailPage/EntityAttachmentDetailPage.jsx

import React, { useState, useCallback, useMemo, memo } from "react";
import { useNavigate, useParams } from "react-router";
import { DocumentTextIcon } from "@heroicons/react/24/outline";
import { UIXThemeProvider } from "../";
// NOTE: Commented out - business logic component not available in this project
// import AttachmentDetailView from "../../business/views/AttachmentDetailView";

/**
 * EntityAttachmentDetailPage - A reusable page component for entity attachment detail management
 *
 * This component provides a complete attachment detail page with consistent layout,
 * data fetching, and error handling. It's designed to work with any entity type
 * (staff, customers, events, etc.) by accepting configuration props.
 */
const EntityAttachmentDetailPage = memo(({ config }) => {
  const navigate = useNavigate();
  const params = useParams();

  // Extract IDs from URL parameters - memoized to prevent repeated access
  const entityId = useMemo(
    () => params[config.entityIdParam || "id"],
    [params, config.entityIdParam],
  );

  const attachmentId = useMemo(
    () => params[config.attachmentIdParam || "aid"],
    [params, config.attachmentIdParam],
  );

  // Component states
  const [alertMessage, setAlertMessage] = useState("");
  const [alertStatus, setAlertStatus] = useState("");

  // Unauthorized callback - memoized to prevent recreation
  const onUnauthorized = useCallback(() => {
    navigate("/login?unauthorized=true");
  }, [navigate]);

  // Clear alert callback - memoized once
  const onAlertClear = useCallback(() => {
    setAlertMessage("");
    setAlertStatus("");
  }, []);

  // Fetch attachment details wrapper - properly memoized
  const onAttachmentFetch = useCallback(
    async (attachmentIdParam, onUnauthorizedCallback) => {
      try {
        return await config.onAttachmentFetch(
          attachmentIdParam,
          onUnauthorizedCallback || onUnauthorized,
        );
      } catch (error) {
        setAlertMessage(error.message || "Failed to load attachment details");
        setAlertStatus("error");
        throw error;
      }
    },
    [config.onAttachmentFetch, onUnauthorized],
  );

  // Build breadcrumbs - memoized to prevent recreation
  const breadcrumbs = useMemo(() => {
    if (!config.routes.buildBreadcrumbs) {
      return [];
    }
    return config.routes.buildBreadcrumbs(entityId, attachmentId);
  }, [config.routes.buildBreadcrumbs, entityId, attachmentId]);

  // Build paths - memoized to prevent expensive string operations
  const paths = useMemo(() => {
    const backPath = config.routes.backPath
      ? config.routes.backPath.replace("{entityId}", entityId)
      : `/admin/${config.entityType}s`;

    const editPath = config.routes.editPath
      ? config.routes.editPath
          .replace("{entityId}", entityId)
          .replace("{attachmentId}", attachmentId)
      : null;

    const deletePath = config.routes.deletePath
      ? config.routes.deletePath
          .replace("{entityId}", entityId)
          .replace("{attachmentId}", attachmentId)
      : null;

    return { backPath, editPath, deletePath };
  }, [
    config.routes.backPath,
    config.routes.editPath,
    config.routes.deletePath,
    config.entityType,
    entityId,
    attachmentId,
  ]);

  // Memoize header configuration
  const headerConfig = useMemo(
    () => ({
      itemType: config.header.itemType || config.entityType,
      itemIcon: config.header.itemIcon || DocumentTextIcon,
      backLabel: config.header.backLabel || "Back to Attachments",
      pageTitle:
        config.header.pageTitle || `${config.entityType} - Attachment Detail`,
      pageIcon: config.header.pageIcon || DocumentTextIcon,
    }),
    [config.header, config.entityType],
  );

  return (
    <UIXThemeProvider>
      {/* NOTE: AttachmentDetailView component not available - placeholder */}
      <div className="p-8">
        <p>EntityAttachmentDetailPage: Business logic component not available in this project.</p>
      </div>
    </UIXThemeProvider>
  );
});

// Add display name for better debugging
EntityAttachmentDetailPage.displayName = "EntityAttachmentDetailPage";

export default EntityAttachmentDetailPage;
