/* global React, UmIcon, PSLabel */
/*  Reusable pricing-tier block.

    Usage:
      <PricingTiers tiers={[...]} serviceId="static-graphics" align="center" />

    Each tier shape:
      { id, nm, price, suffix, badge, featured?, list:[], unitNote?, originalPrice? }
*/

function PricingTiers({ tiers, serviceId, align = "center", showActions = true, compact = false }) {
  const R2 = (typeof window !== "undefined" && window.UM_ROOT) || "../../";
  if (!tiers || tiers.length === 0) return null;

  const orderHref = `${R2}pages/order.html${serviceId ? `?service=${serviceId}` : ""}`;
  const bookHref  = `${R2}pages/book-appointment.html${serviceId ? `?service=${serviceId}` : ""}`;

  return (
    <div className={`pt-wrap pt-cols-${tiers.length} ${compact ? "pt-compact" : ""}`}
         style={{ textAlign: align === "center" ? "left" : align }}>
      {tiers.map((t, i) => (
        <div key={t.id || i} className={"pt-card " + (t.featured ? "featured" : "")}>
          {t.badge && (
            <div className={"pt-badge " + (t.featured ? "popular" : "")}>
              {t.featured && <span className="dia">◆</span>} {t.badge}
            </div>
          )}
          <div className="pt-header">
            <div className="pt-nm">{t.nm}</div>
            {t.unitNote && <div className="pt-unit">{t.unitNote}</div>}
          </div>
          <div className="pt-price-row">
            {t.originalPrice && (
              <span className="pt-original">${formatPrice(t.originalPrice)}</span>
            )}
            <span className="pt-price">${formatPrice(t.price)}</span>
            <span className="pt-suffix">{t.suffix}</span>
          </div>
          <ul className="pt-list">
            {t.list.map((line, k) => (
              <li key={k}><span className="pt-check">✓</span>{line}</li>
            ))}
          </ul>
          {showActions && (
            <div className="pt-actions">
              <a className={t.featured ? "um-btn-primary" : "um-btn-ghost"}
                 href={`${orderHref}${orderHref.includes("?") ? "&" : "?"}tier=${t.id}`}>
                Order now {t.featured && <UmIcon name="ico-arrow-right" size={14}/>}
              </a>
              <a className="pt-text-link" href={bookHref}>
                or book a call <span className="arr">→</span>
              </a>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function formatPrice(p) {
  if (typeof p !== "number") return p;
  if (p >= 1000) return p.toLocaleString("en-US", { maximumFractionDigits: 2 });
  if (Number.isInteger(p)) return String(p);
  return p.toFixed(2);
}

/* Compact pricing summary band — used on service-page hero areas */
function PricingSummary({ tiers }) {
  if (!tiers || tiers.length === 0) return null;
  return (
    <div className="pt-summary">
      <span className="pt-summary-lbl">Starting from</span>
      <span className="pt-summary-price">${formatPrice(tiers[0].price)}</span>
      <span className="pt-summary-suffix">{tiers[0].suffix}</span>
      <span className="pt-summary-divider"></span>
      <span className="pt-summary-meta">
        {tiers.length} {tiers.length === 1 ? "plan" : "plans"} · transparent rates
      </span>
    </div>
  );
}

window.PricingTiers   = PricingTiers;
window.PricingSummary = PricingSummary;