// File Path: monorepo/web/frontend/src/pages/Admin/Division/Delete/Page.jsx

import React, { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router";
import {
  BuildingOffice2Icon,
  TrashIcon,
  ExclamationTriangleIcon,
  ChevronLeftIcon,
  HomeIcon,
  InformationCircleIcon,
} from "@heroicons/react/24/outline";
import {
  useDivisionManager,
  useAuthManager,
} from "../../../../services/Services";
import {
  UIXThemeProvider,
} from "../../../../components/UIX";
import {
  EntityActionConfirmationPage,
} from "../../../../components/business/views";

function AdminDivisionDeletePageContent() {
  const { id } = useParams();
  const navigate = useNavigate();
  const divisionManager = useDivisionManager();
  const authManager = useAuthManager();

  // Component states
  const [division, setDivision] = useState(null);
  const [loading, setLoading] = useState(false);
  const [errors, setErrors] = useState({});

  // Handle unauthorized access
  const onUnauthorized = () => {
    navigate("/login?unauthorized=true");
  };

  // Load division data
  useEffect(() => {
    if (!authManager.isAuthenticated()) {
      navigate("/login");
      return;
    }

    if (id) {
      setLoading(true);
      divisionManager.getDivisionDetailWithCallbacks(
        id,
        (data) => {
          setDivision(data);
          setLoading(false);
        },
        (error) => {
          setErrors(error);
          setLoading(false);
        },
        () => setLoading(false),
        onUnauthorized
      );
    }
  }, [id, authManager, navigate, divisionManager]);

  // Delete handler
  const handleDelete = async () => {
    try {
      await divisionManager.deleteDivision(id, onUnauthorized);
      navigate("/admin/divisions", {
        state: { message: "Division deleted successfully" }
      });
    } catch (error) {
      setErrors(error);
    }
  };

  // Breadcrumb configuration
  const breadcrumbItems = [
    {
      label: "Dashboard",
      to: "/admin/dashboard",
      icon: HomeIcon
    },
    {
      label: "Divisions",
      to: "/admin/divisions",
      icon: BuildingOffice2Icon
    },
    {
      label: "Delete Division",
      icon: TrashIcon,
      isActive: true
    }
  ];

  // Action buttons configuration
  const actionButtons = [
    {
      variant: "outline",
      onClick: () => navigate("/admin/divisions"),
      icon: ChevronLeftIcon,
      label: "Cancel"
    }
  ];

  return (
    <EntityActionConfirmationPage
      entityData={division}
      entityType="division"
      actionType="delete"
      onConfirm={handleDelete}
      breadcrumbItems={breadcrumbItems}
      actionButtons={actionButtons}
      headerConfig={{
        title: "Delete Division",
        icon: TrashIcon,
        loadingText: "Loading division...",
        notFoundTitle: "Division Not Found",
        notFoundMessage: "The division you're trying to delete doesn't exist or you don't have permission to delete it."
      }}
      confirmationConfig={{
        title: "Delete Division?",
        message: "Are you sure you want to delete this division? This action cannot be undone and will permanently remove all associated data.",
        warningMessage: "This is a permanent action that cannot be reversed.",
        confirmButtonText: "Delete Division",
        confirmButtonVariant: "danger",
        icon: ExclamationTriangleIcon
      }}
      isLoading={loading}
      errors={errors}
      onErrorClose={() => setErrors({})}
    />
  );
}

function AdminDivisionDeletePage() {
  return (
    <UIXThemeProvider>
      <AdminDivisionDeletePageContent />
    </UIXThemeProvider>
  );
}

export default AdminDivisionDeletePage;
