// Main app — Saladin Numerology multi-screen prototype
// Screens: landing → form → result. Switch via Tweaks panel or in-page buttons.

const { useState, useEffect, useRef } = React;

// Default tweak values — host parses this JSON and rewrites on edits
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "viewport": "desktop",
  "dark": false,
  "screen": "landing"
}/*EDITMODE-END*/;
// ─────────────────────────────────────────────────────────────
// Reveal-on-scroll using IntersectionObserver
// ─────────────────────────────────────────────────────────────
function useReveal(deps = []) {
  useEffect(() => {
    const root = document.querySelector('.page-root');
    if (!root) return;
    const sections = root.querySelectorAll('[data-reveal]');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    sections.forEach(s => io.observe(s));
    return () => io.disconnect();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
}

// ─────────────────────────────────────────────────────────────
// Landing — wraps the marketing page sections
// ─────────────────────────────────────────────────────────────
function LandingPage({ mobile, onNavigate }) {
  useReveal([mobile]);
  return (
    <div className="page-root" data-screen-label="01 Landing" data-mobile={mobile ? '1' : '0'} style={{
      width: '100%', minHeight: '100%',
      background: 'var(--bg)', color: 'var(--text-default)',
      fontFamily: 'var(--font-sans)', overflowX: 'hidden',
    }}>
      <NumHeader mobile={mobile} />
      <NumHero mobile={mobile} onCta={() => onNavigate('form')} />
      <NumWhat mobile={mobile} />
      <NumHow mobile={mobile} />
      <NumTestimonials mobile={mobile} />
      <NumCrossSell mobile={mobile} />
      <NumFooter mobile={mobile} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Form wrapper page (with header + footer)
// ─────────────────────────────────────────────────────────────
function FormPage({ mobile, onSubmit, onBack }) {
  return (
    <div className="page-root" data-screen-label="02 Form" style={{
      width: '100%', minHeight: '100%',
      background: 'var(--bg)', color: 'var(--text-default)',
      fontFamily: 'var(--font-sans)', overflowX: 'hidden',
    }}>
      <NumHeader mobile={mobile} />
      <FormScreen mobile={mobile} onSubmit={onSubmit} onBack={onBack} />
      <NumFooter mobile={mobile} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Result wrapper page
// ─────────────────────────────────────────────────────────────
function ResultPage({ mobile, user, onBack, onShare, onOpenDetail, onOpenPoster }) {
  return (
    <div className="page-root" data-screen-label="03 Result" style={{
      width: '100%', minHeight: '100%',
      background: 'var(--bg)', color: 'var(--text-default)',
      fontFamily: 'var(--font-sans)', overflowX: 'hidden',
    }}>
      <NumHeader mobile={mobile} />
      <ResultScreen mobile={mobile} user={user} onBack={onBack} onShare={onShare} onOpenDetail={onOpenDetail} onOpenPoster={onOpenPoster} />
      <NumFooter mobile={mobile} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Detail wrapper page
// ─────────────────────────────────────────────────────────────
function DetailPage({ mobile, n, user, onBack, onShare }) {
  return (
    <div className="page-root" data-screen-label="04 Detail" style={{
      width: '100%', minHeight: '100%',
      background: 'var(--bg)', color: 'var(--text-default)',
      fontFamily: 'var(--font-sans)', overflowX: 'hidden',
    }}>
      <NumHeader mobile={mobile} />
      <DetailScreen mobile={mobile} n={n} user={user} onBack={onBack} onShare={onShare} />
      <NumFooter mobile={mobile} />
    </div>
  );
}


// ─────────────────────────────────────────────────────────────
// Poster wrapper page
// ─────────────────────────────────────────────────────────────
function PosterPage({ mobile, user, onBack }) {
  return (
    <div className="page-root" data-screen-label="05 Poster" style={{
      width: '100%', minHeight: '100%',
      background: 'var(--bg)', color: 'var(--text-default)',
      fontFamily: 'var(--font-sans)', overflowX: 'hidden',
    }}>
      <NumHeader mobile={mobile} />
      <PosterScreen mobile={mobile} user={user} onBack={onBack} />
      <NumFooter mobile={mobile} />
    </div>
  );
}
// ─────────────────────────────────────────────────────────────
// Mobile frame — iPhone-ish shell, scrollable inside
// ─────────────────────────────────────────────────────────────
function MobileFrame({ children, dark, scrollKey }) {
  const ref = useRef(null);
  useEffect(() => { if (ref.current) ref.current.scrollTop = 0; }, [scrollKey]);
  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'flex-start',
      padding: '32px 16px 80px',
      minHeight: '100vh',
      background: dark ? '#0A0F0B' : '#E5EBE8',
      transition: 'background 250ms',
    }}>
      <div style={{
        width: 390, height: 844, maxHeight: 'calc(100vh - 64px)',
        background: 'var(--bg)',
        borderRadius: 44,
        border: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid #DCDFE3',
        boxShadow: '0 24px 48px -12px rgba(16,24,40,0.18), 0 8px 16px -4px rgba(16,24,40,0.06)',
        overflow: 'hidden',
        position: 'relative',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Status bar */}
        <div style={{
          height: 44, flexShrink: 0,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '0 28px',
          background: 'var(--bg)',
          color: 'var(--text-default)',
          fontSize: 14, fontWeight: 600,
          fontFamily: 'var(--font-ios)',
          position: 'relative', zIndex: 60,
        }}>
          <span>9:41</span>
          <div style={{
            position: 'absolute', left: '50%', top: 10, transform: 'translateX(-50%)',
            width: 110, height: 32, borderRadius: 20, background: '#000',
          }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <i className="ri-signal-tower-line" style={{ fontSize: 13 }}></i>
            <i className="ri-wifi-line" style={{ fontSize: 13 }}></i>
            <i className="ri-battery-2-line" style={{ fontSize: 14 }}></i>
          </div>
        </div>
        <div ref={ref} style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
          {children}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Desktop frame — browser-like chrome around 1440 viewport
// ─────────────────────────────────────────────────────────────
function DesktopFrame({ children }) {
  // Production layout — no fake browser chrome, render full bleed.
  return (
    <div style={{
      background: 'var(--bg)',
      minHeight: '100vh',
      boxSizing: 'border-box',
    }}>
      {children}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// App shell with tweaks + router state
// ─────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [user, setUser] = useState(() => {
    try {
      const raw = sessionStorage.getItem('saladin-than-so-current');
      return raw ? JSON.parse(raw) : null;
    } catch (e) { return null; }
  });
  const [detailN, setDetailN] = useState(7);
  const [shareOpen, setShareOpen] = useState(false);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.dark ? 'dark' : 'light');
  }, [t.dark]);

  const mobile = t.viewport === 'mobile';
  const screen = t.screen || 'landing';

  const navigate = (next, payload) => {
    if (next === 'result' && payload) setUser(payload);
    if (next === 'detail' && payload && payload.n) setDetailN(payload.n);
    setTweak('screen', next);
    setShareOpen(false);
  };

  const openShare = () => setShareOpen(true);
  const openDetail = (n) => navigate('detail', { n });

  const u = user || { name: 'Nguyễn Hoài An', dob: '1993-05-16' };

  const body = (() => {
    if (screen === 'form') {
      return <FormPage mobile={mobile}
                       onBack={() => navigate('landing')}
                       onSubmit={(data) => {
                         const N = window.SaladinNumerology;
                         const numbers = N && N.calculateAll ? N.calculateAll(data) : {};
                         if (N && N.trackEvent) N.trackEvent('form_submitted', {
                           gender: data.gender || 'skip',
                           has_email: !!data.email,
                         });
                         try { sessionStorage.setItem('saladin-than-so-current', JSON.stringify({ ...data, numbers })); } catch(e) {}
                         navigate('result', { ...data, numbers });
                       }} />;
    }
    if (screen === 'result') {
      return <ResultPage mobile={mobile}
                         user={u}
                         onBack={() => navigate('landing')}
                         onShare={openShare}
                         onOpenDetail={openDetail}
                         onOpenPoster={openShare} />;
    }
    if (screen === 'poster') {
      return <PosterPage mobile={mobile}
                         user={u}
                         onBack={() => navigate('result')} />;
    }
    if (screen === 'detail') {
      return <DetailPage mobile={mobile} n={detailN}
                         user={u}
                         onBack={() => navigate('result')}
                         onShare={openShare} />;
    }
    return <LandingPage mobile={mobile} onNavigate={navigate} />;
  })();

  return (
    <>
      <div style={{ position: 'relative' }}>
        {mobile ? (
          <MobileFrame dark={t.dark} scrollKey={screen + ':' + detailN}>{body}</MobileFrame>
        ) : (
          <DesktopFrame>{body}</DesktopFrame>
        )}
        {/* Share modal is rendered relative to the frame container */}
        <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} user={u} n={detailN} />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Screen">
          <TweakSelect
            label="Page"
            value={screen}
            onChange={(v) => navigate(v)}
            options={[
              { value: 'landing', label: '01 — Landing' },
              { value: 'form',    label: '02 — Form' },
              { value: 'result',  label: '03 — Result' },
              { value: 'detail',  label: '04 — Detail (1 con số)' },
              { value: 'poster',  label: '05 — Poster Generator' },
            ]}
          />
          {screen === 'detail' && (
            <TweakSelect
              label="Số"
              value={String(detailN)}
              onChange={(v) => setDetailN(Number(v))}
              options={[
                { value: '7', label: 'Life Path 7 — Người tìm tòi' },
              ]}
            />
          )}
          <TweakButton label="Mở Share modal" onClick={openShare} />
        </TweakSection>

        <TweakSection label="Viewport">
          <TweakRadio
            label="Form factor"
            value={t.viewport}
            onChange={(v) => setTweak('viewport', v)}
            options={[
              { value: 'desktop', label: 'Desktop' },
              { value: 'mobile', label: 'Mobile' },
            ]}
          />
        </TweakSection>

        <TweakSection label="Theme">
          <TweakToggle
            label="Dark mode"
            value={t.dark}
            onChange={(v) => setTweak('dark', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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