// app.jsx — shell, routing, toasts, tweaks
(function () {
  const { Sidebar, BottomNav, Dashboard, TxnList, Credits, Reports, Settings, AddModal } = window;
  const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle } = window;

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#00D4FF",
    "amountFont": "mono",
    "heroGlow": true,
    "density": "regular"
  }/*EDITMODE-END*/;

  function darken(hex, f) {
    const m = /^#?([0-9a-f]{6})$/i.exec(hex || '');
    if (!m) return hex;
    const n = parseInt(m[1], 16);
    const r = Math.round(((n >> 16) & 255) * f);
    const g = Math.round(((n >> 8) & 255) * f);
    const b = Math.round((n & 255) * f);
    return '#' + [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('');
  }

  function App() {
    const auth  = window.useAuth();
    const store = window.useStore();
    const [route, setRoute] = React.useState('dashboard');
    const [modal, setModal] = React.useState(null);
    const [toasts, setToasts] = React.useState([]);
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    const [theme, setTheme] = React.useState(() => {
      try { return localStorage.getItem('finflow-theme') || 'dark'; } catch { return 'dark'; }
    });

    React.useEffect(() => {
      document.documentElement.setAttribute('data-theme', theme);
      try { localStorage.setItem('finflow-theme', theme); } catch {}
    }, [theme]);

    React.useEffect(() => {
      document.documentElement.style.setProperty('--accent', t.accent);
      document.documentElement.style.setProperty('--accent-ink', theme === 'light' ? darken(t.accent, 0.62) : t.accent);
    }, [t.accent, theme]);

    const toast = (msg, kind = 'success') => {
      const id = Date.now() + Math.random();
      setToasts((p) => [...p, { id, msg, kind }]);
      setTimeout(() => setToasts((p) => p.filter((x) => x.id !== id)), 3000);
    };

    // ── Loading / auth states ──────────────────────────────
    if (auth.authLoading) {
      return React.createElement('div', {
        style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', flexDirection: 'column', gap: 16, background: 'var(--bg)' },
      }, [
        React.createElement('div', { key: 'logo', style: { fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 26, letterSpacing: '0.18em' } }, [
          React.createElement('span', { key: 'f', style: { color: 'var(--text)' } }, 'FIN'),
          React.createElement('span', { key: 'fl', style: { color: 'var(--accent)' } }, 'FLOW'),
        ]),
        React.createElement('div', { key: 'sp', style: { width: 24, height: 24, borderRadius: '50%', border: '2px solid var(--border)', borderTopColor: 'var(--accent)', animation: 'spin 0.8s linear infinite' } }),
      ]);
    }

    if (!auth.user) {
      return React.createElement(window.LoginScreen, { onLogin: auth.login });
    }

    if (store.loading) {
      return React.createElement('div', { className: 'app' },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', flexDirection: 'column', gap: 12 } }, [
          React.createElement('div', { key: 'sk', style: { width: 160, height: 16, borderRadius: 8, background: 'var(--surface-2)', animation: 'shimmer 1.5s infinite' } }),
          React.createElement('div', { key: 'lbl', style: { fontSize: 13, color: 'var(--text-3)', fontFamily: 'var(--font-body)' } }, 'Loading…'),
        ]));
    }

    if (store.error) {
      return React.createElement('div', { className: 'app' },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', flexDirection: 'column', gap: 12, padding: 24, textAlign: 'center' } }, [
          React.createElement('div', { key: 'e', style: { fontSize: 15, color: 'var(--red)' } }, 'Could not connect to server'),
          React.createElement('div', { key: 's', style: { fontSize: 13, color: 'var(--text-3)' } }, store.error),
          React.createElement('button', { key: 'r', className: 'btn', style: { marginTop: 8 }, onClick: () => window.location.reload() }, 'Retry'),
        ]));
    }

    // ── Main app ───────────────────────────────────────────
    const openAdd = (type) => setModal(type);
    const handleSubmit = async (txn) => {
      try {
        await store.addTxn(txn);
        setModal(null);
        toast((txn.type === 'income' ? 'Income' : 'Expense') + ' of Rs. ' + window.fmt(txn.amount) + ' added', txn.type === 'income' ? 'success' : 'warn');
      } catch (err) {
        toast('Failed to save: ' + (err.message || 'error'), 'warn');
      }
    };

    let screen;
    if (route === 'dashboard') screen = React.createElement(Dashboard, { store, openAdd, setRoute });
    else if (route === 'income')    screen = React.createElement(TxnList, { type: 'income',  store, openAdd });
    else if (route === 'expenses')  screen = React.createElement(TxnList, { type: 'expense', store, openAdd });
    else if (route === 'credits')   screen = React.createElement(Credits, { store });
    else if (route === 'reports')   screen = React.createElement(Reports, { store, toast });
    else if (route === 'settings')  screen = React.createElement(Settings, { store, theme, setTheme, user: auth.user, onLogout: auth.logout });

    return React.createElement('div', { className: 'app', 'data-density': t.density, 'data-glow': t.heroGlow ? 'on' : 'off' }, [
      React.createElement(Sidebar, { key: 'sb', route, setRoute, user: auth.user, onLogout: auth.logout }),
      React.createElement('main', { key: 'main', className: 'main' },
        React.createElement('div', { key: route, className: 'route-wrap' }, screen)),
      React.createElement(BottomNav, { key: 'bn', route, setRoute }),

      React.createElement('div', { key: 'toasts', className: 'toast-wrap' },
        toasts.map((x) =>
          React.createElement('div', { key: x.id, className: 'toast ' + (x.kind === 'success' ? '' : x.kind) },
            React.createElement('span', null, x.msg)))),

      modal && React.createElement(AddModal, {
        key: 'modal', type: modal,
        cats: modal === 'income' ? store.incomeCats : store.expenseCats,
        onClose: () => setModal(null), onSubmit: handleSubmit,
      }),

      React.createElement(TweaksPanel, { key: 'tw' }, [
        React.createElement(TweakSection, { key: 's0', label: 'Theme' }),
        React.createElement(TweakRadio, { key: 'theme', label: 'Mode', value: theme, options: ['light', 'dark'], onChange: (v) => setTheme(v) }),
        React.createElement(TweakSection, { key: 's1', label: 'Accent' }),
        React.createElement(TweakColor, { key: 'accent', label: 'Primary accent', value: t.accent, options: ['#00D4FF', '#7C5CFC', '#00E5A0', '#FF8A3D'], onChange: (v) => setTweak('accent', v) }),
        React.createElement(TweakSection, { key: 's2', label: 'Balance card' }),
        React.createElement(TweakToggle, { key: 'glow', label: 'Radial glow', value: t.heroGlow, onChange: (v) => setTweak('heroGlow', v) }),
        React.createElement(TweakSection, { key: 's3', label: 'Layout' }),
        React.createElement(TweakRadio, { key: 'density', label: 'Density', value: t.density, options: ['compact', 'regular', 'comfy'], onChange: (v) => setTweak('density', v) }),
      ]),
    ]);
  }

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