// Top-level app — orchestrates flow + Tweaks panel + palette swaps

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "palette": "cocoa",
  "headlineVariant": "classic",
  "typePairing": "fraunces-inter"
}/*EDITMODE-END*/;

const PALETTES = {
  cocoa:   { bg: '#f4ede4', bgDeep: '#ece2d3', bgCard: '#faf5ec', ink: '#2b1810', accent: '#8b4513', accentSoft: '#b86f3f', sand: '#e8d5b7', rule: '#d9ccb8', inkSoft: '#4a3328', inkMute: '#8a7563' },
  bone:    { bg: '#f6f3ee', bgDeep: '#ebe6dd', bgCard: '#fcfaf5', ink: '#1a1a1a', accent: '#3d4a3a', accentSoft: '#6b8166', sand: '#c9b89a', rule: '#d8d2c5', inkSoft: '#2e2e2e', inkMute: '#7a7466' },
  porcelain: { bg: '#fafaf7', bgDeep: '#efece4', bgCard: '#ffffff', ink: '#0f0f0f', accent: '#2c3e50', accentSoft: '#4a6580', sand: '#d4a574', rule: '#dcd8cc', inkSoft: '#2a2a2a', inkMute: '#6f6c5e' },
  sage:    { bg: '#f0ebe3', bgDeep: '#e3dcce', bgCard: '#f8f4ec', ink: '#1c1c1c', accent: '#5a6c4a', accentSoft: '#8b9a7c', sand: '#b8956a', rule: '#cfc6b3', inkSoft: '#2e2e28', inkMute: '#7a7466' },
};

const SITE_PAGE_PATHS = {
  home: '/',
  categories: '/categories',
  philosophy: '/philosophy',
  care: '/provider-on-call',
  catalog: '/catalog',
  practice: '/practice-with-us',
  book: '/book',
  faq: '/faq',
  login: '/login',
  checkout: '/checkout',
  dashboard: '/dashboard',
  check: '/check',
  'office-hours': '/office-hours',
  'private-call': '/private-call',
  'book-success': '/book/success',
};

const SITE_PATH_PAGES = Object.entries(SITE_PAGE_PATHS).reduce((acc, [page, path]) => {
  acc[path.replace(/^\/+|\/+$/g, '') || 'home'] = page;
  return acc;
}, {});

const AREA_PRIMARY_PEPTIDES = {
  skin: 'ghk-cu',
  hair: 'ptd-dbm',
  menopause: 'estradiol',
  libido: 'pt-141',
  weight: 'tirzepatide',
  sleep: 'selank',
  energy: 'mots-c',
  healing: 'tb-500',
  cognition: 'semax',
  stress: 'oxytocin',
};

