import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Sidebar } from '../../layout/sidebar';
import { TemplateContent } from '../template-content/TemplateContent';
import { XerticaAssistant } from '../../assistant/xertica-assistant/xertica-assistant';
import { routes } from '../../shared/navigation';
import { useOptionalLayout } from '../../../contexts/LayoutContext';
import { useAuth } from '../../../contexts/AuthContext';

/**
 * Main Template Shell Page.
 *
 * @description
 * A complete layout assembly including the Sidebar, Main Content area (TemplateContent),
 * and the floating AI Assistant. Auth state is consumed from `AuthContext` — no props required.
 *
 * @ai-rules
 * 1. Use this page as the primary reference for assembling complex layouts within Xertica UI.
 * 2. It relies on `useLayout` context to synchronize the expansive states of the Sidebar and Assistant.
 */
export function TemplatePage() {
  const { user, logout } = useAuth();
  const layout = useOptionalLayout();
  const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
  const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
  const sidebarWidth = layout?.sidebarWidth ?? 280;
  const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
  const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded(value => !value));
  const toggleAssistente =
    layout?.toggleAssistente ?? (() => setLocalAssistantExpanded(value => !value));
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <div className="h-screen flex bg-muted overflow-hidden relative">
      <Sidebar
        expanded={sidebarExpanded}
        width={sidebarWidth}
        onToggle={toggleSidebar}
        user={user}
        onLogout={logout}
        onSettingsClick={() => navigate('/settings')}
        location={location}
        navigate={navigate}
        routes={routes}
      />
      <TemplateContent />
      <XerticaAssistant
        isExpanded={assistenteExpanded}
        onToggle={toggleAssistente}
        onEvaluation={() => {
          // Wire your feedback persistence logic here
        }}
      />
    </div>
  );
}