/* @component-map
 * App — Main container, handles view switching and tab navigation
 * BracketRegion — Renders a single region's bracket grid with all rounds
 * FinalFour — Renders Final Four matchups and national champion
 * UpsetsInsights — Renders predicted upsets and key bracket strategy insights
 * @end-component-map */

import { BracketRegion } from './components/BracketRegion.jsx';
import { FinalFour } from './components/FinalFour.jsx';
import { UpsetsInsights } from './components/UpsetsInsights.jsx';
import { useState } from 'react';
import { buildAllRegions, REGIONS } from './components/bracketData.jsx';

const TABS = [
  { id: 'east', label: '🏀 East' },
  { id: 'west', label: '🏀 West' },
  { id: 'midwest', label: '🏀 Midwest' },
  { id: 'south', label: '🏀 South' },
  { id: 'final4', label: '🏆 Final Four' },
  { id: 'upsets', label: '⚡ Upsets & Insights' },
];

const ALL_RESULTS = buildAllRegions();

function App() {
  const [view, setView] = useState('east');

  return (
    <div>
      <div className="hero">
        <h1>2026 March Madness Bracket</h1>
        <div className="ver">V4.1 — KENPOM + HISTORICAL CALIBRATION + COACHING + EXPERT PICKS + INJURIES</div>
        <p>Eight-layer KenPom model calibrated to historical upset rates (~6-7/R64) and Final Four seed distribution (avg 1.6 one-seeds/FF). Duke falls to Michigan State in E8. Arizona wins it all.</p>
      </div>
      <div className="tabs">
        {TABS.map(t => (
          <button
            key={t.id}
            className={`tab${view === t.id ? ' active' : ''}`}
            onClick={() => setView(t.id)}
          >
            {t.label}
          </button>
        ))}
      </div>
      <div className="bracket-container">
        {view === 'final4' && <FinalFour results={ALL_RESULTS} regions={REGIONS} />}
        {view === 'upsets' && <UpsetsInsights results={ALL_RESULTS} regions={REGIONS} />}
        {['east', 'west', 'midwest', 'south'].includes(view) && (
          <BracketRegion regionKey={view} region={REGIONS[view]} result={ALL_RESULTS[view]} />
        )}
      </div>
    </div>
  );
}

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