// app.jsx — 4wos landing page composer.
// Wires nav, scroll-spy active section, floating CTA, back-to-top,
// language switcher, application + admin modals, and Tweaks.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "centered",
  "perksLayout": "grid",
  "ctaStyle": "pill",
  "palette": ["#7dd3fc", "#0a1628", "#050b1a"],
  "snow": true
}/*EDITMODE-END*/;

// ── Palette mapping → CSS vars ─────────────────────────────
const PALETTES = {
  '7dd3fc': { accent: '#7dd3fc', accent2: '#38bdf8', bg0: '#050b1a', bg1: '#0a1628', glow: 'rgba(125, 211, 252, 0.35)' },
  'a78bfa': { accent: '#c4b5fd', accent2: '#a78bfa', bg0: '#0a0820', bg1: '#161033', glow: 'rgba(167, 139, 250, 0.4)'  },
  '5eead4': { accent: '#5eead4', accent2: '#2dd4bf', bg0: '#02050d', bg1: '#061827', glow: 'rgba(94, 234, 212, 0.35)'  },
  'e2e8f0': { accent: '#e2e8f0', accent2: '#cbd5e1', bg0: '#0c111c', bg1: '#1a2235', glow: 'rgba(226, 232, 240, 0.30)' },
};
function applyPalette(arr) {
  const key = (arr[0] || '#7dd3fc').replace('#', '').toLowerCase();
  const p = PALETTES[key] || PALETTES['7dd3fc'];
  const r = document.documentElement.style;
  r.setProperty('--ice', p.accent);
  r.setProperty('--ice-2', p.accent2);
  r.setProperty('--bg-0', p.bg0);
  r.setProperty('--bg-1', p.bg1);
  r.setProperty('--ice-glow', p.glow);
}

// ── Sections (anchors + nav tabs) ──────────────────────────
const SECTIONS = [
  { id: 'about',           label: 'About' },
  { id: 'why-state',       label: 'Why apply' },
  { id: 'how-to-join',     label: 'How to join' },
  { id: 'who-fits',        label: 'Who fits' },
  { id: 'schedule',        label: 'Schedule' },
  { id: 'transfer-facts',  label: 'Transfer facts' },
  { id: 'faq',             label: 'FAQ' },
];

// ── Language switcher ──────────────────────────────────────
function LangSwitcher({ value, onChange }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  const LANGS = window.ATS ? ATS.LANGUAGES : [{ code: 'en', label: 'English', flag: '🇺🇸' }];
  const current = LANGS.find(l => l.code === value) || LANGS[0];

  React.useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  return (
    <div className="lang-switch" ref={ref}>
      <button className="lang-trigger" onClick={() => setOpen(!open)} aria-label="Change language">
        <span className="lang-flag">{current.flag}</span>
        <span className="lang-code">{current.code.toUpperCase().split('-')[0]}</span>
        <svg width="10" height="6" viewBox="0 0 10 6" style={{ opacity: 0.5 }}>
          <path d="M0 0h10L5 6z" fill="currentColor" />
        </svg>
      </button>
      {open && (
        <div className="lang-menu glass-strong">
          {LANGS.map(l => (
            <button key={l.code}
                    className={'lang-item' + (l.code === value ? ' on' : '')}
                    onClick={() => { onChange(l.code); setOpen(false); }}>
              <span className="lang-flag">{l.flag}</span>
              <span>{l.label}</span>
              {l.code === value && <Icons.check width="14" height="14" style={{ marginLeft: 'auto', color: 'var(--ice)' }} />}
              {l.code !== 'en' && <span className="lang-todo">stub</span>}
            </button>
          ))}
          <div className="lang-foot">English fully translated. Others delivered by the deployment system.</div>
        </div>
      )}
    </div>
  );
}

