"use client";
/**
 * ShopClient — pick a plan, see what it costs, pay.
 *
 * Selecting a card used to navigate straight to /checkout, so the shopper was
 * handed to Stripe without ever seeing the total they were about to be charged.
 * The order summary is that missing beat: name, price, what is included, total.
 *
 * On a wide screen the summary is a sticky column and is always in view. On a
 * phone it is stacked underneath the plans, which is where the real defect was:
 * tapping a card changed something the customer could not see, so the tap read
 * as dead. `scrollSummaryIntoView` answers the tap by bringing the summary —
 * and the pay button in it — on screen.
 */

import { useCallback, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { PlanCard } from "@/components/landing/PlanCard";
import { conversionEvents } from "@/lib/conversion-events";
import { formatDataAllowance, formatPrice, formatValidity } from "@/vendor/geo";
import type { SkuTemplate } from "@/vendor/carrier/types";

/** Above this width the summary is a sticky column and never leaves the fold. */
const WIDE_VIEWPORT = "(min-width: 1024px)";

function prefersReducedMotion(): boolean {
  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}

function isWideViewport(): boolean {
  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
  return window.matchMedia(WIDE_VIEWPORT).matches;
}

export function ShopClient({ plans }: { plans: SkuTemplate[] }) {
  const router = useRouter();
  const [selected, setSelected] = useState<SkuTemplate | null>(null);
  const summaryRef = useRef<HTMLElement | null>(null);

  /**
   * Bring the summary on screen after a selection, on narrow viewports only.
   *
   * `scrollIntoView` is missing in some engines and in jsdom, so the call is
   * optional-chained: a browser that cannot scroll must still select the plan.
   */
  const scrollSummaryIntoView = useCallback(() => {
    if (isWideViewport()) return;
    requestAnimationFrame(() => {
      summaryRef.current?.scrollIntoView?.({
        behavior: prefersReducedMotion() ? "auto" : "smooth",
        block: "start",
      });
    });
  }, []);

  function handleSelect(plan: SkuTemplate) {
    conversionEvents.selectPlan(plan.name);
    setSelected(plan);
    scrollSummaryIntoView();
  }

  function handleContinue() {
    if (!selected) return;
    router.push(`/checkout/${selected.id}`);
  }

  const total = selected ? formatPrice(selected.price_cents, selected.currency) : null;

  return (
    <div className="mx-auto max-w-6xl px-4 py-16">
      <h1 className="text-4xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
        Choose your plan
      </h1>
      <p className="mt-2 mb-12 text-sand-600 dark:text-sand-400">
        Instant activation. No contracts. Price next to the limit.
      </p>

      <div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-[minmax(0,1fr)_320px]">
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
          {plans.map((plan, i) => (
            <PlanCard
              key={plan.id}
              plan={plan}
              featured={i === 1}
              selected={selected?.id === plan.id}
              onSelect={handleSelect}
            />
          ))}
        </div>

        <section
          ref={summaryRef}
          aria-label="Order summary"
          aria-live="polite"
          className="scroll-mt-24 rounded-2xl border border-sand-200 bg-white p-6 lg:sticky lg:top-24 dark:border-sand-800 dark:bg-sand-900"
        >
          <p className="text-xs font-semibold tracking-widest text-sand-500 uppercase">
            Your order
          </p>
          <h2 className="mt-3 text-xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
            {selected?.name ?? "Pick a plan"}
          </h2>
          <p className="mt-1 text-sm text-sand-500">
            {selected
              ? `${formatDataAllowance(selected.dataGb)} · ${formatValidity(selected.validityDays)}`
              : "Choose a plan on the left and the total appears here."}
          </p>

          <dl className="my-5 grid gap-3 border-y border-sand-200 py-5 text-sm dark:border-sand-800">
            <div className="flex items-baseline justify-between gap-3">
              <dt className="text-sand-500">Plan</dt>
              <dd className="font-mono tabular-nums text-sand-900 dark:text-sand-50">
                {total ?? "—"}
              </dd>
            </div>
            <div className="flex items-baseline justify-between gap-3">
              <dt className="text-sand-500">eSIM activation</dt>
              <dd className="font-mono tabular-nums text-leaf-600">Free</dd>
            </div>
            <div className="flex items-baseline justify-between gap-3">
              <dt className="text-sand-500">Tax</dt>
              <dd className="font-mono tabular-nums text-sand-900 dark:text-sand-50">Included</dd>
            </div>
          </dl>

          <div className="flex items-baseline justify-between gap-3">
            <span className="text-sm font-semibold text-sand-900 dark:text-sand-50">
              Total today
            </span>
            <span className="font-mono text-2xl font-medium tabular-nums tracking-tight text-sand-900 dark:text-sand-50">
              {total ?? "—"}
            </span>
          </div>

          <button
            type="button"
            onClick={handleContinue}
            disabled={!selected}
            className="mt-6 w-full rounded-full px-6 py-3 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
            style={{ background: "var(--brand-accent)" }}
          >
            {selected ? "Continue to payment" : "Select a plan first"}
          </button>
          <p className="mt-3 text-xs leading-relaxed text-sand-400">
            Your QR code is ready the moment the payment clears. Install it before you fly.
          </p>
        </section>
      </div>
    </div>
  );
}