// Solver panel — model selector + environmentals
const SolverPanel = ({ env, setEnv, model, setModel, maxRange, setMaxRange, units }) => {
  const u = units;

  function update(k, v) { setEnv({ ...env, [k]: v }); }

  const modelDescriptions = {
    simple: 'Newtonian projectile + constant Cd. Educational. No atmosphere.',
    standard: 'G1/G7 BC integration. Uses ICAO standard atmosphere.',
    full: 'G1/G7 + density altitude, spin drift, Coriolis. All inputs respected.'
  };

  return (
    <div className="panel">
      <div className="panel-h">SOLVER MODEL</div>
      <div className="seg vertical">
        {[['simple','SIMPLE'],['standard','STANDARD'],['full','FULL']].map(([k, lbl]) => (
          <button key={k} className={'seg-btn ' + (model === k ? 'on' : '')} onClick={() => setModel(k)}>
            <span className="kbd">{lbl}</span>
          </button>
        ))}
      </div>
      <div className="model-desc">{modelDescriptions[model]}</div>

      <div className="panel-h sub">RANGE</div>
      <div className="slider-row">
        <input type="range" min="200" max="4000" step="100" value={maxRange} onChange={e => setMaxRange(parseInt(e.target.value))} />
        <span className="kbd">{u === 'imperial' ? `${(maxRange * 1.09361).toFixed(0)} yd` : `${maxRange} m`}</span>
      </div>

      {model !== 'simple' && (
        <>
          <div className="panel-h sub">ATMOSPHERE</div>
          <div className="env-grid">
            <EnvField label="Temp" suffix={u === 'imperial' ? '°F' : '°C'}
              value={u === 'imperial' ? +(env.temp_C * 9/5 + 32).toFixed(0) : env.temp_C}
              step={1}
              onChange={v => update('temp_C', u === 'imperial' ? (v - 32) * 5/9 : v)}
              disabled={model !== 'full'} />
            <EnvField label="Pressure" suffix={u === 'imperial' ? 'inHg' : 'hPa'}
              value={u === 'imperial' ? +(env.pressure_hPa * 0.02953).toFixed(2) : env.pressure_hPa}
              step={u === 'imperial' ? 0.1 : 1}
              onChange={v => update('pressure_hPa', u === 'imperial' ? v / 0.02953 : v)}
              disabled={model !== 'full'} />
            <EnvField label="Humidity" suffix="%" value={env.humidity_pct} step={5} min={0} max={100}
              onChange={v => update('humidity_pct', v)} disabled={model !== 'full'} />
            <EnvField label="Altitude" suffix={u === 'imperial' ? 'ft' : 'm'}
              value={u === 'imperial' ? +(env.altitude_m * 3.28084).toFixed(0) : env.altitude_m}
              step={u === 'imperial' ? 100 : 50}
              onChange={v => update('altitude_m', u === 'imperial' ? v / 3.28084 : v)}
              disabled={model !== 'full'} />
          </div>

          <div className="panel-h sub">WIND</div>
          <div className="env-grid">
            <EnvField label="Speed" suffix={u === 'imperial' ? 'mph' : 'm/s'}
              value={u === 'imperial' ? +(env.windSpeed_mps * 2.23694).toFixed(1) : env.windSpeed_mps}
              step={u === 'imperial' ? 1 : 0.5} min={0}
              onChange={v => update('windSpeed_mps', u === 'imperial' ? v / 2.23694 : v)} />
            <EnvField label="Direction" suffix="°" value={env.windDir_deg} step={15} min={0} max={359}
              onChange={v => update('windDir_deg', v)} />
          </div>
          <WindClock dir={env.windDir_deg} speed={env.windSpeed_mps} units={u} />

          <div className="panel-h sub">GEOMETRY</div>
          <div className="env-grid">
            <EnvField label="Shot angle" suffix="°" value={env.shotAngle_deg} step={1} min={-45} max={45}
              onChange={v => update('shotAngle_deg', v)} />
            {model === 'full' && <>
              <EnvField label="Latitude" suffix="°" value={env.latitude_deg} step={1} min={-90} max={90}
                onChange={v => update('latitude_deg', v)} />
              <EnvField label="Azimuth" suffix="°" value={env.azimuth_deg} step={5} min={0} max={359}
                onChange={v => update('azimuth_deg', v)} />
            </>}
          </div>
        </>
      )}
    </div>
  );
};

const EnvField = ({ label, suffix, value, step, onChange, disabled, min, max }) => (
  <label className={'env-field' + (disabled ? ' disabled' : '')}>
    <span className="env-label">{label}</span>
    <div className="env-inputrow">
      <input type="number" value={value} step={step} min={min} max={max} disabled={disabled}
        onChange={e => onChange(parseFloat(e.target.value))} />
      <span className="env-suffix">{suffix}</span>
    </div>
  </label>
);

const WindClock = ({ dir, speed, units }) => {
  const r = 38;
  const rad = (dir - 90) * Math.PI / 180;
  const x = 50 + Math.cos(rad) * r;
  const y = 50 + Math.sin(rad) * r;
  return (
    <div className="wind-clock-wrap">
      <svg viewBox="0 0 100 100" width="100" height="100">
        <circle cx="50" cy="50" r="44" fill="#0a0c0e" stroke="#2a2f33" />
        {[12,3,6,9].map((c, i) => {
          const ang = (i * 90 - 90) * Math.PI / 180;
          return <text key={c} x={50 + Math.cos(ang) * 38} y={50 + Math.sin(ang) * 38 + 3} fill="#7a8088" fontSize="8" fontFamily="monospace" textAnchor="middle">{c}</text>;
        })}
        <line x1="50" y1="50" x2={x} y2={y} stroke="#ff8c2a" strokeWidth="2" />
        <circle cx={x} cy={y} r="3" fill="#ff8c2a" />
        <circle cx="50" cy="50" r="2" fill="#ff8c2a" />
      </svg>
      <div className="wind-readout">
        <div className="kbd">{units === 'imperial' ? (speed * 2.23694).toFixed(1) + ' mph' : speed.toFixed(1) + ' m/s'}</div>
        <div className="kbd dim">FROM {dir}°</div>
      </div>
    </div>
  );
};

window.SolverPanel = SolverPanel;