// 主应用入口（支持中英双语切换 + 全站实盘数据动态拉取）
function App() {
  const [currentPage, setCurrentPage] = React.useState('home');
  const [rebateOpen, setRebateOpen] = React.useState(false);
  const [lang, setLang] = React.useState(() => {
    return localStorage.getItem('xw_lang') || 'zh';
  });
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // 全站动态实盘数据状态
  const [liveData, setLiveData] = React.useState(null);

  React.useEffect(() => {
    let isMounted = true;
    fetch('/api/records')
      .then(res => res.json())
      .then(res => {
        if (isMounted && res && res.success && res.data) {
          setLiveData(res.data);
        }
      })
      .catch(() => {});
    return () => { isMounted = false; };
  }, []);

  const tLang = (window.I18N && window.I18N[lang]) ? window.I18N[lang] : (window.I18N ? window.I18N.zh : {});

  const toggleLang = () => {
    const nextLang = lang === 'zh' ? 'en' : 'zh';
    setLang(nextLang);
    localStorage.setItem('xw_lang', nextLang);
  };

  const navigate = (page) => {
    setCurrentPage(page);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const openRebate = () => setRebateOpen(true);
  const closeRebate = () => setRebateOpen(false);

  // 动态计算实盘曲线与统计
  const curveData = (liveData && liveData.curve && liveData.curve.length > 0) ? liveData.curve : SAMPLE_TRADES;
  const currentStats = (liveData && liveData.stats) ? liveData.stats : SITE_STATS;

  // 首页实盘迷你图根据实时数据库真实数据渲染
  React.useEffect(() => {
    if (currentPage === 'home' && window.echarts) {
      let chart = null;
      let handleResize = null;
      const timer = setTimeout(() => {
        const dom = document.getElementById('heroMiniChart');
        if (!dom) return;
        chart = echarts.init(dom);

        const xData = curveData.map(item => item.id ? item.id.replace('TRD-', '') : '');
        const yData = curveData.map(item => item.equity);

        const minVal = yData.length > 0 ? Math.floor(Math.min(...yData) - 1) : 98;
        const maxVal = yData.length > 0 ? Math.ceil(Math.max(...yData) + 1) : 120;

        chart.setOption({
          backgroundColor: 'transparent',
          grid: { left: 0, right: 0, top: 10, bottom: 0 },
          xAxis: { type: 'category', show: false, data: xData },
          yAxis: { type: 'value', show: false, min: minVal, max: maxVal },
          tooltip: {
            show: true,
            trigger: 'axis',
            backgroundColor: 'rgba(20, 24, 33, 0.95)',
            borderColor: 'rgba(255,255,255,0.1)',
            textStyle: { color: '#e2e8f0', fontSize: 12 },
            formatter: function(params) {
              const idx = params[0].dataIndex;
              const trade = curveData[idx];
              if (!trade) return '';
              const netLabel = lang === 'en' ? 'Net Equity' : '累计净值';
              const pnlLabel = lang === 'en' ? 'P&L' : '盈亏';
              return (
                '<div style="font-weight:600;margin-bottom:2px">' + (trade.id || '') + ' · ' + (trade.symbol || '') + '</div>' +
                '<div style="opacity:0.7;font-size:11px">' + (trade.date || '') + '</div>' +
                '<div style="margin-top:4px;color:' + (trade.pnlPercent >= 0 ? '#22c55e' : '#ef4444') + '">' +
                netLabel + ': ' + Number(trade.equity || 100).toFixed(2) + '%' +
                '</div>' +
                '<div>' + pnlLabel + ': ' + (trade.pnlPercent >= 0 ? '+' : '') + trade.pnlPercent + '%</div>'
              );
            }
          },
          series: [{
            type: 'line',
            data: yData,
            smooth: true,
            symbol: 'none',
            lineStyle: { color: '#22c55e', width: 2 },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(34, 197, 94, 0.25)' },
                { offset: 1, color: 'rgba(34, 197, 94, 0)' },
              ]),
            },
          }]
        });

        handleResize = () => chart && chart.resize();
        window.addEventListener('resize', handleResize);
        window.addEventListener('orientationchange', handleResize);
      }, 100);

      return () => {
        clearTimeout(timer);
        if (handleResize) {
          window.removeEventListener('resize', handleResize);
          window.removeEventListener('orientationchange', handleResize);
        }
        if (chart) { chart.dispose(); chart = null; }
      };
    }
  }, [currentPage, lang, curveData]);

  const renderPage = () => {
    switch (currentPage) {
      case 'home': return <HomePage onNavigate={navigate} onOpenRebate={openRebate} lang={lang} t={tLang} liveStats={currentStats} />;
      case 'record': return <RecordPage onNavigate={navigate} lang={lang} t={tLang} initialData={liveData} />;
      case 'methodology': return <MethodologyPage onNavigate={navigate} lang={lang} t={tLang} />;
      case 'faq': return <FaqPage onNavigate={navigate} lang={lang} t={tLang} />;
      default: return <HomePage onNavigate={navigate} onOpenRebate={openRebate} lang={lang} t={tLang} liveStats={currentStats} />;
    }
  };

  return (
    <div className="app" data-page={currentPage} data-lang={lang}>
      <Header
        currentPage={currentPage}
        onNavigate={navigate}
        onOpenRebate={openRebate}
        lang={lang}
        onToggleLang={toggleLang}
        t={tLang}
      />
      <main className="main-content">
        {renderPage()}
      </main>
      <Footer onNavigate={navigate} onOpenRebate={openRebate} lang={lang} t={tLang} />

      {rebateOpen && <RebateModal onClose={closeRebate} lang={lang} t={tLang} />}

      <TweaksPanel title="风格">
        <TweakSection label="主题" />
        <TweakColor
          label="强调色"
          value={t.primaryColor}
          options={['#22c55e', '#3b82f6', '#f59e0b', '#a855f7', '#ef4444']}
          onChange={(v) => setTweak('primaryColor', v)}
        />
        <TweakColor
          label="背景基调"
          value={t.bgMode}
          options={['dark', 'darker', 'midnight']}
          onChange={(v) => setTweak('bgMode', v)}
        />
      </TweaksPanel>
    </div>
  );
}

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