import { useState } from 'react'
import { StackScopeProvider, StackScopeErrorBoundary } from 'stackscope/react'
import './App.css'

import ConsoleDemo from './components/ConsoleDemo'
import NetworkDemo from './components/NetworkDemo'
import HooksDemo from './components/HooksDemo'
import ErrorDemo from './components/ErrorDemo'
import PerformanceDemo from './components/PerformanceDemo'

function App() {
  const [activeDemo, setActiveDemo] = useState('console')

  const demos = [
    { id: 'console', label: '📝 Console Logging', component: ConsoleDemo },
    { id: 'network', label: '🌐 Network Requests', component: NetworkDemo },
    { id: 'hooks', label: '⚛️ React Hooks', component: HooksDemo },
    { id: 'performance', label: '⚡ Performance', component: PerformanceDemo },
    { id: 'errors', label: '🚫 Error Handling', component: ErrorDemo },
  ]

  const ActiveComponent = demos.find(d => d.id === activeDemo)?.component || ConsoleDemo

  return (
    <StackScopeProvider config={{ debug: true, logLevel: 'debug' }}>
      <StackScopeErrorBoundary
        fallback={<div className="error-fallback">Something went wrong in StackScope</div>}
        onError={(error, errorInfo) => {
          console.error('StackScope Error Boundary caught:', error, errorInfo)
        }}
      >
        <div className="app">
          <header className="header">
            <h1>🚀 StackScope React + Vite Example</h1>
            <p className="subtitle">
              Interactive demonstration of StackScope SDK with React components and hooks
            </p>
            <div className="status">
              ✅ StackScope initialized with React integration
            </div>
          </header>

          <nav className="demo-nav">
            <h3>Choose a Demo:</h3>
            <div className="nav-buttons">
              {demos.map(demo => (
                <button
                  key={demo.id}
                  className={`nav-button ${activeDemo === demo.id ? 'active' : ''}`}
                  onClick={() => setActiveDemo(demo.id)}
                >
                  {demo.label}
                </button>
              ))}
            </div>
          </nav>

          <main className="demo-content">
            <ActiveComponent />
          </main>

          <footer className="footer">
            <p>
              Check your browser console and network tab to see StackScope in action!
              <br />
              Logs are automatically captured and sent to your configured worker endpoint.
            </p>
          </footer>
        </div>
      </StackScopeErrorBoundary>
    </StackScopeProvider>
  )
}

export default App