/* Rass Jerseys — UI primitives: icons, placeholders, badges */

const Icon = ({ name, size = 20, stroke = 2, style }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round", style,
  };
  switch (name) {
    case "search":      return <svg {...common}><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></svg>;
    case "menu":        return <svg {...common}><path d="M3 6h18M3 12h18M3 18h18" /></svg>;
    case "close":       return <svg {...common}><path d="M6 6l12 12M18 6L6 18" /></svg>;
    case "star":        return <svg {...common} fill="currentColor" stroke="none"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 18.9 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z" /></svg>;
    case "check":       return <svg {...common}><path d="M20 6L9 17l-5-5" /></svg>;
    case "truck":       return <svg {...common}><path d="M3 7h11v8H3zM14 10h4l3 3v2h-7" /><circle cx="7" cy="18" r="1.6" /><circle cx="17.5" cy="18" r="1.6" /></svg>;
    case "chat":        return <svg {...common}><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.4A8 8 0 1 1 21 12z" /></svg>;
    case "refresh":     return <svg {...common}><path d="M3 11a9 9 0 0 1 15-5l3 3M21 13a9 9 0 0 1-15 5l-3-3" /><path d="M21 4v5h-5M3 20v-5h5" /></svg>;
    case "arrow-right": return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
    case "arrow-left":  return <svg {...common}><path d="M19 12H5M11 18l-6-6 6-6" /></svg>;
    case "arrow-down":  return <svg {...common}><path d="M12 5v14M6 13l6 6 6-6" /></svg>;
    case "shield":      return <svg {...common}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z" /><path d="M9 12l2 2 4-4" /></svg>;
    case "zoom":        return <svg {...common}><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3M11 8v6M8 11h6" /></svg>;
    case "plus":        return <svg {...common}><path d="M12 5v14M5 12h14" /></svg>;
    case "edit":        return <svg {...common}><path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" /></svg>;
    case "trash":       return <svg {...common}><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14" /></svg>;
    case "eye":         return <svg {...common}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" /><circle cx="12" cy="12" r="3" /></svg>;
    case "eye-off":     return <svg {...common}><path d="M3 3l18 18M10.6 10.6a3 3 0 0 0 4.2 4.2M9.9 5.2A9.5 9.5 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3.2 4M6.1 6.1A17 17 0 0 0 2 12s3.5 7 10 7a9.6 9.6 0 0 0 3.9-.8" /></svg>;
    case "box":         return <svg {...common}><path d="M21 8l-9-5-9 5 9 5 9-5zM3 8v8l9 5 9-5V8M12 13v8" /></svg>;
    case "bag":         return <svg {...common}><path d="M6 7h12l1 13H5zM9 7a3 3 0 0 1 6 0" /></svg>;
    case "bell":        return <svg {...common}><path d="M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8M13.7 21a2 2 0 0 1-3.4 0" /></svg>;
    case "logout":      return <svg {...common}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" /></svg>;
    case "cart":        return <svg {...common}><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" /><line x1="3" y1="6" x2="21" y2="6" /><path d="M16 10a4 4 0 0 1-8 0" /></svg>;
    case "copy":        return <svg {...common}><rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>;
    case "image":       return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" /></svg>;
    case "upload":      return <svg {...common}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" /></svg>;
    case "user":        return <svg {...common}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>;
    default: return null;
  }
};

