// AGENT_TARGET: body-compare — side-by-side planet body comparison with normalized bar charts

// Numeric stats for comparison charts — authoritative NASA values
const BODY_COMPARE_STATS = {
  sun: { radiusKm: 696340, gravityG: 27.9, dayHours: 600 },
  mercury: { radiusKm: 2439, gravityG: 0.38, dayHours: 1416 },
  venus: { radiusKm: 6051, gravityG: 0.9, dayHours: 5832 },
  earth: { radiusKm: 6371, gravityG: 1.0, dayHours: 24 },
  mars: { radiusKm: 3389, gravityG: 0.38, dayHours: 24.6 },
  jupiter: { radiusKm: 69911, gravityG: 2.53, dayHours: 9.9 },
  saturn: { radiusKm: 58232, gravityG: 1.07, dayHours: 10.7 },
  uranus: { radiusKm: 25362, gravityG: 0.89, dayHours: 17.2 },
  neptune: { radiusKm: 24622, gravityG: 1.14, dayHours: 16.1 },
};

const COMPARE_CHARTS = [
  {
    key: "radiusKm",
    label: "Size (radius)",
    format: (v) =>
      v >= 100000
        ? (v / 1000).toFixed(0) + ",000 km"
        : v.toLocaleString() + " km",
  },
  {
    key: "gravityG",
    label: "Gravity",
    format: (v) => v.toFixed(2) + "× Earth",
  },
  {
    key: "dayHours",
    label: "Day length",
    format: (v) =>
      v >= 48 ? (v / 24).toFixed(1) + " Earth days" : v.toFixed(1) + " hours",
  },
];

function BodyComparePanel({ onClose }) {
  // AGENT_TARGET: body-compare — BodyComparePanel main component
  const options = (typeof PLANETS !== "undefined" ? PLANETS : []).filter(
    (p) => BODY_COMPARE_STATS[p.id],
  );
  const [idA, setIdA] = React.useState("earth");
  const [idB, setIdB] = React.useState("mars");

  const pA = options.find((p) => p.id === idA) ||
    options[3] || { name: "Earth", color: "#4a90d9" };
  const pB = options.find((p) => p.id === idB) ||
    options[4] || { name: "Mars", color: "#c1440e" };
  const sA = BODY_COMPARE_STATS[idA] || BODY_COMPARE_STATS.earth;
  const sB = BODY_COMPARE_STATS[idB] || BODY_COMPARE_STATS.mars;
  const earthWeightLb = 50;
  const weightA = Math.round(earthWeightLb * sA.gravityG);
  const weightB = Math.round(earthWeightLb * sB.gravityG);
  const heavierPlanet =
    sA.gravityG === sB.gravityG ? null : sA.gravityG > sB.gravityG ? pA : pB;
  const gravityClue = heavierPlanet
    ? `${heavierPlanet.name} pulls harder, so the same backpack feels heavier there.`
    : "Both places pull about the same, so the backpack feels nearly equal.";

  return (
    <div
      className="body-compare-overlay"
      role="dialog"
      aria-label="Planet comparison panel"
    >
      <div className="body-compare-topbar">
        <span className="body-compare-title">Planet Comparison</span>
        <button
          className="body-compare-close"
          onClick={onClose}
          aria-label="Close comparison"
        >
          ✕
        </button>
      </div>

      <div className="body-compare-selectors">
        <select
          className="body-compare-select"
          value={idA}
          onChange={(e) => setIdA(e.target.value)}
          aria-label="First body"
        >
          {options.map((p) => (
            <option key={p.id} value={p.id}>
              {p.name}
            </option>
          ))}
        </select>
        <span className="body-compare-vs">vs</span>
        <select
          className="body-compare-select"
          value={idB}
          onChange={(e) => setIdB(e.target.value)}
          aria-label="Second body"
        >
          {options.map((p) => (
            <option key={p.id} value={p.id}>
              {p.name}
            </option>
          ))}
        </select>
      </div>

      <div className="body-compare-weight-card" aria-label={gravityClue}>
        <div className="body-compare-weight-title">
          If a backpack is {earthWeightLb} lb on Earth...
        </div>
        <div className="body-compare-weight-grid">
          <span style={{ color: pA.color || "#7ec8e3" }}>{pA.name}</span>
          <strong>{weightA} lb feel</strong>
          <span style={{ color: pB.color || "#f97316" }}>{pB.name}</span>
          <strong>{weightB} lb feel</strong>
        </div>
        <p>{gravityClue}</p>
      </div>

      <div className="body-compare-charts">
        {COMPARE_CHARTS.map((chart) => {
          const vA = sA[chart.key];
          const vB = sB[chart.key];
          const maxV = Math.max(vA, vB, 0.001);
          const pctA = (vA / maxV) * 100;
          const pctB = (vB / maxV) * 100;
          const colorA = pA.color || "#7ec8e3";
          const colorB = pB.color || "#f97316";
          return (
            <div key={chart.key} className="body-compare-chart">
              <div className="body-compare-chart-label">{chart.label}</div>
              <div className="body-compare-bar-row">
                <span
                  className="body-compare-bar-name"
                  style={{ color: colorA }}
                >
                  {pA.name}
                </span>
                <div className="body-compare-bar-track">
                  <div
                    className="body-compare-bar-fill"
                    style={{ width: pctA + "%", background: colorA }}
                  />
                </div>
                <span className="body-compare-bar-val">{chart.format(vA)}</span>
              </div>
              <div className="body-compare-bar-row">
                <span
                  className="body-compare-bar-name"
                  style={{ color: colorB }}
                >
                  {pB.name}
                </span>
                <div className="body-compare-bar-track">
                  <div
                    className="body-compare-bar-fill"
                    style={{ width: pctB + "%", background: colorB }}
                  />
                </div>
                <span className="body-compare-bar-val">{chart.format(vB)}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}