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';
import { WindowContainer } from '@/components/window/WindowContainer';
import { ErrorBoundary } from '@/components/ErrorBoundary';
import { WelcomeDialog } from '@/components/onboarding/WelcomeDialog';
import { OnboardingTour } from '@/components/onboarding/OnboardingTour';
import { useOnboardingStore } from '@/store/onboardingStore';

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();

  // Onboarding state — show WelcomeDialog on first login
  const completed = useOnboardingStore((s) => s.completed);
  const skipped = useOnboardingStore((s) => s.skipped);
  const skip = useOnboardingStore((s) => s.skip);

  // 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"
          >
            <ErrorBoundary>
              <Outlet />
            </ErrorBoundary>
          </main>
        </div>
      </div>
      {/* Message Sidebar — full height, right of TopBar and Toolbar */}
      {showMessageSidebar && <MessageSidebar />}
      <AIUIControlIndicator />
      <WindowContainer />
      <ToastContainer />
      <WelcomeDialog open={!completed && !skipped} onClose={skip} />
      <OnboardingTour />
    </div>
  );
}