/* Running Club — shared kit: icons, media placeholders, helpers */

function hashCode(str) {
  let h = 0;
  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) | 0;
  return Math.abs(h);
}

function usePersisted(key, initial) {
  const [v, setV] = React.useState(() => {
    try {
      const raw = localStorage.getItem(key);
      return raw != null ? JSON.parse(raw) : initial;
    } catch (e) { return initial; }
  });
  React.useEffect(() => {
    try { localStorage.setItem(key, JSON.stringify(v)); } catch (e) {}
  }, [key, v]);
  return [v, setV];
}

/* ---- Icons (simple line/solid) ---- */
function Icon({ name, size = 20, color = 'currentColor', stroke = 2 }) {
  const p = { fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    play:    <path d="M8 5v14l11-7z" fill={color} stroke="none" />,
    share:   <g {...p}><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></g>,
    download:<g {...p}><path d="M12 3v12"/><path d="M7 11l5 5 5-5"/><path d="M5 21h14"/></g>,
    close:   <g {...p}><path d="M6 6l12 12M18 6L6 18"/></g>,
    plus:    <g {...p}><path d="M12 5v14M5 12h14"/></g>,
    left:    <g {...p}><path d="M15 5l-7 7 7 7"/></g>,
    right:   <g {...p}><path d="M9 5l7 7-7 7"/></g>,
    up:      <g {...p}><path d="M5 15l7-7 7 7"/></g>,
    pin:     <g {...p}><path d="M12 21s-7-6.3-7-11a7 7 0 1114 0c0 4.7-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></g>,
    calendar:<g {...p}><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 10h16M8 3v4M16 3v4"/></g>,
    ruler:   <g {...p}><path d="M3 8.5L8.5 3 21 15.5 15.5 21z"/><path d="M7 7l2 2M10 10l1.5 1.5M13 7l2 2"/></g>,
    watch:   <g {...p}><circle cx="12" cy="13" r="7"/><path d="M12 13V9M12 13l3 2M9 2h6"/></g>,
    runner:  <g {...p}><circle cx="14" cy="5" r="2"/><path d="M5 20l3-5 3 1 1-4 3 3 3 1"/><path d="M11 12l-1-3 4-2 2 3 2 1"/></g>,
    grid:    <g {...p}><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></g>,
    heart:   <path d="M12 20s-7-4.4-7-9.5A3.5 3.5 0 0112 7a3.5 3.5 0 017 3.5C19 15.6 12 20 12 20z" fill={color} stroke="none" />,
    chat:    <g {...p}><path d="M5 5h14v10H9l-4 4z"/></g>,
    flame:   <path d="M12 3c1 3-2 4-2 7a2 2 0 104 0c0 0 2 2 2 5a4 4 0 11-8 0c0-3 2-4 2-6 0 0 2 0 2-6z" fill={color} stroke="none"/>,
    camera:  <g {...p}><path d="M4 8h3l1.5-2h7L17 8h3v11H4z"/><circle cx="12" cy="13" r="3.5"/></g>,
    check:   <g {...p}><path d="M5 13l4 4L19 7"/></g>,
    dots:    <g fill={color} stroke="none"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></g>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block', flexShrink: 0 }}>
      {paths[name]}
    </svg>
  );
}

