// src/pages/Admin/Setting/InactiveClient/Delete/Page.jsx

import React, { useMemo, useCallback, memo } from "react";
import { useNavigate } from "react-router";
import {
  Card,
  Button,
  Alert,
  EmptyState,
  UIXThemeProvider,
  useUIXTheme,
} from "../../../../../components/UIX";
import {
  ExclamationTriangleIcon,
  TrashIcon,
  ArchiveBoxIcon,
  InformationCircleIcon,
} from "@heroicons/react/24/outline";

function SettingInactiveClientDeletePage() {
  return (
    <UIXThemeProvider>
      <SettingInactiveClientDeletePageContent />
    </UIXThemeProvider>
  );
}

const SettingInactiveClientDeletePageContent = memo(
  function SettingInactiveClientDeletePageContent() {
    const navigate = useNavigate();
    const { getThemeClasses } = useUIXTheme();

    // Memoize theme classes
    const themeClasses = useMemo(
      () => ({
        bgGradientPrimary: getThemeClasses("bg-gradient-primary"),
      }),
      [getThemeClasses],
    );

    // Wrap handlers with useCallback
    const handleBackToList = useCallback(() => {
      navigate("/admin/settings/inactive-clients");
    }, [navigate]);

    const handleBackToSettings = useCallback(() => {
      navigate("/admin/settings");
    }, [navigate]);

    return (
      <div className={`min-h-screen ${themeClasses.bgGradientPrimary}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <EmptyState
            icon={TrashIcon}
            title="Deletion Not Available Here"
            description="For data integrity and audit purposes, clients cannot be permanently deleted from this interface."
            action={
              <Button variant="primary" onClick={handleBackToList}>
                <ArchiveBoxIcon className="w-4 h-4 mr-2" />
                Back to Inactive Clients
              </Button>
            }
          />

          <Card className="mt-8 max-w-3xl mx-auto">
            <h2 className="text-lg font-semibold mb-3">
              About Client Deletion
            </h2>

            <Alert type="warning" className="mb-4">
              <div className="flex items-start">
                <ExclamationTriangleIcon className="w-5 h-5 mr-2 flex-shrink-0" />
                <div>
                  <strong>Important:</strong> Permanent deletion of client
                  records should be done with extreme caution as it may affect
                  historical data, reports, and audit trails.
                </div>
              </div>
            </Alert>

            <div className="space-y-4">
              <div>
                <h3 className="font-medium mb-2">Current Status</h3>
                <p className="text-sm text-gray-600">
                  Clients marked as "Inactive" are already archived and hidden
                  from most system operations. This preserves data integrity
                  while preventing active use.
                </p>
              </div>

              <div>
                <h3 className="font-medium mb-2">
                  If Permanent Deletion is Required
                </h3>
                <Alert type="info">
                  <div className="flex items-start">
                    <InformationCircleIcon className="w-5 h-5 mr-2 flex-shrink-0" />
                    <div className="text-sm">
                      Please contact your system administrator or database
                      administrator for permanent deletion requests. They will
                      ensure proper procedures are followed and data
                      dependencies are handled correctly.
                    </div>
                  </div>
                </Alert>
              </div>

              <div>
                <h3 className="font-medium mb-2">Alternative Actions</h3>
                <ul className="list-disc list-inside text-sm text-gray-600 space-y-1">
                  <li>
                    Keep the client as inactive to preserve historical records
                  </li>
                  <li>
                    Update the deactivation reason if circumstances have changed
                  </li>
                  <li>Reactivate the client if they should be active again</li>
                </ul>
              </div>
            </div>

            <div className="mt-6 flex gap-3">
              <Button variant="secondary" onClick={handleBackToList}>
                View Inactive Clients
              </Button>
              <Button variant="primary" onClick={handleBackToSettings}>
                Back to Settings
              </Button>
            </div>
          </Card>
        </div>
      </div>
    );
  },
);
SettingInactiveClientDeletePageContent.displayName =
  "SettingInactiveClientDeletePageContent";

export default SettingInactiveClientDeletePage;
