// File Path: monorepo/web/frontend/src/pages/Admin/Customer/Detail/More/2FA/Page.jsx

import React, { useState, useEffect, useCallback } from "react";
import { Link, useNavigate, useParams } from "react-router";
import {
  ChartBarIcon,
  UserGroupIcon,
  InformationCircleIcon,
  ChevronLeftIcon,
  ShieldCheckIcon,
  ExclamationTriangleIcon,
  CheckCircleIcon,
  XCircleIcon,
  LockClosedIcon,
  LockOpenIcon,
  ArchiveBoxIcon,
  EllipsisHorizontalIcon,
  CogIcon,
  DevicePhoneMobileIcon,
} from "@heroicons/react/24/outline";
import { useCustomerManager } from "../../../../../../services/Services";
import { useUIXTheme } from "../../../../../../components/UIX";
import { CUSTOMER_STATUS } from "../../../../../../constants/Customer";

function AdminCustomerDetailMore2FAPage() {
  // URL Parameters
  const { cid } = useParams();

  // Navigation
  const navigate = useNavigate();

  // Services
  const customerManager = useCustomerManager();

  // Theme
  const { getThemeClasses } = useUIXTheme();

  // Component states
  const [errors, setErrors] = useState({});
  const [isFetching, setFetching] = useState(false);
  const [customer, setCustomer] = useState(null);
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  const [successMessage, setSuccessMessage] = useState("");

  // Unauthorized callback
  const onUnauthorized = useCallback(() => {
    navigate("/login?unauthorized=true");
  }, [navigate]);

  // Load customer details
  useEffect(() => {
    let mounted = true;

    const fetchCustomer = async () => {
      setFetching(true);
      setErrors({});

      try {
        const data = await customerManager.getCustomerDetail(
          cid,
          onUnauthorized,
        );
        if (mounted) {
          setCustomer(data);
        }
      } catch (error) {
        if (mounted) {
          if (import.meta.env.DEV) {
            console.error("Failed to fetch customer:", error);
          }
          setErrors(error);
        }
      } finally {
        if (mounted) {
          setFetching(false);
        }
      }
    };

    if (cid) {
      fetchCustomer();
    }

    return () => {
      mounted = false;
    };
  }, [cid, customerManager, onUnauthorized]);

  // Handle 2FA toggle confirmation
  const handleConfirmToggle = useCallback(async () => {
    setShowConfirmModal(false);
    setErrors({});
    setFetching(true);

    try {
      // Prepare the data for the API call
      const twoFactorData = {
        customer_id: cid,
        otp_enabled: !customer.otpEnabled,
      };

      // Call the manager to change 2FA settings
      await customerManager.changeCustomerTwoFactorAuth(
        twoFactorData,
        onUnauthorized,
      );

      // Set success message
      const message = customer.otpEnabled
        ? "2FA has been disabled for this customer"
        : "2FA has been enabled for this customer";
      setSuccessMessage(message);

      // Navigate back after a short delay
      setTimeout(() => {
        navigate(`/admin/customer/${cid}/more`);
      }, 2000);
    } catch (error) {
      if (import.meta.env.DEV) {
        console.error("Failed to change 2FA settings:", error);
      }
      setErrors(error);
      setFetching(false);
    }
  }, [cid, customer, customerManager, navigate, onUnauthorized]);

  // Render loading state
  if (isFetching && !customer) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="text-center">
            <div
              className={`animate-spin rounded-full h-12 w-12 border-b-2 ${getThemeClasses("loading-spinner")} mx-auto`}
            ></div>
            <p className={`mt-4 ${getThemeClasses("text-secondary")}`}>
              Loading customer details...
            </p>
          </div>
        </div>
      </div>
    );
  }

  // Render error state
  if (!customer && !isFetching) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {/* Breadcrumb */}
        <nav className="flex mb-6" aria-label="Breadcrumb">
          <ol className="inline-flex items-center space-x-1 md:space-x-3">
            <li className="inline-flex items-center">
              <Link
                to="/admin/dashboard"
                className={`inline-flex items-center text-sm font-medium ${getThemeClasses("breadcrumb-inactive")}`}
              >
                <ChartBarIcon className="w-4 h-4 mr-2" />
                Dashboard
              </Link>
            </li>
            <li>
              <div className="flex items-center">
                <span className={`mx-2 ${getThemeClasses("text-muted")}`}>
                  /
                </span>
                <Link
                  to="/admin/customers"
                  className={`text-sm font-medium ${getThemeClasses("breadcrumb-inactive")}`}
                >
                  <span className="inline-flex items-center">
                    <UserGroupIcon className="w-4 h-4 mr-2" />
                    Customers
                  </span>
                </Link>
              </div>
            </li>
            <li>
              <div className="flex items-center">
                <span className={`mx-2 ${getThemeClasses("text-muted")}`}>
                  /
                </span>
                <Link
                  to={`/admin/customer/${cid}`}
                  className={`text-sm font-medium ${getThemeClasses("breadcrumb-inactive")}`}
                >
                  <span className="inline-flex items-center">
                    <InformationCircleIcon className="w-4 h-4 mr-2" />
                    Detail
                  </span>
                </Link>
              </div>
            </li>
            <li>
              <div className="flex items-center">
                <span className={`mx-2 ${getThemeClasses("text-muted")}`}>
                  /
                </span>
                <Link
                  to={`/admin/customer/${cid}/more`}
                  className={`text-sm font-medium ${getThemeClasses("breadcrumb-inactive")}`}
                >
                  <span className="inline-flex items-center">
                    <CogIcon className="w-4 h-4 mr-2" />
                    More
                  </span>
                </Link>
              </div>
            </li>
            <li aria-current="page">
              <div className="flex items-center">
                <span className={`mx-2 ${getThemeClasses("text-muted")}`}>
                  /
                </span>
                <span
                  className={`text-sm font-medium ${getThemeClasses("text-secondary")} inline-flex items-center`}
                >
                  <DevicePhoneMobileIcon className="w-4 h-4 mr-2" />
                  Two-Factor Authentication
                </span>
              </div>
            </li>
          </ol>
        </nav>

        <div
          className={`${getThemeClasses("bg-card")} shadow-sm rounded-lg overflow-hidden`}
        >
          <div className="px-6 py-16 text-center">
            <div
              className={`inline-flex items-center justify-center w-16 h-16 ${getThemeClasses("alert-error-bg")} rounded-full mb-4`}
            >
              <ExclamationTriangleIcon
                className={`w-8 h-8 ${getThemeClasses("alert-error-text")}`}
              />
            </div>
            <h3
              className={`text-lg font-medium ${getThemeClasses("text-primary")} mb-2`}
            >
              Failed to Load Customer
            </h3>
            <p className={`${getThemeClasses("text-secondary")} mb-6`}>
              Unable to load customer details. Please try again.
            </p>
            <Link to={`/admin/customer/${cid}/more`}>
              <button
                className={`inline-flex items-center px-4 py-2 border rounded-lg text-sm font-medium transition-colors ${getThemeClasses("button-secondary")}`}
              >
                <ChevronLeftIcon className="w-4 h-4 mr-2" />
                Back to More
              </button>
            </Link>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
      {/* Breadcrumb */}
      <nav className="flex mb-6" aria-label="Breadcrumb">
        <ol className="inline-flex items-center space-x-1 md:space-x-3">
          <li className="inline-flex items-center">
            <Link
              to="/admin/dashboard"
              className={`inline-flex items-center text-sm font-medium ${getThemeClasses("breadcrumb-inactive")}`}
            >
              <ChartBarIcon className="w-4 h-4 mr-2" />
              Dashboard
            </Link>
          </li>
          <li>
            <div className="flex items-center">
              <span className={`mx-2 ${getThemeClasses("text-muted")}`}>/</span>
              <Link
                to="/admin/customers"
                className={`text-sm font-medium ${getThemeClasses("breadcrumb-inactive")}`}
              >
                <span className="inline-flex items-center">
                  <UserGroupIcon className="w-4 h-4 mr-2" />
                  Customers
                </span>
              </Link>
            </div>
          </li>
          <li>
            <div className="flex items-center">
              <span className={`mx-2 ${getThemeClasses("text-muted")}`}>/</span>
              <Link
                to={`/admin/customer/${cid}`}
                className={`text-sm font-medium ${getThemeClasses("breadcrumb-inactive")}`}
              >
                <span className="inline-flex items-center">
                  <InformationCircleIcon className="w-4 h-4 mr-2" />
                  Detail
                </span>
              </Link>
            </div>
          </li>
          <li>
            <div className="flex items-center">
              <span className={`mx-2 ${getThemeClasses("text-muted")}`}>/</span>
              <Link
                to={`/admin/customer/${cid}/more`}
                className={`text-sm font-medium ${getThemeClasses("breadcrumb-inactive")}`}
              >
                <span className="inline-flex items-center">
                  <CogIcon className="w-4 h-4 mr-2" />
                  More
                </span>
              </Link>
            </div>
          </li>
          <li aria-current="page">
            <div className="flex items-center">
              <span className={`mx-2 ${getThemeClasses("text-muted")}`}>/</span>
              <span
                className={`text-sm font-medium ${getThemeClasses("text-secondary")} inline-flex items-center`}
              >
                <DevicePhoneMobileIcon className="w-4 h-4 mr-2" />
                Two-Factor Authentication
              </span>
            </div>
          </li>
        </ol>
      </nav>

      {/* Page Title */}
      <div className="mb-6">
        <div className="flex justify-between items-center">
          <div>
            <h1
              className={`text-2xl md:text-3xl font-bold ${getThemeClasses("text-primary")} flex items-center`}
            >
              <UserGroupIcon
                className={`w-6 h-6 md:w-8 md:h-8 mr-3 ${getThemeClasses("breadcrumb-active")}`}
              />
              Customer: {customer?.firstName} {customer?.lastName}
            </h1>
            <p
              className={`mt-1 text-sm ${getThemeClasses("text-secondary")} flex items-center`}
            >
              <ShieldCheckIcon className="w-4 h-4 mr-1" />
              Two-Factor Authentication Settings
            </p>
          </div>
        </div>
      </div>

      {/* Success Message */}
      {successMessage && (
        <div
          className={`mb-4 ${getThemeClasses("alert-success-bg")} ${getThemeClasses("alert-success-border")} ${getThemeClasses("alert-success-text")} border px-4 py-3 rounded-lg flex items-center`}
        >
          <CheckCircleIcon className="w-5 h-5 mr-2" />
          {successMessage}
        </div>
      )}

      {/* Error Messages */}
      {errors && Object.keys(errors).length > 0 && (
        <div
          className={`mb-4 ${getThemeClasses("alert-error-bg")} ${getThemeClasses("alert-error-border")} ${getThemeClasses("alert-error-text")} border px-4 py-3 rounded-lg flex items-center`}
        >
          <XCircleIcon className="w-5 h-5 mr-2" />
          {errors.message ||
            errors.detail ||
            "An error occurred. Please try again."}
        </div>
      )}

      {/* Main Content */}
      <div
        className={`${getThemeClasses("bg-card")} shadow-sm rounded-lg overflow-hidden`}
      >
        {/* Status Banner */}
        {customer?.status === CUSTOMER_STATUS.ARCHIVED && (
          <div
            className={`${getThemeClasses("alert-info-bg")} border-b ${getThemeClasses("alert-info-border")} ${getThemeClasses("alert-info-text")} px-6 py-3 flex items-center`}
          >
            <ArchiveBoxIcon className="w-5 h-5 mr-2" />
            This customer is archived.
          </div>
        )}

        <div className="p-6">
          {/* 2FA Status Information */}
          {customer && (
            <>
              {!customer.otpEnabled ? (
                <div
                  className={`${getThemeClasses("alert-success-bg")} ${getThemeClasses("alert-success-border")} border rounded-lg p-6 mb-6`}
                >
                  <div className="flex items-start">
                    <LockClosedIcon
                      className={`w-6 h-6 ${getThemeClasses("alert-success-text")} mt-1 mr-3 flex-shrink-0`}
                    />
                    <div className="flex-1">
                      <h3
                        className={`text-lg font-semibold ${getThemeClasses("text-primary")} mb-2`}
                      >
                        Enable Two-Factor Authentication
                      </h3>
                      <p
                        className={`${getThemeClasses("alert-success-text")} mb-3`}
                      >
                        You are about to <strong>enable 2FA</strong> for this
                        customer. This operation will force the customer on
                        their next successful login to be taken through a{" "}
                        <strong>3-step wizard</strong> to setup 2FA. Afterwards,
                        every time the customer logs in, they will be asked to
                        carry out a 2FA process.
                      </p>
                      <p className={getThemeClasses("alert-success-text")}>
                        Are you sure you want to continue?
                      </p>
                    </div>
                  </div>
                </div>
              ) : (
                <div
                  className={`${getThemeClasses("alert-warning-bg")} ${getThemeClasses("alert-warning-border")} border rounded-lg p-6 mb-6`}
                >
                  <div className="flex items-start">
                    <LockOpenIcon
                      className={`w-6 h-6 ${getThemeClasses("alert-warning-text")} mt-1 mr-3 flex-shrink-0`}
                    />
                    <div className="flex-1">
                      <h3
                        className={`text-lg font-semibold ${getThemeClasses("text-primary")} mb-2`}
                      >
                        Remove Two-Factor Authentication
                      </h3>
                      <p
                        className={`${getThemeClasses("alert-warning-text")} mb-3`}
                      >
                        You are about to <strong>remove 2FA</strong> for this
                        customer. This operation will remove previous 2FA setup
                        codes and disable 2FA on login for this customer. This
                        is recommended if the user lost their 2FA codes from
                        their device.
                      </p>
                      <p className={getThemeClasses("alert-warning-text")}>
                        Are you sure you want to continue?
                      </p>
                    </div>
                  </div>
                </div>
              )}

              {/* Current Status */}
              <div
                className={`${getThemeClasses("search-bg")} border ${getThemeClasses("border-secondary")} rounded-lg p-4 mb-6`}
              >
                <div className="flex items-center justify-between">
                  <span
                    className={`text-sm font-medium ${getThemeClasses("text-primary")}`}
                  >
                    Current 2FA Status:
                  </span>
                  {customer.otpEnabled ? (
                    <span
                      className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${getThemeClasses("badge-success")}`}
                    >
                      <CheckCircleIcon className="w-4 h-4 mr-1" />
                      Enabled
                    </span>
                  ) : (
                    <span
                      className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${getThemeClasses("badge-default")}`}
                    >
                      <XCircleIcon className="w-4 h-4 mr-1" />
                      Disabled
                    </span>
                  )}
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
                <Link
                  to={`/admin/customer/${cid}/more`}
                  className="w-full sm:w-auto"
                >
                  <button
                    className={`w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${getThemeClasses("button-secondary")}`}
                    disabled={isFetching}
                  >
                    <ChevronLeftIcon className="w-4 h-4 mr-2" />
                    Back to More
                  </button>
                </Link>

                <button
                  onClick={() => setShowConfirmModal(true)}
                  disabled={isFetching}
                  className={`w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
                    !customer.otpEnabled
                      ? `${getThemeClasses("alert-success-border")} ${getThemeClasses("alert-success-text")} ${getThemeClasses("alert-success-bg")} ${getThemeClasses("alert-success-hover")}`
                      : `${getThemeClasses("alert-warning-border")} ${getThemeClasses("alert-warning-text")} ${getThemeClasses("alert-warning-bg")} ${getThemeClasses("alert-warning-hover")}`
                  }`}
                >
                  {isFetching ? (
                    <>
                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2"></div>
                      Processing...
                    </>
                  ) : (
                    <>
                      {!customer.otpEnabled ? (
                        <>
                          <LockClosedIcon className="w-4 h-4 mr-2" />
                          Enable 2FA
                        </>
                      ) : (
                        <>
                          <LockOpenIcon className="w-4 h-4 mr-2" />
                          Disable 2FA
                        </>
                      )}
                    </>
                  )}
                </button>
              </div>
            </>
          )}
        </div>
      </div>

      {/* Confirmation Modal */}
      {showConfirmModal && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex min-h-screen items-center justify-center p-4 text-center sm:p-0">
            {/* Background overlay */}
            <div
              className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
              onClick={() => setShowConfirmModal(false)}
            ></div>

            {/* Modal panel */}
            <div
              className={`relative transform overflow-hidden rounded-lg ${getThemeClasses("bg-card")} px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6`}
            >
              <div className="sm:flex sm:items-start">
                <div
                  className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10 ${
                    !customer?.otpEnabled
                      ? getThemeClasses("alert-success-bg")
                      : getThemeClasses("alert-warning-bg")
                  }`}
                >
                  {!customer?.otpEnabled ? (
                    <LockClosedIcon
                      className={`h-6 w-6 ${getThemeClasses("alert-success-text")}`}
                    />
                  ) : (
                    <ExclamationTriangleIcon
                      className={`h-6 w-6 ${getThemeClasses("alert-warning-text")}`}
                    />
                  )}
                </div>
                <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                  <h3
                    className={`text-lg font-semibold leading-6 ${getThemeClasses("text-primary")}`}
                  >
                    Confirm 2FA Change
                  </h3>
                  <div className="mt-2">
                    <p
                      className={`text-sm ${getThemeClasses("text-secondary")}`}
                    >
                      Are you sure you want to{" "}
                      {!customer?.otpEnabled ? "enable" : "disable"} Two-Factor
                      Authentication for this customer?
                    </p>
                    {!customer?.otpEnabled && (
                      <p
                        className={`mt-2 text-sm ${getThemeClasses("text-secondary")}`}
                      >
                        The customer will be required to set up 2FA on their
                        next login.
                      </p>
                    )}
                    {customer?.otpEnabled && (
                      <p
                        className={`mt-2 text-sm ${getThemeClasses("text-secondary")}`}
                      >
                        This will remove all 2FA settings for this customer.
                        They will be able to login without 2FA verification.
                      </p>
                    )}
                  </div>
                </div>
              </div>
              <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                <button
                  type="button"
                  onClick={handleConfirmToggle}
                  disabled={isFetching}
                  className={`inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm sm:ml-3 sm:w-auto disabled:opacity-50 disabled:cursor-not-allowed ${
                    !customer?.otpEnabled
                      ? getThemeClasses("button-success")
                      : `${getThemeClasses("alert-warning-bg")} ${getThemeClasses("alert-warning-text")} ${getThemeClasses("alert-warning-hover")}`
                  }`}
                >
                  {isFetching ? "Processing..." : "Confirm"}
                </button>
                <button
                  type="button"
                  onClick={() => setShowConfirmModal(false)}
                  disabled={isFetching}
                  className={`mt-3 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset sm:mt-0 sm:w-auto disabled:opacity-50 disabled:cursor-not-allowed ${getThemeClasses("button-secondary")}`}
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default AdminCustomerDetailMore2FAPage;
