/* global React, ReactDOM, RESUME, LangContext, TopBar, DockNav, Hero, Strengths, AIProjects, Work, Awards, Contact, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor, TweakSlider, TweakToggle */
const { useState, useEffect, useMemo, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c4793a",
  "accentMode": "amber",
  "fontPair": "serif-sans",
  "density": "normal",
  "heroLayout": "split",
  "showOrbits": true
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  'serif-sans': {
    serif: "'Cormorant Garamond', 'Source Han Serif SC', 'Songti SC', 'Noto Serif SC', serif",
    sans: "'Inter', 'PingFang SC', system-ui, sans-serif",
    mono: "'JetBrains Mono', ui-monospace, Menlo, monospace",
  },
  'editorial': {
    serif: "'EB Garamond', 'Source Han Serif SC', 'Songti SC', serif",
    sans: "'Inter', 'PingFang SC', system-ui, sans-serif",
    mono: "'IBM Plex Mono', ui-monospace, Menlo, monospace",
  },
  'modern': {
    serif: "'Fraunces', 'Source Han Serif SC', serif",
    sans: "'Geist', 'Inter', 'PingFang SC', system-ui, sans-serif",
    mono: "'Geist Mono', ui-monospace, Menlo, monospace",
  },
  'all-sans': {
    serif: "'Inter Tight', 'PingFang SC', system-ui, sans-serif",
    sans: "'Inter', 'PingFang SC', system-ui, sans-serif",
    mono: "'JetBrains Mono', ui-monospace, Menlo, monospace",
  },
};

const ACCENT_PRESETS = {
  amber: 'oklch(0.62 0.14 45)',
  mint: 'oklch(0.55 0.10 165)',
  iris: 'oklch(0.50 0.13 270)',
  ink: 'oklch(0.30 0.02 270)',
  rose: 'oklch(0.58 0.13 15)',
};

function App() {
  const [lang, setLang] = useState('zh');
  const [theme, setTheme] = useState('light');
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeId, setActiveId] = useState('top');

  // Apply theme + density to root
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);
  useEffect(() => {
    document.documentElement.setAttribute('data-density', tweaks.density);
  }, [tweaks.density]);

  // Apply font pair
  useEffect(() => {
    const pair = FONT_PAIRS[tweaks.fontPair] || FONT_PAIRS['serif-sans'];
    const r = document.documentElement.style;
    r.setProperty('--font-serif', pair.serif);
    r.setProperty('--font-sans', pair.sans);
    r.setProperty('--font-mono', pair.mono);
  }, [tweaks.fontPair]);

  // Apply accent
  useEffect(() => {
    const r = document.documentElement.style;
    const val = tweaks.accentMode === 'custom' ? tweaks.accent : ACCENT_PRESETS[tweaks.accentMode] || ACCENT_PRESETS.amber;
    r.setProperty('--accent', val);
  }, [tweaks.accent, tweaks.accentMode]);

  // Apply hero orbits visibility
  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--orbits-display', tweaks.showOrbits ? 'block' : 'none');
  }, [tweaks.showOrbits]);

  // Reveal-on-scroll
  useEffect(() => {
    const io = new IntersectionObserver((ents) => {
      ents.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [lang]);

  // Active section observer for dock
  useEffect(() => {
    const ids = ['top', 'strengths', 'ai', 'work', 'awards', 'contact'];
    const handler = () => {
      let current = 'top';
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        const rect = el.getBoundingClientRect();
        if (rect.top <= window.innerHeight * 0.4) current = id;
      }
      setActiveId(current);
    };
    window.addEventListener('scroll', handler, { passive: true });
    handler();
    return () => window.removeEventListener('scroll', handler);
  }, []);

  const sections = [
    { id: 'top', label: lang === 'zh' ? 'Axiom · 首屏' : 'Axiom · Hero' },
    { id: 'strengths', label: lang === 'zh' ? '01 · 个人优势' : '01 · Strengths' },
    { id: 'ai', label: lang === 'zh' ? '02 · AI 项目' : '02 · AI Projects' },
    { id: 'work', label: lang === 'zh' ? '03 · 工作经历' : '03 · Work' },
    { id: 'awards', label: lang === 'zh' ? '04 · 奖项' : '04 · Recognition' },
    { id: 'contact', label: lang === 'zh' ? '05 · 联系' : '05 · Contact' },
  ];

  const onJump = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - (id === 'top' ? 0 : 80);
    window.scrollTo({ top, behavior: 'smooth' });
  };

  const onPrint = () => {
    // Open all collapsed details before print
    document.querySelectorAll('.work-detail').forEach(el => el.classList.add('open'));
    document.querySelectorAll('.work-toggle').forEach(el => el.classList.add('open'));
    setTimeout(() => window.print(), 250);
  };

  return (
    <LangContext.Provider value={{ lang, setLang }}>
      <TopBar onPrint={onPrint} theme={theme} setTheme={setTheme} />
      <DockNav sections={sections} activeId={activeId} onJump={onJump} />
      <main>
        <Hero />
        <Strengths />
        <AIProjects />
        <Work />
        <Awards />
        <Contact />
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent · 强调色">
          <TweakRadio
            value={tweaks.accentMode}
            onChange={v => setTweak('accentMode', v)}
            options={[
              { value: 'amber', label: '琥珀' },
              { value: 'mint', label: '薄荷' },
              { value: 'iris', label: '紫晶' },
              { value: 'ink', label: '墨' },
              { value: 'rose', label: '玫瑰' },
            ]}
          />
          {tweaks.accentMode === 'custom' && (
            <TweakColor value={tweaks.accent} onChange={v => setTweak('accent', v)} />
          )}
        </TweakSection>

        <TweakSection title="Font pair · 字体组合">
          <TweakSelect
            value={tweaks.fontPair}
            onChange={v => setTweak('fontPair', v)}
            options={[
              { value: 'serif-sans', label: 'Cormorant × Inter (默认)' },
              { value: 'editorial', label: 'EB Garamond × Inter' },
              { value: 'modern', label: 'Fraunces × Geist' },
              { value: 'all-sans', label: 'Inter Tight × Inter' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Theme · 深浅模式">
          <TweakRadio
            value={theme}
            onChange={setTheme}
            options={[
              { value: 'light', label: '浅色 Light' },
              { value: 'dark', label: '深色 Dark' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Density · 信息密度">
          <TweakRadio
            value={tweaks.density}
            onChange={v => setTweak('density', v)}
            options={[
              { value: 'compact', label: '紧凑' },
              { value: 'normal', label: '标准' },
              { value: 'roomy', label: '宽松' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Hero layout · 首屏">
          <TweakRadio
            value={tweaks.heroLayout}
            onChange={v => setTweak('heroLayout', v)}
            options={[
              { value: 'split', label: '左右分屏' },
              { value: 'centered', label: '居中' },
            ]}
          />
          <TweakToggle
            label="Crystal orbits · 水晶轨道"
            value={tweaks.showOrbits}
            onChange={v => setTweak('showOrbits', v)}
          />
        </TweakSection>
      </TweaksPanel>

      {/* Hero layout override */}
      <style>{`
        ${tweaks.heroLayout === 'centered' ? `
          .hero-grid { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; text-align: center; }
          .hero-eyebrow { justify-content: center; }
          .hero-pitch { margin-left: auto; margin-right: auto; }
          .hero-cta { justify-content: center; }
          .crystal-wrap { display: none; }
        ` : ''}
        .crystal-orbits { display: var(--orbits-display, block); }
      `}</style>
    </LangContext.Provider>
  );
}

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