import React, { useEffect, useState } from "react";
import { __ } from "@wordpress/i18n";
import { Info, MessageSquare } from "lucide-react";
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";

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"
      className="arraysubs-content-gate-guide__section arraysubs-content-gate-guide__default-message"
      aria-labelledby="arraysubs-default-message-title"
    >
      <div className="arraysubs-content-gate-guide__section-header">
        <div className="arraysubs-content-gate-guide__section-icon">
          <MessageSquare size={22} />
        </div>
        <div>
          <span>{__("Shared restriction message", "arraysubs")}</span>
          <h4 id="arraysubs-default-message-title">{__("Default Message", "arraysubs")}</h4>
          <p>{__("Choose what visitors see when protected content is unavailable to them.", "arraysubs")}</p>
        </div>
      </div>

      <div className="arraysubs-alert arraysubs-alert-info arraysubs-alert-with-icon" role="note">
        <span className="arraysubs-alert-icon"><Info size={20} /></span>
        <div className="arraysubs-alert-content">
          <div className="arraysubs-alert-message">{__("Custom messages take priority", "arraysubs")}</div>
          <div className="arraysubs-alert-description">
            {__("This is the default for full-page restrictions, Gutenberg, Elementor, restriction shortcodes, and Member Access content, URL and comment rules, including login-only restrictions. A custom message on a gate or rule overrides it. Basic formatting and links are supported. Leave this editor empty to use the built-in message.", "arraysubs")}
          </div>
        </div>
      </div>

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

      <div className="arraysubs-content-gate-guide__message-actions">
        <SpinnerButton
          type="button"
          className="button button-primary"
          loading={saving}
          loadingText={__("Saving…", "arraysubs")}
          disabled={loading || loadFailed}
          onClick={saveMessage}
        >
          {__("Save Default Message", "arraysubs")}
        </SpinnerButton>
      </div>
      <ToastContainer toasts={toasts} removeToast={removeToast} />
    </section>
  );
};

export default DefaultMessageSettings;