/**
 * Default restricted message editor (Settings → Content Gate).
 *
 * @package ArraySubs
 */

import React, { useEffect, useState } from "react";
import { __ } from "@wordpress/i18n";
import { buildUrl } from "@libs/url";
import RichTextField from "@libs/form-builder/fields/RichText";
import SpinnerButton from "@libs/confirm-dialog/SpinnerButton";
import { Skeleton } from "@libs/skeleton";
import { ToastContainer } from "@libs/toast";
import { useToast } from "@libs/toast/useToast";
import { updateSettingsLastSavedAt } from "@/pages/Settings/settingsHelpers";
import { DEFAULT_MESSAGE_SECTION } from "./DefaultMessageHelp";

const DefaultMessageSettings = () => {
  const { env } = window.arraySubs;
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [loadFailed, setLoadFailed] = useState(false);
  const { toasts, showToast, removeToast } = useToast();
  const endpoint = buildUrl(
    `${env.apiBaseUrl}arraysubs/v1/members-access/settings`,
    {},
  );

  const loadSettings = async () => {
    setLoading(true);
    setLoadFailed(false);
    try {
      const response = await fetch(endpoint, {
        headers: { "X-WP-Nonce": env.nonce },
      });
      if (!response.ok) {
        throw new Error(
          __("Could not load the default message. Please try again.", "arraysubs"),
        );
      }
      const result = await response.json();
      setMessage(result.data?.default_message || "");
    } catch (error) {
      setLoadFailed(true);
      showToast(error.message, "error");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadSettings();
  }, []);

  const saveMessage = async () => {
    if (saving || loading || loadFailed) return;
    const submitted = message;
    setSaving(true);
    try {
      const response = await fetch(endpoint, {
        method: "POST",
        headers: {
          "X-WP-Nonce": env.nonce,
          "Content-Type": "application/json",
        },
        // Partial update: leave access rules and other settings untouched.
        body: JSON.stringify({ default_message: submitted }),
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        throw new Error(
          result.message ||
            __("Could not save the default message. Please try again.", "arraysubs"),
        );
      }
      // Keep any edits made while the request was in flight.
      setMessage((current) =>
        current === submitted ? result.data.default_message : current,
      );
      updateSettingsLastSavedAt(result.settings_last_saved_at);
      showToast(__("Default message saved.", "arraysubs"), "success");
    } catch (error) {
      showToast(error.message, "error");
    } finally {
      setSaving(false);
    }
  };

  return (
    <section
      id={`arraysubs-content-gate-${DEFAULT_MESSAGE_SECTION}`}
      className="arraysubs-card arraysubs-content-gate__message"
      aria-labelledby="arraysubs-default-message-title"
    >
      <h3 id="arraysubs-default-message-title" className="arraysubs-card__title">
        {__("Default Restricted Message", "arraysubs")}
      </h3>
      <p className="arraysubs-card__description">
        {__(
          "Shown wherever protected content has no message of its own: full page gates, the Restricted Content block, Elementor containers, the restriction shortcode, and Member Access rules. Leave it empty to use the built-in message.",
          "arraysubs",
        )}
      </p>

      {loading ? (
        <Skeleton height={220} />
      ) : loadFailed ? (
        <SpinnerButton type="button" onClick={loadSettings} loading={loading}>
          {__("Retry Loading", "arraysubs")}
        </SpinnerButton>
      ) : (
        <RichTextField
          standalone
          translatable
          label={__("Message", "arraysubs")}
          value={message}
          onChange={setMessage}
          height={220}
          toolbar="bold italic | bullist numlist | link unlink | removeformat"
        />
      )}

      <div className="arraysubs-content-gate__message-actions">
        <SpinnerButton
          type="button"
          className="button button-primary"
          loading={saving}
          loadingText={__("Saving…", "arraysubs")}
          disabled={loading || loadFailed}
          onClick={saveMessage}
        >
          {__("Save Default Message", "arraysubs")}
        </SpinnerButton>
        <span className="arraysubs-content-gate__message-hint">
          {__("A custom message on a gate or rule overrides this one.", "arraysubs")}
        </span>
      </div>
      <ToastContainer toasts={toasts} removeToast={removeToast} />
    </section>
  );
};

export default DefaultMessageSettings;