const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "warm",
  "subscription": "premium",
  "role": "employer"
}/*EDITMODE-END*/;

function App() {
  const { t } = window.useI18n();
  // Initial route: honor `?route=` from the URL first (so email links like
  // `https://app/?route=auth:reset&token=ABC` can deep-link), then fall back
  // to the last route persisted in localStorage.
  const [route, setRoute] = useState(() => {
    try {
      const r = new URLSearchParams(window.location.search).get('route');
      if (r) return r;
    } catch (e) {}
    return localStorage.getItem('hm-route') || 'home';
  });
  const [variant, setVariant] = useState(TWEAK_DEFAULTS.variant);
  const [subscription, setSubscription] = useState(TWEAK_DEFAULTS.subscription);
  const [me, setMe] = useState(() => window.HelperMatchApi?.getCachedUser?.() || null);
  const [role, setRole] = useState(() => me?.role || TWEAK_DEFAULTS.role);
  const [loggedIn, setLoggedIn] = useState(() => !!window.HelperMatchApi?.getToken?.());
  useEffect(() => { localStorage.setItem('hm-logged-in', loggedIn ? '1' : '0'); }, [loggedIn]);
  const applySession = (authOrMe) => {
    const nextMe = authOrMe?.me || authOrMe;
    if (nextMe) {
      setMe(nextMe);
      setRole(nextMe.role || TWEAK_DEFAULTS.role);
      if (nextMe.role === 'helper' && nextMe.candidate?.review_status) {
        try {
          localStorage.setItem('hm_review_status', nextMe.candidate.review_status);
          localStorage.setItem('hm_resume_complete', nextMe.candidate.review_status === 'pending_resume' ? '0' : '1');
          window.dispatchEvent(new Event('hm-review-status-changed'));
        } catch(e) {}
      }
    }
    setLoggedIn(true);
  };
  const login = (authOrMe) => applySession(authOrMe);
  const logout = async () => {
    try { await window.HelperMatchApi?.logout?.(); }
    catch(e) { console.warn('Logout failed', e); }
    setMe(null);
    setLoggedIn(false);
    setRoute('home');
  };
  const [favs, setFavs] = useState([]);
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const [editMode, setEditMode] = useState(false);
  const [showUpgrade, setShowUpgrade] = useState(false);
  // Phase 0: language state lives in window.i18n (Shared/hm-i18n.js). Components
  // read/write via useI18n() — App no longer maintains its own lang mirror.

  useEffect(() => {
    let cancelled = false;
    if (!window.HelperMatchApi?.getToken?.()) return;
    window.HelperMatchApi.me()
      .then(current => {
        if (!cancelled) applySession(current);
      })
      .catch(() => {
        window.HelperMatchApi.clearSession();
        if (!cancelled) {
          setMe(null);
          setLoggedIn(false);
        }
      });
    return () => { cancelled = true; };
  }, []);

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

  // Scroll-to-top button visibility + visualViewport keyboard offset
  const [showScrollTop, setShowScrollTop] = useState(false);
  useEffect(() => {
    const onScroll = () => setShowScrollTop(window.scrollY > 600);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    const vv = window.visualViewport;
    if (!vv) return;
    const update = () => {
      const offset = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
      document.documentElement.style.setProperty('--kb-offset', offset + 'px');
    };
    vv.addEventListener('resize', update);
    vv.addEventListener('scroll', update);
    update();
    return () => { vv.removeEventListener('resize', update); vv.removeEventListener('scroll', update); };
  }, []);

  useEffect(() => {
    document.body.className = `variant-${variant === 'warm' ? 'warm' : variant}`;
  }, [variant]);

  useEffect(() => {
    function onMsg(e) {
      if (e.data?.type === '__activate_edit_mode') setEditMode(true);
      if (e.data?.type === '__deactivate_edit_mode') setEditMode(false);
    }
    window.addEventListener('message', onMsg);
    window.parent.postMessage({type:'__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const go = (r) => setRoute(r);
  const toggleFav = (id) => setFavs(f => f.includes(id) ? f.filter(x=>x!==id) : [...f, id]);

  const updateVariant = (v) => {
    setVariant(v);
    window.parent.postMessage({type:'__edit_mode_set_keys', edits:{variant:v}}, '*');
  };
  const updateSub = (s) => {
    setSubscription(s);
    window.parent.postMessage({type:'__edit_mode_set_keys', edits:{subscription:s}}, '*');
  };
  const updateRole = (r) => {
    setRole(r);
    setRoute('dashboard');
    window.parent.postMessage({type:'__edit_mode_set_keys', edits:{role:r}}, '*');
  };

  const [head, id] = route.split(':');

  let page;
  switch (head) {
    case 'home': page = <HomePage go={go}/>; break;
    case 'candidates': page = <CandidatesPage go={go} id={id} favs={favs} toggleFav={toggleFav} subscription={subscription}/>; break;
    case 'candidate': page = <CandidateDetailPage id={id} go={go} favs={favs} toggleFav={toggleFav} subscription={subscription} setShowUpgrade={setShowUpgrade}/>; break;
    case 'jobs': page = <JobsPage go={go} role={role} loggedIn={loggedIn}/>; break;
    case 'job': page = <JobDetailPage id={id} go={go} role={role} loggedIn={loggedIn}/>; break;
    case 'post-job': page = <PostJobPage go={go} loggedIn={loggedIn} subscription={subscription}/>; break;
    case 'create-profile': page = <CreateProfilePage go={go} loggedIn={loggedIn}/>; break;
    case 'pricing': page = <PricingPage go={go} setSubscription={updateSub} subscription={subscription}/>; break;
    case 'auth': {
      if (id === 'forgot') page = <ForgotPasswordPage go={go}/>;
      else if (id === 'reset') page = <ResetPasswordPage go={go}/>;
      else if (id === 'verify') page = <VerifyEmailPage go={go}/>;
      else page = typeof AuthPage === 'function' ? <AuthPage mode={id} go={go} login={login} setRole={setRole}/> : <HomePage go={go}/>;
      break;
    }
    case 'r': page = <ReferralLandingPage code={id} go={go}/>; break;
    case 'guides': page = <GuidesPage go={go}/>; break;
    case 'guide': page = <GuideArticlePage slug={id} go={go}/>; break;
    case 'dashboard': page = role === 'helper'
      ? <HelperDashPage go={go} subscription={subscription} logout={logout} me={me}/>
      : <DashPage go={go} favs={favs} subscription={subscription} logout={logout} me={me}/>; break;
    case 'inbox': page = <InboxPage go={go} subscription={subscription} initialId={id}/>; break;
    case 'agencies': page = <AgenciesPage go={go}/>; break;
    case 'about': page = <AboutPage go={go}/>; break;
    case 'assessment': page = <AssessmentPage go={go}/>; break;
    case 'trust': page = <TrustPage go={go}/>; break;
    case 'contact': page = <ContactPage go={go}/>; break;
    default: page = <HomePage go={go}/>;
  }

  return (
    <div className="page-shell">
      <Nav route={route} go={go} subscription={subscription} toggleTweaks={() => setTweaksOpen(o => !o)} role={role} loggedIn={loggedIn} logout={logout} me={me}/>
      <main style={{flex:1}}>{page}</main>
      {head !== 'auth' && head !== 'inbox' && <Footer go={go}/>}

      {/* Tweaks panel — always available as sparkle toggle; host edit mode also toggles */}
      <div className={`tweaks-panel ${(tweaksOpen || editMode) ? 'open' : ''}`}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
          <div style={{fontWeight:700, fontSize:14}}>Tweaks</div>
          <button onClick={()=>setTweaksOpen(false)} style={{padding:4, color:'var(--t-ink-muted)'}}><Icon name="x" size={14}/></button>
        </div>
        <h4>Visual style</h4>
        <div className="opt-row">
          <button className={`opt ${variant==='warm'?'active':''}`} onClick={()=>updateVariant('warm')}>Warm Home</button>
          <button className={`opt ${variant==='editorial'?'active':''}`} onClick={()=>updateVariant('editorial')}>Editorial</button>
          <button className={`opt ${variant==='modern'?'active':''}`} onClick={()=>updateVariant('modern')}>Modern</button>
        </div>
        <h4>Your role</h4>
        <div className="opt-row">
          <button className={`opt ${role==='employer'?'active':''}`} onClick={()=>updateRole('employer')}>Employer</button>
          <button className={`opt ${role==='helper'?'active':''}`} onClick={()=>updateRole('helper')}>Helper</button>
        </div>
        <h4>Session</h4>
        <div className="opt-row">
          <button className={`opt ${loggedIn?'active':''}`} onClick={()=>setLoggedIn(true)}>Logged in</button>
          <button className={`opt ${!loggedIn?'active':''}`} onClick={()=>setLoggedIn(false)}>Logged out</button>
        </div>
        {role === 'employer' && (
          <>
            <h4>Your subscription</h4>
            <div className="opt-row">
              <button className={`opt ${subscription==='free'?'active':''}`} onClick={()=>updateSub('free')}>Free</button>
              <button className={`opt ${subscription==='standard'?'active':''}`} onClick={()=>updateSub('standard')}>Standard</button>
              <button className={`opt ${subscription==='premium'?'active':''}`} onClick={()=>updateSub('premium')}>Premium</button>
            </div>
          </>
        )}
        <div style={{fontSize:11, color:'var(--t-ink-muted)', marginTop:12, lineHeight:1.5}}>
          Changes subscription = changes paywall state across the prototype.
        </div>
      </div>

      {/* Scroll-to-top button (mobile only) */}
      <button
        className={`scroll-top-btn active${showScrollTop ? ' visible' : ''} ${head === 'candidate' || head === 'job' ? 'lifted' : ''}`}
        aria-label="Scroll to top"
        onClick={() => window.scrollTo({top:0, behavior:'smooth'})}
      >
        <span style={{display:'inline-flex', transform:'rotate(-90deg)'}}><Icon name="arrow" size={18}/></span>
      </button>

      {/* Upgrade modal */}
      <div className={`modal-backdrop ${showUpgrade?'open':''}`} onClick={()=>setShowUpgrade(false)}>
        <div className="modal" onClick={e=>e.stopPropagation()}>
          <div style={{width:52,height:52,borderRadius:99,background:'var(--coral-bg)',color:'var(--coral-dark)',display:'grid',placeItems:'center',margin:'0 auto 16px'}}>
            <Icon name="lock" size={22}/>
          </div>
          <h3 className="display" style={{fontSize:24, textAlign:'center', marginBottom:8}}>{t('modals.upgrade.title')}</h3>
          <p style={{textAlign:'center', color:'var(--t-ink-muted)', fontSize:14, marginBottom:24}}>
            {t('modals.upgrade.body')}
          </p>
          <button className="btn btn-primary btn-block btn-lg" onClick={()=>{setShowUpgrade(false); go('pricing');}}>{t('modals.upgrade.cta')}</button>
          <button className="btn btn-ghost btn-block" style={{marginTop:8}} onClick={()=>setShowUpgrade(false)}>{t('modals.upgrade.dismiss')}</button>
        </div>
      </div>
    </div>
  );
}

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