// ── Nav ────────────────────────────────────────────────────
function Nav({ active, scrolled, onAdmin, onMenu, onJoin, lang, setLang }) {
  const editCtx = useEditMode();
  const loggedIn = !!editCtx?.session;
  return (
    <header className={'nav' + (scrolled ? ' scrolled' : '')}>
      <div className="container nav-inner">
        <a href="#hero" className="brand">
          <span className="brand-mark">3802</span>
          <span>4wos</span>
        </a>
        <nav className="nav-tabs">
          {SECTIONS.map((s) => (
            <a key={s.id} href={`#${s.id}`} className={active === s.id ? 'active' : ''}>
              {s.label}
            </a>
          ))}
        </nav>
        <div className="nav-actions">
          <LangSwitcher value={lang} onChange={setLang} />
          {loggedIn ? (
            <UserPill />
          ) : (
            <button className="btn btn-ghost btn-sm admin-btn" onClick={onAdmin}>
              <Icons.lock width="14" height="14" />
              <span className="lbl">Admin</span>
            </button>
          )}
          <button className="menu-btn" onClick={onMenu} aria-label="Open menu"><Icons.menu /></button>
        </div>
      </div>
    </header>
  );
}

// ── Mobile drawer ──────────────────────────────────────────
function Drawer({ open, onClose, onAdmin }) {
  return (
    <div className={'drawer' + (open ? ' open' : '')}>
      <div className="drawer-head">
        <span className="brand">
          <span className="brand-mark">3802</span>
          <span>4wos</span>
        </span>
        <button className="menu-btn" onClick={onClose} aria-label="Close menu"><Icons.x /></button>
      </div>
      {SECTIONS.map((s, i) => (
        <a key={s.id} href={`#${s.id}`} onClick={onClose}>
          <span>{String(i + 1).padStart(2, '0')}</span>{s.label}
        </a>
      ))}
      <button className="btn btn-ghost" style={{ marginTop: 24 }} onClick={() => { onClose(); onAdmin(); }}>
        <Icons.lock width="14" height="14" /> Admin login
      </button>
    </div>
  );
}

// ── Floating CTA variants ──────────────────────────────────
function FloatingCTA({ variant, visible, onClick }) {
  if (variant === 'rail') {
    return (
      <button className={'fcta-rail' + (visible ? ' shown' : '')} onClick={onClick}>
        Apply to join
        <Icons.arrow width="14" height="14" className="arrow" />
      </button>
    );
  }
  if (variant === 'bar') {
    return (
      <div className={'fcta-bar' + (visible ? ' shown' : '')}>
        <span className="lbl">Recruiting · <b>486</b> active members</span>
        <button className="btn btn-primary" onClick={onClick}>
          Apply <Icons.arrow width="14" height="14" />
        </button>
      </div>
    );
  }
  return (
    <button className={'fcta-pill' + (visible ? ' shown' : '')} onClick={onClick}>
      <span className="dot" />
      Apply to join
      <Icons.arrow width="14" height="14" />
    </button>
  );
}

// ── Back-to-top (left) ─────────────────────────────────────
function BackToTop({ visible }) {
  return (
    <button className={'back-top' + (visible ? ' shown' : '')}
            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
            aria-label="Back to top">
      <Icons.up width="18" height="18" />
    </button>
  );
}

// ── Snow ───────────────────────────────────────────────────
function Snow() {
  const flakes = React.useMemo(() => {
    const arr = [];
    for (let i = 0; i < 40; i++) {
      arr.push({
        left: Math.random() * 100,
        size: 1 + Math.random() * 3,
        dur: 9 + Math.random() * 16,
        delay: -Math.random() * 20,
        opacity: 0.3 + Math.random() * 0.6,
      });
    }
    return arr;
  }, []);
  return (
    <div className="snow" aria-hidden="true">
      {flakes.map((f, i) => (
        <span key={i} style={{
          left: f.left + '%',
          width: f.size, height: f.size,
          animationDuration: f.dur + 's',
          animationDelay: f.delay + 's',
          opacity: f.opacity,
        }} />
      ))}
    </div>
  );
}

