/* Capitán Fantasy — app shell: bottom tabs, nav stack, onboarding, tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "startScreen": "onboarding",
  "accent": "#ee5d33",
  "showLabels": true
}/*EDITMODE-END*/;

const MAIN_TABS = [
  { k: 'squad', label: 'Equipo', icon: 'users' },
  { k: 'fantasy', label: 'Fantasy', icon: 'trophy' },
  { k: 'games', label: 'Juegos', icon: 'shield' },
  { k: 'stats', label: 'Stats', icon: 'bars' },
];

function BottomTabs({ active, onTab, showLabels, onMore, liveOn }) {
  const tabs = liveOn
    ? [{ k: 'channel', label: 'En Vivo', icon: 'radio', live: true }, ...MAIN_TABS]
    : MAIN_TABS;
  return (
    <div style={{ flexShrink: 0, background: 'hsl(var(--background) / 0.95)', backdropFilter: 'blur(14px)', borderTop: `1px solid ${C.border}`, paddingBottom: 24, display: 'grid', gridTemplateColumns: `repeat(${tabs.length + 1}, 1fr)` }}>
      {tabs.map((t) => {
        const on = active === t.k;
        const col = t.live ? C.destructive : on ? C.primary : C.mut;
        return (
          <button key={t.k} onClick={() => onTab(t.k)} style={{ border: 'none', background: 'none', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, padding: '9px 0 5px' }}>
            <div style={{ position: 'relative', padding: 5, borderRadius: 9, background: on && !t.live ? 'hsl(var(--primary) / 0.12)' : 'transparent' }}>
              <Icon name={t.icon} size={21} color={col} sw={on ? 2.5 : 2} />
              {t.live && <span style={{ position: 'absolute', top: 2, right: 2 }}><LiveDot size={6} /></span>}
            </div>
            {showLabels && <span style={{ fontSize: 10, fontWeight: on ? 700 : 600, color: col }}>{t.label}</span>}
          </button>
        );
      })}
      <button onClick={onMore} style={{ border: 'none', background: 'none', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, padding: '9px 0 5px' }}>
        <div style={{ padding: 5 }}><Icon name="more" size={21} color={C.mut} sw={2} /></div>
        {showLabels && <span style={{ fontSize: 10, fontWeight: 600, color: C.mut }}>Más</span>}
      </button>
    </div>
  );
}

