// Main app — screen router + tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3D4550",
  "displayFont": "Archivo Black",
  "serifFont": "Fraunces"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = React.useState('landing');
  const [activeItem, setActiveItem] = React.useState(null);
  const [bequestItem, setBequestItem] = React.useState(null);
  const [currentUser, setCurrentUser] = React.useState(undefined); // undefined = loading
  const [lang, setLang] = React.useState('en');
  const toggleLang = () => setLang(l => l === 'en' ? 'zh' : 'en');

  // Auth state listener — also auto-navigate after sign-in
  React.useEffect(() => {
    const unsub = window.auth.onAuthStateChanged(user => {
      setCurrentUser(user || null);
      if (user) {
        setScreen(s => s === 'signin' ? 'archive' : s);
      }
    });
    return unsub;
  }, []);

  // Apply accent + fonts as CSS vars
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.accent]);

  React.useEffect(() => {
    const styleEl = document.getElementById('__rip-fonts') || (() => {
      const s = document.createElement('style');
      s.id = '__rip-fonts';
      document.head.appendChild(s);
      return s;
    })();
    styleEl.textContent = `
      .display { font-family: '${t.displayFont}', 'Archivo Black', sans-serif !important; }
      .serif   { font-family: '${t.serifFont}', 'Fraunces', serif !important; }
    `;
  }, [t.displayFont, t.serifFont]);

  const go = (s, item) => {
    // protect auth-required routes
    const protected_ = ['archive', 'item', 'add-item', 'bequest', 'settings'];
    if (protected_.includes(s) && !currentUser) {
      setScreen('signin');
      window.scrollTo({ top: 0, behavior: 'instant' });
      return;
    }
    setScreen(s);
    if (item && s === 'bequest') setBequestItem(item);
    else if (item) setActiveItem(item);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  return (
    <div data-screen-label={
      screen === 'landing'  ? '01 Landing' :
      screen === 'archive'  ? '02 Archive' :
      screen === 'signin'   ? '04 Sign in' :
      screen === 'add-item' ? '05 Add Item' :
      screen === 'bequest'  ? '06 Bequest' :
      screen === 'settings'    ? '07 Settings' :
      screen === 'marketplace' ? '08 Marketplace' :
      screen === 'notary'      ? '09 Notary' :
      `03 Item · ${activeItem?.name || ''}`
    }>
      {screen !== 'signin' && <Nav screen={screen} go={go} user={currentUser} lang={lang} toggleLang={toggleLang} onSignOut={() => { window.auth.signOut(); go('landing'); }} />}
      {screen === 'landing'  && <Landing go={go} lang={lang} />}
      {screen === 'archive'  && <Archive go={go} lang={lang} />}
      {screen === 'item'     && <ItemPage item={activeItem} go={go} lang={lang} />}
      {screen === 'signin'   && <SignIn go={go} lang={lang} />}
      {screen === 'add-item' && <AddItem go={go} lang={lang} />}
      {screen === 'bequest'  && <BequestEditor item={bequestItem} go={go} lang={lang} />}
      {screen === 'settings'    && <Settings go={go} lang={lang} />}
      {screen === 'marketplace' && <Marketplace go={go} lang={lang} />}
      {screen === 'notary'      && <NotaryPage go={go} lang={lang} />}

      <TweaksPanel title="R.I.P. tweaks">
        <TweakSection label="Accent" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={['#3D4550', '#6699CC', '#111111', '#8C8C8C']}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSection label="Typography" />
        <TweakSelect
          label="Display"
          value={t.displayFont}
          options={[
            { value: 'Archivo Black', label: 'Archivo Black (default)' },
            { value: 'Fraunces',      label: 'Fraunces serif' },
            { value: 'Bricolage Grotesque', label: 'Bricolage Grotesque' },
            { value: 'Anton',         label: 'Anton condensed' },
          ]}
          onChange={(v) => setTweak('displayFont', v)}
        />
        <TweakSelect
          label="Body serif"
          value={t.serifFont}
          options={[
            { value: 'Fraunces',     label: 'Fraunces' },
            { value: 'EB Garamond',  label: 'EB Garamond' },
            { value: 'Cormorant Garamond', label: 'Cormorant' },
          ]}
          onChange={(v) => setTweak('serifFont', v)}
        />
        <TweakSection label="Navigate" />
        <div className="flex gap-1">
          <TweakButton label="Landing" onClick={() => go('landing')} secondary />
          <TweakButton label="Archive" onClick={() => go('archive')} secondary />
          <TweakButton label="Item"    onClick={() => go('item', window.ITEMS[0])} secondary />
          <TweakButton label="Sign in"  onClick={() => go('signin')}   secondary />
          <TweakButton label="Add item" onClick={() => go('add-item')} secondary />
          <TweakButton label="Bequest"  onClick={() => go('bequest', window.ITEMS[0])} secondary />
          <TweakButton label="Settings"    onClick={() => go('settings')}    secondary />
          <TweakButton label="Marketplace" onClick={() => go('marketplace')} secondary />
          <TweakButton label="Notary"      onClick={() => go('notary')}      secondary />
        </div>
      </TweaksPanel>
    </div>
  );
}

// Inject any tweak-selected Google fonts on demand so the dropdown
// genuinely changes the look. Default Archivo Black + Fraunces are
// already preloaded via the <link> in the head.
(function injectExtraFonts() {
  const families = ['Bricolage+Grotesque:wght@400;700;800', 'Anton', 'EB+Garamond:wght@400;500;700', 'Cormorant+Garamond:wght@400;500;700'];
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?' + families.map(f => 'family=' + f).join('&') + '&display=swap';
  document.head.appendChild(link);
})();

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