// File Path: monorepo/web/frontend/src/pages/Admin/Organization/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 {
  useOrganizationManager,
  useAuthManager,
} from "../../../../services/Services";
import {
  UIXThemeProvider,
} from "../../../../components/UIX";
import {
  EntityActionConfirmationPage,
} from "../../../../components/business/views";

function AdminOrganizationDeletePageContent() {
  const { id } = useParams();
  const navigate = useNavigate();
  const organizationManager = useOrganizationManager();
  const authManager = useAuthManager();

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

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

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

    if (id) {
      setLoading(true);
      organizationManager.getOrganizationDetailWithCallbacks(
        id,
        (data) => {
          setOrganization(data);
          setLoading(false);
        },
        (error) => {
          setErrors(error);
          setLoading(false);
        },
        () => setLoading(false),
        onUnauthorized
      );
    }
  }, [id, authManager, navigate, organizationManager]);

  // Delete handler
  const handleDelete = async () => {
    try {
      await organizationManager.deleteOrganization(id, onUnauthorized);
      navigate("/admin/organizations", {
        state: { message: "Organization deleted successfully" }
      });
    } catch (error) {
      setErrors(error);
    }
  };

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

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

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

function AdminOrganizationDeletePage() {
  return (
    <UIXThemeProvider>
      <AdminOrganizationDeletePageContent />
    </UIXThemeProvider>
  );
}

export default AdminOrganizationDeletePage;