// src/pages/Admin/Setting/InactiveClient/Create/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,
  UserGroupIcon,
  PlusIcon,
} from "@heroicons/react/24/outline";

function SettingInactiveClientCreatePage() {
  return (
    <UIXThemeProvider>
      <SettingInactiveClientCreatePageContent />
    </UIXThemeProvider>
  );
}

const SettingInactiveClientCreatePageContent = memo(
  function SettingInactiveClientCreatePageContent() {
    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 handleCreateCustomer = useCallback(() => {
      navigate("/admin/customers/add");
    }, [navigate]);

    const handleGoToCustomers = useCallback(() => {
      navigate("/admin/customers");
    }, [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={ExclamationTriangleIcon}
            title="Direct Creation Not Supported"
            description="Inactive clients cannot be created directly. Clients must be created as active first, then deactivated if needed."
            action={
              <div className="flex gap-3 justify-center">
                <Button variant="secondary" onClick={handleBackToList}>
                  Back to Inactive Clients
                </Button>
                <Button variant="primary" onClick={handleCreateCustomer}>
                  <PlusIcon className="w-4 h-4 mr-2" />
                  Create Active Customer
                </Button>
              </div>
            }
          />

          <Card className="mt-8 max-w-3xl mx-auto">
            <h2 className="text-lg font-semibold mb-3">
              How to Add Inactive Clients
            </h2>
            <Alert type="info">
              <ol className="list-decimal list-inside space-y-2 text-sm">
                <li>
                  First, create a new customer through the regular customer
                  creation process
                </li>
                <li>Navigate to the customer's detail page</li>
                <li>Click "Edit" and change their status to "Inactive"</li>
                <li>Select an appropriate deactivation reason</li>
                <li>Save the changes</li>
              </ol>
            </Alert>
            <div className="mt-4">
              <Button variant="primary" onClick={handleGoToCustomers}>
                <UserGroupIcon className="w-4 h-4 mr-2" />
                Go to Customer Management
              </Button>
            </div>
          </Card>
        </div>
      </div>
    );
  },
);
SettingInactiveClientCreatePageContent.displayName =
  "SettingInactiveClientCreatePageContent";

export default SettingInactiveClientCreatePage;
