import { __ } from "@wordpress/i18n";
import {
  Activity,
  ArrowRight,
  ArrowUpRight,
  BadgeCheck,
  Blocks,
  CalendarClock,
  Check,
  CircleCheck,
  Clock,
  Coins,
  CreditCard,
  HeartHandshake,
  Landmark,
  LayoutGrid,
  Lock,
  RefreshCw,
  RotateCw,
  Route,
  ShieldCheck,
  SlidersHorizontal,
  Sparkles,
  TrendingUp,
  Truck,
  UserCog,
  Wallet,
  X,
  Zap,
} from "lucide-react";
import DefaultPageLayout from "@/components/DefaultPageLayout";

/**
 * You May Need
 *
 * A conversion-focused mini landing page for ArraySubs Pro, shown in the
 * free plugin only (the whole page is hidden when Pro is active). Uses the
 * WP-native admin palette and the plugin's default border radius.
 */

// Primary CTA → the ArraySubs product landing page.
const TRIAL_URL = "https://arrayhash.com/deals/arraysubs/";

// Secondary CTA → the full public features page.
const FEATURES_URL = "https://arrayhash.com/deals/arraysubs/features/";

// Illustrative activity feed for the hero mock panel.
const PANEL_ROWS = [
  {
    tone: "success",
    icon: CircleCheck,
    text: __("Renewal charged automatically — Stripe", "arraysubs"),
    meta: __("2 min ago", "arraysubs"),
  },
  {
    tone: "retry",
    icon: RotateCw,
    text: __("Card declined — retry 2 of 4 scheduled", "arraysubs"),
    meta: __("tomorrow, 9:00 AM", "arraysubs"),
  },
  {
    tone: "success",
    icon: CircleCheck,
    text: __("Payment recovered on retry — subscription active", "arraysubs"),
    meta: __("1 hour ago", "arraysubs"),
  },
  {
    tone: "info",
    icon: ShieldCheck,
    text: __("Renewal failed 4× — auto-downgraded, member kept", "arraysubs"),
    meta: __("yesterday", "arraysubs"),
  },
];

const HERO_HIGHLIGHTS = [
  __("Stripe, PayPal & Paddle on autopilot", "arraysubs"),
  __("Declined cards retried, not cancelled", "arraysubs"),
  __("Your existing products & data, untouched", "arraysubs"),
];

const STATS = [
  { value: "15", label: __("Pro modules", "arraysubs") },
  { value: "3", label: __("automatic payment gateways", "arraysubs") },
  { value: __("10-day", "arraysubs"), label: __("free trial, no credit card", "arraysubs") },
  { value: __("30-day", "arraysubs"), label: __("refund guarantee", "arraysubs") },
];

const WITHOUT_PRO = [
  __("Renewals wait for the customer to come back and pay manually", "arraysubs"),
  __("A declined card silently turns into a cancellation", "arraysubs"),
  __("Refunds hand cash back and end the relationship", "arraysubs"),
  __("Gateway hiccups surface as angry support emails", "arraysubs"),
  __("One paid login gets shared around the office", "arraysubs"),
];

const WITH_PRO = [
  __("Stripe, PayPal & Paddle charge cards on schedule — SCA and webhooks included", "arraysubs"),
  __("Failed payments enter a retry schedule with automatic customer notices", "arraysubs"),
  __("Stubborn failures auto-downgrade to a smaller plan instead of churning", "arraysubs"),
  __("Refund to store credit, and the money comes back as the next order", "arraysubs"),
  __("Session limits keep each subscription with its actual owner", "arraysubs"),
];

