/* @component-map
 * App — Main container, tab switching between Convert and History views
 * ConvertTab — Input area with edition selection, stat block textarea, examples, and convert button
 * ResultCard — Displays converted Shadowdark stat block with copy and conversion notes
 * HistoryTab — Lists previously converted monsters from personal collection
 * @end-component-map */

import { ConvertTab } from './components/ConvertTab.jsx';
import { useState } from 'react';
import { HistoryTab } from './components/HistoryTab.jsx';

function App() {
  const [activeTab, setActiveTab] = useState('convert');
  const [historyCount, setHistoryCount] = useState(0);

  return (
    <div className="app">
      <div className="header">
        <h1>Shadowdark Converter</h1>
        <div className="subtitle">B/X &amp; OSE → Shadowdark RPG</div>
      </div>

      <div className="tabs">
        <button
          className={`tab ${activeTab === 'convert' ? 'active' : ''}`}
          onClick={() => setActiveTab('convert')}
        >
          ⚔ Convert
        </button>
        <button
          className={`tab ${activeTab === 'history' ? 'active' : ''}`}
          onClick={() => setActiveTab('history')}
        >
          📜 History <span>({historyCount})</span>
        </button>
      </div>

      {activeTab === 'convert' && <ConvertTab />}
      {activeTab === 'history' && <HistoryTab onCountChange={setHistoryCount} />}

      <div className="divider footer-divider"></div>
      <div className="footer-rule">
        AC = 19 − descending AC · HP = 4.5 × HD · MV 30'/rd = near · Scores use 5e-style mods
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);