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

import React, { useMemo, useCallback } from "react";
import { useParams } from "react-router";
import {
  ChartBarIcon,
  UserGroupIcon,
  PlusCircleIcon,
  ClipboardDocumentListIcon,
  DocumentArrowUpIcon,
} from "@heroicons/react/24/outline";
import {
  useAttachmentManager,
  useCustomerManager,
} from "../../../../../../services/Services";
import { EntityAttachmentAddPage } from "../../../../../../components/UIX";
import { ATTACHMENT_OWNERSHIP_TYPE } from "../../../../../../constants/Attachment";
import { CUSTOMER_STATUS } from "../../../../../../constants/Customer";

// File size constants
const MAX_FILE_SIZE_MB = 10;
const BYTES_PER_MB = 1024 * 1024;
const MAX_FILE_SIZE = MAX_FILE_SIZE_MB * BYTES_PER_MB; // 10MB

function AdminCustomerDetailAttachmentAddPage() {
  const { cid } = useParams();
  const attachmentManager = useAttachmentManager();
  const customerManager = useCustomerManager();

  // Fetch customer details
  const fetchEntity = useCallback(
    async (customerId, onUnauthorized) => {
      return await customerManager.getCustomerDetail(
        customerId,
        onUnauthorized,
      );
    },
    [customerManager],
  );

  // Handle attachment upload
  const uploadAttachment = useCallback(
    async (file, metadata, onProgress, onUnauthorized) => {
      return await attachmentManager.uploadAttachment(
        file,
        metadata,
        onProgress,
        onUnauthorized,
      );
    },
    [attachmentManager],
  );

  // Breadcrumb items
  const breadcrumbItems = useMemo(
    () => [
      {
        label: "Dashboard",
        to: "/admin/dashboard",
        icon: ChartBarIcon,
      },
      {
        label: "Customers",
        to: "/admin/customers",
        icon: UserGroupIcon,
      },
      {
        label: "Detail (Attachments)",
        to: `/admin/customer/${cid}/attachments`,
        icon: ClipboardDocumentListIcon,
      },
      {
        label: "Add",
        icon: PlusCircleIcon,
        isActive: true,
      },
    ],
    [cid],
  );

  // Header configuration
  const headerConfig = useMemo(
    () => ({
      title: "Customer - Add Attachment",
      icon: DocumentArrowUpIcon,
      loadingText: "Loading customer details...",
    }),
    [],
  );

  // Route configuration
  const routesConfig = useMemo(
    () => ({
      backPath: `/admin/customer/${cid}/attachments`,
      backLabel: "Back to Attachments",
      successPath: `/admin/customer/${cid}/attachments`,
    }),
    [cid],
  );

  // Determine if customer can upload attachments
  const canUpload = useCallback((customer) => {
    return customer
      ? customer.status !== CUSTOMER_STATUS.ARCHIVED && !customer.isBanned
      : false;
  }, []);

  // Configuration object
  const config = useMemo(
    () => ({
      entityId: cid,
      entityType: "customer",
      ownershipType: ATTACHMENT_OWNERSHIP_TYPE.CUSTOMER,
      maxFileSize: MAX_FILE_SIZE,

      fetchEntity,
      uploadAttachment,

      breadcrumbs: {
        items: breadcrumbItems,
      },

      header: headerConfig,
      routes: routesConfig,

      showEntityStatus: true,
      canUpload,
    }),
    [
      cid,
      fetchEntity,
      uploadAttachment,
      breadcrumbItems,
      headerConfig,
      routesConfig,
      canUpload,
    ],
  );

  return <EntityAttachmentAddPage config={config} />;
}

export default AdminCustomerDetailAttachmentAddPage;
