import React from 'react';
import { num } from '../api/useXplane.js';

// Touch-friendly radio tuner, styled like our KAP 140 (green LCD) + the desktop
// launcher (macOS-dark chrome). Tunes the STANDBY frequency and swaps it active
// via X-Plane's own per-radio commands (no unit-sensitive frequency writes).
const fmt = (v, isCom) => (num(v) / 100).toFixed(isCom ? 3 : 2);

export default function RadioTuner({ values, command, radio, onClose }) {
  const { id, label, isCom } = radio;
  const sb = values[`${id}Sb`];
  const act = values[id];
  const cmd = (s) => command(`${id}${s}`);
  return (
    <div className="dlg-backdrop" onClick={onClose}>
      <div className="rtuner" onClick={(e) => e.stopPropagation()}>
        <div className="rt-head">
          <span className="rt-title">{label}</span>
          <span className="rt-kind">{isCom ? 'COM' : 'NAV'}</span>
        </div>

        <div className="rt-lcd">
          <div className="rt-f"><span>ACTIVE</span><b className="act">{fmt(act, isCom)}</b></div>
          <button className="rt-swap" onClick={() => cmd('Swap')} title="Aktiv ↔ Standby">⇆</button>
          <div className="rt-f right"><span>STANDBY</span><b className="sby">{fmt(sb, isCom)}</b></div>
        </div>

        <div className="rt-tune">
          <div className="rt-row">
            <span className="rt-unit">MHz</span>
            <button className="rt-step" onClick={() => cmd('CoarseDown')}>−</button>
            <button className="rt-step" onClick={() => cmd('CoarseUp')}>+</button>
          </div>
          <div className="rt-row">
            <span className="rt-unit">kHz</span>
            <button className="rt-step" onClick={() => cmd('FineDown')}>−</button>
            <button className="rt-step" onClick={() => cmd('FineUp')}>+</button>
          </div>
        </div>

        <div className="rt-actions">
          <button className="rt-btn primary" onClick={() => cmd('Swap')}>⇆ Auf Aktiv</button>
          <button className="rt-btn" onClick={onClose}>Schließen</button>
        </div>
      </div>
    </div>
  );
}