/**
 * Content Gate guide tab.
 *
 * @package ArraySubs
 */

import React from "react";
import { __ } from "@wordpress/i18n";
import {
  Blocks,
  Braces,
  CheckCircle2,
  Code2,
  FileCode2,
  LayoutTemplate,
  ShieldCheck,
} from "lucide-react";

const sectionGuides = [
  {
    id: "elementor",
    title: __("Elementor", "arraysubs"),
    eyebrow: __("Page builder", "arraysubs"),
    icon: LayoutTemplate,
    summary: __(
      "Gate an Elementor Container from the Advanced tab without writing code.",
      "arraysubs",
    ),
    supports: [
      __(
        "Works on Elementor Container layouts, including Flexbox and Grid containers.",
        "arraysubs",
      ),
      __(
        "Supports subscription status, active subscription products or variations, purchased products, user roles, lifetime spend, and plan feature checks.",
        "arraysubs",
      ),
      __(
        "Can show a restricted message, require login first, always show content to admins, or switch to simple logged-in/logged-out visibility.",
        "arraysubs",
      ),
    ],
    steps: [
      __(
        "Edit the page with Elementor and select the Container that wraps the content you want to protect.",
        "arraysubs",
      ),
      __(
        "Open Advanced, then find ArraySubs Content Restrictions.",
        "arraysubs",
      ),
      __(
        "Turn on Enable Restriction and choose Subscription / Role / Purchase for membership gating.",
        "arraysubs",
      ),
      __(
        "Pick the access rules that should grant entry, such as active status, a subscription product, a role, or a plan feature.",
        "arraysubs",
      ),
      __(
        "Set the denied message and save the Elementor page. The restriction is applied on the frontend when the container renders.",
        "arraysubs",
      ),
    ],
    note: __(
      "Elementor container gates are for partial page content. Redirect-on-denial is intentionally handled by shortcode or URL rules, not by page-builder containers.",
      "arraysubs",
    ),
  },
  {
    id: "gutenberg",
    title: __("Gutenberg", "arraysubs"),
    eyebrow: __("Block editor", "arraysubs"),
    icon: Blocks,
    summary: __(
      "Use the Restricted Content block to protect nested blocks in posts, pages, and block templates.",
      "arraysubs",
    ),
    supports: [
      __(
        "Protects any blocks placed inside the container while keeping the inner blocks editable in the editor.",
        "arraysubs",
      ),
      __(
        "Uses the same rule set as Elementor: status, products, variations, purchases, roles, lifetime spend, plan features, match logic, and denied messages.",
        "arraysubs",
      ),
      __(
        "Also supports logged-in or logged-out visibility with optional fallback content.",
        "arraysubs",
      ),
    ],
    steps: [
      __(
        "Open the post or page in the WordPress block editor.",
        "arraysubs",
      ),
      __(
        "Add the Restricted Content block.",
        "arraysubs",
      ),
      __(
        "Move the blocks you want to protect inside that container.",
        "arraysubs",
      ),
      __(
        "Use the block sidebar panel named ArraySubs Content Restrictions to enable the gate and configure access rules.",
        "arraysubs",
      ),
      __(
        "Preview as a logged-out visitor and as an eligible member to confirm both the denied message and the protected content.",
        "arraysubs",
      ),
    ],
    note: __(
      "The block does not hide content in the editor, so authors can still edit protected blocks. The frontend render applies the gate.",
      "arraysubs",
    ),
  },
  {
    id: "shortcode",
    title: __("Shortcode", "arraysubs"),
    eyebrow: __("Inline content", "arraysubs"),
    icon: Braces,
    summary: __(
      "Wrap content with [arraysubs_restrict] anywhere WordPress shortcodes are supported.",
      "arraysubs",
    ),
    supports: [
      __(
        "Useful inside classic editor content, builder text widgets, reusable blocks, template content, and PHP do_shortcode output.",
        "arraysubs",
      ),
      __(
        "Attributes include status, products, variations, purchased, lifetime_spent, feature, feature_min, feature_op, aggregation, roles, condition, message, redirect, login_required, and show_to_admins.",
        "arraysubs",
      ),
      __(
        "Use condition=\"and\" when every rule must match, or condition=\"or\" when any one rule can grant access.",
        "arraysubs",
      ),
    ],
    steps: [
      __(
        "Decide what qualifies the visitor: subscription status, product, variation, role, purchase history, lifetime spend, or plan feature.",
        "arraysubs",
      ),
      __(
        "Wrap the protected content in [arraysubs_restrict] and add only the attributes you need.",
        "arraysubs",
      ),
      __(
        "Add a message attribute when this specific block needs custom denied copy.",
        "arraysubs",
      ),
      __(
        "Use redirect only for full-page decisions. For inline content, prefer a denied message.",
        "arraysubs",
      ),
      __(
        "Test the shortcode as an admin, a logged-out visitor, and a customer who should pass the rules.",
        "arraysubs",
      ),
    ],
    note: __(
      "Admins see restricted shortcode content by default. Set show_to_admins=\"false\" when you need to test the customer-facing gate exactly.",
      "arraysubs",
    ),
  },
  {
    id: "programmatic",
    title: __("Programmatic", "arraysubs"),
    eyebrow: __("PHP templates", "arraysubs"),
    icon: FileCode2,
    summary: __(
      "Developers can gate custom PHP output with the shortcode contract or the Members Access helper functions.",
      "arraysubs",
    ),
    supports: [
      __(
        "Use do_shortcode when PHP should follow the same attributes used by editors and page builders.",
        "arraysubs",
      ),
      __(
        "Use arraysubs_user_meets_conditions() when a template needs a custom condition array before rendering markup.",
        "arraysubs",
      ),
      __(
        "Use arraysubs_current_user_can_access() and arraysubs_get_restricted_message() when checking a post that already has Members Access post rules.",
        "arraysubs",
      ),
    ],
    steps: [
      __(
        "Confirm the Members Access feature is enabled before gating custom output.",
        "arraysubs",
      ),
      __(
        "Choose do_shortcode for simple inline gates, or helper functions for custom template logic.",
        "arraysubs",
      ),
      __(
        "Build conditions with the same rule types used by the shortcode and rule builders.",
        "arraysubs",
      ),
      __(
        "Escape any fallback output and keep protected HTML out of the response unless the visitor passes.",
        "arraysubs",
      ),
      __(
        "Test the PHP path with logged-out, denied, and allowed users.",
        "arraysubs",
      ),
    ],
    note: __(
      "Programmatic gates run wherever your PHP runs, so keep template checks close to the output they protect.",
      "arraysubs",
    ),
  },
];

