// MuscleMap — abstract front+back body silhouette with heatmap fills
// Each muscle is a labeled rectangle/region (no anatomical SVG art — clean blocks)
const MuscleMap = ({ volumes, color, height = 520, compact = false }) => {
  // Normalize: max value -> 1, others scaled. Use 4 intensity bins for poster look.
  const max = Math.max(1, ...Object.values(volumes));
  const intensity = (v) => v / max; // 0..1
  const bin = (v) => {
    const n = intensity(v);
    if (n < 0.05) return 0;
    if (n < 0.25) return 1;
    if (n < 0.5)  return 2;
    if (n < 0.8)  return 3;
    return 4;
  };
  const opacityFor = (v) => {
    const b = bin(v);
    return [0.08, 0.25, 0.5, 0.75, 1.0][b];
  };

  // Body part regions on a 200×400 viewBox (per side)
  // FRONT body
  const front = [
    // Head
    { id: "head",       x: 86, y: 6,   w: 28, h: 28, label: "", muscle: null },
    // Neck
    { id: "neck",       x: 90, y: 34,  w: 20, h: 8,  label: "", muscle: null },
    // Shoulders / front delts
    { id: "front_delt_l", x: 56, y: 44,  w: 28, h: 18, muscle: "front_delt", label: "FD" },
    { id: "front_delt_r", x: 116,y: 44,  w: 28, h: 18, muscle: "front_delt", label: "FD" },
    // Chest
    { id: "chest_l",    x: 70, y: 62,  w: 28, h: 36, muscle: "chest",      label: "CHEST" },
    { id: "chest_r",    x: 102,y: 62,  w: 28, h: 36, muscle: "chest",      label: "CHEST" },
    // Side delt slivers
    { id: "side_delt_l",x: 48, y: 50,  w: 8,  h: 22, muscle: "side_delt",  label: "" },
    { id: "side_delt_r",x: 144,y: 50,  w: 8,  h: 22, muscle: "side_delt",  label: "" },
    // Biceps
    { id: "biceps_l",   x: 44, y: 72,  w: 16, h: 36, muscle: "biceps",     label: "BI" },
    { id: "biceps_r",   x: 140,y: 72,  w: 16, h: 36, muscle: "biceps",     label: "BI" },
    // Forearms
    { id: "forearm_l",  x: 36, y: 110, w: 20, h: 42, muscle: "forearms",   label: "FA" },
    { id: "forearm_r",  x: 144,y: 110, w: 20, h: 42, muscle: "forearms",   label: "FA" },
    // Abs
    { id: "abs",        x: 82, y: 102, w: 36, h: 56, muscle: "abs",        label: "ABS" },
    // Obliques
    { id: "oblique_l",  x: 70, y: 110, w: 12, h: 42, muscle: "obliques",   label: "" },
    { id: "oblique_r",  x: 118,y: 110, w: 12, h: 42, muscle: "obliques",   label: "" },
    // Quads
    { id: "quad_l",     x: 70, y: 168, w: 26, h: 84, muscle: "quads",      label: "QUADS" },
    { id: "quad_r",     x: 104,y: 168, w: 26, h: 84, muscle: "quads",      label: "QUADS" },
    // Adductors
    { id: "adductor_l", x: 90, y: 170, w: 8,  h: 60, muscle: "adductors",  label: "" },
    { id: "adductor_r", x: 102,y: 170, w: 8,  h: 60, muscle: "adductors",  label: "" }
  ];

  // BACK body
  const back = [
    { id: "head_b",     x: 86, y: 6,   w: 28, h: 28, label: "", muscle: null },
    { id: "neck_b",     x: 90, y: 34,  w: 20, h: 8,  label: "", muscle: null },
    // Traps
    { id: "traps",      x: 80, y: 42,  w: 40, h: 26, muscle: "traps",      label: "TRAPS" },
    // Rear delts
    { id: "rear_delt_l",x: 56, y: 44,  w: 24, h: 18, muscle: "rear_delt",  label: "RD" },
    { id: "rear_delt_r",x: 120,y: 44,  w: 24, h: 18, muscle: "rear_delt",  label: "RD" },
    // Upper back
    { id: "upper_back_l",x: 64, y: 62, w: 36, h: 30, muscle: "upper_back", label: "UPPER" },
    { id: "upper_back_r",x: 100,y: 62, w: 36, h: 30, muscle: "upper_back", label: "BACK" },
    // Lats
    { id: "lat_l",      x: 60, y: 92,  w: 24, h: 42, muscle: "lats",       label: "LAT" },
    { id: "lat_r",      x: 116,y: 92,  w: 24, h: 42, muscle: "lats",       label: "LAT" },
    // Triceps
    { id: "triceps_l",  x: 38, y: 72,  w: 18, h: 42, muscle: "triceps",    label: "TRI" },
    { id: "triceps_r",  x: 144,y: 72,  w: 18, h: 42, muscle: "triceps",    label: "TRI" },
    // Forearms back
    { id: "forearm_lb", x: 32, y: 114, w: 18, h: 42, muscle: "forearms",   label: "" },
    { id: "forearm_rb", x: 150,y: 114, w: 18, h: 42, muscle: "forearms",   label: "" },
    // Lower back
    { id: "lower_back", x: 82, y: 134, w: 36, h: 28, muscle: "lower_back", label: "LOW BK" },
    // Glutes
    { id: "glute_l",    x: 76, y: 162, w: 24, h: 32, muscle: "glutes",     label: "GL" },
    { id: "glute_r",    x: 100,y: 162, w: 24, h: 32, muscle: "glutes",     label: "GL" },
    // Hamstrings
    { id: "ham_l",      x: 72, y: 196, w: 24, h: 60, muscle: "hamstrings", label: "HAM" },
    { id: "ham_r",      x: 104,y: 196, w: 24, h: 60, muscle: "hamstrings", label: "HAM" },
    // Calves
    { id: "calf_l",     x: 74, y: 260, w: 22, h: 56, muscle: "calves",     label: "CALF" },
    { id: "calf_r",     x: 104,y: 260, w: 22, h: 56, muscle: "calves",     label: "CALF" }
  ];

  const Body = ({ regions, label }) => (
    <div className="mm-body">
      <div className="mm-body-label">{label}</div>
      <svg viewBox="0 0 200 340" className="mm-svg" preserveAspectRatio="xMidYMid meet">
        {/* Body outline (blocky head + torso + legs silhouette) */}
        <g className="mm-outline">
          {/* head */}
          <rect x="86" y="6" width="28" height="28" />
          {/* neck */}
          <rect x="90" y="34" width="20" height="8" />
          {/* torso (one big block) */}
          <rect x="60" y="42" width="80" height="120" />
          {/* arms */}
          <rect x="36" y="44" width="24" height="110" />
          <rect x="140" y="44" width="24" height="110" />
          {/* hips */}
          <rect x="64" y="162" width="72" height="14" />
          {/* legs */}
          <rect x="66" y="176" width="32" height="140" />
          <rect x="102" y="176" width="32" height="140" />
        </g>

        {/* Heatmap fills */}
        {regions.map(r => {
          if (!r.muscle) return null;
          const v = volumes[r.muscle] || 0;
          const op = opacityFor(v);
          return (
            <g key={r.id}>
              <rect
                x={r.x} y={r.y} width={r.w} height={r.h}
                fill={color}
                fillOpacity={op}
                stroke={color}
                strokeOpacity={op > 0.1 ? 0.6 : 0.2}
                strokeWidth="0.5"
              />
              {!compact && r.label && op > 0.15 && (
                <text x={r.x + r.w / 2} y={r.y + r.h / 2 + 3}
                      fill={op > 0.6 ? "#0A0A0A" : "#F5F1E8"}
                      textAnchor="middle"
                      fontFamily="JetBrains Mono"
                      fontWeight="700"
                      fontSize={r.w > 24 ? 8 : 6}
                      style={{ pointerEvents: "none" }}>
                  {r.label}
                </text>
              )}
            </g>
          );
        })}
      </svg>
    </div>
  );

  return (
    <div className="mm-root" style={{ "--c": color }}>
      <div className="mm-bodies">
        <Body regions={front} label="FRONT" />
        <Body regions={back}  label="BACK" />
      </div>

      {!compact && (
        <div className="mm-legend">
          <div className="mm-legend-lbl">VOLUME INTENSITY ▸</div>
          <div className="mm-legend-bar">
            {[0.08, 0.25, 0.5, 0.75, 1.0].map((op, i) => (
              <div key={i} className="mm-legend-cell" style={{ background: color, opacity: op }} />
            ))}
          </div>
          <div className="mm-legend-tags">
            <span>NONE</span>
            <span>HEAVY</span>
          </div>
        </div>
      )}
    </div>
  );
};

window.MuscleMap = MuscleMap;