function MoreSheet({ onClose, go }) {
  const items = [
    { k: 'channel', label: 'Canal Layvtime', icon: 'radio', col: C.primary },
    { k: 'calendar', label: 'Calendario', icon: 'cal', col: C.info },
    { k: 'news', label: 'Noticias', icon: 'book', col: C.info },
    { k: 'raffle', label: 'Sorteos', icon: 'gift', col: C.gold },
    { k: 'store', label: 'Tienda', icon: 'bag', col: C.primary },
    { k: 'quiniela', label: 'Quiniela', icon: 'list', col: C.gold },
    { k: 'profile', label: 'Mi Perfil', icon: 'user', col: C.info },
    { k: 'rules', label: 'Cómo se juega', icon: 'book', col: C.success },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 60, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)', animation: 'fadeIn .2s' }} />
      <div style={{ position: 'relative', background: 'hsl(var(--popover))', borderTopLeftRadius: 22, borderTopRightRadius: 22, borderTop: `1px solid ${C.border}`, padding: '14px 18px 34px', animation: 'sheetUp .3s cubic-bezier(.2,.8,.2,1)' }}>
        <div style={{ width: 38, height: 4, borderRadius: 9, background: C.border, margin: '0 auto 16px' }} />
        <h3 style={{ fontSize: 16, fontWeight: 800, marginBottom: 14 }}>Más opciones</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 11 }}>
          {items.map((it) => (
            <button key={it.k} onClick={() => { onClose(); go(it.k); }} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9, padding: '16px 8px', borderRadius: 14, background: C.secondary, border: `1px solid ${C.border}`, cursor: 'pointer' }}>
              <Icon name={it.icon} size={24} color={it.col} />
              <span style={{ fontSize: 11.5, fontWeight: 600, color: C.fg, textAlign: 'center', lineHeight: 1.2 }}>{it.label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function hexToHslParts(hex) {
  let r = parseInt(hex.slice(1, 3), 16) / 255, g = parseInt(hex.slice(3, 5), 16) / 255, b = parseInt(hex.slice(5, 7), 16) / 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b); let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4; h /= 6; }
  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [tab, setTab] = React.useState('channel');
  const [stack, setStack] = React.useState([]); // {screen, arg}
  const [moreOpen, setMoreOpen] = React.useState(false);
  const [booted, setBooted] = React.useState(t.startScreen === 'app');
  const [isMobile, setIsMobile] = React.useState(() => typeof window !== 'undefined' && window.matchMedia('(max-width: 600px)').matches);

  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 600px)');
    const on = () => setIsMobile(mq.matches);
    on();
    mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on);
    return () => { mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on); };
  }, []);

  React.useEffect(() => { setBooted(t.startScreen === 'app'); }, [t.startScreen]);
  React.useEffect(() => {
    const parts = hexToHslParts(t.accent);
    const r = document.documentElement;
    r.style.setProperty('--primary', parts);
    r.style.setProperty('--accent', parts);
    r.style.setProperty('--ring', parts);
  }, [t.accent]);

  // navigate: main tabs vs stacked screens
  const MAIN = ['channel', 'squad', 'fantasy', 'games', 'stats'];
  const go = (screen, arg) => {
    if (MAIN.includes(screen)) { setStack([]); setTab(screen); }
    else setStack((s) => [...s, { screen, arg }]);
  };
  const back = () => setStack((s) => s.slice(0, -1));

  const top = stack[stack.length - 1];
  const renderStack = () => {
    if (!top) return null;
    switch (top.screen) {
      case 'live': return <LiveScreen onBack={back} go={go} />;
      case 'match': return <MatchCenter matchId={top.arg} onBack={back} go={go} />;
      case 'news': return <NewsScreen onBack={back} go={go} />;
      case 'article': return <ArticleScreen articleId={top.arg} onBack={back} />;
      case 'quiniela': return <QuinielaScreen onBack={back} />;
      case 'mode': return <ModeDetail modeId={top.arg} onBack={back} go={go} />;
      case 'league': return <LeagueDetail leagueId={top.arg} onBack={back} />;
      case 'notif': return <NotifScreen onBack={back} />;
      case 'profile': return <ProfileScreen go={go} />;
      case 'rules': return <RulesScreen onBack={back} />;
      case 'raffle': return <RaffleScreen onBack={back} />;
      case 'store': return <StoreScreen onBack={back} />;
      case 'calendar': return <CalendarScreen onBack={back} go={go} />;
      default: return null;
    }
  };

  const mainScreen = () => {
    switch (tab) {
      case 'channel': return <ChannelScreen go={go} />;
      case 'squad': return <SquadScreen />;
      case 'fantasy': return <FantasyScreen go={go} />;
      case 'games': return <GamesScreen go={go} />;
      case 'stats': return <StatsScreen />;
      default: return null;
    }
  };

  const appContent = (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: C.bg, position: 'relative', overflow: 'hidden' }}>
      <div className="noscroll" style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>
        {mainScreen()}
      </div>
      <BottomTabs active={top ? top.screen : tab} onTab={go} showLabels={t.showLabels} liveOn={true} onMore={() => setMoreOpen(true)} />

      {/* stacked screen overlay */}
      {top && (
        <div style={{ position: 'absolute', inset: 0, background: C.bg, display: 'flex', flexDirection: 'column', animation: 'fadeIn .22s', zIndex: 40 }}>
          <div className="noscroll" style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>{renderStack()}</div>
          <BottomTabs active={top.screen} onTab={go} showLabels={t.showLabels} liveOn={true} onMore={() => setMoreOpen(true)} />
        </div>
      )}

      {moreOpen && <MoreSheet onClose={() => setMoreOpen(false)} go={go} />}
      <FantasyToasts active={booted && !moreOpen && (top ? top.screen === 'channel' || top.screen === 'match' : tab === 'channel')} />
      {!booted && <Onboarding onFinish={() => { setTab('channel'); setStack([]); setBooted(true); }} />}
    </div>
  );

  const tweaks = (
    <TweaksPanel>
      <TweakSection label="Demo" />
      <TweakRadio label="Pantalla inicial" value={t.startScreen} options={['onboarding', 'app']} onChange={(v) => setTweak('startScreen', v)} />
      <TweakSection label="Marca" />
      <TweakColor label="Color primario" value={t.accent} options={['#ee5d33', '#e8b923', '#1f9d57', '#2563eb', '#d63d4f']} onChange={(v) => setTweak('accent', v)} />
      <TweakToggle label="Etiquetas en tab bar" value={t.showLabels} onChange={(v) => setTweak('showLabels', v)} />
    </TweaksPanel>
  );

  // En teléfono: llena el viewport real (sin maqueta) para que todo sea accesible.
  if (isMobile) {
    return (
      <div style={{ width: '100%', height: '100dvh', background: C.bg, position: 'relative', overflow: 'hidden' }}>
        {appContent}
        {tweaks}
      </div>
    );
  }

  // En pantallas grandes: muestra el teléfono dentro de la maqueta de dispositivo.
  return (
    <div style={{ minHeight: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px 20px', boxSizing: 'border-box', background: 'radial-gradient(120% 80% at 50% -10%, hsl(240 12% 10%) 0%, #050506 55%, #000 100%)' }}>
      <div style={{ position: 'fixed', top: '18%', left: '50%', transform: 'translateX(-50%)', width: 460, height: 460, borderRadius: 999, background: 'radial-gradient(circle, hsl(var(--primary) / 0.10), transparent 70%)', filter: 'blur(50px)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <IOSDevice dark width={402} height={862}>
          {appContent}
        </IOSDevice>
      </div>
      {tweaks}
    </div>
  );
}

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