const shortcodeExamples = [
  {
    title: __("Active or trialing subscribers", "arraysubs"),
    code: `[arraysubs_restrict status="active,trial" message="Please subscribe to view this lesson."]
Premium lesson content.
[/arraysubs_restrict]`,
  },
  {
    title: __("Specific subscription products", "arraysubs"),
    code: `[arraysubs_restrict products="123,456" condition="or" message="This is available with selected plans."]
Plan-specific content.
[/arraysubs_restrict]`,
  },
  {
    title: __("Plan feature amount", "arraysubs"),
    code: `[arraysubs_restrict feature="seats" feature_min="5" aggregation="sum"]
Team plan content for customers with at least 5 seats.
[/arraysubs_restrict]`,
  },
];

const phpExamples = [
  {
    title: __("Use the shortcode contract in PHP", "arraysubs"),
    code: `<?php
$premium_html = '<section class="premium-resource">Premium resource content.</section>';

echo do_shortcode(
    '[arraysubs_restrict status="active,trial" message="Please subscribe to view this resource."]' .
    wp_kses_post($premium_html) .
    '[/arraysubs_restrict]'
);`,
  },
  {
    title: __("Use helper conditions before rendering", "arraysubs"),
    code: `<?php
if (!function_exists('arraysubs_user_meets_conditions')) {
    return;
}

$conditions = [
    'logic' => 'and',
    'rules' => [
        [
            'type' => 'subscription_status',
            'statuses' => ['active', 'trial'],
        ],
        [
            'type' => 'has_active_subscription',
            'product_ids' => [123],
        ],
    ],
];

if (is_user_logged_in() && arraysubs_user_meets_conditions(get_current_user_id(), $conditions)) {
    echo '<section class="premium-resource">Premium resource content.</section>';
} else {
    echo '<div class="arraysubs-restricted-content"><p>' .
        esc_html__('This content is restricted. Please subscribe to access.', 'arraysubs') .
        '</p></div>';
}`,
  },
  {
    title: __("Check access for the current post", "arraysubs"),
    code: `<?php
if (function_exists('arraysubs_current_user_can_access') && arraysubs_current_user_can_access(get_the_ID())) {
    the_content();
} elseif (function_exists('arraysubs_get_restricted_message')) {
    echo wp_kses_post(arraysubs_get_restricted_message(get_the_ID()));
}`,
  },
];

