import React from 'react';
import ReactDOM from 'react-dom/client';
import { init as sentryInit } from '@sentry/react';
import App from './App.jsx';
import './index.css';

// Initialize Sentry for frontend error tracking
if (import.meta.env.PROD) {
  sentryInit({
    dsn: 'https://fe339a791ccdcb78acb1369ee9c12164@o4510882291843072.ingest.us.sentry.io/4510882295316480',
    environment: 'production',
    tracesSampleRate: 0.05,
    replaysSessionSampleRate: 0,
    replaysOnErrorSampleRate: 0.1,
    beforeSend(event) {
      // Strip PII from breadcrumbs
      if (event.breadcrumbs) {
        event.breadcrumbs = event.breadcrumbs.map((b) => {
          if (b.category === 'xhr' || b.category === 'fetch') {
            delete b.data?.request_body;
          }
          return b;
        });
      }
      return event;
    },
  });
}

// Set initial theme before React renders to prevent flash
// Default to light mode for new users; respect stored preference for returning users
const stored = localStorage.getItem('draftory-theme');
const initial = stored || 'light';
document.documentElement.setAttribute('data-theme', initial);
document.documentElement.classList.toggle('dark', initial === 'dark');

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