const PILLARS = [
  {
    icon: CreditCard,
    title: __("Get paid on autopilot", "arraysubs"),
    promise: __(
      "Renewal day becomes a non-event: cards charged on schedule, receipts sent, nobody chased.",
      "arraysubs",
    ),
    features: [
      {
        icon: CreditCard,
        name: __("First-Class Stripe", "arraysubs"),
        desc: __("saved cards, SCA, webhooks, card-expiry handling", "arraysubs"),
      },
      {
        icon: Wallet,
        name: __("PayPal Payments", "arraysubs"),
        desc: __("subscription agreements with automatic renewals and refunds", "arraysubs"),
      },
      {
        icon: Landmark,
        name: __("Paddle Payments", "arraysubs"),
        desc: __("hosted checkout with native tax & VAT handling", "arraysubs"),
      },
    ],
  },
  {
    icon: RefreshCw,
    title: __("Recover what fails", "arraysubs"),
    promise: __(
      "A declined card starts a recovery plan — not a cancellation email.",
      "arraysubs",
    ),
    features: [
      {
        icon: RotateCw,
        name: __("Auto-Retry Failed Payments", "arraysubs"),
        desc: __("smart retry schedule with customer notices and tracking", "arraysubs"),
      },
      {
        icon: ShieldCheck,
        name: __("Auto-Downgrade on Failure", "arraysubs"),
        desc: __("move stubborn failures to a smaller plan, keep the member", "arraysubs"),
      },
      {
        icon: Activity,
        name: __("Gateway Health", "arraysubs"),
        desc: __("watch connections, webhooks, and events before customers notice", "arraysubs"),
      },
    ],
  },
  {
    icon: Blocks,
    title: __("Sell it your way", "arraysubs"),
    promise: __(
      "Shape checkout, entitlements, and enrollment around your model — not the other way around.",
      "arraysubs",
    ),
    features: [
      {
        icon: Blocks,
        name: __("Checkout Page Builder", "arraysubs"),
        desc: __("drag-and-drop, multi-step, conditional fields", "arraysubs"),
      },
      {
        icon: CalendarClock,
        name: __("Fixed-Date Subscriptions", "arraysubs"),
        desc: __("enrollment windows and season-end renewals", "arraysubs"),
      },
      {
        icon: Truck,
        name: __("Subscription Shipping", "arraysubs"),
        desc: __("charge shipping once, or on every renewal", "arraysubs"),
      },
      {
        icon: LayoutGrid,
        name: __("Feature Manager", "arraysubs"),
        desc: __("entitlements and limits customers can actually see", "arraysubs"),
      },
      {
        icon: Route,
        name: __("Product Page Redirection", "arraysubs"),
        desc: __("send product pages to your real sales page", "arraysubs"),
      },
    ],
  },
  {
    icon: HeartHandshake,
    title: __("Keep members close", "arraysubs"),
    promise: __(
      "Give members reasons to stay — and give yourself answers in one click.",
      "arraysubs",
    ),
    features: [
      {
        icon: Coins,
        name: __("Store Credit", "arraysubs"),
        desc: __("wallets, expirations, refund-to-credit", "arraysubs"),
      },
      {
        icon: UserCog,
        name: __("Member Insight", "arraysubs"),
        desc: __("a customer's whole story on one screen", "arraysubs"),
      },
      {
        icon: SlidersHorizontal,
        name: __("Feature-Based Conditions", "arraysubs"),
        desc: __("unlock content by plan entitlements", "arraysubs"),
      },
      {
        icon: Lock,
        name: __("Multi-Login Prevention", "arraysubs"),
        desc: __("concurrent session limits per plan", "arraysubs"),
      },
    ],
  },
];

const STEPS = [
  {
    title: __("Start your trial", "arraysubs"),
    text: __(
      "Ten days of full Pro. No credit card, no sales call — just your store with the good parts switched on.",
      "arraysubs",
    ),
  },
  {
    title: __("Flip on autopilot", "arraysubs"),
    text: __(
      "Connect Stripe, PayPal, or Paddle and watch the renewal queue start clearing itself.",
      "arraysubs",
    ),
  },
  {
    title: __("Make this page disappear", "arraysubs"),
    text: __(
      "To remove this page and get tons of awesome features, please activate ArraySubs Pro.",
      "arraysubs",
    ),
    highlight: true,
  },
];

const BANNER_CHIPS = [
  { icon: Clock, label: __("10-day free trial", "arraysubs") },
  { icon: Check, label: __("No credit card required", "arraysubs") },
  { icon: BadgeCheck, label: __("30-day refund guarantee", "arraysubs") },
];

const TrialButton = ({ variant = "solid" }) => (
  <a
    className={`arraysubs-ymn__cta arraysubs-ymn__cta--${variant}`}
    href={TRIAL_URL}
    target="_blank"
    rel="noopener noreferrer"
  >
    {__("Get Trial Offer", "arraysubs")}
    <ArrowRight aria-hidden="true" />
  </a>
);

