// ============================================================
// MOORE AI v13 — SHARED COMPONENTS
// No import/export — globals loaded in order via index.html
// Requires: utils.js loaded first, React global
// ============================================================
const { useRef, useEffect } = React;

// =========================================================
// ICON COMPONENT (uses lucide globals)
// =========================================================
const Icon = ({ name, size = 16, className = '' }) => {
  const containerRef = useRef(null);
  useEffect(() => {
    if (containerRef.current && window.lucide) {
      containerRef.current.innerHTML = `<i data-lucide="${name}" class="${className}" style="width:${size}px;height:${size}px;"></i>`;
      window.lucide.createIcons({ root: containerRef.current });
    }
  }, [name, size, className]);
  return <span ref={containerRef} className="inline-flex items-center justify-center shrink-0" />;
};

// =========================================================
// STATUS BADGE
// =========================================================
const StatusBadge = ({ status }) => {
  const cls = status === 'won' ? 'status-won' : status === 'lost' ? 'status-lost' : 'status-open';
  return <span className={`text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-lg mono ${cls}`}>{status}</span>;
};

// =========================================================
// AVATAR
// =========================================================
const Avatar = ({ name, size = 36, photo }) => {
  const bg = avatarBg(name);
  if (photo) return <img src={photo} className="rounded-xl object-cover" style={{ width: size, height: size }} />;
  return (
    <div className="rounded-xl flex items-center justify-center font-bold text-white text-xs shrink-0"
         style={{ width: size, height: size, background: bg, fontSize: size * 0.35 }}>
      {initials(name)}
    </div>
  );
};

// =========================================================
// STAT CARD
// =========================================================
const StatCard = ({ label, value, icon, sub, color = '#3b82f6', trend }) => (
  <div className="bg-slate-900/60 border border-slate-800/80 rounded-2xl p-6 relative overflow-hidden group hover:border-slate-700 transition-all">
    <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity"
         style={{ background: `radial-gradient(ellipse at top left, ${color}08, transparent 60%)` }} />
    <div className="flex items-start justify-between mb-4">
      <div className="p-2.5 rounded-xl" style={{ background: `${color}18`, border: `1px solid ${color}22` }}>
        <Icon name={icon} size={18} className="" style={{ color }} />
      </div>
      {trend && <span className={`text-xs font-bold mono ${trend > 0 ? 'text-emerald-400' : 'text-red-400'}`}>{trend > 0 ? '+' : ''}{trend}%</span>}
    </div>
    <div className="text-2xl font-black text-white tracking-tight mono">{value}</div>
    <div className="text-xs text-slate-500 font-semibold uppercase tracking-wider mt-1">{label}</div>
    {sub && <div className="text-[11px] text-slate-600 mt-0.5">{sub}</div>}
  </div>
);