const App = () => {
  const [tweaks, setTweak] = useTweaks(DEFAULT_TWEAKS);
  const showTweaks = new URLSearchParams(window.location.search).get('tweaks') === '1';
  const checkoutState = React.useMemo(() => {
    try {
      return JSON.parse(window.sessionStorage?.getItem('axo_site_checkout_state') || 'null');
    } catch {
      return null;
    }
  }, []);
  const [visitorId] = React.useState(() => {
    const existing = window.localStorage?.getItem('axo_site_visitor_id');
    if (existing) return existing;
    const next = crypto.randomUUID();
    window.localStorage?.setItem('axo_site_visitor_id', next);
    return next;
  });
  const [route, setRoute] = React.useState('home');
  // home | triage | deep | heard | contact | paywall | dashboard | verify
  const [marketingPage, setMarketingPage] = React.useState('home');
  // home | categories | philosophy | membership | book | faq
  const [areaSlug, setAreaSlug] = React.useState(null);
  const [trackHint, setTrackHint] = React.useState(null);
  const [triageAnswers, setTriageAnswers] = React.useState({});
  const [deepAnswers, setDeepAnswers] = React.useState({});
  const [contactInfo, setContactInfo] = React.useState(checkoutState?.contact || null);
  const [selectedVials, setSelectedVials] = React.useState(checkoutState?.vials || []);
  const [selectedPlan, setSelectedPlan] = React.useState(checkoutState?.plan || null);
  const [providerSupport, setProviderSupport] = React.useState(checkoutState?.support || null);
  const [checkoutHydration, setCheckoutHydration] = React.useState(null);
  const [bookOpen, setBookOpen] = React.useState(false);

  const [peptideSlug, setPeptideSlug] = React.useState(null);

  // Clean path routing for Site pages.
  React.useEffect(() => {
    const sync = () => {
      const cleanPath = new URLSearchParams(location.search).get('path') || '';
      const cleanSegments = cleanPath
        .replace(/^\/+|\/+$/g, '')
        .split('/')
        .filter(Boolean);
      const cleanSlug = cleanSegments[0] || '';
      const hasCleanPath = Boolean(cleanSlug);
      const areaIds = (window.CATEGORIES || []).map(c => c.id);
      const cleanPage = SITE_PATH_PAGES[cleanSegments.join('/') || cleanSlug || 'home'] || SITE_PATH_PAGES[cleanSlug || 'home'];
      if (cleanSegments[0] === 'checkout' && cleanSegments[1] === 'book') {
        setMarketingPage('book');
        setRoute('home');
        setBookOpen(true);
        window.scrollTo({ top: 0, behavior: 'instant' });
        return;
      }
      if (cleanSegments[0] === 'book' && cleanSegments[1] === 'success') {
        setMarketingPage('book-success');
        setRoute('home');
        setBookOpen(false);
        window.scrollTo({ top: 0, behavior: 'instant' });
        return;
      }
      if (cleanSegments[0] === 'peptide' || cleanSegments[0] === 'peptides') {
        setPeptideSlug(cleanSegments[1]);
        setMarketingPage('peptide');
        setRoute('home');
        window.scrollTo({ top: 0, behavior: 'instant' });
        return;
      }
      if (cleanSlug && areaIds.includes(cleanSlug)) {
        setAreaSlug(cleanSlug);
        setPeptideSlug(AREA_PRIMARY_PEPTIDES[cleanSlug] || cleanSlug);
        setMarketingPage('peptide');
        setRoute('home');
        window.scrollTo({ top: 0, behavior: 'instant' });
        return;
      }
      if (cleanPage) {
        if (cleanPage === 'login') setRoute('login');
        else if (cleanPage === 'checkout') setRoute('paywall');
        else if (cleanPage === 'dashboard') setRoute('dashboard');
        else if (cleanPage === 'check') setRoute('check');
        else if (cleanPage === 'office-hours' || cleanPage === 'private-call') setRoute('telehealth');
        else {
          setMarketingPage(cleanPage === 'home' ? 'home' : cleanPage);
          setRoute('home');
        }
        window.scrollTo({ top: 0, behavior: 'instant' });
        return;
      }
      setMarketingPage('home');
      setRoute('home');
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    sync();
    window.addEventListener('popstate', sync);
    return () => {
      window.removeEventListener('popstate', sync);
    };
  }, []);

  const navMarketing = (page) => {
    const pushCleanPath = (path) => {
      if (window.parent && window.parent !== window) {
        window.parent.postMessage({ type: 'axo:site-path', path }, window.location.origin);
      } else {
        window.history.pushState(null, '', path);
      }
    };
    if (page === 'login') {
      pushCleanPath(SITE_PAGE_PATHS.login);
      setRoute('login');
      window.scrollTo({ top: 0, behavior: 'instant' });
      return;
    }
    if (page === 'checkout' || page === 'dashboard' || page === 'check' || page === 'office-hours' || page === 'private-call') {
      pushCleanPath(SITE_PAGE_PATHS[page]);
      if (page === 'checkout') setRoute('paywall');
      if (page === 'dashboard') setRoute('dashboard');
      if (page === 'check') setRoute('check');
      if (page === 'office-hours' || page === 'private-call') setRoute('telehealth');
      window.scrollTo({ top: 0, behavior: 'instant' });
      return;
    }
    if (typeof page === 'string' && page.startsWith('area/')) {
      const slug = page.split('/')[1];
      pushCleanPath(`/${slug}`);
      setAreaSlug(page.split('/')[1]);
      setPeptideSlug(AREA_PRIMARY_PEPTIDES[slug] || slug);
      setMarketingPage('peptide');
      setRoute('home');
      window.scrollTo({ top: 0, behavior: 'instant' });
      return;
    }
    if (typeof page === 'string' && page.startsWith('peptide/')) {
      const slug = page.split('/')[1];
      pushCleanPath(`/peptides/${slug}`);
      setPeptideSlug(slug);
      setMarketingPage('peptide');
      setRoute('home');
      window.scrollTo({ top: 0, behavior: 'instant' });
      return;
    }
    pushCleanPath(SITE_PAGE_PATHS[page] || '/');
    setMarketingPage(page);
    setRoute('home');
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  // Apply palette + type to :root
  React.useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.cocoa;
    const r = document.documentElement;
    r.style.setProperty('--bg', p.bg);
    r.style.setProperty('--bg-deep', p.bgDeep);
    r.style.setProperty('--bg-card', p.bgCard);
    r.style.setProperty('--ink', p.ink);
    r.style.setProperty('--accent', p.accent);
    r.style.setProperty('--accent-soft', p.accentSoft);
    r.style.setProperty('--sand', p.sand);
    r.style.setProperty('--rule', p.rule);
    r.style.setProperty('--ink-soft', p.inkSoft);
    r.style.setProperty('--ink-mute', p.inkMute);

    if (tweaks.typePairing === 'inter-only') {
      let s = document.getElementById('type-override');
      if (!s) { s = document.createElement('style'); s.id = 'type-override'; document.head.appendChild(s); }
      s.textContent = `.serif, h1.serif, h2.serif { font-family: 'Inter Tight', sans-serif !important; font-weight: 600 !important; letter-spacing: -0.04em !important; } .serif em { font-style: normal !important; }`;
    } else {
      const s = document.getElementById('type-override');
      if (s) s.textContent = '';
    }
  }, [tweaks.palette, tweaks.typePairing]);

  const currentPeptidePlan = React.useCallback(() => ({
    tier: window.sessionStorage?.getItem('axo_peptide_plan_tier') || selectedPlan?.id || 'solo',
    slots: Number(window.sessionStorage?.getItem('axo_peptide_plan_slots') || selectedPlan?.slots || 1),
    price: Number(window.sessionStorage?.getItem('axo_peptide_plan_price') || selectedPlan?.price || 299),
    label: window.sessionStorage?.getItem('axo_peptide_plan_label') || selectedPlan?.name || '1 peptide plan',
    anchorSlug: window.sessionStorage?.getItem('axo_peptide_anchor_slug') || '',
    anchorName: window.sessionStorage?.getItem('axo_peptide_anchor_name') || '',
    anchorArea: window.sessionStorage?.getItem('axo_peptide_anchor_area') || '',
  }), [selectedPlan]);

  const persistAssessmentPlan = React.useCallback((stage, overrides = {}) => {
    const payload = {
      visitorId,
      stage,
      track: trackHint,
      peptidePlan: currentPeptidePlan(),
      providerSupport,
      triageAnswers,
      deepAnswers,
      contact: contactInfo,
      selectedVials,
      ...overrides,
    };
    fetch('/api/site/assessment-plan', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    }).catch(() => {});
  }, [visitorId, trackHint, currentPeptidePlan, providerSupport, triageAnswers, deepAnswers, contactInfo, selectedVials]);

  React.useEffect(() => {
    let search = window.location.search || '';
    try {
      if (!search && window.parent !== window && window.parent.location.origin === window.location.origin) {
        search = window.parent.location.search || '';
      }
    } catch {}
    const params = new URLSearchParams(search);
    const stripeSessionId = params.get('checkout_session_id');
    const paymentProvider = params.get('provider');
    const whopReturn = paymentProvider === 'whop';
    if (!stripeSessionId && !whopReturn) return;

    setRoute('dashboard');
    setCheckoutHydration({ status: 'loading' });
    fetch('/api/site/checkout-success', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(whopReturn
        ? {
            provider: 'whop',
            visitorId,
            customerEmail: checkoutState?.contact?.email || contactInfo?.email || '',
          }
        : { stripeSessionId }),
    })
      .then((res) => res.json().then((data) => ({ ok: res.ok, data })))
      .then(({ ok, data }) => {
        if (ok) {
          setCheckoutHydration({ status: data.pending ? 'pending' : 'ready', data });
        } else {
          setCheckoutHydration({ status: 'error', error: data.error || 'Checkout could not be loaded' });
        }
        if (ok) {
          persistAssessmentPlan(whopReturn ? 'checkout_success_hydrated_whop' : 'checkout_success_hydrated', {
            stripeSessionId,
            provider: whopReturn ? 'whop' : 'stripe',
            checkoutSuccess: data,
          });
        }
      })
      .catch(() => setCheckoutHydration({ status: 'error', error: 'Checkout could not be loaded' }));
  }, [checkoutState?.contact?.email, contactInfo?.email, persistAssessmentPlan, visitorId]);

  const startTriage = (preselect) => {
    if (preselect) setTrackHint(preselect);
    persistAssessmentPlan('assessment_started', { track: preselect || trackHint });
    setRoute('triage');
  };

  const onTriageDone = ({ track, answers }) => {
    setTrackHint(track);
    setTriageAnswers(answers);
    persistAssessmentPlan('triage_complete', { track, triageAnswers: answers });
    setRoute('deep');
  };

  const onDeepDone = ({ answers }) => {
    setDeepAnswers(answers);
    persistAssessmentPlan('assessment_review_output', { deepAnswers: answers });
    setRoute('heard');
  };

  const onHeardContinue = () => setRoute('contact');

  const onContactDone = (info) => {
    setContactInfo(info);
    persistAssessmentPlan('contact_complete', { contact: info });
    setRoute('paywall');
  };

  const onVerified = (result) => {
    persistAssessmentPlan('verification_submitted', result || {});
    setRoute('dashboard');
  };

  const onPaid = ({ vials, plan, support, checkoutStatus, contact }) => {
    setSelectedVials(vials);
    setSelectedPlan(plan);
    setProviderSupport(support);
    if (contact) setContactInfo(contact);
    persistAssessmentPlan(checkoutStatus === 'started' ? 'checkout_started' : 'checkout_complete', {
      selectedVials: vials,
      peptidePlan: plan,
      providerSupport: support,
      contact,
    });
    if (checkoutStatus === 'started') return;
    setRoute('dashboard');
  };

  const name = (triageAnswers.name || '').trim();

  return (
    <>
      {route === 'home' && marketingPage === 'peptide' && (
        <div className="shell">
          <MarketingNav page="catalog" onNav={navMarketing} onStart={() => startTriage()} onHero={false} />
          <PagePeptide slug={peptideSlug} areaSlug={areaSlug} onStart={(area) => startTriage(area)} onNav={navMarketing} />
          <MarketingFooter onNav={navMarketing} onStart={startTriage} />
        </div>
      )}
      {route === 'home' && marketingPage !== 'peptide' && (
        <Marketing tweaks={tweaks} onStart={startTriage} onBuyBook={() => setBookOpen(true)}
          page={marketingPage} areaSlug={areaSlug} onNav={navMarketing} />
      )}
      {route === 'check' && (
        <ColdQuiz areaPreselect={trackHint} onComplete={(r) => { setTrackHint(r.track); setTriageAnswers(r.answers); setRoute('deep'); }} onExit={() => navMarketing('home')} />
      )}
      {route === 'login' && (
        <PageLogin
          onLoggedIn={() => { setRoute('dashboard'); }}
          onBack={() => navMarketing('home')}
        />
      )}
      {route === 'triage' && (
        <Questionnaire phase="triage" trackHint={trackHint}
          visitorId={visitorId} onComplete={onTriageDone} onBack={() => setRoute('home')} tweaks={tweaks} />
      )}
      {route === 'deep' && (
        <Questionnaire phase="deep" trackHint={trackHint}
          visitorId={visitorId} onComplete={onDeepDone} onBack={() => setRoute('triage')} tweaks={tweaks} />
      )}
      {route === 'heard' && (
        <HeardYou track={trackHint} name={name} deepAnswers={deepAnswers}
          onContinue={onHeardContinue} onBack={() => setRoute('deep')} />
      )}
      {route === 'contact' && (
        <ContactStep name={name} track={trackHint}
          onContinue={onContactDone} onBack={() => setRoute('heard')} />
      )}
      {route === 'verify' && (
        <VerifyStep contact={contactInfo} onComplete={onVerified} onBack={() => setRoute('dashboard')} />
      )}
      {route === 'paywall' && (
        <Paywall track={trackHint} contact={contactInfo}
          onPay={onPaid} onBack={() => setRoute('contact')} />
      )}
      {route === 'dashboard' && (
        <Dashboard track={trackHint} contact={contactInfo} vials={selectedVials} providerSupport={providerSupport}
          checkoutHydration={checkoutHydration}
          onLogout={() => setRoute('home')}
          onTelehealth={() => navMarketing('office-hours')}
          onVerify={() => setRoute('verify')}
        />
      )}
      {route === 'telehealth' && (
        <Telehealth contact={contactInfo} track={trackHint} onExit={() => setRoute('dashboard')} />
      )}

      {bookOpen && (
        <BookModal onClose={() => setBookOpen(false)} onConfirm={() => startTriage()} />
      )}

      {showTweaks && <TweaksPanel title="Tweaks">
        <TweakSection title="Flow / debug">
          <TweakSelect label="Jump to surface" value={route} onChange={(v) => setRoute(v)} options={[
            { value: 'home', label: 'Marketing landing' },
            { value: 'check', label: 'Cold-traffic quiz (/check)' },
            { value: 'triage', label: '1. Triage assessment' },
            { value: 'deep', label: '2. Deep questions' },
            { value: 'heard', label: '3. We heard you' },
            { value: 'contact', label: '4. Create account' },
            { value: 'paywall', label: '5. Checkout' },
            { value: 'dashboard', label: '6. Member dashboard' },
            { value: 'verify', label: '7. Post-checkout verification' },
            { value: 'telehealth', label: '8. Telehealth (provider call)' },
          ]} />
          <TweakSelect label="Marketing page" value={marketingPage} onChange={(v) => navMarketing(v)} options={[
            { value: 'home', label: 'Home' },
            { value: 'categories', label: 'Categories' },
            { value: 'philosophy', label: 'Philosophy' },
            { value: 'care', label: 'Provider on call' },
            { value: 'catalog', label: 'Peptide catalog' },
            { value: 'practice', label: 'Practice with us' },
            { value: 'book', label: 'Book' },
            { value: 'faq', label: 'FAQ' },
          ]} />
          <TweakSelect label="Force category" value={trackHint || 'weight'} onChange={(v) => setTrackHint(v)} options={[
            { value: 'weight', label: 'Weight' },
            { value: 'libido', label: 'Libido' },
            { value: 'menopause', label: 'Menopause' },
            { value: 'hair', label: 'Hair' },
            { value: 'skin', label: 'Skin' },
            { value: 'sleep', label: 'Sleep' },
            { value: 'energy', label: 'Energy' },
            { value: 'healing', label: 'Healing' },
            { value: 'cognition', label: 'Cognition' },
            { value: 'stress', label: 'Stress' },
          ]} />
        </TweakSection>

        <TweakSection title="Palette">
          <TweakRadio
            label="Theme"
            value={tweaks.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[
              { value: 'cocoa', label: 'Cocoa' },
              { value: 'bone', label: 'Bone' },
              { value: 'porcelain', label: 'Porcelain' },
              { value: 'sage', label: 'Sage' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Typography">
          <TweakRadio label="Pairing" value={tweaks.typePairing} onChange={(v) => setTweak('typePairing', v)}
            options={[
              { value: 'fraunces-inter', label: 'Serif + sans' },
              { value: 'inter-only', label: 'Sans only' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Hero headline">
          <TweakRadio label="Phrasing" value={tweaks.headlineVariant} onChange={(v) => setTweak('headlineVariant', v)}
            options={[
              { value: 'classic', label: 'Never undertreated.' },
              { value: 'declarative', label: 'Treated fully. For once.' },
              { value: 'question', label: 'Have you been undertreated?' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>}
    </>
  );
};

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