/* ===== Подари вторую жизнь — App / router ===== */
const FONT_MAP = {
  'Nunito': ["'Nunito'","'Manrope'"],
  'Onest':  ["'Onest'","'Onest'"],
  'Golos':  ["'Golos Text'","'Golos Text'"],
};
const ACCENTS = { 'Коралловый':'#f5784f', 'Оранжевый':'#fb8c00', 'Янтарный':'#e0a52a' };
const BGS = { 'Кремовый':['#f9f4ea','#f1e7d6'], 'Тёплый':['#f5ecdb','#ebdcc4'], 'Белый':['#ffffff','#f1eee8'] };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "warmth": 0,
  "bg": "Кремовый",
  "accent": "Коралловый",
  "radius": 22,
  "cols": "3",
  "font": "Nunito",
  "hero": "Коллаж"
}/*EDITMODE-END*/;

const SCREENS = {
  home: HomeScreen, photo: PhotoSearchScreen, filter: FilterScreen,
  catalog: CatalogScreen, detail: DetailScreen, admin: AdminScreen, about: AboutScreen,
  second: SecondChanceScreen,
};

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // showcase overrides via URL (?hero=A|B, ?screen=home|second|…)
  const sp = new URLSearchParams(location.search);
  const forcedHero = sp.get('hero');
  const startScreen = sp.get('screen');

  const [route, setRoute] = useState({ name: (startScreen && SCREENS[startScreen]) ? startScreen : 'home', params:{} });
  const [favs, setFavs] = useState(()=>{ try{ return JSON.parse(localStorage.getItem('pf_favs')||'[]'); }catch(e){ return []; } });

  const go = useCallback((name, params={})=>{
    setRoute({ name, params });
    requestAnimationFrame(()=> window.scrollTo({top:0,behavior:'instant'in document.body.style?'instant':'auto'}));
  },[]);
  const toggleFav = useCallback((id)=>{
    setFavs(prev=>{ const next = prev.includes(id)?prev.filter(x=>x!==id):[...prev,id]; localStorage.setItem('pf_favs', JSON.stringify(next)); return next; });
  },[]);

  // apply tweaks → CSS vars
  useEffect(()=>{
    const r = document.documentElement.style;
    const H = 192 - (t.warmth||0)*0.27;                 // тёплый ↔ холодный teal
    r.setProperty('--primary', `oklch(0.60 0.087 ${H})`);
    r.setProperty('--accent', ACCENTS[t.accent] || ACCENTS['Коралловый']);
    const bg = BGS[t.bg] || BGS['Кремовый'];
    r.setProperty('--bg', bg[0]); r.setProperty('--bg-warm', bg[1]);
    r.setProperty('--radius', (t.radius||22)+'px');
    r.setProperty('--cols', String(t.cols||3));
    const f = FONT_MAP[t.font] || FONT_MAP['Nunito'];
    r.setProperty('--font-display', f[0]+", system-ui, sans-serif");
    r.setProperty('--font-body', f[1]+", system-ui, sans-serif");
  },[t.warmth,t.accent,t.bg,t.radius,t.cols,t.font]);

  const Screen = SCREENS[route.name] || HomeScreen;
  const tEff = forcedHero ? { ...t, hero: forcedHero==='B' ? 'Крупный' : 'Коллаж' } : t;

  return (
    <NavCtx.Provider value={{ route, go, favs, toggleFav, t: tEff }}>
      <div className="app">
        <Header/>
        <main key={route.name + (route.params?.id||'')}>
          <Screen/>
        </main>
        {route.name!=='admin' && <Footer/>}
      </div>
      <BottomNav/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Цвет и фон"/>
        <TweakSlider label="Оттенок (тепло ↔ холод)" value={t.warmth} min={-100} max={100} step={5}
          onChange={v=>setTweak('warmth', v)}/>
        <TweakRadio label="Фон" value={t.bg} options={['Кремовый','Тёплый','Белый']}
          onChange={v=>setTweak('bg', v)}/>
        <TweakRadio label="Акцент" value={t.accent} options={['Коралловый','Оранжевый','Янтарный']}
          onChange={v=>setTweak('accent', v)}/>

        <TweakSection label="Форма и сетка"/>
        <TweakSlider label="Скругление" value={t.radius} min={8} max={30} step={1} unit="px"
          onChange={v=>setTweak('radius', v)}/>
        <TweakRadio label="Карточек в ряд" value={String(t.cols)} options={['2','3','4']}
          onChange={v=>setTweak('cols', v)}/>

        <TweakSection label="Текст и макет"/>
        <TweakRadio label="Шрифт заголовков" value={t.font} options={['Nunito','Onest','Golos']}
          onChange={v=>setTweak('font', v)}/>
        <TweakRadio label="Главная экран" value={t.hero} options={['Коллаж','Крупный']}
          onChange={v=>setTweak('hero', v)}/>
      </TweaksPanel>
    </NavCtx.Provider>
  );
}

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