// Phone layout only: the shelf along the top of the desk. It shows the date and a small dial,
// cycles the speed, and picks which single paper is on the desk (tray, briefing, news,
// calendar, and the ledger while a budget review is open).

import { t, dateParts } from "../i18n/i18n.js";
import { dateOfDay } from "../engine/index.js";
import { $, dialSvg, setDial } from "./desk.js";

const VIEWS = ["tray", "brief", "news", "clock"];

export function createShelf(root, bal, { getView, onView, onSpeed, onMenu }) {
  const speeds = [0, ...bal.time.speeds];
  root.innerHTML = `
    <div class="shelf__time">
      ${dialSvg("shelf__dial")}
      <div class="shelf__date"><b></b><span></span></div>
      <button class="brass shelf__speed" data-speed-cycle></button>
    </div>
    <div class="shelf__tabs" role="group" aria-label="${t("shelf.nav")}">
      ${VIEWS.map((v) => `<button class="shelf__tab" data-view="${v}"><span>${t("shelf." + v)}</span>${v === "tray" ? `<i class="shelf__badge" data-badge></i>` : ""}</button>`).join("")}
      <button class="shelf__tab shelf__tab--ledger" data-view="ledger" hidden><span>${t("shelf.ledger")}</span></button>
      <button class="shelf__tab shelf__tab--menu" data-menu><span>${t("shelf.menu")}</span></button>
    </div>`;

  const dial = $(root, ".shelf__dial");
  let speed = 0;

  root.addEventListener("click", (e) => {
    const b = e.target.closest("button");
    if (!b) return;
    if (b.dataset.menu !== undefined) onMenu();
    else if (b.dataset.speedCycle !== undefined) onSpeed(speeds[(speeds.indexOf(speed) + 1) % speeds.length]);
    else if (b.dataset.view) onView(b.dataset.view);
  });

  function update(state) {
    const d = dateParts(dateOfDay(state.startDate, state.day).iso);
    $(root, ".shelf__date b").textContent = `${d.weekday} ${d.day} ${d.month}`;
    $(root, ".shelf__date span").textContent = d.year;
    speed = state.speed;
    const sp = $(root, ".shelf__speed");
    sp.textContent = speed === 0 ? "II" : `${speed}×`;
    sp.setAttribute("aria-label", speed === 0 ? t("cal.pause") : t("cal.speed", { n: speed }));

    const view = getView();
    const ledger = Boolean(state.pending.review && !state.pending.profile && !state.over);
    $(root, '[data-view="ledger"]').hidden = !ledger;
    for (const b of root.querySelectorAll("[data-view]")) b.setAttribute("aria-pressed", String(b.dataset.view === view));
    const badge = $(root, "[data-badge]");
    badge.textContent = state.inbox.length || "";
    badge.hidden = state.inbox.length === 0;
    badge.classList.toggle("is-warn", state.inbox.length >= bal.cards.inboxMax - 2);
  }

  return { update, clockHand: (p) => setDial(dial, p) };
}