import React from "react";
import { __ } from "@wordpress/i18n";
import { ArrowUpRight, ExternalLink } from "lucide-react";
import { buildUrl } from "@libs/url";

export default function VariableProductGuide() {
  const adminUrl = window.arraySubs?.env?.wpAdminUrl || `${window.location.origin}/wp-admin/`;
  const steps = [
    {
      title: (
        <>
          {__("Open", "arraysubs")}{" "}
          <a
            className="arraysubs-quick-product__guide-link"
            href={buildUrl(`${adminUrl}post-new.php`, { post_type: "product" })}
            target="_blank"
            rel="noopener noreferrer"
          >
            {__("Add new product", "arraysubs")}
            <ArrowUpRight size={17} aria-hidden="true" />
            <span className="screen-reader-text">{__("(opens in a new tab)", "arraysubs")}</span>
          </a>
        </>
      ),
      description: __("Open the product editor in a new tab. Enter a product name and keep this guide open as you work.", "arraysubs"),
    },
    {
      title: __("Select Variable product", "arraysubs"),
      description: __("In Product data, choose Variable product from the product type dropdown.", "arraysubs"),
    },
    {
      title: __("Check Subscription [AS]", "arraysubs"),
      description: __("Enable the Subscription [AS] checkbox next to the product type. This turns on subscriptions for all variations.", "arraysubs"),
    },
    {
      title: __("Add your Attributes", "arraysubs"),
      description: __("Open Attributes and add your options, such as Plan with Monthly and Annual values. Check Used for variations, then save the attributes.", "arraysubs"),
    },
    {
      title: __("Create your Variations", "arraysubs"),
      description: __("Open Variations and generate variations from your attributes, or add them manually.", "arraysubs"),
    },
    {
      title: __("Configure recurring billing for each variation", "arraysubs"),
      description: __("Expand each variation and enter its regular price. Scroll down within that variation to set its billing period, interval, and subscription length. Add a trial, signup fee, or different renewal price if needed.", "arraysubs"),
    },
    {
      title: __("Save and publish", "arraysubs"),
      description: __("Click Save changes in Variations, then Publish the product (or Update an existing product).", "arraysubs"),
    },
  ];

  return (
    <div className="arraysubs-quick-product__guide">
      <p className="arraysubs-quick-product__guide-intro">
        {__("Set up your variations in the WooCommerce product editor. Each variation can have its own price and billing schedule.", "arraysubs")}
      </p>
      <ol className="arraysubs-quick-product__guide-steps" role="list">
        {steps.map(({ title, description }, index) => (
          <li key={index}>
            <span className="arraysubs-quick-product__guide-number" aria-hidden="true">{index + 1}</span>
            <div>
              <h3>{title}</h3>
              <p>{description}</p>
            </div>
          </li>
        ))}
      </ol>
      <a
        className="arraysubs-quick-product__guide-link"
        href="https://support.arrayhash.com/arraysubs/subscription-products/create-and-configure.html#variable-subscription-products"
        target="_blank"
        rel="noopener noreferrer"
      >
        {__("See the detailed variable subscription guide", "arraysubs")}
        <span className="screen-reader-text">{__("(opens in a new tab)", "arraysubs")}</span>
        <ExternalLink size={15} aria-hidden="true" />
      </a>
    </div>
  );
}