import React, { useEffect } from 'react';
import './App.css';
import Toolbar   from './components/Toolbar';
import LeftPanel from './components/LeftPanel';
import Viewport  from './components/Viewport';
import RightPanel from './components/RightPanel';
import AIPanel   from './components/AIPanel';
import Timeline  from './components/Timeline';
import { useStudioStore } from './store/useStudioStore';

function App() {
  const { addError, mode } = useStudioStore();

  useEffect(() => {
    const handler = (event: ErrorEvent) => {
      if (
        event.message.includes('THREE')   ||
        event.message.includes('WebGL')   ||
        event.message.includes('fiber')   ||
        event.message.includes('drei')    ||
        event.message.includes('Cannot read') ||
        event.message.includes('undefined')
      ) {
        addError(event.message +
          (event.filename ? ` (${event.filename}:${event.lineno})` : ''));
      }
    };
    window.addEventListener('error', handler);
    return () => window.removeEventListener('error', handler);
  }, [addError]);

  return (
    <div className="studio-root">
      <Toolbar />
      <div className="studio-body">
        <LeftPanel />
        <div className="studio-center">
          <Viewport />
          {mode === 'animate' && <Timeline />}
          <AIPanel />
        </div>
        <RightPanel />
      </div>
    </div>
  );
}

export default App;