import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import env from './config/env'
// import { initToolbar } from '@stagewise/toolbar'
import { ActionPanelProvider } from '@/context/ActionPanelContext'
import { UsageProvider } from '@/context/UsageContext'

// Force cache invalidation - deployment timestamp
const DEPLOYMENT_VERSION = '2025-12-07T15:18:00Z';

// VERY VISIBLE FRONTEND STARTUP LOG
console.log('='.repeat(50));
console.log('🌐 FRONTEND STARTING UP');
console.log('📦 Deployment Version:', DEPLOYMENT_VERSION);
console.log('='.repeat(50));

// Debug ALL environment variables that start with VITE_
console.log('🔍 [DEBUG] All VITE_ environment variables:');
Object.keys(import.meta.env).forEach(key => {
  if (key.startsWith('VITE_')) {
    console.log(`${key}:`, import.meta.env[key] ? 'SET' : 'MISSING');
  }
});

// Debug specific New Relic variables
console.log('🔍 [DEBUG] New Relic specific variables:');
console.log('MODE:', import.meta.env.MODE);
console.log('VITE_ENABLE_NEW_RELIC:', import.meta.env.VITE_ENABLE_NEW_RELIC);
console.log('VITE_NEW_RELIC_BROWSER_LICENSE_KEY:', import.meta.env.VITE_NEW_RELIC_BROWSER_LICENSE_KEY);
console.log('VITE_NEW_RELIC_ACCOUNT_ID:', import.meta.env.VITE_NEW_RELIC_ACCOUNT_ID);
console.log('VITE_NEW_RELIC_APPLICATION_ID:', import.meta.env.VITE_NEW_RELIC_APPLICATION_ID);

// Initialize New Relic Browser Agent
console.log('🔍 [DEBUG] About to initialize New Relic...');
import { initializeNewRelic } from '@/lib/newrelic'
const newRelicAgent = initializeNewRelic();
console.log('🔍 [DEBUG] New Relic initialization result:', !!newRelicAgent);

// Initialize console override (routes all console.log/info/warn/error to New Relic in production)
import { initializeConsoleOverride } from '@/lib/consoleOverride'
initializeConsoleOverride();
console.log('🔍 [DEBUG] Console override initialized');

//console.log('[RUNTIME] API_URL from env:', env.API_URL)

console.log('🔍 [DEBUG] About to render React app...');

// Stagewise Toolbar Integration (temporarily disabled due to module export issues)
/*
const stagewiseConfig = {
  plugins: [
    {
      name: 'example-plugin',
      displayName: 'Example Plugin',
      pluginName: 'example-plugin',
      iconSvg: '<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#8B5CF6"/></svg>',
      description: 'Adds additional context for your components',
      shortInfoForPrompt: () => {
        return "Context information about the selected element"
      },
      mcp: null,
      actions: [
        {
          name: 'Example Action',
          description: 'Demonstrates a custom action',
          execute: () => {
            window.alert('This is a custom action!')
          },
        },
      ],
    },
  ],
}

function setupStagewise() {
  
  if (process.env.NODE_ENV === 'development') {
    initToolbar(stagewiseConfig)
  }
}

setupStagewise()
*/

const container = document.getElementById("root");
if (!container) {
  throw new Error("Root element not found");
}
const root = createRoot(container);

root.render(
   // Temporarily disable StrictMode to test if it's causing the usage context reset issue
   // <React.StrictMode> 
    <ActionPanelProvider>
      <UsageProvider key="usage-provider-stable">
        <App />
      </UsageProvider>
    </ActionPanelProvider>
   // </React.StrictMode>
);
// Cache bust: 2025-12-07T14:02:00Z - Force new asset hash for OAuth fix