import React from "react";

function makeAdminUrl(page, params = {}) {
  const url = new URL(window.location.href);
  url.search = "";
  url.searchParams.set("page", page);
  Object.entries(params).forEach(([key, value]) => {
    if (value == null || value === "") return;
    url.searchParams.set(key, String(value));
  });
  return `${url.pathname}${url.search}`;
}

export default function ProContextCard({
  eyebrow = "BookPoint Pro",
  title,
  description,
  bullets = [],
  proTab = "overview",
  primaryLabel = "Open Upgrade Screen",
  secondaryLabel = "View Pro Details",
}) {
  const admin = window.pointlybooking_ADMIN || {};
  const proActive = Boolean(admin.proActive);
  const proUrl = admin.proUrl || "https://wpbookpoint.com/";

  if (proActive) return null;

  const upgradeHref = makeAdminUrl("pointlybooking_pro", { pro_tab: proTab });

  return (
    <section
      className="bp-card bp-p-16"
      style={{
        marginBottom: 16,
        border: "1px solid rgba(15,23,42,.08)",
        background: "linear-gradient(135deg, rgba(15,23,42,.03), rgba(37,99,235,.06))",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", gap: 16, alignItems: "flex-start", flexWrap: "wrap" }}>
        <div style={{ minWidth: 0, flex: "1 1 360px" }}>
          <div className="bp-muted bp-text-xs" style={{ textTransform: "uppercase", letterSpacing: ".08em" }}>
            {eyebrow}
          </div>
          <div className="bp-section-title" style={{ margin: "6px 0 0" }}>
            {title}
          </div>
          <div className="bp-muted bp-text-sm" style={{ marginTop: 8, lineHeight: 1.6 }}>
            {description}
          </div>
          {bullets.length ? (
            <ul className="bp-muted bp-text-sm" style={{ margin: "12px 0 0", paddingLeft: 18, lineHeight: 1.7 }}>
              {bullets.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          ) : null}
        </div>

        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
          <a className="bp-btn bp-btn-primary" href={upgradeHref}>
            {primaryLabel}
          </a>
          <a className="bp-btn" href={proUrl} target="_blank" rel="noreferrer">
            {secondaryLabel}
          </a>
        </div>
      </div>
    </section>
  );
}