const quickChecklist = [
  __("Enable Members Access in ArraySubs settings.", "arraysubs"),
  __("Choose one authoring surface: Elementor, Gutenberg, shortcode, or PHP.", "arraysubs"),
  __("Start with one clear rule, then add more rules only when needed.", "arraysubs"),
  __("Write the denied message before publishing so users know what to do next.", "arraysubs"),
  __("Verify with a logged-out visitor, a denied customer, and an allowed member.", "arraysubs"),
];

const CodeExample = ({ title, code }) => (
  <div className="arraysubs-content-gate-guide__code-example">
    <div className="arraysubs-content-gate-guide__code-title">
      <Code2 size={16} />
      <span>{title}</span>
    </div>
    <pre>
      <code>{code}</code>
    </pre>
  </div>
);

const ContentGateTab = () => {
  return (
    <div className="arraysubs-members-access__tab-content arraysubs-content-gate-guide">
      <section className="arraysubs-content-gate-guide__hero">
        <div>
          <span className="arraysubs-content-gate-guide__eyebrow">
            <ShieldCheck size={16} />
            {__("Content gate guide", "arraysubs")}
          </span>
          <h3>{__("Protect the right content in the right place", "arraysubs")}</h3>
          <p>
            {__(
              "Use these guides to choose the best Members Access gate for page builders, shortcodes, and custom PHP templates.",
              "arraysubs",
            )}
          </p>
        </div>

        <ul className="arraysubs-content-gate-guide__checklist">
          {quickChecklist.map((item) => (
            <li key={item}>
              <CheckCircle2 size={16} />
              <span>{item}</span>
            </li>
          ))}
        </ul>
      </section>

      <nav
        className="arraysubs-content-gate-guide__jump-links"
        aria-label={__("Content gate sections", "arraysubs")}
      >
        {sectionGuides.map((section) => (
          <a key={section.id} href={`#arraysubs-content-gate-${section.id}`}>
            {section.title}
          </a>
        ))}
      </nav>

      <div className="arraysubs-content-gate-guide__sections">
        {sectionGuides.map((section) => {
          const Icon = section.icon;

          return (
            <section
              key={section.id}
              id={`arraysubs-content-gate-${section.id}`}
              className="arraysubs-content-gate-guide__section"
            >
              <div className="arraysubs-content-gate-guide__section-header">
                <div className="arraysubs-content-gate-guide__section-icon">
                  <Icon size={22} />
                </div>
                <div>
                  <span>{section.eyebrow}</span>
                  <h4>{section.title}</h4>
                  <p>{section.summary}</p>
                </div>
              </div>

              <div className="arraysubs-content-gate-guide__section-grid">
                <div>
                  <h5>{__("What it supports", "arraysubs")}</h5>
                  <ul className="arraysubs-content-gate-guide__support-list">
                    {section.supports.map((item) => (
                      <li key={item}>{item}</li>
                    ))}
                  </ul>
                </div>

                <div>
                  <h5>{__("Step-by-step", "arraysubs")}</h5>
                  <ol className="arraysubs-content-gate-guide__steps">
                    {section.steps.map((step, index) => (
                      <li key={step}>
                        <span>{index + 1}</span>
                        <p>{step}</p>
                      </li>
                    ))}
                  </ol>
                </div>
              </div>

              <p className="arraysubs-content-gate-guide__note">
                {section.note}
              </p>
            </section>
          );
        })}
      </div>

      <section className="arraysubs-content-gate-guide__examples">
        <div className="arraysubs-content-gate-guide__examples-header">
          <Braces size={18} />
          <div>
            <h4>{__("Shortcode examples", "arraysubs")}</h4>
            <p>
              {__(
                "Copy these patterns into shortcode-enabled content and replace IDs, feature names, and messages with your own values.",
                "arraysubs",
              )}
            </p>
          </div>
        </div>

        <div className="arraysubs-content-gate-guide__code-grid">
          {shortcodeExamples.map((example) => (
            <CodeExample key={example.title} {...example} />
          ))}
        </div>
      </section>

      <section className="arraysubs-content-gate-guide__examples">
        <div className="arraysubs-content-gate-guide__examples-header">
          <FileCode2 size={18} />
          <div>
            <h4>{__("Programmatic PHP examples", "arraysubs")}</h4>
            <p>
              {__(
                "Use these patterns in theme templates, plugin views, or custom integrations when content is generated in PHP.",
                "arraysubs",
              )}
            </p>
          </div>
        </div>

        <div className="arraysubs-content-gate-guide__code-grid arraysubs-content-gate-guide__code-grid--single">
          {phpExamples.map((example) => (
            <CodeExample key={example.title} {...example} />
          ))}
        </div>
      </section>
    </div>
  );
};

export default ContentGateTab;