/* TargiApp — wspólne UI + hook do store */
const { useState, useEffect, useMemo, useRef } = React;
const T = window.TargiStore;

function useStore() {
  const [, force] = useState(0);
  useEffect(() => T.subscribe(() => force((n) => n + 1)), []);
  return T;
}

function Avatar({ name, size, color }) {
  const ini = (name || "?").split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
  const s = size || 32;
  return (
    <div className="avatar" style={{ width: s, height: s, fontSize: s * 0.38, background: color || undefined }}>{ini}</div>
  );
}

function RoleChip({ roleKey }) {
  const r = T.roleOf(roleKey);
  return <span className="role-chip" style={{ background: r.color }}>{r.short}</span>;
}

function fmtDayLong(date) {
  const d = new Date(date);
  return d.toLocaleDateString("pl-PL", { weekday: "long", day: "numeric", month: "long" });
}
function fmtDayShort(date) {
  const d = new Date(date);
  const wd = ["niedz.", "pon.", "wt.", "śr.", "czw.", "pt.", "sob."][d.getDay()];
  return wd + " " + d.getDate() + "." + String(d.getMonth() + 1).padStart(2, "0");
}

Object.assign(window, { useStore, Avatar, RoleChip, fmtDayLong, fmtDayShort });