// Live barbell + bodyweight visualizations for the set logger
// Standard plate colors: 25kg=red, 20kg=blue, 15kg=yellow, 10kg=green, 5kg=white, 2.5kg=red, 1.25kg=chrome

const PLATES = [
  { kg: 25, color: "#E63946", w: 14, h: 110 },
  { kg: 20, color: "#3B82F6", w: 13, h: 100 },
  { kg: 15, color: "#FBBF24", w: 12, h: 90 },
  { kg: 10, color: "#22C55E", w: 10, h: 76 },
  { kg: 5,  color: "#F5F1E8", w: 8,  h: 60 },
  { kg: 2.5, color: "#E63946", w: 7,  h: 50 },
  { kg: 1.25, color: "#9CA3AF", w: 6, h: 42 },
];

// Decompose target weight (per side, after subtracting bar) into plates
function decomposePlates(perSide) {
  const out = [];
  let rem = perSide;
  for (const p of PLATES) {
    while (rem >= p.kg - 0.001) {
      out.push(p);
      rem -= p.kg;
      if (out.length > 8) return out; // cap
    }
  }
  return out;
}

const BarbellViz = ({ weight, kind, color }) => {
  // For barbell: 20kg bar, plates load on each side
  // For dumbbell: 2kg handle, plates per side, render two dumbbells
  const isBB = kind === "bb";
  const barWeight = isBB ? 20 : 2;
  const perSide = Math.max(0, (weight - barWeight) / 2);
  const plates = decomposePlates(perSide);

  if (isBB) {
    // BARBELL: long bar with sleeves + plates
    return (
      <svg viewBox="0 0 600 180" className="lg-bb-svg" preserveAspectRatio="xMidYMid meet">
        {/* Floor line */}
        <line x1="0" y1="160" x2="600" y2="160" stroke="rgba(245,241,232,0.15)" strokeDasharray="6 6" strokeWidth="1.5" />
        {/* Bar shaft */}
        <rect x="100" y="86" width="400" height="8" fill="#D4D4D8" />
        <rect x="100" y="86" width="400" height="2" fill="#F5F1E8" opacity="0.8" />
        {/* Knurling marks */}
        {[180, 220, 260, 300, 340, 380, 420].map((x, i) => (
          <line key={i} x1={x} y1="88" x2={x} y2="92" stroke="#52525B" strokeWidth="1" />
        ))}
        {/* Left sleeve */}
        <rect x="80" y="84" width="22" height="12" fill="#71717A" />
        <rect x="80" y="82" width="4" height="16" fill="#52525B" />
        {/* Right sleeve */}
        <rect x="498" y="84" width="22" height="12" fill="#71717A" />
        <rect x="516" y="82" width="4" height="16" fill="#52525B" />

        {/* Plates LEFT */}
        {(() => {
          let x = 78;
          return plates.map((p, i) => {
            x -= p.w + 1;
            return (
              <g key={`l-${i}`}>
                <rect x={x} y={90 - p.h/2} width={p.w} height={p.h} fill={p.color} stroke="#0A0A0A" strokeWidth="1.5" rx="2" />
                <rect x={x + 1} y={90 - p.h/2 + 2} width={p.w - 2} height="3" fill="#FFFFFF" opacity="0.25" />
                <text x={x + p.w/2} y={92} textAnchor="middle" fontSize="9" fontWeight="700" fontFamily="JetBrains Mono"
                      fill={p.kg >= 5 ? "#FFFFFF" : "#0A0A0A"}>{p.kg}</text>
              </g>
            );
          });
        })()}
        {/* Plates RIGHT */}
        {(() => {
          const els = [];
          let x = 522;
          for (let i = 0; i < plates.length; i++) {
            const p = plates[i];
            els.push(
              <g key={`r-${i}`}>
                <rect x={x} y={90 - p.h/2} width={p.w} height={p.h} fill={p.color} stroke="#0A0A0A" strokeWidth="1.5" rx="2" />
                <rect x={x + 1} y={90 - p.h/2 + 2} width={p.w - 2} height="3" fill="#FFFFFF" opacity="0.25" />
                <text x={x + p.w/2} y={92} textAnchor="middle" fontSize="9" fontWeight="700" fontFamily="JetBrains Mono"
                      fill={p.kg >= 5 ? "#FFFFFF" : "#0A0A0A"}>{p.kg}</text>
              </g>
            );
            x += p.w + 1;
          }
          return els;
        })()}

        {/* Total weight overlay */}
        <text x="300" y="172" textAnchor="middle" fontSize="11" fontWeight="600"
              fontFamily="JetBrains Mono" fill={color} letterSpacing="2">
          BAR 20 + {(perSide * 2).toFixed(2).replace(/\.00$/, "")}KG = {weight}KG
        </text>
      </svg>
    );
  }

  // DUMBBELL: two short handles with plates
  const dbHandleW = 60;
  return (
    <svg viewBox="0 0 600 180" className="lg-bb-svg" preserveAspectRatio="xMidYMid meet">
      <line x1="0" y1="160" x2="600" y2="160" stroke="rgba(245,241,232,0.15)" strokeDasharray="6 6" strokeWidth="1.5" />

      {/* Two dumbbells side by side */}
      {[150, 450].map((cx, dbIdx) => (
        <g key={dbIdx}>
          {/* Handle */}
          <rect x={cx - dbHandleW/2} y="86" width={dbHandleW} height="8" fill="#D4D4D8" />
          {[cx - 20, cx - 8, cx + 4, cx + 16].map((x, i) => (
            <line key={i} x1={x} y1="88" x2={x} y2="92" stroke="#52525B" strokeWidth="1" />
          ))}
          {/* Center grip */}
          <rect x={cx - 15} y="84" width="30" height="12" fill="#71717A" rx="1" />

          {/* Plates LEFT */}
          {(() => {
            const els = [];
            let x = cx - dbHandleW/2 - 2;
            for (let i = 0; i < plates.length; i++) {
              const p = plates[i];
              x -= p.w + 1;
              const ph = p.h * 0.7; // smaller for dumbbells
              const pw = p.w * 0.9;
              els.push(
                <g key={`l-${dbIdx}-${i}`}>
                  <rect x={x} y={90 - ph/2} width={pw} height={ph} fill={p.color} stroke="#0A0A0A" strokeWidth="1.5" rx="2" />
                  <rect x={x + 1} y={90 - ph/2 + 2} width={pw - 2} height="2" fill="#FFFFFF" opacity="0.25" />
                </g>
              );
            }
            return els;
          })()}
          {/* Plates RIGHT */}
          {(() => {
            const els = [];
            let x = cx + dbHandleW/2 + 2;
            for (let i = 0; i < plates.length; i++) {
              const p = plates[i];
              const ph = p.h * 0.7;
              const pw = p.w * 0.9;
              els.push(
                <g key={`r-${dbIdx}-${i}`}>
                  <rect x={x} y={90 - ph/2} width={pw} height={ph} fill={p.color} stroke="#0A0A0A" strokeWidth="1.5" rx="2" />
                  <rect x={x + 1} y={90 - ph/2 + 2} width={pw - 2} height="2" fill="#FFFFFF" opacity="0.25" />
                </g>
              );
              x += pw + 1;
            }
            return els;
          })()}
        </g>
      ))}

      <text x="300" y="172" textAnchor="middle" fontSize="11" fontWeight="600"
            fontFamily="JetBrains Mono" fill={color} letterSpacing="2">
        EACH DUMBBELL · {weight}KG
      </text>
    </svg>
  );
};

