/* Hunian Kita — shared UI helpers. Exports to window. */

function Avatar({ name, size = 30, color }) {
  const c = color || window.HK.colorOf(name || "?");
  return <span className="avatar" style={{ width: size, height: size, background: c, fontSize: size * 0.4 }}>
    {window.HK.initials(name || "?")}</span>;
}

const STATUS_MAP = {
  "Open": { cls: "info", label: "Open" },
  "Assigned": { cls: "pend", label: "Assigned" },
  "In progress": { cls: "warn", label: "In progress" },
  "Resolved": { cls: "pos", label: "Resolved" },
  "Closed": { cls: "calm", label: "Closed" },
};
function StatusBadge({ status }) {
  const s = STATUS_MAP[status] || { cls: "calm", label: status };
  return <span className={"badge " + s.cls}><span className="bdot" />{s.label}</span>;
}

function PrioTag({ prio }) {
  const map = { critical: "Critical", high: "High", normal: "Normal", low: "Low" };
  return <span className={"prio " + prio}>
    <Icon name={prio === "critical" ? "alert-octagon" : prio === "high" ? "alert-triangle" : prio === "normal" ? "circle" : "minus"} size={13} />
    {map[prio]}</span>;
}

function slaInfo(c) {
  if (c.status === "Resolved") return { cls: "ok", label: "Resolved" + (c.resolvedIn ? " · " + c.resolvedIn : "") };
  const rem = c.slaMin - c.ageMin;
  const fmt = (m) => { const a = Math.abs(m); return a >= 60 ? (a / 60).toFixed(a % 60 ? 1 : 0) + "h" : a + "m"; };
  if (rem < 0) return { cls: "breach", label: fmt(rem) + " over SLA" };
  if (rem < c.slaMin * 0.3) return { cls: "warn", label: fmt(rem) + " left" };
  return { cls: "ok", label: fmt(rem) + " left" };
}
function SlaPill({ c }) {
  const s = slaInfo(c);
  return <span className={"sla " + s.cls}><Icon name={s.cls === "breach" ? "alarm-clock-off" : "clock"} size={13} />{s.label}</span>;
}

function Drawer({ onClose, children }) {
  React.useEffect(() => {
    const h = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, []);
  return ReactDOM.createPortal(
    <React.Fragment>
      <div className="scrim" onClick={onClose} />
      <aside className="drawer" role="dialog">{children}</aside>
    </React.Fragment>, document.body);
}

function Modal({ onClose, children }) {
  React.useEffect(() => {
    const h = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, []);
  return ReactDOM.createPortal(
    <div className="modal">
      <div className="scrim" onClick={onClose} />
      <div className="box" style={{ position: "relative", zIndex: 1 }}>{children}</div>
    </div>, document.body);
}

function KpiCard({ icon, iconBg, iconColor, label, value, suffix, delta, deltaGood, deltaNote, spark, sparkColor, onClick }) {
  const up = delta >= 0;
  const good = deltaGood === undefined ? up : deltaGood;
  return (
    <div className="kpi" onClick={onClick}>
      <div className="top">
        <span className="ic" style={{ background: iconBg, color: iconColor }}><Icon name={icon} size={20} /></span>
        <span className="lbl">{label}</span>
      </div>
      <div className="val">{value}{suffix && <small> {suffix}</small>}</div>
      <div className={"delta " + (good ? "up" : "down")}>
        {delta !== undefined && delta !== null && <React.Fragment>
          <Icon name={up ? "trending-up" : "trending-down"} size={14} />
          {up ? "+" : ""}{delta}{typeof delta === "number" && Math.abs(delta) < 100 && deltaNote === undefined ? "" : ""}
        </React.Fragment>}
        <span className="muted">{deltaNote}</span>
      </div>
      {spark && <div className="spark"><Sparkline data={spark} color={sparkColor || "var(--accent)"} w={130} h={42} /></div>}
    </div>
  );
}

function Toast({ msg }) {
  if (!msg) return null;
  return ReactDOM.createPortal(
    <div className="toast"><Icon name="check-circle" size={18} />{msg}</div>, document.body);
}

Object.assign(window, { Avatar, StatusBadge, PrioTag, SlaPill, slaInfo, Drawer, Modal, KpiCard, Toast });