/* Dulius App UI Kit — shared primitives (Icon, Button, Badge, Card, Avatar) */

function Icon({ name, size = 20, stroke = 2, className = "", style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || !window.lucide) return;
    el.innerHTML = "";
    const i = document.createElement("i");
    i.setAttribute("data-lucide", name);
    el.appendChild(i);
    try {
      window.lucide.createIcons({
        attrs: { width: size, height: size, "stroke-width": stroke },
      });
    } catch (e) {}
  }, [name, size, stroke]);
  return (
    <span
      ref={ref}
      className={"dico " + className}
      style={{ display: "inline-flex", width: size, height: size, ...style }}
    />
  );
}

function Button({ variant = "primary", size = "md", icon, iconRight, children, onClick, style = {}, type = "button" }) {
  const cls = `dbtn dbtn-${variant} dbtn-${size}`;
  return (
    <button type={type} className={cls} onClick={onClick} style={style}>
      {icon && <Icon name={icon} size={size === "sm" ? 16 : 18} />}
      {children && <span>{children}</span>}
      {iconRight && <Icon name={iconRight} size={size === "sm" ? 16 : 18} />}
    </button>
  );
}

function Badge({ tone = "neutral", dot = false, children }) {
  return (
    <span className={`dbadge dbadge-${tone}`}>
      {dot && <span className="dbadge-dot" />}
      {children}
    </span>
  );
}

function ScorePill({ band }) {
  const map = {
    "Starting Out": "#E05C5C", "Fair Standing": "#F5A623",
    "Good Standing": "#7BC67E", "Elite": "#1B5C2E",
  };
  const bg = map[band] || "#1B5C2E";
  const dark = band === "Good Standing";
  return (
    <span className="dscorepill" style={{ background: bg, color: dark ? "#13320A" : "#fff" }}>
      {band}
    </span>
  );
}

function Card({ children, className = "", style = {}, pad = true, onClick }) {
  return (
    <div
      className={`dcard ${pad ? "dcard-pad" : ""} ${onClick ? "dcard-click" : ""} ${className}`}
      style={style}
      onClick={onClick}
    >
      {children}
    </div>
  );
}

function Avatar({ initials, size = 38, src }) {
  return (
    <div className="davatar" style={{ width: size, height: size, fontSize: size * 0.38 }}>
      {src ? <img src={src} alt="" /> : initials}
    </div>
  );
}

function Delta({ value, suffix = "", money = false }) {
  const up = value >= 0;
  const mag = money
    ? "$" + Math.abs(value).toLocaleString("en-US")
    : Math.abs(value) + suffix;
  return (
    <span className={`ddelta ${up ? "up" : "down"} dnum`}>
      {up ? "▲" : "▼"}&nbsp;{up ? "+" : "−"}{mag}
    </span>
  );
}

function ProgressBar({ value, color = "var(--green-500)", track = "var(--ink-100)", height = 8 }) {
  return (
    <div className="dprog" style={{ background: track, height, borderRadius: height }}>
      <div style={{ width: `${value}%`, background: color, height: "100%", borderRadius: height, transition: "width .6s var(--ease-out)" }} />
    </div>
  );
}

function InfoDot({ text }) {
  const [open, setOpen] = React.useState(false);
  return (
    <span className="dinfo" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)} onClick={(e) => { e.stopPropagation(); setOpen((o) => !o); }}>
      <Icon name="info" size={15} />
      {open && <span className="dinfo-pop">{text}</span>}
    </span>
  );
}

Object.assign(window, { Icon, Button, Badge, ScorePill, Card, Avatar, Delta, ProgressBar, InfoDot });