/* ============================================================
       APP ROOT
       ============================================================ */
    const App = () => {
      const [miniatures, setMiniatures] = useState([...seedMiniatures, ...nurgleRotbringers, ...citiesOfSigmar, ...fleshEaterCourts, ...skavenWarband, ...stormcastRuination]);
      const [warbands, setWarbands] = useState(seedWarbands);
      const [screen, setScreen] = useState({ name: 'home' });
      const [filter, setFilter] = useState('All');
      const [activeBattle, setActiveBattle] = useState(null);

      const nav = (name, params = {}) => setScreen({ name, ...params });

      // Miniature CRUD
      const saveMini = (m) => {
        if (m.id) {
          setMiniatures(prev => prev.map(x => x.id === m.id ? m : x));
          nav('miniatureDetail', { id: m.id });
        } else {
          const id = 'm' + Date.now();
          setMiniatures(prev => [...prev, { ...m, id }]);
          nav('miniatures');
        }
      };
      const deleteMini = (id) => {
        setMiniatures(prev => prev.filter(x => x.id !== id));
        // Remove from warbands too
        setWarbands(prev => prev.map(w => ({ ...w, unitIds: w.unitIds.filter(x => x !== id) })));
        nav('miniatures');
      };

      // Warband CRUD
      const saveWarband = (w) => {
        setWarbands(prev => prev.map(x => x.id === w.id ? w : x));
      };
      const newWarband = () => {
        const id = 'w' + Date.now();
        const w = { id, name: 'New Warband', gameSystem: 'Trench Crusade', faction: '', unitIds: [], notes: '' };
        setWarbands(prev => [...prev, w]);
        nav('warbandDetail', { id });
      };
      const deleteWarband = (id) => {
        setWarbands(prev => prev.filter(x => x.id !== id));
        nav('warbands');
      };

      // Battle
      const startBattle = (config) => {
        const yours = warbands.find(w => w.id === config.yourWarbandId);
        const opp = config.opponentWarbandId ? warbands.find(w => w.id === config.opponentWarbandId) : null;
        const buildUnits = (mIds) => mIds.map(id => {
          const m = miniatures.find(x => x.id === id);
          if (!m) return null;
          // Determine HP from trackers or default
          const maxHp = m.trackers?.HP || m.trackers?.Wounds || m.attributes?.Wounds || m.attributes?.HP || 3;
          return {
            uid: m.id + '-' + Math.random().toString(36).slice(2, 7),
            id: m.id,
            name: m.name,
            faction: m.faction,
            maxHp,
            hp: maxHp,
            conditions: [],
            abilities: m.abilities,
            weapons: m.weapons
          };
        }).filter(Boolean);
        const battle = {
          id: 'b' + Date.now(),
          yourWarbandId: yours.id,
          opponentWarbandId: opp?.id || null,
          opponentName: config.opponentName,
          round: 1,
          yourUnits: buildUnits(yours.unitIds),
          oppUnits: opp ? buildUnits(opp.unitIds) : [],
          log: [{ id: Date.now(), text: `Battle begins: ${yours.name} vs ${config.opponentName}`, round: 1, side: 'system' }],
          startedAt: new Date().toISOString()
        };
        setActiveBattle(battle);
        nav('battle');
      };

      // Routing
      let view;
      if (screen.name === 'home') {
        view = <WarRoom miniatures={miniatures} warbands={warbands} onNav={nav} onStartBattle={() => nav('battleSetup')} />;
      } else if (screen.name === 'miniatures') {
        if (screen.newMini) {
          view = <MiniatureEditor onSave={saveMini} onCancel={() => nav('miniatures')} />;
        } else {
          view = <MiniaturesList
            miniatures={miniatures}
            filter={filter}
            setFilter={setFilter}
            onOpen={(id) => nav('miniatureDetail', { id })}
            onNew={() => nav('miniatures', { newMini: true })}
          />;
        }
      } else if (screen.name === 'miniatureDetail') {
        const m = miniatures.find(x => x.id === screen.id);
        if (!m) {
          view = <EmptyState icon="helmet" title="Miniature not found" hint="" />;
        } else {
          view = <MiniatureDetail
            miniature={m}
            onBack={() => nav('miniatures')}
            onEdit={() => nav('miniatureEdit', { id: m.id })}
          />;
        }
      } else if (screen.name === 'miniatureEdit') {
        const m = miniatures.find(x => x.id === screen.id);
        view = <MiniatureEditor initial={m} onSave={saveMini} onCancel={() => nav('miniatureDetail', { id: screen.id })} onDelete={deleteMini} />;
      } else if (screen.name === 'warbands') {
        view = <WarbandsList
          warbands={warbands}
          miniatures={miniatures}
          onOpen={(id) => nav('warbandDetail', { id })}
          onNew={newWarband}
        />;
      } else if (screen.name === 'warbandDetail') {
        const w = warbands.find(x => x.id === screen.id);
        if (!w) {
          view = <EmptyState icon="flag" title="Warband not found" hint="" />;
        } else {
          view = <WarbandDetail
            warband={w}
            miniatures={miniatures}
            onBack={() => nav('warbands')}
            onUpdate={saveWarband}
            onDelete={deleteWarband}
            onStartBattle={(id) => nav('battleSetup', { presetWarbandId: id })}
          />;
        }
      } else if (screen.name === 'battle') {
        if (activeBattle) {
          view = <BattleMode
            battle={activeBattle}
            miniatures={miniatures}
            warbands={warbands}
            onUpdate={setActiveBattle}
            onEnd={() => { setActiveBattle(null); nav('home'); }}
          />;
        } else {
          view = <BattleSetup warbands={warbands} miniatures={miniatures} onStart={startBattle} onCancel={() => nav('home')} />;
        }
      } else if (screen.name === 'battleSetup') {
        view = <BattleSetup warbands={warbands} miniatures={miniatures} onStart={startBattle} onCancel={() => nav('home')} presetWarbandId={screen.presetWarbandId} />;
      } else if (screen.name === 'armory') {
        view = <Armory miniatures={miniatures} />;
      }

      // Map screen.name to nav tab
      const navKey = ({
        home: 'home',
        miniatures: 'miniatures',
        miniatureDetail: 'miniatures',
        miniatureEdit: 'miniatures',
        warbands: 'warbands',
        warbandDetail: 'warbands',
        battle: 'battle',
        battleSetup: 'battle',
        armory: 'armory'
      })[screen.name] || 'home';

      // Hide bottom nav during battle for focus
      const showNav = screen.name !== 'battle' || !activeBattle;

      return (
        <div className="max-w-md mx-auto min-h-screen relative">
          {view}
          {showNav && <BottomNav current={navKey} onNav={(k) => {
            if (k === 'battle' && !activeBattle) { nav('battleSetup'); }
            else { nav(k); }
          }} />}
        </div>
      );
    };

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