import { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { ChevronLeft, ChevronRight, Bot, Activity, HelpCircle, Settings, User, Globe, BookOpen, BarChart3, Camera, Brain, Map as MapIcon, Sparkles } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { ThemeToggle } from '@/components/theme-toggle'
import { LoggerPanel } from '@/components/logger-panel'
import { HelpPanel } from '@/components/help-panel'
import { AuthPanel } from '@/components/auth-panel'
interface RoboticsLayoutProps {
children: React.ReactNode
}
const navigationItems = [
{
title: 'Dashboard',
icon: BarChart3,
href: '/',
description: 'Overview and quick controls'
},
{
title: 'Robot Control',
icon: Bot,
href: '/robot-control',
description: 'Real-time robot control interface',
collapsible: true,
children: [
{ title: 'Yahboom ROSMASTER', href: '/robot-control/yahboom', description: 'ROS 2 wheeled robot with AI' },
{ title: 'Flying & Cleaning', href: '/robot-control/flying-cleaning', description: 'Drones and vacuum robots' },
{ title: 'Hue Bridge Pro', href: '/robot-control/hue', description: 'Smart home lighting & motion' }
]
},
{
title: 'Map Visualization',
icon: MapIcon,
href: '/map',
description: 'LIDAR maps and robot positions'
},
{
title: 'Sensor Dashboard',
icon: Activity,
href: '/sensors',
description: 'Live sensor data visualization'
},
{
title: 'Environments',
icon: Globe,
href: '/environments',
description: 'World Labs Marble integration'
},
{
title: 'VRM Avatars',
icon: User,
href: '/vrm-avatars',
description: 'VRoid Studio & Blender VRM models'
},
{
title: 'Niantic Splats',
icon: Camera,
href: '/niantic-splats',
description: 'iPhone-captured Gaussian splats'
},
{
title: 'LLM Management',
icon: Brain,
href: '/llm-management',
description: 'AI models for robot control'
},
{
title: 'Monitoring',
icon: BarChart3,
href: '/monitoring',
description: 'System performance and health'
},
{
title: 'Settings',
icon: Settings,
href: '/settings',
description: 'Configuration and preferences'
},
{
title: 'Onboarding',
icon: Sparkles,
href: '/onboarding',
description: 'Getting started guide'
},
{
title: 'Documentation',
icon: BookOpen,
href: '/docs',
description: 'Complete documentation library',
collapsible: true,
children: [
{ title: 'Robot Fleet Overview', href: '/docs/robots' },
{ title: 'Yahboom ROSMASTER', href: '/docs/robots/yahboom-rosmaster' },
{ title: 'Dreame D20 Pro', href: '/docs/robots/dreame-d20-pro' },
{ title: 'Tdrone Mini', href: '/docs/robots/tdrone-mini' },
{ title: 'Architecture Overview', href: '/docs/architecture' },
{ title: 'VBot Scout Mini', href: '/docs/vbot-scout' },
{ title: 'World Labs Marble', href: '/docs/world-labs' },
{ title: 'ROS Integration', href: '/docs/ros-integration' },
{ title: 'VR Platforms', href: '/docs/vr-platforms' },
{ title: 'Hardware Guide', href: '/docs/hardware' },
{ title: 'Turbopack', href: '/docs/turbopack' },
{ title: 'LLM Integration', href: '/docs/llm-integration' },
{ title: 'AI/ML Integration', href: '/docs/ai-ml' },
{ title: 'VRM Avatars', href: '/docs/vrm-avatars' },
{ title: 'Niantic Splats', href: '/docs/niantic-splats' },
{ title: 'Security Standards', href: '/docs/security' },
{ title: 'Development Workflow', href: '/docs/development' }
]
}
]
export function RoboticsLayout({ children }: RoboticsLayoutProps) {
const location = useLocation()
const currentPage = location.pathname || '/'
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
const [activeLogger, setActiveLogger] = useState(false)
const [activeHelp, setActiveHelp] = useState(false)
const [activeAuth, setActiveAuth] = useState(false)
return (
<TooltipProvider>
<div className="flex h-screen bg-background">
{/* Topbar */}
<div className="fixed top-0 left-0 right-0 z-50 border-b border-white/10 bg-slate-900/70 backdrop-blur-xl">
<div className="flex h-16 items-center px-4">
{/* Sidebar toggle button */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
className="mr-2"
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
>
{sidebarCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
</Button>
</TooltipTrigger>
<TooltipContent>{sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}</TooltipContent>
</Tooltip>
{/* Logo and title */}
<div className="flex items-center space-x-2">
<Bot className="h-6 w-6 text-primary" />
<span className="font-bold text-lg bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent">
Robotics MCP
</span>
</div>
{/* Connection status */}
<div className="flex items-center space-x-2 ml-4">
<div className="flex items-center space-x-1">
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
<span className="text-sm text-muted-foreground">VBot Connected</span>
</div>
<Separator orientation="vertical" className="h-4" />
<div className="flex items-center space-x-1">
<div className="w-2 h-2 bg-yellow-500 rounded-full" />
<span className="text-sm text-muted-foreground">ROS Bridge</span>
</div>
</div>
<div className="ml-auto flex items-center space-x-2">
{/* Logger */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
onClick={() => setActiveLogger(!activeLogger)}
className={activeLogger ? 'bg-accent' : ''}
>
<Activity className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>Activity Logger</TooltipContent>
</Tooltip>
{/* Help */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
onClick={() => setActiveHelp(!activeHelp)}
className={activeHelp ? 'bg-accent' : ''}
>
<HelpCircle className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>Help & Documentation</TooltipContent>
</Tooltip>
{/* Theme toggle */}
<ThemeToggle />
{/* Auth */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
onClick={() => setActiveAuth(!activeAuth)}
className={activeAuth ? 'bg-accent' : ''}
>
<User className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>Authentication</TooltipContent>
</Tooltip>
</div>
</div>
</div>
{/* Sidebar - retractable: w-16 collapsed, w-64 expanded */}
<aside
className={`
fixed left-0 top-16 z-40 h-[calc(100vh-4rem)] flex flex-col border-r border-white/10 bg-slate-900/60 backdrop-blur-xl shadow-xl transition-all duration-300 ease-in-out
${sidebarCollapsed ? 'w-16' : 'w-64'}
`}
>
<ScrollArea className="flex-1 py-4">
<nav className="space-y-1 px-2">
{navigationItems.map((item) => (
<div key={item.href}>
{item.collapsible && !sidebarCollapsed ? (
<Collapsible>
<CollapsibleTrigger asChild>
<Button
variant={currentPage.startsWith(item.href) ? "secondary" : "ghost"}
className="w-full justify-start"
>
<item.icon className="mr-3 h-4 w-4" />
<span>{item.title}</span>
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="ml-6 mt-1 space-y-1">
{item.children?.map((child) => (
<Button key={child.href} variant={currentPage === child.href ? "secondary" : "ghost"} size="sm" className="w-full justify-start" asChild>
<Link to={child.href}>{child.title}</Link>
</Button>
))}
</CollapsibleContent>
</Collapsible>
) : (
<Tooltip>
<TooltipTrigger asChild>
<Button variant={currentPage === item.href ? "secondary" : "ghost"} className={`w-full ${sidebarCollapsed ? 'justify-center px-2' : 'justify-start'}`} asChild>
<Link to={item.href}>
<item.icon className={`h-4 w-4 ${sidebarCollapsed ? '' : 'mr-3'}`} />
{!sidebarCollapsed && <span>{item.title}</span>}
</Link>
</Button>
</TooltipTrigger>
{sidebarCollapsed && <TooltipContent side="right">{item.title}</TooltipContent>}
</Tooltip>
)}
</div>
))}
</nav>
</ScrollArea>
</aside>
{/* Main content */}
<main className={`
flex-1 pt-16 overflow-auto bg-background transition-all duration-300 ease-in-out
${sidebarCollapsed ? 'ml-16' : 'ml-64'}
`}>
<div className="min-h-screen">
{children}
</div>
</main>
{/* Modals */}
<LoggerPanel open={activeLogger} onClose={() => setActiveLogger(false)} />
<HelpPanel open={activeHelp} onClose={() => setActiveHelp(false)} />
{activeAuth && <AuthPanel onClose={() => setActiveAuth(false)} />}
{/* Mobile overlay - when sidebar expanded on small screens, tap outside to collapse */}
{!sidebarCollapsed && (
<div
className="fixed inset-0 z-30 bg-background/80 backdrop-blur-sm md:hidden"
onClick={() => setSidebarCollapsed(true)}
/>
)}
</div>
</TooltipProvider>
)
}
