import React from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { Sidebar } from './Sidebar';
import { TopBar } from './TopBar';
import { PluginToolbar } from './PluginToolbar';
import { MessageSidebar } from './MessageSidebar';
import { ToastContainer } from '@/components/ui/Toast';
import { useAIContext } from '@/hooks/useAIContext';
import { useAIUIControl } from '@/hooks/useAIUIControl';
import { PluginRegistry } from '@/components/plugins/PluginRegistry';
import { AIUIControlIndicator } from '@/components/ai-ui-control/AIUIControlIndicator';

export function AppShell() {
  const location = useLocation();

  // Track context for AI Proactive suggestions
  useAIContext();

  // AI UI Control — WebSocket-based UI control from AI agents (Phase 4)
  useAIUIControl();

  // Hide message sidebar on the AI Assistant page itself
  const showMessageSidebar = !location.pathname.startsWith('/ai-assistant');

  return (
    <div className="flex h-screen overflow-hidden bg-secondary-50" data-testid="app-shell">
      <PluginRegistry />
      <Sidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        <TopBar />
        <PluginToolbar />
        <div className="flex-1 flex overflow-hidden">
          <main
            className="flex-1 overflow-y-auto focus:outline-none"
            tabIndex={-1}
            role="main"
            id="main-content"
            data-testid="content-area"
          >
            <Outlet />
          </main>
        </div>
      </div>
      {/* Message Sidebar — full height, right of TopBar and Toolbar */}
      {showMessageSidebar && <MessageSidebar />}
      <AIUIControlIndicator />
      <ToastContainer />
    </div>
  );
}