// Shared PDP helpers — qty stepper, full pickup, add-to-cart bar, back link.
// Layout/content blocks live in per-mode PDP files (pdp-books.jsx, etc.)

function PDPBack({ onBack, lang, label }) {
  return (
    <button className="pdp-back" onClick={onBack} type="button">
      <span>←</span> {label || t(lang, "Til baka", "Back")}
    </button>
  );
}

function QtyStepper({ qty, setQty, min = 1, max = 99 }) {
  return (
    <div className="qty-stepper">
      <button onClick={() => setQty(Math.max(min, qty - 1))} disabled={qty <= min} aria-label="−">−</button>
      <input value={qty} onChange={(e) => {
        const v = parseInt(e.target.value, 10);
        if (!isNaN(v)) setQty(Math.max(min, Math.min(max, v)));
      }} />
      <button onClick={() => setQty(Math.min(max, qty + 1))} disabled={qty >= max} aria-label="+">+</button>
    </div>
  );
}

// Big pickup card (stores listed vertically with stock counts)
function PickupFull({ stock, lang, accent }) {
  const stores = window.PENNINN_DATA.stores;
  const inStock = stores.filter(s => (stock?.[s.id] ?? 0) > 0);
  const [reserved, setReserved] = React.useState(null);
  return (
    <div className="pdp-pickup">
      <div className="pdp-pickup-head">
        <span className="dot dot-green" />
        <strong>{t(lang, "Sækja í verslun", "Pick up in store")}</strong>
        <span className="pdp-pickup-count">
          {inStock.length}/{stores.length} {t(lang, "verslanir með birgðir", "stores in stock")}
        </span>
      </div>
      <ul className="pdp-pickup-list">
        {stores.map(s => {
          const qty = stock?.[s.id] ?? 0;
          const ok = qty > 0;
          const isReserved = reserved === s.id;
          return (
            <li key={s.id} className={ok ? "is-in" : "is-out"}>
              <span className="pdp-pickup-name">{s.name}</span>
              <span className="pdp-pickup-hours">{t(lang,"Opið","Open")} {s.hours}</span>
              {ok ? (
                <span className="pdp-pickup-stat ok">
                  <em>{qty}</em> {t(lang, "stk", "in stock")}
                  <span className="pdp-pickup-eta">· {t(lang,"Tilbúið í dag","Ready today")}</span>
                  {isReserved ? (
                    <span className="pdp-pickup-reserved">✓ {t(lang,"Frátekið 2 klst","Held 2 hrs")}</span>
                  ) : (
                    <button className="pdp-pickup-reserve" onClick={(e) => { e.preventDefault(); setReserved(s.id); }}>
                      {t(lang,"Frátaka","Reserve")}
                    </button>
                  )}
                </span>
              ) : (
                <span className="pdp-pickup-stat out">{t(lang,"Uppselt","Out of stock")}</span>
              )}
            </li>
          );
        })}
      </ul>
      {reserved && (
        <div className="pdp-pickup-reserve-banner">
          <span className="dot dot-green" />
          <strong>{t(lang,"Frátekið án greiðslu","Held without payment")}</strong>
          <span>{t(lang,
            "Vörunni er haldið hjá afgreiðsluborði í 2 klukkustundir undir nafninu þínu.",
            "Held at the service desk for 2 hours under your name.")}</span>
        </div>
      )}
      <div className="pdp-ship-row">
        <span><strong>{t(lang,"Senda heim","Home delivery")}</strong> · {t(lang,"1–2 virkir dagar","1–2 business days")} · 990 kr</span>
        <span className="pdp-ship-row-sep">·</span>
        <span>{t(lang,"Frítt yfir 15.000 kr","Free over 15,000 kr")}</span>
      </div>
    </div>
  );
}

// Tab strip
function Tabs({ tabs, active, setActive }) {
  return (
    <div className="pdp-tabs">
      {tabs.map(t => (
        <button
          key={t.id}
          className={"pdp-tab " + (active === t.id ? "is-on" : "")}
          onClick={() => setActive(t.id)}
          type="button"
        >
          {t.label}
          {t.count != null && <em>{t.count}</em>}
        </button>
      ))}
    </div>
  );
}

// Star rating row
function Stars({ rating = 0, max = 5 }) {
  return (
    <span className="stars" title={rating.toFixed(1) + " / " + max}>
      {[...Array(max)].map((_, i) => (
        <span key={i} className={i < Math.round(rating) ? "star is-on" : "star"}>★</span>
      ))}
    </span>
  );
}

Object.assign(window, { PDPBack, QtyStepper, PickupFull, Tabs, Stars });