(function registerFreeSeoColumnMappingTable(global) {
  const React = global.React;
  if (!React) return;

  const FIELDS = [
    ['query', 'Search query'], ['page', 'Page / landing page'], ['clicks', 'Clicks'], ['impressions', 'Impressions'],
    ['ctr', 'CTR'], ['position', 'Average position'], ['sessions', 'Sessions'], ['users', 'Users'],
    ['engagementRate', 'Engagement rate'], ['conversions', 'Conversions'], ['country', 'Country'], ['device', 'Device'],
    ['date', 'Date'], ['channel', 'Channel/source'], ['note', 'Note']
  ];

  function ColumnMappingTable(props) {
    const headers = props.headers || [];
    const mapping = props.mapping || {};
    function setField(field, value) {
      const next = Object.assign({}, mapping);
      if (value) next[field] = value; else delete next[field];
      if (props.onChange) props.onChange(next);
    }
    return <div className="free-seo-card compact">
      <div className="free-seo-card-header"><div><h3>Column mapping</h3><p>Map uploaded columns to normalized evidence fields. Unmapped optional fields are ignored.</p></div></div>
      <div className="free-seo-table-wrap"><table className="free-seo-table"><thead><tr><th>Field</th><th>Column</th></tr></thead><tbody>{FIELDS.map((field) => <tr key={field[0]}><td><strong>{field[1]}</strong><small>{field[0]}</small></td><td><select value={mapping[field[0]] || ''} onChange={(event) => setField(field[0], event.target.value)}><option value="">Auto / not mapped</option>{headers.map((header) => <option key={header} value={header}>{header}</option>)}</select></td></tr>)}</tbody></table></div>
    </div>;
  }

  global.FreeSeoColumnMappingTable = ColumnMappingTable;
})(window);