/* global React, ReactDOM */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c8ff2e",
  "glitch": true,
  "marqueeSpeed": 55,
  "showFooterMarks": true,
  "screenStart": "home"
}/*EDITMODE-END*/;

function useEditMode(){
  const [active, setActive] = useState(false);
  useEffect(()=>{
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setActive(true);
      else if (d.type === '__deactivate_edit_mode') setActive(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);
  return [active, setActive];
}

function useTweaksLocal(defaults){
  const [t, setT] = useState(defaults);
  const set = (k, v) => {
    let patch;
    if (typeof k === 'object') patch = k;
    else patch = { [k]: v };
    setT(prev => ({ ...prev, ...patch }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };
  return [t, set];
}

const MARQUEE_FALLBACK = [
  { text: '◇ NOKK.717 // ASTANA, KZ', tone: 'acid' },
  { text: 'tattoo / digital / dystopia' },
  { text: '● booking open · jul → sep', tone: 'acid' },
  { text: '"i see you in the reflection"' },
  { text: '✕ no copies / no public faces', tone: 'blood' },
  { text: 'ANGEL ENGINE / R.A.D.I.D.' },
  { text: 'free sketches in /эскизы' },
  { text: 'studio: by appointment only', tone: 'blood' },
  { text: '+7 7XX XXX XX XX' },
];

const API_ORIGIN = window.NOKK_API ||
  ((['127.0.0.1', 'localhost'].includes(window.location.hostname))
    ? 'http://127.0.0.1:8001/api'
    : '/api');

// Список валидных экранов SPA. Используется для парсинга ?screen=... из URL
// (deeplinks из бота: tattooastana.kz/?screen=about → сразу открыть About).
const VALID_SCREENS = ['home','portfolio','about','services','faq','sketch','book'];

function readScreenFromUrl(){
  try {
    const p = new URLSearchParams(window.location.search);
    const s = p.get('screen');
    if (s && VALID_SCREENS.includes(s)) {
      const focus = parseInt(p.get('focus') || '', 10);
      const params = Number.isFinite(focus) ? { focus } : {};
      return { name: s, params };
    }
  } catch (_) {}
  return null;
}

function App(){
  const [t, setT] = useTweaksLocal(TWEAK_DEFAULTS);
  const [editOn, setEditOn] = useEditMode();
  const [screen, setScreen] = useState(() =>
    readScreenFromUrl() || { name: t.screenStart || 'home', params: {} }
  );
  const [marqueeItems, setMarqueeItems] = useState(MARQUEE_FALLBACK);
  const [settings, setSettings] = useState({});

  useEffect(()=>{
    fetch(API_ORIGIN + '/marquee', { headers: { Accept: 'application/json' } })
      .then(r => r.json())
      .then(json => { if (json.data && json.data.length) setMarqueeItems(json.data); })
      .catch(() => {});

    fetch(API_ORIGIN + '/settings', { headers: { Accept: 'application/json' } })
      .then(r => r.json())
      .then(json => { if (json && typeof json === 'object') setSettings(json); })
      .catch(() => {});
  }, []);

  const floatingBtnText = settings['booking.btn_floating'] || '▸ ЗАПИСАТЬСЯ НА СЕАНС';
  const bookingOpen = String(settings['contacts.booking_open'] ?? '1') !== '0';
  const closedText  = settings['booking.btn_floating_closed'] || '◌ запись временно закрыта';

  // Apply accent live
  useEffect(()=>{
    document.documentElement.style.setProperty('--acid', t.accent);
  }, [t.accent]);

  const go = (name, params={}) => {
    setScreen({ name, params });
    window.scrollTo({ top: 0, behavior: 'instant' });
    // Обновляем URL чтобы deeplinks работали и работала кнопка "Назад" в браузере
    try {
      const url = new URL(window.location.href);
      if (name === 'home') {
        url.searchParams.delete('screen');
        url.searchParams.delete('focus');
      } else {
        url.searchParams.set('screen', name);
        if (params.focus != null) url.searchParams.set('focus', String(params.focus));
        else url.searchParams.delete('focus');
      }
      window.history.pushState({ screen: name, params }, '', url.toString());
    } catch (_) {}
  };

  // Кнопка «Назад» в браузере → восстанавливаем экран из state
  useEffect(() => {
    const onPop = () => {
      const s = readScreenFromUrl();
      setScreen(s || { name: t.screenStart || 'home', params: {} });
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, [t.screenStart]);

  const Screens = window.Screens;
  const C = window.Components;

  return (
    <div className="app">
      <C.Marquee items={marqueeItems} speed={t.marqueeSpeed} />

      {screen.name === 'home'      && <Screens.HomeScreen      go={go} tweaks={t} />}
      {screen.name === 'portfolio' && <Screens.PortfolioScreen go={go} focusIdx={screen.params.focus} />}
      {screen.name === 'about'     && <Screens.AboutScreen     go={go} />}
      {screen.name === 'services'  && <Screens.ServicesScreen  go={go} />}
      {screen.name === 'faq'       && <Screens.FaqScreen       go={go} />}
      {screen.name === 'sketch'    && <Screens.SketchScreen    go={go} />}
      {screen.name === 'book'      && <Screens.BookScreen      go={go} prefilledSketch={screen.params.sketch} />}

      {/* Persistent floating book button on most screens */}
      {!['book','home'].includes(screen.name) && (
        <div style={{
          position:'fixed', bottom: 18, left: '50%', transform:'translateX(-50%)',
          zIndex: 60, width: 'min(380px, calc(100vw - 32px))'
        }}>
          <button onClick={()=>bookingOpen && go('book')}
            disabled={!bookingOpen}
            style={{
              width:'100%', padding: 14,
              background: bookingOpen ? 'var(--acid)' : '#2a2a2a',
              color: bookingOpen ? 'var(--bg)' : '#888',
              border:'none', borderRadius: 0, fontFamily:'var(--mono)', fontSize: 14,
              letterSpacing:'0.05em', cursor: bookingOpen ? 'pointer' : 'not-allowed',
              boxShadow: bookingOpen ? '0 12px 30px -10px rgba(200,255,46,0.4), 0 0 0 1px rgba(200,255,46,0.6)' : 'none'
            }}>
            {bookingOpen ? floatingBtnText : closedText}
          </button>
        </div>
      )}

      {window.Terminal && <window.Terminal go={go} />}

      {editOn && <Tweaks t={t} setT={setT} setEditOn={setEditOn} />}
    </div>
  );
}

function Tweaks({ t, setT, setEditOn }){
  const TP = window.TweaksPanel;
  if (!TP || !TP.TweaksPanel){
    return null;
  }
  const { TweaksPanel, TweakSection, TweakColor, TweakToggle, TweakSlider, TweakSelect } = TP;
  return (
    <TweaksPanel onClose={()=>setEditOn(false)}>
      <TweakSection title="aesthetic">
        <TweakColor
          label="accent"
          value={t.accent}
          options={['#c8ff2e','#ff3232','#ffb000','#7ad7ff','#d6d8d2']}
          onChange={(v)=>setT('accent', v)}
        />
        <TweakToggle label="ASCII glitch on logo" value={t.glitch} onChange={(v)=>setT('glitch', v)} />
      </TweakSection>
      <TweakSection title="motion">
        <TweakSlider label="marquee speed (s)" min={10} max={80} step={1}
          value={t.marqueeSpeed} onChange={(v)=>setT('marqueeSpeed', v)} />
      </TweakSection>
      <TweakSection title="screens">
        <TweakSelect label="start on"
          value={t.screenStart}
          options={['home','portfolio','about','services','faq','sketch','book']}
          onChange={(v)=>setT('screenStart', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

window.Icons.ChalkDefs && (function mountChalkDefs(){
  // mount filters once at root
  const root = document.createElement('div');
  root.id = '__chalk_defs';
  document.body.appendChild(root);
  ReactDOM.createRoot(root).render(React.createElement(window.Icons.ChalkDefs));
})();

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