/** Content gate guide section rendered on its dedicated Shortcodes page. */

import React from "react";
import { __ } from "@wordpress/i18n";
import { Link } from "react-router-dom";
import { BookOpen, Code2 } from "lucide-react";
import {
  CONTENT_GATE_GUIDE_ID,
  guideSections,
} from "./contentGateGuideData";
import {
  CONTENT_GATE_ROUTE,
  DEFAULT_MESSAGE_SECTION,
} from "./DefaultMessageHelp";

const panelId = (sectionId) => `${CONTENT_GATE_GUIDE_ID}-panel-${sectionId}`;

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 GuideScreenshot = ({ screenshot }) => (
  <figure
    className={`arraysubs-content-gate-guide__section-image${
      screenshot.compact
        ? " arraysubs-content-gate-guide__section-image--compact"
        : ""
    }`}
    style={
      screenshot.compact
        ? undefined
        : { maxWidth: screenshot.maxWidth || screenshot.width }
    }
  >
    <a href={screenshot.src} target="_blank" rel="noreferrer">
      <img
        src={screenshot.src}
        alt={screenshot.alt}
        width={screenshot.width}
        height={screenshot.height}
        loading="lazy"
      />
    </a>
    {screenshot.caption && <figcaption>{screenshot.caption}</figcaption>}
  </figure>
);

const GuidePanel = ({ section }) => {
  const Icon = section.icon;
  const supportScreenshots =
    section.screenshots?.filter(
      (screenshot) => screenshot.placement === "supports",
    ) || [];
  const bottomScreenshots =
    section.screenshots?.filter(
      (screenshot) => screenshot.placement !== "supports",
    ) || [];

  return (
    <div
      id={panelId(section.id)}
      className="arraysubs-content-gate-guide__panel"
      role="region"
      aria-labelledby={`${panelId(section.id)}-title`}
    >
      <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 id={`${panelId(section.id)}-title`}>{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>
          {supportScreenshots.map((screenshot) => (
            <GuideScreenshot key={screenshot.src} screenshot={screenshot} />
          ))}
        </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>

      {bottomScreenshots.map((screenshot) => (
        <GuideScreenshot key={screenshot.src} screenshot={screenshot} />
      ))}

      {section.examples ? (
        <div className="arraysubs-content-gate-guide__examples">
          <div className="arraysubs-content-gate-guide__examples-header">
            <h5>{section.examples.title}</h5>
            <p>{section.examples.description}</p>
          </div>
          <div
            className={`arraysubs-content-gate-guide__code-grid${
              section.examples.single
                ? " arraysubs-content-gate-guide__code-grid--single"
                : ""
            }`}
          >
            {section.examples.items.map((example) => (
              <CodeExample key={example.title} {...example} />
            ))}
          </div>
        </div>
      ) : null}
    </div>
  );
};

const ContentGateGuide = ({ sectionId = "shortcode" }) => {
  const activeSection =
    guideSections.find((section) => section.id === sectionId) ||
    guideSections[0];

  return (
    <section
      id={CONTENT_GATE_GUIDE_ID}
      className="arraysubs-content-gate-guide"
      aria-labelledby={`${CONTENT_GATE_GUIDE_ID}-title`}
    >
      <div className="arraysubs-content-gate-guide__header">
        <span
          className="arraysubs-content-gate-guide__header-icon"
          aria-hidden="true"
        >
          <BookOpen size={18} />
        </span>
        <div>
          <h3 id={`${CONTENT_GATE_GUIDE_ID}-title`}>
            {__("Content Gate Guide", "arraysubs")}
          </h3>
          <p>
            {__(
              "Five ways to protect content. All of them use the same access rules and the default restricted message.",
              "arraysubs",
            )}{" "}
            <Link
              to={`${CONTENT_GATE_ROUTE}?section=${DEFAULT_MESSAGE_SECTION}`}
            >
              {__("Edit the default message", "arraysubs")}
            </Link>
          </p>
        </div>
      </div>

      <GuidePanel key={activeSection.id} section={activeSection} />
    </section>
  );
};

export default ContentGateGuide;