/* Brand WhatsApp glyph */
const WaIcon = ({ size = 18, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" style={style}>
    <path d="M.5 23.5l1.65-6.03A11.4 11.4 0 0 1 .6 11.6C.6 5.2 5.8 0 12.2 0a11.5 11.5 0 0 1 8.18 3.39A11.5 11.5 0 0 1 23.8 11.6c0 6.4-5.2 11.6-11.6 11.6-1.94 0-3.85-.49-5.55-1.42L.5 23.5zM6.97 19.8c1.64.97 3.2 1.55 5.23 1.55 5.3 0 9.63-4.32 9.63-9.62 0-2.58-1-5-2.82-6.82a9.56 9.56 0 0 0-6.8-2.83c-5.32 0-9.64 4.32-9.64 9.63 0 1.82.51 3.3 1.46 4.92l-.98 3.58 3.7-.97zm10.46-5.34c-.07-.12-.26-.19-.55-.34-.29-.14-1.7-.84-1.97-.94-.26-.1-.46-.14-.65.15-.19.29-.74.93-.91 1.12-.17.19-.34.22-.62.07-.29-.14-1.22-.45-2.32-1.43-.86-.77-1.43-1.71-1.6-2-.17-.29-.02-.45.12-.59.13-.13.29-.34.43-.5.15-.17.19-.29.29-.48.1-.19.05-.36-.02-.5-.07-.15-.65-1.57-.89-2.15-.24-.56-.47-.48-.65-.49l-.55-.01c-.19 0-.5.07-.76.36-.26.29-1 .98-1 2.38s1.02 2.76 1.17 2.95c.14.19 2.01 3.08 4.88 4.32.68.29 1.21.47 1.63.6.68.22 1.31.19 1.8.12.55-.08 1.7-.7 1.94-1.36.24-.67.24-1.24.17-1.36z"/>
  </svg>
);

const Messenger = ({ size = 18, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" style={style}>
    <path d="M12 .8C5.5.8.5 5.6.5 12c0 3.4 1.4 6.3 3.7 8.4.2.2.3.4.3.6l.06 2.06c.02.66.7 1.09 1.3.82l2.3-1.02c.16-.07.34-.08.5-.04 1.05.29 2.16.44 3.34.44 6.5 0 11.5-4.76 11.5-11.18S18.5.8 12 .8zm6.9 8.58l-3.38 5.36c-.54.85-1.7 1.06-2.5.46l-2.69-2.02a.7.7 0 0 0-.84 0l-3.63 2.75c-.48.37-1.12-.21-.8-.73l3.38-5.36c.54-.85 1.7-1.06 2.5-.46l2.69 2.02c.25.18.59.18.84 0l3.63-2.75c.48-.37 1.12.21.8.73z"/>
  </svg>
);

/* Jersey image — uses real image if available, else styled placeholder */
const JerseyPlaceholder = ({ product, ratio = "1 / 1", style }) => {
  const t = RassData.teamById(product.team);
  const imgSrc = product.images && product.images.front;
  if (imgSrc) {
    return (
      <div className="ph" style={{ aspectRatio: ratio, background: "#fff", ...style }}>
        <img src={imgSrc} alt={t.name + " " + product.type} style={{ width: "100%", height: "100%", objectFit: "contain" }} />
      </div>
    );
  }
  return (
    <div className="ph" style={{
      aspectRatio: ratio,
      background: "linear-gradient(150deg, " + hexA(t.c1, 0.18) + ", " + hexA(t.c2, 0.12) + "), repeating-linear-gradient(135deg, rgba(0,0,0,0.022) 0 11px, rgba(0,0,0,0) 11px 22px), #fff",
      ...style,
    }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
        <JerseySilhouette c1={t.c1} c2={t.c2} />
        <span className="ph-label">{t.name} {product.type} · photo</span>
      </div>
    </div>
  );
};

const JerseySilhouette = ({ c1, c2, size = 78 }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" style={{ opacity: 0.9 }}>
    <polygon points="32,22 42,16 58,16 68,22 82,32 74,44 68,40 68,84 32,84 32,40 26,44 18,32"
      fill={hexA(c1, 0.5)} stroke={hexA(c2, 0.65)} strokeWidth="2.2" strokeLinejoin="round" />
    <path d="M42 16 Q50 28 58 16" fill="none" stroke={hexA(c2, 0.65)} strokeWidth="2.2" />
  </svg>
);

function hexA(hex, a) {
  const h = hex.replace("#", "");
  const r = parseInt(h.substring(0, 2), 16);
  const g = parseInt(h.substring(2, 4), 16);
  const b = parseInt(h.substring(4, 6), 16);
  return "rgba(" + r + "," + g + "," + b + "," + a + ")";
}

const TeamBadge = ({ team, active, onClick, size = 76 }) => (
  <button onClick={onClick} className="team-badge" data-active={active ? "1" : undefined} style={{ "--c1": team.c1, "--c2": team.c2 }}>
    <span className="team-badge-disc" style={{ width: size, height: size }}>
      <span className="team-badge-flag">{team.flag}</span>
    </span>
    <span className="team-badge-name">{team.name}</span>
  </button>
);

const SizeDots = ({ sizes }) => (
  <div className="size-dots">
    {RassData.ALL_SIZES.map((s) => {
      const on = sizes.includes(s);
      return (
        <span key={s} className="size-dot" data-on={on ? "1" : undefined} title={on ? s + " in stock" : s + " unavailable"}>{s}</span>
      );
    })}
  </div>
);

Object.assign(window, { Icon, WaIcon, Messenger, JerseyPlaceholder, JerseySilhouette, TeamBadge, SizeDots, hexA });