import React, { Fragment } from "react";

import BlockStack from "../Containers/BlockStack";
import CheckboxControl from "../Controls/CheckboxControl";
import StepBlock from "../Shared/StepBlock";
import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
import { useNavigate } from "react-router-dom";
const ZoomPaidAccountModalContent = ({
  zoomConfirmed,
  setZoomConfirmed,
  handlerOnZoomAccountAdd,
  closeModal,
}) => {
  const navigate = useNavigate();
  return (
    <Fragment>
      {/* ===================================================== */}
      {/* ✅ ZOOM REQUIREMENT NOTE */}
      {/* ===================================================== */}
      <StepBlock
      // title="Connect Zoom"
      // description="Zoom integration requires a paid Zoom account."
      >
        <BlockStack gap={5}>
          {/* ✅ Info Card */}
          <div className="flex flex-col gap-3 p-4 border border-gray-200 rounded-xl bg-gray-50 shadow-sm">
            <p className="text-sm font-semibold text-gray-900">
              Paid Zoom account required
            </p>

            <p className="text-sm text-gray-600 leading-relaxed">
              To connect Zoom, you must use a{" "}
              <span className="font-medium text-gray-900">
                paid Zoom account
              </span>
              . Free Zoom accounts are not supported for this integration.
            </p>
            <p className="text-sm text-gray-600 leading-relaxed">
              Please make sure that{" "}
              <span className="font-medium text-gray-900">
                shared access permission
              </span>{" "}
              is enabled for the Zoom account, as it is required for proper
              integration and meeting management.
            </p>

            <img
              alt="Gmail permission"
              src={`${servvData.pluginUrl}/public/assets/images/ZoomPermission.png`}
              className="w-full rounded-lg border object-cover"
            />
          </div>

          {/* ✅ Confirmation Checkbox */}
          <CheckboxControl
            label={
              <span className="text-sm font-medium text-gray-800">
                I understand and confirm that I am using a paid Zoom account
              </span>
            }
            checked={zoomConfirmed}
            onChange={() => setZoomConfirmed(!zoomConfirmed)}
          />
          <div
            className="flex flex-row gap-2 items-center hover:cursor-pointer hover:bg-gray-100 py-2 w-fit px-2 -ml-2 rounded-[6px]"
            onClick={() =>
              open(
                "https://support.servv.ai/pages/getting-started/integrations/integrations/",
                "_blank",
              )
            }
          >
            <QuestionMarkCircleIcon className="w-[16px] h-[16px]" />
            <span className="text-sm text-gray-600 leading-relaxed">
              Learn more
            </span>
          </div>

          {/* ✅ Actions */}
          <div className="flex justify-end gap-3 pt-2">
            {/* Cancel */}
            <button
              type="button"
              onClick={closeModal}
              className="px-4 py-2 rounded-lg border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50 transition"
            >
              Cancel
            </button>

            {/* Connect */}
            <button
              type="button"
              disabled={!zoomConfirmed}
              onClick={() => {
                handlerOnZoomAccountAdd();
                closeModal();
              }}
              className={`px-4 py-2 rounded-lg text-sm font-semibold transition-colors duration-200 ${
                zoomConfirmed
                  ? "bg-[#7a5af8] text-white hover:bg-[#6845f5]"
                  : "bg-gray-200 text-gray-400 cursor-not-allowed"
              }`}
            >
              Connect Zoom
            </button>
          </div>
        </BlockStack>
      </StepBlock>
    </Fragment>
  );
};

export default ZoomPaidAccountModalContent;