// primitives.jsx — core Merion×shadcn components
const { useState, useRef, useEffect, useCallback } = React;

/* ---------- Button ---------- */
function Button({ variant = "primary", size, icon, iconRight, children, className = "", ...p }) {
  const cls = ["btn", "btn-" + variant, size ? "btn-" + size : "", !children ? "btn-icon" : "", className].filter(Boolean).join(" ");
  return (
    <button className={cls} {...p}>
      {icon && <Icon name={icon} />}
      {children}
      {iconRight && <Icon name={iconRight} />}
    </button>
  );
}

/* ---------- Badge ---------- */
function Badge({ variant = "soft", dot, children, className = "" }) {
  return (
    <span className={["badge", "badge-" + variant, className].join(" ")}>
      {dot && <span className="badge-dot" />}
      {children}
    </span>
  );
}

/* ---------- Card ---------- */
function Card({ children, className = "", ...p }) { return <div className={"card " + className} {...p}>{children}</div>; }
function CardHeader({ title, desc, action }) {
  return (
    <div className="card-header">
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
        <div className="stack-sm" style={{ gap: 4 }}>
          {title && <div className="card-title">{title}</div>}
          {desc && <div className="card-desc">{desc}</div>}
        </div>
        {action}
      </div>
    </div>
  );
}

/* ---------- Avatar ---------- */
function Avatar({ src, fallback, size, brand, status, className = "" }) {
  const cls = ["avatar", size ? "avatar-" + size : "", brand ? "avatar-brand" : "", status ? "avatar-status" : "", className].filter(Boolean).join(" ");
  return <span className={cls}>{src ? <img src={src} alt="" /> : fallback}</span>;
}

/* ---------- Label / Field ---------- */
function Field({ label, hint, error, children }) {
  return (
    <div className="field">
      {label && <label className="ui-label">{label}</label>}
      {children}
      {error ? <span className="ui-error">{error}</span> : hint ? <span className="ui-hint">{hint}</span> : null}
    </div>
  );
}

/* ---------- Input ---------- */
function Input({ icon, error, className = "", ...p }) {
  const input = <input className={["input", error ? "has-error" : "", className].join(" ")} {...p} />;
  if (icon) return <div className="input-icon"><Icon name={icon} />{input}</div>;
  return input;
}
function Textarea({ error, className = "", ...p }) {
  return <textarea className={["textarea", error ? "has-error" : "", className].join(" ")} {...p} />;
}

/* ---------- Checkbox / Radio ---------- */
function Checkbox({ checked, onChange, label }) {
  return (
    <label className="checkbox-row" onClick={(e) => { e.preventDefault(); onChange && onChange(!checked); }}>
      <span className="checkbox" data-checked={checked}><Icon name="check" /></span>
      {label && <span>{label}</span>}
    </label>
  );
}
function Radio({ checked, onChange, label }) {
  return (
    <label className="checkbox-row" onClick={(e) => { e.preventDefault(); onChange && onChange(); }}>
      <span className="checkbox radio" data-checked={checked}><span className="radio-dot" /></span>
      {label && <span>{label}</span>}
    </label>
  );
}

/* ---------- Switch ---------- */
function Switch({ checked, onChange, label }) {
  const sw = <span className="switch" data-checked={checked} role="switch" aria-checked={checked} onClick={() => onChange && onChange(!checked)} />;
  if (!label) return sw;
  return <label className="checkbox-row" style={{ justifyContent: "space-between" }}><span>{label}</span>{sw}</label>;
}

/* ---------- Select ---------- */
function Select({ options, value, onChange, placeholder = "Selecione...", className = "" }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useOutside(ref, () => setOpen(false));
  const sel = options.find((o) => o.value === value);
  return (
    <div className={"select " + className} data-open={open} ref={ref}>
      <button type="button" className="select-trigger" onClick={() => setOpen((o) => !o)}>
        <span className={sel ? "" : "placeholder"}>{sel ? sel.label : placeholder}</span>
        <Icon name="chevron-down" />
      </button>
      {open && (
        <div className="select-menu">
          {options.map((o) => (
            <div key={o.value} className="select-item" data-selected={o.value === value}
              onClick={() => { onChange && onChange(o.value); setOpen(false); }}>
              <span>{o.label}</span>
              {o.value === value && <Icon name="check" />}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ---------- Slider ---------- */
function Slider({ value, onChange, min = 0, max = 100, step = 1 }) {
  const ref = useRef(null);
  const pct = ((value - min) / (max - min)) * 100;
  const set = useCallback((clientX) => {
    const r = ref.current.getBoundingClientRect();
    let p = (clientX - r.left) / r.width;
    p = Math.max(0, Math.min(1, p));
    let v = min + p * (max - min);
    v = Math.round(v / step) * step;
    onChange && onChange(Math.max(min, Math.min(max, v)));
  }, [min, max, step, onChange]);
  const down = (e) => {
    set(e.clientX);
    const move = (ev) => set(ev.clientX);
    const up = () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
    window.addEventListener("pointermove", move); window.addEventListener("pointerup", up);
  };
  return (
    <div className="slider" ref={ref} onPointerDown={down}>
      <div className="slider-track">
        <div className="slider-range" style={{ width: pct + "%" }} />
        <div className="slider-thumb" tabIndex={0} style={{ left: pct + "%" }} />
      </div>
    </div>
  );
}

/* ---------- Progress ---------- */
function Progress({ value = 0 }) {
  return <div className="progress"><div className="progress-bar" style={{ width: Math.max(0, Math.min(100, value)) + "%" }} /></div>;
}

/* ---------- Tooltip ---------- */
function Tooltip({ label, children }) {
  return <span className="tooltip-wrap">{children}<span className="tooltip" role="tooltip">{label}</span></span>;
}

/* ---------- shared: click-outside ---------- */
function useOutside(ref, cb) {
  useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) cb(); };
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, [ref, cb]);
}

Object.assign(window, {
  Button, Badge, Card, CardHeader, Avatar, Field, Input, Textarea,
  Checkbox, Radio, Switch, Select, Slider, Progress, Tooltip, useOutside,
});