import { MetaProvider, Title } from '@solidjs/meta';
import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { ErrorBoundary, Suspense } from 'solid-js';
import { AuthProvider } from '~/lib/auth';
import './app.css';

export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>NXTGAUGE Frontend Solid</Title>
          <AuthProvider>
            <ErrorBoundary
              fallback={(err) => (
                <main style={{ padding: '24px', 'font-family': 'Inter, system-ui, sans-serif', color: '#111827', background: '#fff' }}>
                  <h1 style={{ margin: 0, 'font-size': '20px' }}>Frontend Error</h1>
                  <p style={{ 'margin-top': '8px' }}>A runtime error occurred while rendering this page.</p>
                  <pre style={{ 'margin-top': '12px', padding: '12px', background: '#f3f4f6', 'border-radius': '8px', 'white-space': 'pre-wrap' }}>
                    {String((err as any)?.message || err)}
                  </pre>
                </main>
              )}
            >
              <Suspense>{props.children}</Suspense>
            </ErrorBoundary>
          </AuthProvider>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}