/**
 * Login Limit Rules Tab
 *
 * Set conditional session limits per user based on subscription conditions.
 * Users matching these rules use the rule's session limit instead of the global default.
 *
 * @package ArraySubs
 */

import React, { useState, useEffect, useCallback } from "react";
import { __ } from "@wordpress/i18n";
import { buildUrl } from "@libs/url";
import { ToastContainer } from "@libs/toast";
import { useToast } from "@libs/toast/useToast";
import { Skeleton } from "@libs/skeleton";
import RestrictionRuleBuilder, {
  defaultConditionTypes,
} from "@/components/RestrictionRuleBuilder";

const LoginLimitRulesTab = () => {
  const { env } = window.arraySubs;
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [rules, setRules] = useState([]);
  const { toasts, showToast, removeToast } = useToast();

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

  const loadData = async () => {
    setLoading(true);
    try {
      const response = await fetch(
        buildUrl(`${env?.apiBaseUrl}arraysubs/v1/members-access/settings`, {}),
        { headers: { "X-WP-Nonce": env?.nonce } },
      );

      if (!response.ok) {
        throw new Error(__("Failed to load data", "arraysubs"));
      }

      const data = await response.json();
      setRules(data.data?.login_limit_rules || []);
    } catch (error) {
      showToast(__("Failed to load login limit rules", "arraysubs"), "error");
    } finally {
      setLoading(false);
    }
  };

  const saveRules = async () => {
    setSaving(true);
    try {
      const response = await fetch(
        buildUrl(`${env?.apiBaseUrl}arraysubs/v1/members-access/settings`, {}),
        {
          method: "POST",
          headers: {
            "X-WP-Nonce": env?.nonce,
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            login_limit_rules: rules,
          }),
        },
      );

      if (!response.ok) {
        throw new Error(__("Failed to save rules", "arraysubs"));
      }

      showToast(__("Rules saved successfully!", "arraysubs"), "success");
    } catch (error) {
      showToast(__("Failed to save rules", "arraysubs"), "error");
    } finally {
      setSaving(false);
    }
  };

  const getDefaultRule = useCallback(() => {
    return {
      enabled: true,
      name: __("New Login Limit Rule", "arraysubs"),
      conditions: { logic: "and", rules: [] },
      max_sessions: 3,
    };
  }, []);

  const renderActionFields = useCallback((rule, updateRule) => {
    return (
      <div className="arraysubs-rule-field">
        <label className="arraysubs-rule-field__label">
          {__("Max Allowed Sessions", "arraysubs")}
        </label>
        <input
          type="number"
          min="1"
          step="1"
          value={rule.max_sessions ?? 1}
          onChange={(e) => {
            const val = parseInt(e.target.value, 10);
            updateRule({ max_sessions: val >= 1 ? val : 1 });
          }}
          className="arraysubs-rule-field__input"
          style={{ maxWidth: "120px" }}
        />
        <p className="arraysubs-rule-field__help">
          {__(
            "The maximum number of concurrent login sessions allowed for users matching this rule. When exceeded, the oldest sessions are logged out.",
            "arraysubs",
          )}
        </p>
      </div>
    );
  }, []);

  if (loading) {
    return (
      <div className="arraysubs-members-access__tab-content">
        <Skeleton count={3} height={100} />
      </div>
    );
  }

  return (
    <div className="arraysubs-members-access__tab-content">
      <div className="arraysubs-members-access__section-header">
        <div className="arraysubs-members-access__section-info">
          <h3>{__("Login Limit Rules", "arraysubs")}</h3>
          <p>
            {__(
              "Set conditional session limits. Users matching these rules will use the rule's session limit instead of the global default. When multiple rules match, the highest limit applies.",
              "arraysubs",
            )}
          </p>
        </div>
      </div>

      <div className="arraysubs-members-access__info-box">
        <h4>{__("How Login Limit Rules Work", "arraysubs")}</h4>
        <ol>
          <li>
            {__(
              "Define who qualifies using the IF conditions — for example, customers with an active subscription to a premium plan, VIP members, or users with a specific role.",
              "arraysubs",
            )}
          </li>
          <li>
            {__(
              "Configure the THEN section — set the maximum number of concurrent sessions (devices) allowed for matching users.",
              "arraysubs",
            )}
          </li>
          <li>
            {__(
              "When a user logs in and exceeds the session limit, the oldest sessions are automatically destroyed. The new login always succeeds.",
              "arraysubs",
            )}
          </li>
          <li>
            {__(
              "If a user matches multiple rules, the highest session limit applies (most permissive wins).",
              "arraysubs",
            )}
          </li>
          <li>
            {__(
              "Users who don't match any rule fall back to the global default set in Toolkit → Multi-Login Prevention.",
              "arraysubs",
            )}
          </li>
        </ol>
        <p className="arraysubs-members-access__info-note">
          <strong>{__("Note:", "arraysubs")}</strong>{" "}
          {__(
            "This feature requires Multi-Login Prevention to be enabled in Toolkit settings. If disabled, no session enforcement occurs regardless of these rules.",
            "arraysubs",
          )}
        </p>
      </div>

      <RestrictionRuleBuilder
        rules={rules}
        onChange={setRules}
        ruleType="login_limit"
        conditionTypes={defaultConditionTypes}
        renderActionFields={renderActionFields}
        getDefaultRule={getDefaultRule}
        ruleLabel={__("Login Limit Rule", "arraysubs")}
      />

      <div className="arraysubs-members-access__actions arraysubs-bottom-fixed-actions">
        <div>
          <button
            type="button"
            className="button button-primary"
            onClick={saveRules}
            disabled={saving}
          >
            {saving
              ? __("Saving...", "arraysubs")
              : __("Save Rules", "arraysubs")}
          </button>
        </div>
      </div>

      <ToastContainer toasts={toasts} removeToast={removeToast} />
    </div>
  );
};

export default LoginLimitRulesTab;