// AdminPrimitives.jsx — admin-only icons + helpers that extend the shared
// Primitives.jsx. Loaded AFTER Primitives.jsx so `Icon` already exists.
//
// We monkey-extend the icon set rather than fork it, so the admin app uses
// exactly the same Icon component (same stroke, joinery, sizing) as the client.

(function extendIcons() {
  const extra = {
    bank:       <><path d="M3 21h18"/><path d="M4 21V10M9 21V10M15 21V10M20 21V10"/><path d="M3 10l9-6 9 6z"/></>,
    gavel:      <><path d="M14 11l-7 7"/><path d="M5.5 16.5l2 2"/><path d="M9 7l6 6"/><path d="M11 5l6 6"/><path d="M13 3l4 4"/><path d="M4 21h8"/></>,
    clipboard:  <><rect x="6" y="4" width="12" height="17" rx="2"/><path d="M9 4V3h6v1"/><path d="M9 11l2 2 4-4"/></>,
    lock:       <><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/></>,
    pause:      <><rect x="7" y="6" width="3.5" height="12" rx="1"/><rect x="13.5" y="6" width="3.5" height="12" rx="1"/></>,
    play:       <><path d="M7 5l11 7-11 7z"/></>,
    snowflake:  <><path d="M12 3v18M5 7l14 10M19 7L5 17"/><path d="M9 4l3 2 3-2M9 20l3-2 3 2M4 9l1 3-1 3M20 9l-1 3 1 3"/></>,
    clawback:   <><path d="M3 12a9 9 0 109-9"/><path d="M3 3v5h5"/><path d="M12 8v4l3 2"/></>,
    dots:       <><circle cx="12" cy="5" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="12" cy="19" r="1.4"/></>,
    deploy:     <><path d="M12 3v12"/><path d="M8 7l4-4 4 4"/><path d="M5 15v4a2 2 0 002 2h10a2 2 0 002-2v-4"/></>,
    filter:     <><path d="M3 5h18l-7 8v6l-4-2v-4z"/></>,
    sort:       <><path d="M7 4v16M7 4l-3 3M7 4l3 3"/><path d="M17 20V4M17 20l3-3M17 20l-3-3"/></>,
    okta:       <><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></>,
    google:     <><path d="M12 11v3h4.5a4.5 4.5 0 11-1.3-4.9"/><circle cx="12" cy="12" r="9"/></>,
    microsoft:  <><rect x="4" y="4" width="7" height="7"/><rect x="13" y="4" width="7" height="7"/><rect x="4" y="13" width="7" height="7"/><rect x="13" y="13" width="7" height="7"/></>,
    download:   <><path d="M12 4v10"/><path d="M8 10l4 4 4-4"/><path d="M4 20h16"/></>,
    logout:     <><path d="M9 4H6a2 2 0 00-2 2v12a2 2 0 002 2h3"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/></>,
    eye:        <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
  };
  // Re-wrap Icon so unknown names fall through to the extras map.
  const Base = window.Icon;
  window.Icon = ({ name, size = 14, stroke = 1.4, style }) => {
    if (extra[name]) {
      return (
        <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
             stroke="currentColor" strokeWidth={stroke}
             strokeLinecap="round" strokeLinejoin="round"
             style={{ display: "inline-block", flexShrink: 0, ...style }}>
          {extra[name]}
        </svg>
      );
    }
    return <Base name={name} size={size} stroke={stroke} style={style} />;
  };
})();

// ── Date formatting (Renée A-1) ─────────────────────────────────────────
// One canonical format across the whole admin app. The OZ admin mixed
// DD/MM/YYYY HH:MM; we standardize on "MMM D, YYYY" / "MMM D, YYYY · h:mm A UTC".
const MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

// Accepts a Date or ISO-ish string. Returns "Jan 14, 2025".
const fmtDate = (d) => {
  const dt = d instanceof Date ? d : new Date(d);
  if (isNaN(dt)) return String(d);
  return `${MONTHS[dt.getUTCMonth()]} ${dt.getUTCDate()}, ${dt.getUTCFullYear()}`;
};

// Returns "Jan 14, 2025 · 11:45 AM UTC"
const fmtDateTime = (d) => {
  const dt = d instanceof Date ? d : new Date(d);
  if (isNaN(dt)) return String(d);
  let h = dt.getUTCHours();
  const m = String(dt.getUTCMinutes()).padStart(2, "0");
  const ap = h >= 12 ? "PM" : "AM";
  h = h % 12; if (h === 0) h = 12;
  return `${fmtDate(dt)} · ${h}:${m} ${ap} UTC`;
};

// Relative "2h ago" style for secondary lines (absolute stays in tooltip).
const fmtRelative = (d, now = Date.now()) => {
  const dt = d instanceof Date ? d : new Date(d);
  if (isNaN(dt)) return String(d);
  const s = Math.max(0, Math.floor((now - dt.getTime()) / 1000));
  if (s < 60) return "just now";
  const mins = Math.floor(s / 60);
  if (mins < 60) return `${mins}m ago`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs}h ago`;
  const days = Math.floor(hrs / 24);
  if (days < 30) return `${days}d ago`;
  return fmtDate(dt);
};

Object.assign(window, { fmtDate, fmtDateTime, fmtRelative });