// App entry point
(function () {
  const { useState, useEffect, useMemo, useRef } = React;

  function App() {
    const [page, setPage]       = useState(() => localStorage.getItem('fba_page') || 'dashboard');
    const [preset, setPreset]   = useState(() => {
      const p = localStorage.getItem('fba_preset') || 'today';
      // Clear stale custom ranges from localStorage
      if (p.startsWith('custom:')) {
        const [, from, to] = p.split(':');
        const msApart = new Date(to) - new Date(from);
        if (msApart > 200 * 86400_000) { localStorage.setItem('fba_preset', 'today'); return 'today'; }
      }
      return p;
    });
    const [apiData, setData]    = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError]     = useState(null);
    const [online, setOnline]   = useState(null);
    const [selectedProduct, setSelectedProduct] = useState(null);
    const tid = useRef(0);

    const range = useMemo(() => FBA_UTILS.dateRange(preset), [preset]);

    async function load(from, to, id) {
      setLoading(true); setError(null);
      try {
        const ago30 = new Date(Date.now() - 30*86400_000).toISOString().split('T')[0];
        const yest  = new Date(Date.now() - 86400_000).toISOString().split('T')[0];
        const [ordersKpis, ordersDaily, salesKpis, salesDaily, products, syncSt, salesKpis30d] = await Promise.all([
          API.ordersKpis(from, to).catch(() => null),
          API.ordersDaily(from, to).catch(() => null),
          API.kpis(from, to).catch(() => null),
          API.daily(from, to).catch(() => null),
          API.productsFull(from, to).catch(() => null),
          API.syncStatus().catch(() => null),
          API.kpis(ago30, yest).catch(() => null),   // always load 30d rates for estimates
        ]);
        if (tid.current !== id) return;

        // Merge orders daily + financial daily by date for the dual-bar chart
        const finByDate = {};
        (salesDaily?.data || []).forEach(d => { finByDate[d.date] = d; });
        const dailyData = (ordersDaily?.data || []).map(d => ({
          ...d,
          profit:    finByDate[d.date]?.profit    ?? null,
          totalFees: finByDate[d.date]?.totalFees ?? null,
        }));

        setData({
          ordersKpis:  ordersKpis  || null,
          salesKpis:   salesKpis   || null,
          salesKpis30d: salesKpis30d || null,
          dailyData,
          products:    products?.data || [],
          lastSyncAt:  syncSt?.lastOrders?.completed_at || syncSt?.lastFinancial?.completed_at || null,
        });
        setOnline(true);
      } catch (e) {
        if (tid.current !== id) return;
        setError({ message: e.message }); setOnline(false); setData(null);
      } finally {
        if (tid.current === id) setLoading(false);
      }
    }

    useEffect(() => {
      const id = ++tid.current;
      load(range.from, range.to, id);
    }, [range.from, range.to]);

    function nav(p)  { setPage(p); localStorage.setItem('fba_page', p); }
    function pick(p) { setPreset(p); localStorage.setItem('fba_preset', p); }
    async function refresh() {
      const id = ++tid.current;
      setLoading(true);
      try { await API.syncOrders(); } catch (_) {}
      load(range.from, range.to, id);
    }

    async function syncHistorico() {
      try { await API.syncFull(365); } catch (_) {}
    }

    const titles = { dashboard: 'Dashboard', products: 'Productos', finanzas: 'Finanzas' };
    const views  = {
      dashboard: React.createElement(DashboardView, {
        apiData, apiLoading: loading, preset, range,
      }),
      products: React.createElement(ProductsView, {
        onNav: nav,
        onOpenProduct: p => setSelectedProduct(p),
      }),
      finanzas: window.FinanzasView ? React.createElement(window.FinanzasView, { preset, range }) : null,
    };

    return React.createElement('div', { id: 'app' },
      React.createElement(Sidebar, { active: page, onNav: nav }),
      React.createElement('div', { className: 'app-body' },
        React.createElement(Header, {
          preset, onPreset: pick,
          title: titles[page] || 'Dashboard',
          loading, backendOnline: online, onRefresh: refresh,
          onSyncHistorico: syncHistorico,
          lastSyncAt: apiData?.lastSyncAt,
        }),
        React.createElement('main', { className: 'app-main' },
          views[page] || views.dashboard
        )
      ),
      selectedProduct && window.ProductDetail &&
        React.createElement(window.ProductDetail, {
          product: selectedProduct,
          onClose: () => setSelectedProduct(null),
        })
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
})();