/* ---- Media placeholder: duotone "scene" built from simple shapes ---- */
function MediaScene({ scene, seed = 0, style }) {
  const pal = (window.CLUB.SCENES[scene]) || ['#2b2b2f', '#9a9aa2'];
  const [deep, light] = pal;
  const r = (n) => ((seed * 9301 + 49297 + n * 233) % 100) / 100; // deterministic 0..1

  let shapes = null;
  if (scene === 'lac' || scene === 'montagne' || scene === 'sunset') {
    const sunX = 20 + r(1) * 60, sunY = 26 + r(2) * 12;
    shapes = (
      <g>
        <circle cx={sunX} cy={sunY} r="11" fill={light} opacity="0.85" />
        <rect x="0" y="60" width="100" height="40" fill={deep} opacity="0.32" />
        <path d={`M0 62 L30 ${48 - r(3) * 8} L52 62 Z`} fill={deep} opacity="0.5" />
        <path d={`M40 62 L72 ${42 - r(4) * 10} L100 62 Z`} fill={deep} opacity="0.62" />
        <rect x="0" y="61" width="100" height="2" fill={light} opacity="0.4" />
      </g>
    );
  } else if (scene === 'foret') {
    shapes = (
      <g opacity="0.7">
        {[12, 30, 50, 68, 86].map((x, i) => (
          <path key={i} d={`M${x} ${88 - r(i) * 8} L${x - 11} 92 L${x + 11} 92 Z M${x} ${64 - r(i + 1) * 10} L${x - 13} 80 L${x + 13} 80 Z`} fill={deep} />
        ))}
      </g>
    );
  } else if (scene === 'route') {
    shapes = (
      <g>
        <path d="M38 100 L48 0 L52 0 L62 100 Z" fill={light} opacity="0.18" />
        {[10, 35, 62, 90].map((y, i) => (
          <rect key={i} x="48" y={y} width="4" height="9" fill={light} opacity="0.7" />
        ))}
      </g>
    );
  } else if (scene === 'groupe') {
    shapes = (
      <g opacity="0.75">
        {[24, 44, 64, 80].map((x, i) => (
          <g key={i}>
            <circle cx={x} cy={56 + r(i) * 6} r={9 - i * 0.5} fill={deep} />
            <path d={`M${x - 12} 100 q12 ${-26 - r(i) * 8} 24 0 Z`} fill={deep} opacity="0.85" />
          </g>
        ))}
      </g>
    );
  } else if (scene === 'gourde') {
    shapes = (
      <g>
        <rect x="40" y="31" width="20" height="50" rx="8" fill={deep} opacity="0.45" />
        <rect x="44" y="24" width="12" height="8" rx="2" fill={deep} opacity="0.55" />
        <rect x="47" y="19" width="6" height="6" rx="1.5" fill={light} opacity="0.9" />
        <rect x="41" y="50" width="18" height="12" rx="2" fill={light} opacity="0.85" />
        {[18, 30, 70, 82, 26, 74].map((x, i) => (
          <circle key={'b' + i} cx={x} cy={20 + r(i) * 55} r="2" fill={light} opacity="0.55" />
        ))}
      </g>
    );
  } else if (scene === 'medaille') {
    shapes = (
      <g>
        <path d="M44 28 L40 54 L48 54 Z" fill={deep} opacity="0.6" />
        <path d="M56 28 L52 54 L60 54 Z" fill={deep} opacity="0.6" />
        <circle cx="50" cy="62" r="16" fill={deep} opacity="0.55" />
        <circle cx="50" cy="62" r="16" fill="none" stroke={light} strokeWidth="2.5" opacity="0.85" />
        <path d="M50 55 l2.2 4.6 5 .5 -3.8 3.4 1.2 5 -4.6-2.6 -4.6 2.6 1.2-5 -3.8-3.4 5-.5 Z" fill={light} opacity="0.9" />
      </g>
    );
  } else if (scene === 'stade') {
    shapes = (
      <g fill="none" stroke={light} strokeWidth="2.5" opacity="0.5">
        <path d="M-5 78 q55 -34 110 0" />
        <path d="M-5 90 q55 -38 110 0" />
        <path d="M-5 66 q55 -30 110 0" opacity="0.7" />
      </g>
    );
  } else if (scene === 'ville') {
    shapes = (
      <g fill={deep} opacity="0.5">
        {[6, 22, 36, 52, 68, 84].map((x, i) => (
          <rect key={i} x={x} y={50 - r(i) * 26} width="12" height="60" />
        ))}
      </g>
    );
  }

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', ...style }}>
      <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(155deg, ${light} 0%, ${deep} 92%)` }} />
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {shapes}
      </svg>
      {/* subtle film grain / vignette */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.08), rgba(0,0,0,0.22) 100%)' }} />
    </div>
  );
}

/* play badge for videos, sits inside a positioned tile */
function VideoBadge({ dur }) {
  return (
    <React.Fragment>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        pointerEvents: 'none',
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: '50%', background: 'rgba(0,0,0,0.42)',
          backdropFilter: 'blur(2px)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          border: '1.5px solid rgba(255,255,255,0.85)',
        }}>
          <Icon name="play" size={20} color="#fff" />
        </div>
      </div>
      {dur && (
        <div style={{
          position: 'absolute', bottom: 6, right: 6, padding: '2px 6px', borderRadius: 6,
          background: 'rgba(0,0,0,0.55)', color: '#fff', fontSize: 10, fontWeight: 600,
          fontVariantNumeric: 'tabular-nums', letterSpacing: 0.3,
        }}>{dur}</div>
      )}
    </React.Fragment>
  );
}

/* ---- Media thumb: real file (media/…) OR a styled placeholder scene ---- */
function MediaThumb({ media, large }) {
  const src = media.fichier ? ('media/' + media.fichier) : null;
  const fill = { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' };
  if (src && media.type === 'video') {
    return (
      <React.Fragment>
        <video src={src} muted={!large} playsInline preload="metadata" controls={!!large} style={fill} />
        {!large && <VideoBadge dur={media.duree} />}
      </React.Fragment>
    );
  }
  if (src) {
    return <img src={src} alt={media.note || ''} loading="lazy" style={fill} />;
  }
  // fallback placeholder
  return (
    <React.Fragment>
      <MediaScene scene={media.scene || 'route'} seed={hashCode(media.id || media.note || media.scene || 'x')} />
      {media.type === 'video' && <VideoBadge dur={media.duree} />}
    </React.Fragment>
  );
}

Object.assign(window, { hashCode, usePersisted, Icon, MediaScene, VideoBadge, MediaThumb });