// ── App ────────────────────────────────────────────────────
function AppInner() {
  const editCtx = useEditMode();
  React.useEffect(() => {
    if (editCtx?.editing) document.body.classList.add('is-editing');
    else document.body.classList.remove('is-editing');
  }, [editCtx?.editing]);
  const [t, setTweak]       = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive]     = React.useState('hero');
  const [ctaVisible, setCta]    = React.useState(false);
  const [topVisible, setTop]    = React.useState(false);
  const [menuOpen, setMenu]     = React.useState(false);
  const [joinOpen, setJoinOpen] = React.useState(false);
  const [adminOpen, setAdmin]   = React.useState(false);

  // Persist language choice
  const [lang, setLangState] = React.useState(() => {
    try { return localStorage.getItem('4wos_lang') || 'en'; } catch { return 'en'; }
  });
  const setLang = (code) => {
    setLangState(code);
    try { localStorage.setItem('4wos_lang', code); } catch {}
    document.documentElement.dir = code === 'ar' ? 'rtl' : 'ltr';
    document.documentElement.lang = code;
  };
  React.useEffect(() => {
    document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
    document.documentElement.lang = lang;
  }, []);

  // Apply palette
  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);

  // Scroll tracking
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const vh = window.innerHeight;
      setScrolled(y > 20);
      setCta(y > vh * 0.4);
      setTop(y > vh * 0.6);
      const offset = 120;
      let cur = 'hero';
      for (const s of SECTIONS) {
        const el = document.getElementById(s.id);
        if (el && el.getBoundingClientRect().top - offset <= 0) cur = s.id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const openJoin  = () => { setJoinOpen(true); setMenu(false); };
  const openAdmin = () => { setAdmin(true); setMenu(false); };

  return (
    <>
      <div className="bg-aurora" />
      <div className="bg-grain" />
      {t.snow && <Snow />}

      <Nav active={active} scrolled={scrolled}
           onAdmin={openAdmin} onMenu={() => setMenu(true)}
           onJoin={openJoin} lang={lang} setLang={setLang} />
      <Drawer open={menuOpen} onClose={() => setMenu(false)} onAdmin={openAdmin} />

      {lang !== 'en' && (
        <div className="lang-banner">
          Showing English copy. <b>{(ATS.LANGUAGES.find(l => l.code === lang) || {}).label}</b> translations come from the deployment system.
          <button onClick={() => setLang('en')}>Switch back</button>
        </div>
      )}

      <main>
        <Hero variant={t.hero} onJoin={openJoin} />
        <About />
        <WhyApply layout={t.perksLayout} />
        <HowToJoin onJoin={openJoin} />
        <WhoFits />
        <Schedule />
        <TransferFacts />
        <FAQ />
      </main>

      <Footer onJoin={openJoin} />

      <FloatingCTA variant={t.ctaStyle} visible={ctaVisible} onClick={openJoin} />
      <BackToTop visible={topVisible} />

      <ApplicationModal open={joinOpen} onClose={() => setJoinOpen(false)} lang={lang} />
      <AdminModal open={adminOpen} onClose={() => setAdmin(false)} />

      <EditModeToolbar />
      <DraftTray />
      <ApprovalBadge />
      <ApprovalPanel />
      <HistoryPanel />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakRadio label="Layout" value={t.hero}
                    options={[{ value: 'centered', label: 'Center' }, { value: 'split', label: 'Split' }, { value: 'banner', label: 'Banner' }]}
                    onChange={(v) => setTweak('hero', v)} />

        <TweakSection label="Why apply layout" />
        <TweakRadio label="Layout" value={t.perksLayout}
                    options={[{ value: 'grid', label: 'Grid' }, { value: 'list', label: 'List' }, { value: 'flow', label: 'Flow' }]}
                    onChange={(v) => setTweak('perksLayout', v)} />

        <TweakSection label="Floating CTA" />
        <TweakRadio label="Style" value={t.ctaStyle}
                    options={[{ value: 'pill', label: 'Pill' }, { value: 'rail', label: 'Rail' }, { value: 'bar', label: 'Bar' }]}
                    onChange={(v) => setTweak('ctaStyle', v)} />

        <TweakSection label="Theme" />
        <TweakColor label="Palette" value={t.palette}
                    options={[
                      ['#7dd3fc', '#0a1628', '#050b1a'],
                      ['#a78bfa', '#161033', '#0a0820'],
                      ['#5eead4', '#061827', '#02050d'],
                      ['#e2e8f0', '#1a2235', '#0c111c'],
                    ]}
                    onChange={(v) => setTweak('palette', v)} />
        <TweakToggle label="Snowfall" value={t.snow} onChange={(v) => setTweak('snow', v)} />
      </TweaksPanel>
    </>
  );
}

function App() {
  return (
    <EditModeProvider>
      <AppInner />
    </EditModeProvider>
  );
}

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