// Utilidades: avatar colors, helpers, iconos
const AVATAR_HUES = [252, 345, 200, 158, 28, 285, 38, 176, 220, 12, 98, 310];

window.getAvatarColor = (name) => {
  let hash = 0;
  for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) >>> 0;
  const h = AVATAR_HUES[hash % AVATAR_HUES.length];
  return `linear-gradient(135deg, oklch(58% 0.14 ${h}) 0%, oklch(48% 0.16 ${(h + 30) % 360}) 100%)`;
};

window.getInitials = (name) => {
  const parts = name.split(/[\s\/]+/).filter(Boolean);
  const first = parts[0]?.[0] || "";
  const second = parts[1]?.[0] || "";
  return (first + second).toUpperCase();
};

window.Avatar = function Avatar({ name, size }) {
  const style = {
    width: size || 28,
    height: size || 28,
    fontSize: (size || 28) * 0.38,
    background: window.getAvatarColor(name)
  };
  return <div className="avatar" style={style}>{window.getInitials(name)}</div>;
};

// Icon helpers — inline SVGs
const icon = (paths, opts = {}) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={opts.sw || 1.8} strokeLinecap="round" strokeLinejoin="round" style={{ width: "100%", height: "100%" }}>
    {paths}
  </svg>
);

window.Icons = {
  overview: icon(<><rect x="3" y="3" width="7" height="9" rx="1.5" /><rect x="14" y="3" width="7" height="5" rx="1.5" /><rect x="14" y="12" width="7" height="9" rx="1.5" /><rect x="3" y="16" width="7" height="5" rx="1.5" /></>),
  people: icon(<><circle cx="9" cy="8" r="3.5" /><path d="M2 20c0-3.5 3-6 7-6s7 2.5 7 6" /><circle cx="17" cy="6" r="2.5" /><path d="M16 14c3 0 6 2 6 5" /></>),
  tools: icon(<><path d="M12 2 2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5" /><path d="M2 12l10 5 10-5" /></>),
  roadmap: icon(<><path d="M3 12h4l3-8 4 16 3-8h4" /></>),
  costs: icon(<><circle cx="12" cy="12" r="9" /><path d="M12 7v10M9 10h4.5a2 2 0 0 1 0 4H8" /></>),
  search: icon(<><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></>),
  filter: icon(<><path d="M3 5h18M6 12h12M10 19h4" /></>),
  export: icon(<><path d="M12 3v13" /><path d="m7 8 5-5 5 5" /><path d="M4 21h16" /></>),
  close: icon(<><path d="M6 6l12 12M18 6 6 18" /></>),
  arrow: icon(<><path d="M5 12h14M13 5l7 7-7 7" /></>),
  check: icon(<><path d="M4 12l5 5 11-11" /></>),
  circle: icon(<><circle cx="12" cy="12" r="4" /></>),
  dot: icon(<><circle cx="12" cy="12" r="3" fill="currentColor" /></>, { sw: 0 }),
  settings: icon(<><circle cx="12" cy="12" r="3" /><path d="M12 2v3m0 14v3m10-10h-3M5 12H2m15.5-7.5-2 2m-7 7-2 2m0-11 2 2m7 7 2 2" /></>),
  chevron: icon(<><path d="m9 6 6 6-6 6" /></>),
  info: icon(<><circle cx="12" cy="12" r="9" /><path d="M12 16v-4M12 8h.01" /></>),
};

window.clsImpact = (imp) => ({ Alto: "alto", Medio: "medio", Bajo: "bajo" }[imp]);
window.clsFac = (f) => f === "Fácil" ? "facil" : "media";