import { __ } from "@wordpress/i18n";
import { Braces, Code, Lock, Sparkles } from "lucide-react";
import DefaultPageLayout from "@/components/DefaultPageLayout";

const shortcodeItems = Array.isArray(window.arraySubs?.shortcodes)
  ? window.arraySubs.shortcodes
  : [];

const badgeLabels = {
  free: __("Free", "arraysubs"),
  pro: __("Pro", "arraysubs"),
};

const badgeClassMap = {
  free: "arraysubs-shortcodes__badge arraysubs-shortcodes__badge--free",
  pro: "arraysubs-shortcodes__badge arraysubs-shortcodes__badge--pro",
};

const stats = {
  total: shortcodeItems.length,
  free: shortcodeItems.filter((item) => item?.availability !== "pro").length,
  pro: shortcodeItems.filter((item) => item?.availability === "pro").length,
};

const groupedShortcodes = shortcodeItems.reduce((groups, item) => {
  const groupName = item?.group || __("Other", "arraysubs");

  if (!groups[groupName]) {
    groups[groupName] = [];
  }

  groups[groupName].push(item);

  return groups;
}, {});

const sortedGroupEntries = Object.entries(groupedShortcodes).sort(
  ([left], [right]) => left.localeCompare(right),
);

const renderBadge = (availability) => {
  const label = badgeLabels[availability] || badgeLabels.free;
  const className = badgeClassMap[availability] || badgeClassMap.free;

  return <span className={className}>{label}</span>;
};

const Shortcodes = () => {
  return (
    <DefaultPageLayout
      title={__("Shortcodes", "arraysubs")}
      subtitle={__(
        "Browse every shortcode currently available across ArraySubs core and installed Pro features.",
        "arraysubs",
      )}
    >
      <section className="arraysubs-shortcodes">
        <div className="arraysubs-shortcodes__hero">
          <div className="arraysubs-shortcodes__hero-copy">
            <span className="arraysubs-shortcodes__eyebrow">
              <Sparkles size={16} />
              {__("Frontend shortcuts", "arraysubs")}
            </span>

            <h2 className="arraysubs-shortcodes__title">
              {__("All shortcode tools in one place", "arraysubs")}
            </h2>

            <p className="arraysubs-shortcodes__description">
              {__(
                "Use these shortcodes in posts, pages, builders, account areas, and other WordPress content where shortcodes are supported.",
                "arraysubs",
              )}
            </p>
          </div>

          <div
            className="arraysubs-shortcodes__stats"
            aria-label={__("Shortcode overview", "arraysubs")}
          >
            <div className="arraysubs-shortcodes__stat-card">
              <Code size={18} />
              <strong>{stats.total}</strong>
              <span>{__("Available", "arraysubs")}</span>
            </div>
            <div className="arraysubs-shortcodes__stat-card">
              <Braces size={18} />
              <strong>{stats.free}</strong>
              <span>{__("Free", "arraysubs")}</span>
            </div>
            <div className="arraysubs-shortcodes__stat-card">
              <Lock size={18} />
              <strong>{stats.pro}</strong>
              <span>{__("Pro", "arraysubs")}</span>
            </div>
          </div>
        </div>

        {shortcodeItems.length === 0 ? (
          <div className="arraysubs-shortcodes__empty">
            <h3>{__("No shortcodes available", "arraysubs")}</h3>
            <p>
              {__(
                "No shortcode providers are active right now. Enable the related feature modules to populate this list.",
                "arraysubs",
              )}
            </p>
          </div>
        ) : (
          sortedGroupEntries.map(([groupName, items]) => (
            <section key={groupName} className="arraysubs-shortcodes__group">
              <div className="arraysubs-shortcodes__group-header">
                <h3>{groupName}</h3>
                <span>
                  {items.length}{" "}
                  {items.length === 1
                    ? __("shortcode", "arraysubs")
                    : __("shortcodes", "arraysubs")}
                </span>
              </div>

              <div className="arraysubs-shortcodes__grid">
                {items.map((item) => (
                  <article
                    key={item.tag}
                    className="arraysubs-shortcodes__card"
                  >
                    <div className="arraysubs-shortcodes__card-top">
                      <div>
                        <div className="arraysubs-shortcodes__card-header">
                          <h4>{item.title}</h4>
                          {renderBadge(item.availability)}
                        </div>
                        <code className="arraysubs-shortcodes__tag">
                          [{item.tag}]
                        </code>
                      </div>
                    </div>

                    <p className="arraysubs-shortcodes__card-description">
                      {item.description}
                    </p>

                    {item.usage ? (
                      <div className="arraysubs-shortcodes__code-block">
                        <span>{__("Quick usage", "arraysubs")}</span>
                        <pre>{item.usage}</pre>
                      </div>
                    ) : null}

                    {Array.isArray(item.attributes) &&
                    item.attributes.length > 0 ? (
                      <div className="arraysubs-shortcodes__meta-section">
                        <h5>{__("Attributes", "arraysubs")}</h5>
                        <ul className="arraysubs-shortcodes__attribute-list">
                          {item.attributes.map((attribute) => (
                            <li key={`${item.tag}-${attribute.name}`}>
                              <code>{attribute.name}</code>
                              <span>{attribute.description}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                    ) : null}

                    {Array.isArray(item.examples) &&
                    item.examples.length > 0 ? (
                      <div className="arraysubs-shortcodes__meta-section">
                        <h5>{__("Examples", "arraysubs")}</h5>
                        <div className="arraysubs-shortcodes__examples">
                          {item.examples.map((example, index) => (
                            <pre key={`${item.tag}-example-${index}`}>
                              {example}
                            </pre>
                          ))}
                        </div>
                      </div>
                    ) : null}
                  </article>
                ))}
              </div>
            </section>
          ))
        )}
      </section>
    </DefaultPageLayout>
  );
};

export default Shortcodes;