import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Sidebar } from 'xertica-ui/layout';
import { useLayout } from 'xertica-ui/hooks';
import { routes } from '../../shared/config/navigation';
import { useAuth } from '../context/AuthContext';

interface AppLayoutProps {
  children: React.ReactNode;
  assistant?: React.ReactNode;
  sidebarVariant?: 'default' | 'assistant';
  sidebarProps?: Record<string, any>;
}

/**
 * `AppLayout` — shared shell for all authenticated pages.
 *
 * Auth state (user, logout) is consumed from `AuthContext` — no props needed.
 * Pass only layout-specific concerns: `children`, `assistant`, and sidebar options.
 */
export function AppLayout({
  children,
  assistant,
  sidebarVariant = 'default',
  sidebarProps,
}: AppLayoutProps) {
  const { user, logout } = useAuth();
  const { sidebarExpanded, sidebarWidth, toggleSidebar } = useLayout();
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <div className="h-screen flex bg-muted overflow-hidden relative">
      <Sidebar
        expanded={sidebarExpanded}
        width={sidebarWidth}
        onToggle={toggleSidebar}
        variant={sidebarVariant}
        user={{
          ...user,
          name: 'Ariel Santos',
          avatar: 'https://github.com/shadcn.png',
        }}
        onLogout={logout}
        onSettingsClick={() => navigate('/settings')}
        location={location}
        navigate={navigate}
        routes={routes}
        {...sidebarProps}
      />
      {children}
      {assistant}
    </div>
  );
}