// Top app for Rövhattens Åkeri (Highway 66 hi-fi)
const { useState, useEffect, useRef, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "western",
  "fonts": "default",
  "fastTruck": false,
  "rainConfetti": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  const [visits, setVisits] = useState(0);
  const [mascotClicks, setMascotClicks] = useState(0);
  const [mascotDance, setMascotDance] = useState(false);
  const [secret, setSecret] = useState(null);
  const [dispatchMsg, setDispatchMsg] = useState('Awaiting signal... Tuta för att kontakta enhet 1.');
  const idleTimer = useRef(null);

  // apply tweaks
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme || 'western');
    document.documentElement.setAttribute('data-fonts', t.fonts || 'default');
  }, [t.theme, t.fonts]);

  // visit counter (fake, but persistent per browser)
  useEffect(() => {
    let v = parseInt(localStorage.getItem('rh_visits') || '0', 10);
    v = (v + 1) || 1;
    // start it at a respectable number
    if (v < 1337) v += 1336;
    localStorage.setItem('rh_visits', String(v));
    setVisits(v);
    let live = v;
    const i = setInterval(() => { live += Math.floor(Math.random()*3); setVisits(live); }, 5000);
    return () => clearInterval(i);
  }, []);

  // confetti rain mode (tweak)
  useEffect(() => {
    if (!t.rainConfetti) return;
    const i = setInterval(() => window.fx && window.fx.confetti(12), 800);
    return () => clearInterval(i);
  }, [t.rainConfetti]);

  // idle → tumbleweed
  const resetIdle = useCallback(() => {
    clearTimeout(idleTimer.current);
    idleTimer.current = setTimeout(() => {
      if (document.visibilityState === 'visible' && window.fx) window.fx.tumbleweed();
    }, 18000);
  }, []);
  useEffect(() => {
    resetIdle();
    const ev = ['mousemove','keydown','scroll','touchstart'];
    ev.forEach(e => window.addEventListener(e, resetIdle));
    return () => ev.forEach(e => window.removeEventListener(e, resetIdle));
  }, [resetIdle]);

  // background song — try autoplay, fall back to first user gesture
  useEffect(() => {
    if (!window.fx || !window.fx.startSong) return;
    const stop = window.fx.startSong('assets/on-the-road-again.mp3', {
      loop: false,
      volume: 0.5,
      startAt: 7,
    });
    return stop;
  }, []);

  // global keyboard easter eggs
  useEffect(() => {
    const k = (e) => {
      if (e.target && /input|textarea|select/i.test(e.target.tagName)) return;
      const key = (e.key || '').toLowerCase();
      if (key === 't') window.fx && window.fx.tut();
      else if (key === 'b') window.fx && window.fx.bowling();
      else if (key === 'r') window.fx && window.fx.confetti(120);
      else if (key === 'h') {
        // shake the page!
        document.body.classList.add('shake');
        window.fx && window.fx.tut();
        setTimeout(() => document.body.classList.remove('shake'), 400);
      }
    };
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, []);

  // konami code
  useEffect(() => {
    const code = ['arrowup','arrowup','arrowdown','arrowdown','arrowleft','arrowright','arrowleft','arrowright','b','a'];
    let idx = 0;
    const k = (e) => {
      const want = code[idx];
      if ((e.key || '').toLowerCase() === want) {
        idx++;
        if (idx === code.length) {
          idx = 0;
          openSecret('konami');
        }
      } else { idx = 0; }
    };
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, []);

  const onHonk = () => {
    if (window.fx) window.fx.tut();
    setDispatchMsg('Mottaget. Tut bekräftad. Enhet 1 svarar inom kort.');
  };

  const onMascotClick = () => {
    onHonk();
    setMascotClicks(c => {
      const n = c + 1;
      if (n >= 7) {
        setMascotDance(true);
        if (window.fx) window.fx.confetti(60);
        openSecret('dance');
        setTimeout(() => setMascotDance(false), 6000);
        return 0;
      }
      return n;
    });
  };

  const onStars = () => {
    document.querySelectorAll('.stars-row').forEach((el, i) => {
      el.style.transition = 'transform .6s';
      el.style.transform = 'rotate(' + ((i + 1) * 360) + 'deg)';
      setTimeout(() => { el.style.transform = ''; }, 700);
    });
    window.fx && window.fx.honkSilent('🌟', window.innerWidth/2, 200);
  };

  const onSubmitBooking = (e) => {
    e.preventDefault();
    if (window.fx) {
      window.fx.tut();
      window.fx.confetti(140);
    }
    setDispatchMsg('Bokning mottagen ★ Enhet 1 startar motorn. ETA: snart-snart.');
    openSecret('booked');
  };

  const openSecret = (which) => {
    if (which === 'konami') {
      setSecret({
        title: '★ KONAMI UPP UPP NER NER ★',
        body: 'Du hittade den hemliga rabattkoden. Säg "Rövhatten" i kassan på OKQ8 Katrineholm — det händer absolut ingenting. Men du vet, och det räknas.',
      });
    } else if (which === 'dance') {
      setSecret({
        title: '★ DANCE MODE UNLOCKED ★',
        body: 'Du klickade på honom 7 gånger. Han dansar. Du är ansvarig nu.',
      });
    } else if (which === 'booked') {
      setSecret({
        title: '★ BOKNING MOTTAGEN ★',
        body: 'Hahaha. Det här är en skämt-sida, men Ted är på riktigt. Grattis till studenten! 🎓',
      });
    } else if (which === 'pin') {
      setSecret({
        title: '★ HEMLIG LÄNK ★',
        body: 'Hej. Du letade efter något hemligt. Tyvärr har Ted glömt vad det var. Han bowlar i Nyköping just nu. Försök igen senare.',
      });
    }
  };

  return (
    <div>
      <Nav onHonk={onHonk} onLogoClick={onMascotClick} />
      <Hero onHonk={onMascotClick} mascotDance={mascotDance} />
      <Marquee />
      <AsphaltStrip fast={t.fastTruck} />

      <Stats />
      <LiveTracker />
      <Marquee dark items={['ON THE ROAD', 'IN ALL WEATHER', 'WITH ONE HAT', 'AND A DREAM', 'AND A BOWLINGBAG']} />

      <Tjanster />
      <Priser onSpin={onHonk} />
      <Omdomen onStars={onStars} />
      <Boka onSubmit={onSubmitBooking} screen={dispatchMsg} />
      <Hyllning />
      <Footer visits={visits} onSecret={() => openSecret('pin')} />

      {secret ? (
        <div className="secret-modal" onClick={() => setSecret(null)}>
          <div className="panel" onClick={e => e.stopPropagation()}>
            <button className="close" onClick={() => setSecret(null)}>×</button>
            <h3>{secret.title}</h3>
            <p>{secret.body}</p>
            <button className="btn" onClick={() => setSecret(null)}>OK, FORTSÄTT KÖRA</button>
          </div>
        </div>
      ) : null}

      {window.TweaksPanel ? (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Färgtema">
            <window.TweakRadio
              label="Look"
              value={t.theme}
              onChange={v => setTweak('theme', v)}
              options={[
                { value: 'western', label: 'Western' },
                { value: 'varsel',  label: 'Varsel' },
                { value: 'noir',    label: 'Noir' },
              ]}
            />
          </window.TweakSection>
          <window.TweakSection title="Typsnitt">
            <window.TweakRadio
              label="Typsnitt"
              value={t.fonts}
              onChange={v => setTweak('fonts', v)}
              options={[
                { value: 'default', label: 'Western' },
                { value: 'modern',  label: 'Modern' },
                { value: 'retro',   label: 'Retro' },
              ]}
            />
          </window.TweakSection>
          <window.TweakSection title="Mer ös">
            <window.TweakToggle
              label="Snabb lastbil"
              value={t.fastTruck}
              onChange={v => setTweak('fastTruck', v)}
            />
            <window.TweakToggle
              label="Konfetti hela tiden"
              value={t.rainConfetti}
              onChange={v => setTweak('rainConfetti', v)}
            />
            <div style={{fontFamily:'Patrick Hand',fontSize:13,color:'#888',marginTop:8,lineHeight:1.4}}>
              Tangenter: <b>T</b> = tut · <b>B</b> = bowling · <b>R</b> = konfetti · <b>H</b> = skaka<br/>
              Klicka loggan 7 ggr. Sitt still i 18 sek. Konami.
            </div>
          </window.TweakSection>
        </window.TweaksPanel>
      ) : null}
    </div>
  );
}

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