// Customizable data chart with column toggles + unit-aware formatting
const { useState: useChartState, useMemo } = React;

const ALL_COLUMNS = [
  { key: 'range_m', label: 'Range', group: 'core' },
  { key: 'drop_mrad', label: 'Drop MRAD', group: 'drop' },
  { key: 'drop_moa', label: 'Drop MOA', group: 'drop' },
  { key: 'drop_dist', label: 'Drop', group: 'drop' },
  { key: 'wind_mrad', label: 'Wind MRAD', group: 'wind' },
  { key: 'wind_dist', label: 'Wind', group: 'wind' },
  { key: 'velocity', label: 'Velocity', group: 'core' },
  { key: 'energy', label: 'Energy', group: 'core' },
  { key: 'time', label: 'TOF', group: 'core' },
  { key: 'mach', label: 'Mach', group: 'core' }
];

const ChartPanel = ({ table, profile, units, defaultColumns, onSetDefault }) => {
  const [enabled, setEnabled] = useChartState(defaultColumns || ['range_m','drop_mrad','wind_mrad','velocity','energy','time']);
  const [showCols, setShowCols] = useChartState(false);

  function toggleCol(k) {
    const next = enabled.includes(k) ? enabled.filter(c => c !== k) : [...enabled, k];
    setEnabled(next);
    if (onSetDefault) onSetDefault(next);
  }

  function formatRange(r) {
    return units === 'imperial' ? `${(r * 1.09361).toFixed(0)}` : `${r}`;
  }
  function rangeUnit() { return units === 'imperial' ? 'yd' : 'm'; }
  function distUnit() { return units === 'imperial' ? 'in' : 'cm'; }
  function velUnit() { return units === 'imperial' ? 'fps' : 'm/s'; }
  function energyUnit() { return units === 'imperial' ? 'ft·lb' : 'J'; }

  function valFor(row, key) {
    switch (key) {
      case 'range_m': return formatRange(row.range_m);
      case 'drop_mrad': return (-row.drop_m / row.range_m * 1000).toFixed(2);
      case 'drop_moa': return (-row.drop_m / row.range_m * 3437.75).toFixed(2);
      case 'drop_dist': {
        return units === 'imperial' ? (row.drop_m * 39.3701).toFixed(1) : (row.drop_m * 100).toFixed(1);
      }
      case 'wind_mrad': return (row.wind_m / row.range_m * 1000).toFixed(2);
      case 'wind_dist':
        return units === 'imperial' ? (row.wind_m * 39.3701).toFixed(1) : (row.wind_m * 100).toFixed(1);
      case 'velocity':
        return units === 'imperial' ? (row.velocity_mps * 3.28084).toFixed(0) : row.velocity_mps.toFixed(0);
      case 'energy': {
        const j = 0.5 * (profile.weight_g / 1000) * row.velocity_mps * row.velocity_mps;
        return units === 'imperial' ? (j * 0.737562).toFixed(0) : j.toFixed(0);
      }
      case 'time': return row.time_s.toFixed(2);
      case 'mach': return row.mach.toFixed(2);
      default: return '—';
    }
  }

  function unitFor(key) {
    if (key === 'range_m') return rangeUnit();
    if (key === 'drop_mrad' || key === 'wind_mrad') return 'mrad';
    if (key === 'drop_moa') return 'moa';
    if (key === 'drop_dist' || key === 'wind_dist') return distUnit();
    if (key === 'velocity') return velUnit();
    if (key === 'energy') return energyUnit();
    if (key === 'time') return 's';
    return '';
  }

  // Sparkline of trajectory
  const spark = useMemo(() => {
    if (!table || !table.length) return null;
    const minY = Math.min(...table.map(r => r.drop_m));
    const maxY = 0;
    const w = 600, h = 80;
    const xMax = table[table.length - 1].range_m;
    const points = table.map(r => {
      const x = (r.range_m / xMax) * w;
      const y = h - ((r.drop_m - minY) / (maxY - minY || 1)) * (h - 10) - 5;
      return [x, y];
    });
    const path = points.map((p, i) => (i === 0 ? 'M' : 'L') + p[0].toFixed(1) + ',' + p[1].toFixed(1)).join(' ');
    // Find transonic crossing
    const transIdx = table.findIndex(r => r.mach < 1.2);
    return { path, transIdx, w, h, xMax, minY, points };
  }, [table]);

  return (
    <div className="chart-panel">
      <div className="chart-h">
        <div className="ch-tabs">
          <span className="ch-title">SOLUTION TABLE</span>
          <span className="ch-sub">{(table || []).length} rows</span>
        </div>
        <div className="ch-actions">
          <button className="ghost-btn" onClick={() => setShowCols(!showCols)}>
            {showCols ? 'HIDE COLUMNS' : 'COLUMNS'}
          </button>
        </div>
      </div>

      {showCols && (
        <div className="col-picker">
          {ALL_COLUMNS.map(c => (
            <label key={c.key} className={'col-chip' + (enabled.includes(c.key) ? ' on' : '')}>
              <input type="checkbox" checked={enabled.includes(c.key)} onChange={() => toggleCol(c.key)} />
              <span>{c.label}</span>
            </label>
          ))}
        </div>
      )}

      {spark && (
        <div className="spark-wrap">
          <svg viewBox={`0 0 ${spark.w} ${spark.h}`} preserveAspectRatio="none">
            <defs>
              <linearGradient id="sparkfill" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#ff8c2a" stopOpacity="0.35" />
                <stop offset="100%" stopColor="#ff8c2a" stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d={spark.path + ` L ${spark.w},${spark.h} L 0,${spark.h} Z`} fill="url(#sparkfill)" />
            <path d={spark.path} fill="none" stroke="#ff8c2a" strokeWidth="1.4" />
            {spark.transIdx > -1 && (
              <line x1={(table[spark.transIdx].range_m / spark.xMax) * spark.w}
                    x2={(table[spark.transIdx].range_m / spark.xMax) * spark.w}
                    y1="0" y2={spark.h} stroke="#a04444" strokeDasharray="2 3" strokeWidth="1" />
            )}
          </svg>
          <div className="spark-axis">
            <span>0</span><span>{Math.round((table[table.length - 1].range_m) / 2)}</span><span>{table[table.length - 1].range_m}{rangeUnit() === 'yd' ? 'm' : 'm'}</span>
          </div>
        </div>
      )}

      <div className="table-scroll">
        <table className="data-table">
          <thead>
            <tr>
              {enabled.map(k => {
                const col = ALL_COLUMNS.find(c => c.key === k);
                return <th key={k}>{col.label} <span className="th-unit">{unitFor(k)}</span></th>;
              })}
            </tr>
          </thead>
          <tbody>
            {(table || []).map(row => (
              <tr key={row.range_m} className={row.mach < 1.0 ? 'subsonic' : (row.mach < 1.2 ? 'transonic' : '')}>
                {enabled.map(k => <td key={k}>{valFor(row, k)}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="chart-foot">
        <span className="legend"><i className="dot transonic"></i>transonic ≤ M1.2</span>
        <span className="legend"><i className="dot subsonic"></i>subsonic ≤ M1.0</span>
      </div>
    </div>
  );
};

window.ChartPanel = ChartPanel;