"use client";

import { useEffect, useState } from "react";
import Button from "../../../../components/ui/Button";
import { useModal } from "../../../../lib/modal-system/ModalContext";
import { TextEditor } from "../../../editor";
import useUpdateSecuritySettings from "../../../../hooks/features/admin/settings/security/useUpdateSecuritySettings";

interface PrivacyPolicyModalProps {
  initialContent?: string;
  fieldKey?: "privacyPolicy" | "termsAndConditions";
}

export default function PrivacyPolicyModal({
  initialContent = "",
  fieldKey = "privacyPolicy",
}: PrivacyPolicyModalProps) {
  const { closeModal } = useModal();
  const { updateSecuritySettings, updatingSecuritySettings } =
    useUpdateSecuritySettings();
  const [content, setContent] = useState(initialContent);

  useEffect(() => {
    setContent(initialContent);
  }, [initialContent]);

  const handleSave = async () => {
    try {
      await updateSecuritySettings({ [fieldKey]: content });
      closeModal();
    } catch (error) {}
  };

  return (
    <div>
      <h2 className="mb-7.5 text-2xl text-center font-semibold leading-8 text-heading">
        Privacy Policy
      </h2>
      <div>
        <TextEditor
          content={content}
          onChange={setContent}
          placeholder="Start writing..."
          characterLimit={500000}
          maxHeight="400px"
        />
      </div>

      <div className="mt-7.5 flex justify-end gap-4">
        <Button
          variant="white"
          onClick={closeModal}
          buttonClassName="shadow-none!"
          BtnInnerclassName="px-8!"
        >
          Cancel
        </Button>

        <Button
          onClick={handleSave}
          loading={updatingSecuritySettings}
          buttonClassName="shadow-none! p-0!"
          BtnInnerclassName="px-8!"
        >
          Save
        </Button>
      </div>
    </div>
  );
}