import React, { useState } from "react";
import { __ } from "@wordpress/i18n";

/**
 * A calm, dismissible "Upgrade to Pro" card for the free admin sidebar.
 *
 * Pure presentational: it links to the B3 Software store URL supplied by
 * the localized payload and never blocks any free workflow. It honors the
 * no-nag-popups promise — once dismissed (persisted in localStorage) it collapses
 * to a single one-line link rather than disappearing entirely.
 *
 * This component is intentionally free-side only (it lives outside the
 * `extension/` tree and imports nothing premium). It is rendered by the free
 * admin App, which is not mounted in the Pro build, so Pro users never see it.
 */

const DISMISS_KEY = "b3wvs_pro_upgrade_card_dismissed_v1";
const PRO_FEATURES: readonly string[] = [
  __("Shop & archive page swatches", "b3-swatches"),
  __("AJAX add to cart + cart notices", "b3-swatches"),
  __("Variation share URLs & social sharing", "b3-swatches"),
  __("Custom typography & Google Fonts", "b3-swatches"),
];

export interface ProUpgradeCardProps {
  /** Canonical B3 Software store URL from the localized payload. */
  storeUrl?: string;
}

function readDismissed(): boolean {
  try {
    return window.localStorage.getItem(DISMISS_KEY) === "1";
  } catch {
    return false;
  }
}

export function ProUpgradeCard({
  storeUrl,
}: ProUpgradeCardProps): React.ReactElement {
  const [dismissed, setDismissed] = useState<boolean>(readDismissed);
  const href = storeUrl?.trim() || "";

  if (!href) {
    return <></>;
  }

  const handleDismiss = (): void => {
    try {
      window.localStorage.setItem(DISMISS_KEY, "1");
    } catch {
      // Storage may be unavailable (private mode); dismiss for this session only.
    }
    setDismissed(true);
  };

  if (dismissed) {
    return (
      <a
        href={href}
        className="bwvs:mt-4 bwvs:block bwvs:text-center bwvs:text-xs bwvs:font-medium bwvs:text-slate-500 bwvs:hover:text-slate-700"
      >
        {__("Upgrade to Pro", "b3-swatches")} <span aria-hidden="true">→</span>
      </a>
    );
  }

  return (
    <div className="bwvs:mt-4 bwvs:rounded-2xl bwvs:legacy-border bwvs:border-slate-200 bwvs:bg-white bwvs:p-4 bwvs:shadow-xs">
      <div className="bwvs:flex bwvs:items-start bwvs:justify-between">
        <h3 className="bwvs:text-sm bwvs:font-semibold bwvs:text-slate-900">
          {__("Upgrade to Pro", "b3-swatches")}
        </h3>
        <button
          type="button"
          onClick={handleDismiss}
          aria-label={__("Dismiss upgrade message", "b3-swatches")}
          className="bwvs:ml-2 bwvs:shrink-0 bwvs:rounded-sm bwvs:text-lg bwvs:leading-none bwvs:text-slate-400 bwvs:hover:text-slate-600"
        >
          &times;
        </button>
      </div>
      <p className="bwvs:mt-1 bwvs:text-xs bwvs:text-slate-500">
        {__("You're on the free version. Pro adds:", "b3-swatches")}
      </p>
      <ul className="bwvs:mt-2 bwvs:legacy-space-y-1">
        {PRO_FEATURES.map((feature) => (
          <li
            key={feature}
            className="bwvs:flex bwvs:items-start bwvs:gap-1.5 bwvs:text-xs bwvs:text-slate-600"
          >
            <svg
              className="bwvs:mt-0.5 bwvs:h-3 bwvs:w-3 bwvs:shrink-0"
              style={{ color: "var(--b3-wvs-admin-color)" }}
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2.5}
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M4.5 12.75l6 6 9-13.5"
              />
            </svg>
            <span>{feature}</span>
          </li>
        ))}
      </ul>
      <a
        href={href}
        className="bwvs:mt-3 bwvs:flex bwvs:items-center bwvs:justify-center bwvs:rounded-lg bwvs:px-3 bwvs:py-2 bwvs:text-xs bwvs:font-semibold bwvs:text-white bwvs:transition-opacity bwvs:hover:opacity-90"
        style={{ backgroundColor: "var(--b3-wvs-admin-color)" }}
      >
        {__("View Pro Plans", "b3-swatches")}
      </a>
    </div>
  );
}