// Main App — routing + tab bar + tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "fresh",
  "startScreen": "auto",
  "compactDensity": false,
  "showTabLabels": true,
  "currency": "$"
}/*EDITMODE-END*/;

const THEMES = {
  fresh: { primary: '#1b9a5f', primaryDeep: '#126b41', primarySoft: '#def4e7', accent: '#ff6b3d', accentSoft: '#ffe4d8', name: 'Fresco' },
  citrus: { primary: '#ff8a00', primaryDeep: '#c25a00', primarySoft: '#ffe5c2', accent: '#d4385e', accentSoft: '#ffe1ea', name: 'Cítrico' },
  berry:   { primary: '#7b3aed', primaryDeep: '#5417c4', primarySoft: '#ebdcff', accent: '#ff8a00', accentSoft: '#ffe5c2', name: 'Berry' },
  ocean:   { primary: '#0a86c9', primaryDeep: '#055f93', primarySoft: '#cdeafa', accent: '#ff6b3d', accentSoft: '#ffe4d8', name: 'Océano' }
};

const App = () => {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const theme = THEMES[tweaks.theme] || THEMES.fresh;

  // Apply theme CSS vars
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--c-primary', theme.primary);
    root.style.setProperty('--c-primary-deep', theme.primaryDeep);
    root.style.setProperty('--c-primary-soft', theme.primarySoft);
    root.style.setProperty('--c-accent', theme.accent);
    root.style.setProperty('--c-accent-soft', theme.accentSoft);
  }, [theme]);

  // Routing state
  const [route, setRoute] = useState('splash'); // splash | login | register | app
  const [tab, setTab] = useState('home');       // home | list | shop | profile
  const [capture, setCapture] = useState(false);
  const [storePicker, setStorePicker] = useState(false);
  const [productModal, setProductModal] = useState(null);
  const [currentStore, setCurrentStore] = useState(window.MOCK.supermarkets[0]);

  // Honor startScreen tweak
  useEffect(() => {
    if (tweaks.startScreen && tweaks.startScreen !== 'auto') {
      if (tweaks.startScreen === 'splash') setRoute('splash');
      else if (tweaks.startScreen === 'login') setRoute('login');
      else if (tweaks.startScreen === 'register') setRoute('register');
      else if (tweaks.startScreen === 'app') setRoute('app');
    }
  }, [tweaks.startScreen]);

  const renderTab = () => {
    switch (tab) {
      case 'home': return <DashboardScreen onOpenProduct={p => setProductModal(p)} onOpenStorePicker={() => setStorePicker(true)} user={window.MOCK.user} currentStore={currentStore} onTab={setTab}/>;
      case 'list': return <HabitualScreen/>;
      case 'shop': return null; // shop opens full-screen overlay
      case 'profile': return <ProfileScreen user={window.MOCK.user} onLogout={() => setRoute('login')}/>;
    }
  };

  const tabs = [
    { id: 'home', icon: 'home', label: 'Inicio' },
    { id: 'list', icon: 'list', label: 'Mi lista' },
    { id: 'capture', icon: 'camera', label: 'Capturar', big: true },
    { id: 'shop', icon: 'cart', label: 'Comprar' },
    { id: 'profile', icon: 'user', label: 'Perfil' }
  ];

  // Tab tap handler
  const onTabClick = (id) => {
    if (id === 'capture') setCapture(true);
    else if (id === 'shop') setTab('shop');
    else setTab(id);
  };

  // Shop is a full-screen flow; open when tab becomes 'shop'
  const showShop = tab === 'shop';

  return (
    <div className="stage">
      <div className="device">
        <div className="notch"/>
        <div className="device-screen">
          {route === 'splash' && <SplashScreen onDone={() => setRoute('login')}/>}
          {route === 'login' && <React.Fragment><StatusBar/><LoginScreen onLogin={() => setRoute('app')} onRegister={() => setRoute('register')}/></React.Fragment>}
          {route === 'register' && <React.Fragment><StatusBar/><RegisterScreen onBack={() => setRoute('login')} onDone={() => setRoute('app')}/></React.Fragment>}
          {route === 'app' && (
            <React.Fragment>
              <StatusBar/>
              <div className="screen">{renderTab()}</div>
              <div className="tab-bar">
                {tabs.map(t => {
                  const active = (t.id === 'capture' && capture) || (t.id !== 'capture' && tab === t.id);
                  if (t.big) {
                    return (
                      <button key={t.id} className="tab" onClick={() => onTabClick(t.id)} style={{ position: 'relative' }}>
                        <div className="tab-capture">
                          <Icon name="camera" size={26} color="white" stroke={2.2}/>
                        </div>
                      </button>
                    );
                  }
                  return (
                    <button key={t.id} className={'tab' + (active ? ' active' : '')} onClick={() => onTabClick(t.id)}>
                      <span className="tab-ico"><Icon name={t.icon} size={24} color={active ? 'var(--c-primary)' : 'var(--c-ink-3)'} stroke={active ? 2.2 : 1.8}/></span>
                      {tweaks.showTabLabels && <span>{t.label}</span>}
                    </button>
                  );
                })}
              </div>
              {capture && <CaptureScreen onClose={() => setCapture(false)} currentStore={currentStore}/>}
              {showShop && <ShopScreen onClose={() => setTab('home')}/>}
              {storePicker && <StorePickerModal stores={window.MOCK.supermarkets} current={currentStore} onSelect={s => { setCurrentStore(s); setStorePicker(false); }} onClose={() => setStorePicker(false)}/>}
              {productModal && <ProductRankingModal product={productModal} onClose={() => setProductModal(null)}/>}
            </React.Fragment>
          )}
        </div>
      </div>

      <window.TweaksPanel title="Tweaks · PrecioVivo">
        <window.TweakSection label="Apariencia">
          <window.TweakSelect label="Tema de color" value={tweaks.theme} onChange={v => setTweak('theme', v)} options={[
            { value: 'fresh', label: 'Fresco (verde + naranja)' },
            { value: 'citrus', label: 'Cítrico (naranja + berry)' },
            { value: 'berry', label: 'Berry (morado + naranja)' },
            { value: 'ocean', label: 'Océano (azul + naranja)' }
          ]}/>
          <window.TweakToggle label="Etiquetas en tabs" value={tweaks.showTabLabels} onChange={v => setTweak('showTabLabels', v)}/>
        </window.TweakSection>
        <window.TweakSection label="Navegación">
          <window.TweakSelect label="Pantalla inicial" value={tweaks.startScreen} onChange={v => setTweak('startScreen', v)} options={[
            { value: 'auto', label: 'Auto (Splash → Login)' },
            { value: 'splash', label: 'Splash' },
            { value: 'login', label: 'Login' },
            { value: 'register', label: 'Registro' },
            { value: 'app', label: 'Dashboard (saltar login)' }
          ]}/>
          <window.TweakButton label="Volver al inicio (splash)" onClick={() => { setRoute('splash'); setTab('home'); }}/>
        </window.TweakSection>
        <window.TweakSection label="Atajos de demo">
          <window.TweakButton label="Abrir cámara" onClick={() => { setRoute('app'); setCapture(true); }}/>
          <window.TweakButton label="Iniciar compra inteligente" onClick={() => { setRoute('app'); setTab('shop'); }}/>
          <window.TweakButton label="Selector de tienda" onClick={() => { setRoute('app'); setStorePicker(true); }}/>
          <window.TweakButton label="Ver ranking de producto" onClick={() => { setRoute('app'); setProductModal(window.MOCK.discounts[0]); }}/>
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
};

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