const BodyweightViz = ({ added, pullup, color }) => {
  // Stick figure with optional weight belt indicator
  return (
    <svg viewBox="0 0 600 180" className="lg-bb-svg" preserveAspectRatio="xMidYMid meet">
      <line x1="0" y1="160" x2="600" y2="160" stroke="rgba(245,241,232,0.15)" strokeDasharray="6 6" strokeWidth="1.5" />

      {pullup && (
        <line x1="220" y1="20" x2="380" y2="20" stroke="#F5F1E8" strokeWidth="6" strokeLinecap="round" />
      )}

      <g transform="translate(300, 30)">
        {/* Stick figure */}
        {pullup ? (
          <>
            <line x1="-15" y1="-10" x2="-15" y2="0" stroke={color} strokeWidth="4" strokeLinecap="round" />
            <line x1="15" y1="-10" x2="15" y2="0" stroke={color} strokeWidth="4" strokeLinecap="round" />
            <circle cx="0" cy="20" r="14" fill="none" stroke={color} strokeWidth="4" />
            <line x1="-15" y1="-10" x2="-8" y2="35" stroke={color} strokeWidth="4" strokeLinecap="round" />
            <line x1="15" y1="-10" x2="8" y2="35" stroke={color} strokeWidth="4" strokeLinecap="round" />
            <line x1="0" y1="35" x2="0" y2="90" stroke={color} strokeWidth="4" strokeLinecap="round" />
            <line x1="0" y1="90" x2="-12" y2="125" stroke={color} strokeWidth="4" strokeLinecap="round" />
            <line x1="0" y1="90" x2="12" y2="125" stroke={color} strokeWidth="4" strokeLinecap="round" />
          </>
        ) : (
          <>
            <circle cx="0" cy="0" r="14" fill="none" stroke={color} strokeWidth="4" />
            <line x1="0" y1="14" x2="0" y2="70" stroke={color} strokeWidth="4" strokeLinecap="round" />
            <line x1="0" y1="30" x2="-30" y2="55" stroke={color} strokeWidth="4" strokeLinecap="round" />
            <line x1="0" y1="30" x2="30" y2="55" stroke={color} strokeWidth="4" strokeLinecap="round" />
            <line x1="0" y1="70" x2="-18" y2="115" stroke={color} strokeWidth="4" strokeLinecap="round" />
            <line x1="0" y1="70" x2="18" y2="115" stroke={color} strokeWidth="4" strokeLinecap="round" />
          </>
        )}

        {/* Weight belt if added load */}
        {added > 0 && (
          <g transform={pullup ? "translate(0, 60)" : "translate(0, 50)"}>
            <rect x="-22" y="-4" width="44" height="10" fill="#FFB800" stroke="#0A0A0A" strokeWidth="1.5" rx="1" />
            <text x="0" y="3" textAnchor="middle" fontSize="8" fontWeight="700"
                  fontFamily="JetBrains Mono" fill="#0A0A0A">+{added}</text>
          </g>
        )}
      </g>

      <text x="300" y="172" textAnchor="middle" fontSize="11" fontWeight="600"
            fontFamily="JetBrains Mono" fill={color} letterSpacing="2">
        {added > 0 ? `BODYWEIGHT + ${added}KG` : "BODYWEIGHT ONLY"}
      </text>
    </svg>
  );
};

window.BarbellViz = BarbellViz;
window.BodyweightViz = BodyweightViz;