/* PrimaDelta — UI primitives + icon set.
   Exports a bundle to window at the end of the file. */

/* ---------- ICONS (simple stroke set) ---------- */
const Ic = {};
function mkIcon(paths) {
  return function (props) {
    const p = props || {};
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={p.sw || 1.8}
           strokeLinecap="round" strokeLinejoin="round" width={p.s} height={p.s}
           style={p.style} className={p.className}>
        {paths}
      </svg>
    );
  };
}
Ic.arrow = mkIcon(<><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>);
Ic.arrowL = mkIcon(<><path d="M19 12H5"/><path d="M11 18l-6-6 6-6"/></>);
Ic.chevR = mkIcon(<path d="M9 6l6 6-6 6"/>);
Ic.chevD = mkIcon(<path d="M6 9l6 6 6-6"/>);
Ic.plus = mkIcon(<><path d="M12 5v14"/><path d="M5 12h14"/></>);
Ic.check = mkIcon(<path d="M20 6L9 17l-5-5"/>);
Ic.checkC = mkIcon(<><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></>);
Ic.x = mkIcon(<><path d="M18 6L6 18"/><path d="M6 6l12 12"/></>);
Ic.search = mkIcon(<><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></>);
Ic.upload = mkIcon(<><path d="M12 16V4"/><path d="M7 9l5-5 5 5"/><path d="M4 20h16"/></>);
Ic.download = mkIcon(<><path d="M12 4v12"/><path d="M7 11l5 5 5-5"/><path d="M4 20h16"/></>);
Ic.lock = mkIcon(<><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/></>);
Ic.building = mkIcon(<><rect x="4" y="3" width="16" height="18" rx="1.5"/><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2"/><path d="M4 21h16"/></>);
Ic.layers = mkIcon(<><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5"/></>);
Ic.dashboard = mkIcon(<><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></>);
Ic.wrench = mkIcon(<path d="M14.7 6.3a4 4 0 00-5.4 5.4l-5 5a2 2 0 102.8 2.8l5-5a4 4 0 005.4-5.4l-2.5 2.5-2.1-.4-.4-2.1 2.5-2.5z"/>);
Ic.folder = mkIcon(<path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/>);
Ic.mail = mkIcon(<><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></>);
Ic.file = mkIcon(<><path d="M14 3v5h5"/><path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V8l-6-5z"/></>);
Ic.user = mkIcon(<><circle cx="12" cy="8" r="4"/><path d="M5 21v-1a6 6 0 0114 0v1"/></>);
Ic.logout = mkIcon(<><path d="M15 12H4"/><path d="M9 7l-5 5 5 5"/><path d="M11 4h7a2 2 0 012 2v12a2 2 0 01-2 2h-7"/></>);
Ic.pin = mkIcon(<><path d="M12 21s7-6.4 7-11a7 7 0 10-14 0c0 4.6 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></>);
Ic.ruler = mkIcon(<><rect x="3" y="8" width="18" height="8" rx="1.5"/><path d="M7 8v3M11 8v4M15 8v3M19 8v4"/></>);
Ic.trend = mkIcon(<><path d="M3 17l6-6 4 4 7-7"/><path d="M17 8h4v4"/></>);
Ic.coins = mkIcon(<><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/><path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></>);
Ic.clock = mkIcon(<><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>);
Ic.shield = mkIcon(<path d="M12 3l8 3v5c0 5-3.4 8.5-8 10-4.6-1.5-8-5-8-10V6l8-3z"/>);
Ic.dots = mkIcon(<><circle cx="5" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="19" cy="12" r="1.4"/></>);
Ic.trash = mkIcon(<><path d="M4 7h16"/><path d="M9 7V5a1 1 0 011-1h4a1 1 0 011 1v2"/><path d="M6 7l1 13a1 1 0 001 1h8a1 1 0 001-1l1-13"/></>);
Ic.bell = mkIcon(<><path d="M6 9a6 6 0 1112 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 20a2 2 0 004 0"/></>);
Ic.leaf = mkIcon(<><path d="M5 19c0-8 6-13 14-13 0 8-6 13-14 13z"/><path d="M5 19c3-4 6-6 10-7"/></>);
Ic.menu = mkIcon(<><path d="M4 7h16M4 12h16M4 17h16"/></>);
Ic.spark = mkIcon(<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z"/>);
Ic.handshake = mkIcon(<><path d="M8 13l2 2 3-3 2 2 3-3"/><path d="M3 9l4-4 5 4 5-4 4 4"/></>);
window.Ic = Ic;

/* ---------- Logo ---------- */
function Mark({ size = 30, light }) {
  const fg = light ? "#fff" : "#211e1b";
  return (
    <svg className="mark" viewBox="0 0 40 40" width={size} height={size} style={{ width: size, height: size }}>
      <rect x="1" y="1" width="38" height="38" rx="9" fill="none" stroke={fg} strokeWidth="1.6"/>
      <path d="M12 28 V12 h7 a5 5 0 0 1 0 10 h-7" fill="none" stroke={fg} strokeWidth="2.4" strokeLinejoin="round" strokeLinecap="round"/>
      <path d="M21 28 L27 12 L33 28" fill="none" stroke="#9e5c43" strokeWidth="2.4" strokeLinejoin="round" strokeLinecap="round"/>
    </svg>
  );
}
function Logo({ light, size = 30, onClick }) {
  return (
    <div className={"logo" + (light ? " on-dark" : "")} onClick={onClick} style={{ cursor: onClick ? "pointer" : "default" }}>
      <Mark size={size} light={light} />
      <span className="wordmark" style={{ color: light ? "#fff" : "var(--ink)" }}>Prima<b>Delta</b></span>
    </div>
  );
}

/* ---------- Button ---------- */
function Btn({ variant = "primary", size, block, icon, iconRight, children, ...rest }) {
  const cls = ["btn", "btn-" + variant];
  if (size) cls.push("btn-" + size);
  if (block) cls.push("btn-block");
  return (
    <button className={cls.join(" ")} {...rest}>
      {icon}{children}{iconRight}
    </button>
  );
}

/* ---------- Badge ---------- */
const STATUS_MAP = {
  "Open": "open", "Sales & Reservations": "open",
  "In Progress": "prog", "Assigned": "prog", "Under Construction": "prog", "Under Review": "prog",
  "Completed": "done", "Operational": "done", "In Service": "done",
  "On Hold": "hold"
};
function Status({ label }) {
  const k = STATUS_MAP[label] || "neutral";
  return <span className={"badge badge-" + k}><span className="dot"></span>{label}</span>;
}
function Badge({ tone = "neutral", children }) {
  return <span className={"badge badge-" + tone}>{children}</span>;
}

/* ---------- Field ---------- */
function Field({ label, hint, req, children }) {
  return (
    <div className="field">
      {label && <label>{label}{req && <span className="req"> *</span>}</label>}
      {children}
      {hint && <span className="hint">{hint}</span>}
    </div>
  );
}
function Input(props) { return <input className="input" {...props} />; }
function Textarea(props) { return <textarea className="textarea" {...props} />; }
function Select({ children, ...rest }) { return <select className="select" {...rest}>{children}</select>; }

/* ---------- Modal ---------- */
function Modal({ title, sub, onClose, children, footer, wide }) {
  useEffect(() => {
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose]);
  return (
    <div className="modal-scrim" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className={"modal" + (wide ? " wide" : "")}>
        <div className="modal-head">
          <div>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: 24, fontWeight: 500 }}>{title}</h3>
            {sub && <p className="muted" style={{ fontSize: 14, marginTop: 4 }}>{sub}</p>}
          </div>
          <button className="btn-icon ghost" onClick={onClose}><Ic.x s={18} /></button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-foot">{footer}</div>}
      </div>
    </div>
  );
}

/* ---------- Toasts ---------- */
function Toasts() {
  const { toasts } = window.useStore();
  return (
    <div className="toast-wrap">
      {toasts.map((t) => (
        <div className="toast" key={t.id}>
          <div className="toast-icon">{t.icon || <Ic.check s={18} />}</div>
          <div>
            <div className="ttl">{t.ttl}</div>
            {t.sub && <div className="sub">{t.sub}</div>}
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Placeholder image ---------- */
function Ph({ label, dark, style, className }) {
  return (
    <div className={"ph" + (dark ? " dark" : "") + (className ? " " + className : "")} style={style}>
      <span className="ph-tag">{label || "image"}</span>
    </div>
  );
}

/* ---------- Empty state ---------- */
function Empty({ icon, title, sub, action }) {
  return (
    <div className="empty">
      <div className="e-ic">{icon || <Ic.folder s={26} />}</div>
      <div style={{ fontWeight: 600, color: "var(--ink)", fontSize: 16 }}>{title}</div>
      {sub && <div style={{ marginTop: 5, maxWidth: 360, margin: "5px auto 0" }}>{sub}</div>}
      {action && <div style={{ marginTop: 18 }}>{action}</div>}
    </div>
  );
}

Object.assign(window, {
  Mark, Logo, Btn, Status, Badge, Field, Input, Textarea, Select,
  Modal, Toasts, Ph, Empty
});