// <mnw-price-mode>, the list/founder toggle on /pricing.
//
// The tier radios' `value` is what hx-include sends to /pricing/compare, so it
// is the price the server computes the visitor's outcome on. While the founder
// window is open the page renders founder prices into those values, and this
// element lets the visitor flip to list prices to see the post-window number.
//
// Both prices are already in the DOM as data-price-std / data-price-founder,
// so flipping is a local swap: no round trip for the prices themselves. The
// recompute is the calculator's existing one, re-fired by dispatching `change`
// on the checked tier radio, which is what hx-trigger already listens for.
//
// Inert on a page with no toggle (founder window shut), which is the whole of
// its no-JS story: the server has already rendered the correct default, so
// nothing here is load-bearing for correctness, only for the flip.

import { MnwElement, define } from './base.ts';
import { priceFor, formatMonthly, type PriceMode } from './price-mode.logic.ts';

class PriceModeToggle extends MnwElement {
  protected init(): void {
    const modeInputs = Array.from(
      this.querySelectorAll<HTMLInputElement>('input[name="price-mode"]'),
    );
    if (modeInputs.length === 0) return; // founder window shut: nothing to flip

    const tierInputs = Array.from(this.querySelectorAll<HTMLInputElement>('input[name="tier"]'));

    const apply = (mode: PriceMode): void => {
      for (const tier of tierInputs) {
        const price = priceFor(
          {
            std: tier.getAttribute('data-price-std'),
            founder: tier.getAttribute('data-price-founder'),
          },
          mode,
        );
        if (price === null) continue;
        tier.value = price;
        const display = tier.parentElement?.querySelector<HTMLElement>('[data-price-display]');
        if (display) display.textContent = formatMonthly(price);
      }

      // Re-run the calculator against the prices just written. hx-trigger on
      // #pricing-calculator listens for `change from:input[name='tier']`, so
      // this reuses the existing fetch rather than adding a second one.
      const checked = tierInputs.find((t) => t.checked);
      checked?.dispatchEvent(new Event('change', { bubbles: true }));
    };

    for (const input of modeInputs) {
      input.addEventListener('change', () => {
        if (input.checked) apply(input.value as PriceMode);
      });
    }
  }
}

define('mnw-price-mode', PriceModeToggle);