/* global React */
(function(){
const { useState, useEffect, useRef } = React;

/* =============================================================
   bits.jsx — small reusable atoms
   ============================================================= */

window.Button = function Button({ variant = "primary", size = "md", children, icon, onClick, style, className = "", ...rest }) {
  const cls = `kd-btn kd-btn--${variant} kd-btn--${size} ${className}`;
  return (
    <button className={cls} onClick={onClick} style={style} {...rest}>
      {children}
      {icon && <span className="kd-btn__icon">{icon}</span>}
    </button>
  );
};

window.Pill = function Pill({ active, children, dot, onClick, size = "md", style }) {
  return (
    <button
      className={`kd-pill ${active ? "is-active" : ""} kd-pill--${size}`}
      aria-pressed={active}
      onClick={onClick}
      style={style}
    >
      {dot && <span className="kd-pill__dot" style={{ background: dot }} />}
      {children}
    </button>
  );
};

window.IconBtn = function IconBtn({ children, onClick, size = 36, style, title }) {
  return (
    <button className="kd-iconbtn" onClick={onClick} title={title}
      style={{ width: size, height: size, ...style }}>
      {children}
    </button>
  );
};

window.Avatar = function Avatar({ name, src, size = 36, ring }) {
  const initial = (name || "؟").trim().charAt(0);
  const styles = {
    width: size, height: size,
    borderRadius: "50%",
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    background: src ? `center/cover url(${src})` : "linear-gradient(135deg,#f5d589,#c08a2e)",
    color: "#1a1208",
    fontFamily: "var(--font-display)",
    fontSize: size * 0.42,
    fontWeight: 500,
    border: ring ? `2px solid ${ring}` : "1px solid rgba(0,0,0,0.06)",
    boxShadow: ring ? `0 0 14px ${ring}55` : "none",
    flexShrink: 0,
  };
  return <span style={styles}>{!src && initial}</span>;
};

window.Badge = function Badge({ children, tone = "gold", style }) {
  const tones = {
    gold:    { bg: "rgba(245,213,137,.14)", fg: "#f5d589" },
    rose:    { bg: "rgba(255,78,168,.14)",  fg: "#ff86c2" },
    mint:    { bg: "rgba(68,227,184,.14)",  fg: "#7ff0d2" },
    violet:  { bg: "rgba(154,108,255,.14)", fg: "#bda0ff" },
    sky:     { bg: "rgba(75,227,255,.14)",  fg: "#8eecff" },
    orange:  { bg: "rgba(255,138,61,.14)",  fg: "#ffb27a" },
    dark:    { bg: "rgba(255,255,255,.06)", fg: "#f5d589" },
  };
  const t = tones[tone] || tones.gold;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding: "3px 9px", borderRadius: 999,
      fontSize: 11, fontWeight: 600, lineHeight: 1.4,
      background: t.bg, color: t.fg,
      ...style,
    }}>{children}</span>
  );
};

/* Stars — 1..5 with hover preview, spring-pop on commit */
window.StarRate = function StarRate({ value = 0, onChange, size = 22, dark }) {
  const [hover, setHover] = useState(0);
  const [pop, setPop] = useState(0);
  const shown = hover || value;
  return (
    <span className="kd-stars" dir="ltr" onMouseLeave={() => setHover(0)}>
      {[1, 2, 3, 4, 5].map(n => (
        <span
          key={n}
          className={`kd-star ${n <= shown ? "is-lit" : ""} ${pop === n && n === 5 ? "is-peak" : ""}`}
          style={{ fontSize: size, color: dark ? (n <= shown ? "#dcba6a" : "rgba(255,255,255,.2)") : undefined }}
          onMouseEnter={() => setHover(n)}
          onClick={() => {
            onChange?.(n);
            if (n === 5) { setPop(5); setTimeout(() => setPop(0), 600); }
          }}
        >★</span>
      ))}
    </span>
  );
};

/* Lightweight confetti burst — 14 paper bits, fade after 1.6s */
window.ConfettiBurst = function ConfettiBurst({ active, onDone }) {
  useEffect(() => {
    if (active) {
      const t = setTimeout(() => onDone?.(), 1600);
      return () => clearTimeout(t);
    }
  }, [active, onDone]);
  if (!active) return null;
  const colors = ["#ff4ea8", "#9a6cff", "#4be3ff", "#44e3b8", "#ff8a3d", "#f5d589"];
  const bits = Array.from({ length: 22 }, (_, i) => {
    const a = (Math.PI * 2 * i) / 22 + Math.random() * 0.4;
    const dist = 100 + Math.random() * 80;
    const dx = Math.cos(a) * dist;
    const dy = Math.sin(a) * dist;
    return (
      <span key={i} className="kd-confetti-bit"
        style={{
          background: colors[i % colors.length],
          ['--dx']: `${dx}px`,
          ['--dy']: `${dy}px`,
          animationDelay: `${Math.random() * 80}ms`,
          width: 6 + Math.random() * 6,
          height: 8 + Math.random() * 8,
        }}
      />
    );
  });
  return <span className="kd-confetti">{bits}</span>;
};
})();