// topbar.jsx — three signature topbar variants for Get Call Home
// Hero element: shows remaining minutes + expiry. Adapts to balance state.

function fmtMins(seconds, fa = false) {
  const m = Math.floor(seconds / 60);
  const s = Math.floor(seconds % 60);
  const out = `${m}:${String(s).padStart(2, "0")}`;
  return fa ? toFa(out) : out;
}

// Variant 1 — Quiet chip. Status-bar feel. The default.
function TBChip({ seconds, days, state, onBuy, t, fa }) {
  const isEmpty = state === "empty";
  const cls = isEmpty ? "tb-chip empty" : state === "low" ? "tb-chip low" : "tb-chip";
  const minsText = isEmpty ? fa ? toFa("0:00") : "0:00" : fmtMins(seconds, fa);
  const expText = isEmpty ? t.expired : days === 1 ? t.day_left : t.days_left(fa ? toFa(days) : days);
  return (
    <div className={cls}>
      <span className="mins">{minsText} <span style={{ opacity: .55, fontWeight: 500, fontSize: 11 }}>{t.minutes}</span></span>
      <span className="dot"></span>
      <span className="exp">{expText}</span>
      <button className="add" onClick={onBuy} aria-label={t.buy_time}>+</button>
    </div>
  );
}

// Variant 2 — Bold pill. Minutes are the hero. Dark slab.
function TBPill({ seconds, days, state, onBuy, t, fa }) {
  const cls = state === "low" ? "tb-pill low" : state === "empty" ? "tb-pill empty" : "tb-pill";
  return (
    <div className={cls}>
      <div className="minsblock">
        <span className="label">{state === "empty" ? "—" : t.minutes.toUpperCase()}</span>
        <span className="mins">{state === "empty" ? "0:00" : fmtMins(seconds, fa)}</span>
      </div>
      <div className="sep"></div>
      <div className="exp">{state === "empty" ? t.expired : days === 1 ? t.day_left : t.days_left(fa ? toFa(days) : days)}</div>
      <button className="add" onClick={onBuy} aria-label={t.buy_time}><Ico name="plus" size={14} /></button>
    </div>);

}

// Variant 3 — Ring + stack. Shows expiry as a circular meter (week countdown).
function TBRing({ seconds, days, totalDays = 7, state, onBuy, t, fa }) {
  const r = 14;
  const c = 2 * Math.PI * r;
  const pct = Math.max(0, Math.min(1, days / totalDays));
  const cls = state === "low" || state === "empty" ? "tb-ring low" : "tb-ring";
  const mins = state === "empty" ? "0:00" : fmtMins(seconds, fa);
  return (
    <div className={cls}>
      <div className="ring">
        <svg viewBox="0 0 36 36">
          <circle className="track" cx="18" cy="18" r={r} />
          <circle className="meter" cx="18" cy="18" r={r}
          strokeDasharray={c}
          strokeDashoffset={c * (1 - pct)} />
        </svg>
      </div>
      <div className="stack">
        <span className="mins">{mins} <span style={{ fontWeight: 500, fontSize: 11, color: 'var(--ink-mute)' }}>{t.minutes}</span></span>
        <span className="exp">{state === "empty" ? t.expired : days === 1 ? t.day_left : t.days_left(fa ? toFa(days) : days)}</span>
      </div>
      <button className="add" onClick={onBuy} aria-label={t.buy_time}><Ico name="plus" size={14} /></button>
    </div>);

}

function TopBar({ variant, ...props }) {
  if (variant === "pill") return <TBPill {...props} />;
  if (variant === "ring") return <TBRing {...props} />;
  return <TBChip {...props} />;
}

window.TopBar = TopBar;
window.fmtMins = fmtMins;