/* global React, ReactDOM, AppCtx, CloudProvider, Header, ButterflyJar, PolaroidDuo, DualStatus, EventStream, MemoEntry, EnglishCorner, StatsPanel, Extras, Footer, TweakPanel */
const { useState: useAS, useEffect: useAE } = React;

function App() {
  const init = (typeof TWEAK_DEFAULTS !== 'undefined' ? TWEAK_DEFAULTS : {});
  const [style, setStyle] = useAS(init.style || 'A');
  const [lang, setLang] = useAS(init.language || 'zh');
  const [herName, setHerName] = useAS(init.herName || '沈虞芙');
  const [himName, setHimName] = useAS(init.himName || '容溟');

  useAE(() => {
    document.body.setAttribute('data-style', style);
  }, [style]);

  const ctx = { style, setStyle, lang, setLang, herName, setHerName, himName, setHimName };

  return (
    <CloudProvider>
      <AppCtx.Provider value={ctx}>
        <div style={{ maxWidth: 1440, margin: '0 auto', paddingBottom: 0 }}>
          <Header />
          <ButterflyJar />
          <PolaroidDuo />
          <DualStatus />
          <EventStream />
          <MemoEntry />
          <EnglishCorner />
          <section style={{ padding: '32px 72px 0' }}>
            <a href="wordbook.html" style={{ textDecoration: 'none', display: 'block' }}>
              <div style={{
                border: '1px solid var(--rule)', padding: '24px 28px', cursor: 'pointer',
                transition: 'all 0.3s',
              }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--accent)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--rule)'; }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.25em', color: 'var(--accent)', textTransform: 'uppercase' }}>WORDBOOK · 单词书</span>
                    <div style={{ fontFamily: 'var(--serif-zh)', fontSize: 18, color: 'var(--ink)', marginTop: 6, letterSpacing: '0.1em' }}>GPT4 生成的 6430 词</div>
                    <div style={{ fontFamily: 'var(--serif-en)', fontSize: 13, fontStyle: 'italic', color: 'var(--ink-mute)', marginTop: 4 }}>one word at a time</div>
                  </div>
                  <div style={{ fontFamily: 'var(--serif-en)', fontSize: 22, color: 'var(--ink-faint)', opacity: 0.4 }}>→</div>
                </div>
              </div>
            </a>
          </section>
          <section style={{ padding: '32px 72px 0' }}>
            <a href="history.html" style={{ textDecoration: 'none', display: 'block' }}>
              <div style={{
                border: '1px solid var(--rule)', padding: '24px 28px', cursor: 'pointer',
                transition: 'all 0.3s',
              }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--accent)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--rule)'; }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.25em', color: 'var(--accent)', textTransform: 'uppercase' }}>HISTORY · 每日流光</span>
                    <div style={{ fontFamily: 'var(--serif-zh)', fontSize: 18, color: 'var(--ink)', marginTop: 6, letterSpacing: '0.1em' }}>往日的蝴蝶与碎片</div>
                    <div style={{ fontFamily: 'var(--serif-en)', fontSize: 13, fontStyle: 'italic', color: 'var(--ink-mute)', marginTop: 4 }}>days that once were, kept in glass</div>
                  </div>
                  <div style={{ fontFamily: 'var(--serif-en)', fontSize: 22, color: 'var(--ink-faint)', opacity: 0.4 }}>→</div>
                </div>
              </div>
            </a>
          </section>
          <StatsPanel />
          <Extras />
          <Footer />
        </div>
        <TweakPanel />
      </AppCtx.Provider>
    </CloudProvider>
  );
}

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