const FeaturesButton = ({ variant = "outline" }) => (
  <a
    className={`arraysubs-ymn__cta arraysubs-ymn__cta--${variant}`}
    href={FEATURES_URL}
    target="_blank"
    rel="noopener noreferrer"
  >
    {__("Explore all features", "arraysubs")}
    <ArrowUpRight aria-hidden="true" />
  </a>
);

const SectionHead = ({ eyebrow, title, subtitle }) => (
  <div className="arraysubs-ymn__section-head">
    <span className="arraysubs-ymn__section-eyebrow">{eyebrow}</span>
    <h3 className="arraysubs-ymn__section-title">{title}</h3>
    {subtitle && <p className="arraysubs-ymn__section-subtitle">{subtitle}</p>}
  </div>
);

const YouMayNeed = () => {
  return (
    <DefaultPageLayout title={__("You may need", "arraysubs")}>
      <section
        className="arraysubs-ymn"
        aria-label={__("Upgrade to ArraySubs Pro", "arraysubs")}
      >
        {/* ---- Hero: pitch + autopilot mock panel --------------------- */}
        <header className="arraysubs-ymn__hero">
          <div className="arraysubs-ymn__hero-copy">
            <span className="arraysubs-ymn__eyebrow">
              <Sparkles aria-hidden="true" />
              {__("ArraySubs Pro", "arraysubs")}
            </span>
            <h2 className="arraysubs-ymn__hero-title">
              {__("Stop chasing renewals. Start collecting them.", "arraysubs")}
            </h2>
            <p className="arraysubs-ymn__hero-subtitle">
              {__(
                "Every renewal in the free core waits for a customer to come back and pay. Pro charges the card on schedule, retries the failures, rescues the cancellations — and hands you the report.",
                "arraysubs",
              )}
            </p>
            <ul className="arraysubs-ymn__highlights">
              {HERO_HIGHLIGHTS.map((highlight) => (
                <li key={highlight} className="arraysubs-ymn__highlight">
                  <Check aria-hidden="true" />
                  {highlight}
                </li>
              ))}
            </ul>
            <div className="arraysubs-ymn__hero-actions">
              <TrialButton />
              <FeaturesButton />
            </div>
            <span className="arraysubs-ymn__microcopy">
              {__("10-day free trial · No credit card required", "arraysubs")}
            </span>
          </div>

          <aside className="arraysubs-ymn__panel-wrap" aria-hidden="true">
            <div className="arraysubs-ymn__panel">
              <div className="arraysubs-ymn__panel-head">
                <span className="arraysubs-ymn__panel-title">
                  {__("Renewals — this week", "arraysubs")}
                </span>
                <span className="arraysubs-ymn__panel-pill">
                  <Zap />
                  {__("Autopilot on", "arraysubs")}
                </span>
              </div>
              <ul className="arraysubs-ymn__panel-rows">
                {PANEL_ROWS.map(({ tone, icon: Icon, text, meta }) => (
                  <li
                    key={text}
                    className={`arraysubs-ymn__panel-row arraysubs-ymn__panel-row--${tone}`}
                  >
                    <Icon />
                    <span className="arraysubs-ymn__panel-text">{text}</span>
                    <span className="arraysubs-ymn__panel-meta">{meta}</span>
                  </li>
                ))}
              </ul>
              <div className="arraysubs-ymn__panel-foot">
                <TrendingUp />
                {__("12 renewals recovered this month", "arraysubs")}
              </div>
            </div>
            <p className="arraysubs-ymn__panel-caption">
              {__("Pro, handling a Tuesday morning by itself.", "arraysubs")}
            </p>
          </aside>
        </header>

        {/* ---- Stat strip --------------------------------------------- */}
        <ul className="arraysubs-ymn__stats">
          {STATS.map(({ value, label }) => (
            <li key={label} className="arraysubs-ymn__stat">
              <span className="arraysubs-ymn__stat-value">{value}</span>
              <span className="arraysubs-ymn__stat-label">{label}</span>
            </li>
          ))}
        </ul>

        {/* ---- Manual vs Pro comparison ------------------------------- */}
        <SectionHead
          eyebrow={__("The gap", "arraysubs")}
          title={__("What “manual” is quietly costing you", "arraysubs")}
          subtitle={__(
            "The free core runs a real subscription business. But every payment it collects depends on a human doing something.",
            "arraysubs",
          )}
        />
        <div className="arraysubs-ymn__compare">
          <div className="arraysubs-ymn__compare-card arraysubs-ymn__compare-card--without">
            <span className="arraysubs-ymn__compare-kicker">
              {__("Without Pro", "arraysubs")}
            </span>
            <ul className="arraysubs-ymn__compare-list">
              {WITHOUT_PRO.map((item) => (
                <li key={item}>
                  <X aria-hidden="true" />
                  {item}
                </li>
              ))}
            </ul>
          </div>
          <div className="arraysubs-ymn__compare-card arraysubs-ymn__compare-card--with">
            <span className="arraysubs-ymn__compare-kicker">
              {__("With Pro", "arraysubs")}
            </span>
            <ul className="arraysubs-ymn__compare-list">
              {WITH_PRO.map((item) => (
                <li key={item}>
                  <Check aria-hidden="true" />
                  {item}
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* ---- Outcome pillars ---------------------------------------- */}
        <SectionHead
          eyebrow={__("What you unlock", "arraysubs")}
          title={__("Fifteen modules. Four jobs.", "arraysubs")}
          subtitle={__(
            "Every Pro module exists to protect one thing: your recurring revenue.",
            "arraysubs",
          )}
        />
        <div className="arraysubs-ymn__pillars">
          {PILLARS.map(({ icon: Icon, title, promise, features }) => (
            <article key={title} className="arraysubs-ymn__pillar">
              <div className="arraysubs-ymn__pillar-head">
                <span className="arraysubs-ymn__pillar-icon" aria-hidden="true">
                  <Icon />
                </span>
                <div>
                  <h4 className="arraysubs-ymn__pillar-title">{title}</h4>
                  <p className="arraysubs-ymn__pillar-promise">{promise}</p>
                </div>
              </div>
              <ul className="arraysubs-ymn__pillar-features">
                {features.map(({ icon: FIcon, name, desc }) => (
                  <li key={name} className="arraysubs-ymn__pillar-feature">
                    <FIcon aria-hidden="true" />
                    <span>
                      <strong>{name}</strong> — {desc}
                    </span>
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>

        {/* ---- How the trial works ------------------------------------ */}
        <SectionHead
          eyebrow={__("How the trial works", "arraysubs")}
          title={__("Three steps, ten days, zero risk", "arraysubs")}
        />
        <div className="arraysubs-ymn__steps">
          {STEPS.map(({ title, text, highlight }, index) => (
            <article
              key={title}
              className={`arraysubs-ymn__step${
                highlight ? " arraysubs-ymn__step--highlight" : ""
              }`}
            >
              <span className="arraysubs-ymn__step-number" aria-hidden="true">
                {index + 1}
              </span>
              <h4 className="arraysubs-ymn__step-title">{title}</h4>
              <p className="arraysubs-ymn__step-text">{text}</p>
            </article>
          ))}
        </div>

        {/* ---- Closing CTA -------------------------------------------- */}
        <div className="arraysubs-ymn__banner">
          <div className="arraysubs-ymn__banner-copy">
            <h3 className="arraysubs-ymn__banner-title">
              {__("Every manual renewal is revenue on a timer.", "arraysubs")}
            </h3>
            <p className="arraysubs-ymn__banner-note">
              {__(
                "Start the trial today — if Pro doesn't earn its keep, the 30-day refund guarantee has your back.",
                "arraysubs",
              )}
            </p>
            <ul className="arraysubs-ymn__banner-chips">
              {BANNER_CHIPS.map(({ icon: Icon, label }) => (
                <li key={label} className="arraysubs-ymn__banner-chip">
                  <Icon aria-hidden="true" />
                  {label}
                </li>
              ))}
            </ul>
          </div>
          <div className="arraysubs-ymn__banner-actions">
            <TrialButton variant="light" />
            <FeaturesButton variant="ghost" />
          </div>
        </div>
      </section>
    </DefaultPageLayout>
  );
};

export default YouMayNeed;