// Shared formatters and small UI atoms used across the prototype.

const money = (n) => "Rp " + (Number(n) || 0).toLocaleString("id-ID");
const moneyK = (n) => {
  const v = Number(n) || 0;
  if (v >= 1000000) return (v / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
  if (v >= 1000) return Math.round(v / 1000) + "K";
  return String(v);
};
// Normalize a timestamp (Firestore Timestamp, Date, number, or ISO string) to ms.
const tsToMs = (t) => {
  if (t == null) return 0;
  if (typeof t === "number") return t;
  if (t instanceof Date) return t.getTime();
  if (typeof t.toMillis === "function") return t.toMillis();
  if (typeof t.toDate === "function") return t.toDate().getTime();
  if (typeof t.seconds === "number") return t.seconds * 1000 + Math.floor((t.nanoseconds || 0) / 1e6);
  const n = new Date(t).getTime();
  return isNaN(n) ? 0 : n;
};
const timeSince = (ts) => {
  const ms = tsToMs(ts);
  if (!ms) return "—";
  const s = Math.max(0, Math.floor((Date.now() - ms) / 1000));
  if (s < 60) return s + "s";
  const m = Math.floor(s / 60);
  if (m < 60) return m + "m " + (s % 60).toString().padStart(2, "0") + "s";
  const h = Math.floor(m / 60);
  return h + "h " + (m % 60) + "m";
};
const TZ = "Asia/Jakarta"; // GMT+7
const fmtClock = (d = new Date()) =>
  d.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", timeZone: TZ });
const fmtDay = (d = new Date()) =>
  d.toLocaleDateString("en-GB", { weekday: "long", day: "numeric", month: "long", timeZone: TZ });

// useTick: forces a re-render every `ms` (for live timers)
function useTick(ms = 1000) {
  const [, set] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => set((x) => x + 1), ms);
    return () => clearInterval(t);
  }, [ms]);
}

// ProductSwatch — a placeholder illustration based on a single color.
// Subtle ring + stripes; never an SVG of an actual cup.
function ProductSwatch({ color, label, size = 48 }) {
  const initials = (label || "")
    .split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
  return (
    <div
      className="swatch"
      style={{
        width: size, height: size,
        background: `radial-gradient(circle at 30% 28%, ${color}cc, ${color} 60%, ${color}aa)`,
      }}
    >
      <span className="swatch-rim" />
      <span className="swatch-initials" style={{ fontSize: size * 0.32 }}>{initials}</span>
    </div>
  );
}

// StatusPill — minimal status tag.
function StatusPill({ status, children }) {
  return <span className={`pill pill-${status}`}>{children || status}</span>;
}

// Mono number — for prices, IDs, KPIs
function Mono({ children, className = "" }) {
  return <span className={`mono ${className}`}>{children}</span>;
}

Object.assign(window, {
  money, moneyK, timeSince, tsToMs, fmtClock, fmtDay, useTick,
  ProductSwatch, StatusPill, Mono,
});