const { useState, useEffect } = React;

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

function App() {
  const { t } = window.useI18n();
  const [route, setRoute] = useState(() => localStorage.getItem('hm-route') || 'home');
  const [variant, setVariant] = useState(TWEAK_DEFAULTS.variant);
  const [subscription, setSubscription] = useState(TWEAK_DEFAULTS.subscription);
  const [role, setRole] = useState(TWEAK_DEFAULTS.role);
  const [loggedIn, setLoggedIn] = useState(() => localStorage.getItem('hm-logged-in') === '1');
  useEffect(() => { localStorage.setItem('hm-logged-in', loggedIn ? '1' : '0'); }, [loggedIn]);
  const login = () => setLoggedIn(true);
  const logout = () => { 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(() => {
    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': 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}/>
      : <DashPage go={go} favs={favs} subscription={subscription} logout={logout}/>; 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}/>
      <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/>);