// app-v2.jsx — v2 router: uses HomePageV2 for homepage, same interior pages

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "retroIntensity": "balanced",
  "accent": "gold"
}/*EDITMODE-END*/;

function useTweakPanel() {
  const [editMode, setEditMode] = useState(false);
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setEditMode(true);
      if (e.data.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);
  const setTweak = (k, v) => {
    setTweaks(t => ({ ...t, [k]: v }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };
  return { editMode, tweaks, setTweak };
}

const TweaksPanelV2 = ({ tweaks, setTweak }) => (
  <div style={{
    position: 'fixed', bottom: 24, right: 24, zIndex: 100,
    background: 'var(--blue)',
    color: 'var(--cream)',
    borderRadius: 14,
    border: '2px solid var(--gold)',
    boxShadow: '0 20px 50px rgba(0,0,0,0.35)',
    width: 280,
    overflow: 'hidden',
  }}>
    <div style={{
      padding: '14px 18px',
      background: 'var(--blue-deep)',
      borderBottom: '2px solid var(--gold)',
      fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.2em',
      color: 'var(--gold)', textTransform: 'uppercase',
      display: 'flex', alignItems: 'center', gap: 8,
    }}>✦ Tweaks</div>
    <div style={{ padding: 20 }}>
      <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--gold-soft)', textTransform: 'uppercase', marginBottom: 10 }}>
        Retro intensity
      </div>
      <div style={{ display: 'flex', gap: 6, marginBottom: 20 }}>
        {['subtle', 'balanced', 'full'].map(v => (
          <button key={v} onClick={() => setTweak('retroIntensity', v)} style={{
            flex: 1, padding: '10px 8px',
            fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.15em',
            textTransform: 'uppercase',
            background: tweaks.retroIntensity === v ? 'var(--gold)' : 'transparent',
            color: tweaks.retroIntensity === v ? 'var(--blue)' : 'var(--gold-soft)',
            border: '1px solid var(--gold)',
            borderRadius: 6,
          }}>{v}</button>
        ))}
      </div>
      <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--gold-soft)', textTransform: 'uppercase', marginBottom: 10 }}>
        Accent
      </div>
      <div style={{ display: 'flex', gap: 6 }}>
        {[
          { k: 'gold', c: '#F2B705' },
          { k: 'poppy', c: '#E85D04' },
          { k: 'sage', c: '#7C9471' },
        ].map(o => (
          <button key={o.k} onClick={() => setTweak('accent', o.k)} title={o.k} style={{
            flex: 1, height: 36, borderRadius: 6,
            background: o.c,
            border: tweaks.accent === o.k ? '2px solid var(--gold-soft)' : '1px solid rgba(255,255,255,0.2)',
            color: '#fff', fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.12em',
            textTransform: 'uppercase',
          }}>{o.k}</button>
        ))}
      </div>
    </div>
  </div>
);

const AppV2 = () => {
  const [page, setPage] = useState(() => localStorage.getItem('sp_page_v2') || 'home');
  const { editMode, tweaks, setTweak } = useTweakPanel();

  useEffect(() => {
    localStorage.setItem('sp_page_v2', page);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [page]);

  useEffect(() => {
    const root = document.documentElement;
    const accentMap = {
      gold: { gold: '#F2B705', goldSoft: '#FFD75A', goldDeep: '#C99700' },
      poppy: { gold: '#E85D04', goldSoft: '#F48C06', goldDeep: '#BC3908' },
      sage: { gold: '#7C9471', goldSoft: '#A8BE9F', goldDeep: '#56684F' },
    };
    const a = accentMap[tweaks.accent] || accentMap.gold;
    root.style.setProperty('--gold', a.gold);
    root.style.setProperty('--gold-soft', a.goldSoft);
    root.style.setProperty('--gold-deep', a.goldDeep);
    root.style.setProperty('--grad-gold', `linear-gradient(180deg, ${a.goldSoft} 0%, ${a.gold} 100%)`);
  }, [tweaks.accent]);

  useEffect(() => {
    document.body.dataset.retro = tweaks.retroIntensity;
  }, [tweaks.retroIntensity]);

  const onNavigate = (p) => {
    if (p === 'prayer-request') {
      setPage('prayer');
      setTimeout(() => {
        document.getElementById('prayer-form-anchor')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 100);
      return;
    }
    setPage(p);
  };

  let pageEl;
  switch (page) {
    case 'about':        pageEl = <AboutPage />; break;
    // case 'team':         pageEl = <TeamPage />; break;
    case 'resources':    pageEl = <ResourcesPage onNavigate={onNavigate} />; break;
    // case 'intercessors': pageEl = <IntercessorsPage />; break;
    // case 'calendar':     pageEl = <CalendarPage />; break;
    // case 'prayer':       pageEl = <PrayerPage onNavigate={onNavigate} />; break;
    case 'register':     pageEl = <RegisterPage onNavigate={onNavigate} />; break;
    case 'give':         pageEl = <GivePage onNavigate={onNavigate} />; break;
    default:             pageEl = <HomePageV2 onNavigate={onNavigate} />;
  }

  return (
    <div data-screen-label={page}>
      <TopNav current={page} onNavigate={onNavigate} />
      {pageEl}
      <PreFooterCTA onNavigate={onNavigate} />
      <Footer onNavigate={onNavigate} />
      {editMode && <TweaksPanelV2 tweaks={tweaks} setTweak={setTweak} />}
    </div>
  );
};

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