import { For, Show } from "solid-js";

export const PEACH_PRO_PURCHASE_URL =
  "https://buy.polar.sh/polar_cl_IXSFIPojx67rcOTksn8LkH5mnU3osPHtYqBIl1eyuIz";

const SYNC_FEATURES = [
  ["01", "Peach Sync", "Encrypted sync across every paired device"],
  ["02", "One-time purchase", "$39 once · yours forever"],
  ["03", "One shared key", "Pro transfers during authenticated pairing"],
] as const;

export interface PairingProRequiredProps {
  onRetry(): void;
  /** Existing vaults can open the full Peach Pro card in Settings. */
  onOpenPro?(): void;
}

/** Dedicated pairing fallback, visually derived from Settings → Peach Pro. */
export function PairingProRequired(props: PairingProRequiredProps) {
  return (
    <section class="peach-pair-pro-required" aria-labelledby="pair-pro-title">
      <p class="peach-pro-eyebrow">PEACH PRO · SYNC</p>
      <h2 id="pair-pro-title" class="peach-pro-headline">
        Pair freely.<br />Sync with <em>Pro.</em>
      </h2>
      <p class="peach-pro-subtitle">
        Pairing can start from any device, but at least one of these two
        devices needs a valid Peach Pro license before the pairing can finish.
        No vault or device record was added.
      </p>

      <div class="peach-pro-grid peach-pair-pro-grid">
        <For each={SYNC_FEATURES}>
          {([number, name, description]) => (
            <div class="peach-pro-grid-item peach-pro-grid-item--wide">
              <span class="peach-pro-grid-num">{number}</span>
              <span class="peach-pro-grid-name">{name}</span>
              <span class="peach-pro-grid-desc">{description}</span>
            </div>
          )}
        </For>
      </div>

      <div class="peach-pro-upgrade-actions">
        <Show
          when={props.onOpenPro}
          fallback={
            <a
              href={PEACH_PRO_PURCHASE_URL}
              target="_blank"
              rel="noopener noreferrer"
              class="peach-pro-upgrade-cta"
            >
              Get Peach Pro
            </a>
          }
        >
          <button
            type="button"
            class="peach-pro-upgrade-cta peach-pair-pro-button"
            onClick={() => props.onOpenPro?.()}
          >
            Open Peach Pro
          </button>
        </Show>
        <button
          type="button"
          class="peach-btn peach-btn--ghost peach-btn--md"
          onClick={props.onRetry}
        >
          Try another device
        </button>
      </div>
    </section>
  );
}