"use client"
import { HelpCircle, BookOpen, ExternalLink, Search, Lightbulb } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Separator } from '@/components/ui/separator'
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
} from '@/components/ui/dialog'
interface HelpPanelProps {
open: boolean
onClose: () => void
}
const helpSections = [
{
title: 'Getting Started',
items: [
{ title: 'Quick Start Guide', description: 'Basic setup and first steps', link: '/docs/getting-started' },
{ title: 'VBot Control Basics', description: 'How to control virtual robots', link: '/docs/vbot-basics' },
{ title: 'Environment Setup', description: 'Loading Marble environments', link: '/docs/environments' }
]
},
{
title: 'Core Features',
items: [
{ title: 'Real-time Control', description: 'Live robot movement and sensors', link: '/docs/real-time-control' },
{ title: 'ROS Integration', description: 'Complete ROS bridge guide', link: '/docs/ros-integration' },
{ title: 'VR Platform Control', description: 'VRChat and Resonite integration', link: '/docs/vr-control' }
]
},
{
title: 'Advanced Topics',
items: [
{ title: 'Gaussian Splats', description: 'Understanding 3D rendering technology', link: '/docs/gaussian-splats' },
{ title: 'OSC Protocol', description: 'Bidirectional OSC communication', link: '/docs/osc-protocol' },
{ title: 'Multi-Robot Coordination', description: 'Swarm behavior and formation control', link: '/docs/multi-robot' }
]
},
{
title: 'Troubleshooting',
items: [
{ title: 'Connection Issues', description: 'Solving connectivity problems', link: '/docs/troubleshooting/connection' },
{ title: 'Performance Problems', description: 'Optimizing for smooth operation', link: '/docs/troubleshooting/performance' },
{ title: 'ROS Bridge Errors', description: 'Common ROS integration issues', link: '/docs/troubleshooting/ros' }
]
}
]
const quickTips = [
'Use WASD keys for basic VBot movement in control interface',
'Check the activity logger for real-time system status',
'Marble environments load in 2-5 minutes on first use',
'ROS bridge requires Unity or physical robot to be running',
'OSC control works with VRChat worlds at port 9000',
'Sensor data streams at 50Hz for smooth visualization'
]
export function HelpPanel({ open, onClose }: HelpPanelProps) {
return (
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
<DialogContent className="max-w-2xl max-h-[85vh] flex flex-col gap-0 p-0 bg-slate-900/80 backdrop-blur-xl border-white/10 shadow-2xl" showCloseButton={true}>
<DialogHeader className="p-4 border-b">
<DialogTitle className="flex items-center space-x-2">
<HelpCircle className="h-5 w-5" />
<span>Help & Documentation</span>
</DialogTitle>
</DialogHeader>
<ScrollArea className="flex-1 max-h-[60vh]">
<div className="p-4 space-y-4">
{/* Search */}
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input placeholder="Search documentation..." className="pl-9" />
</div>
{/* Quick Tips */}
<div className="mb-6">
<div className="flex items-center space-x-2 mb-3">
<Lightbulb className="h-4 w-4 text-yellow-500" />
<h3 className="font-medium">Quick Tips</h3>
</div>
<div className="space-y-2">
{quickTips.map((tip, index) => (
<div key={index} className="text-sm text-muted-foreground bg-muted/50 p-2 rounded">
• {tip}
</div>
))}
</div>
</div>
<Separator className="my-4" />
{/* Documentation Sections */}
<div className="space-y-6">
{helpSections.map((section) => (
<div key={section.title}>
<h3 className="font-medium mb-3 flex items-center space-x-2">
<BookOpen className="h-4 w-4" />
<span>{section.title}</span>
</h3>
<div className="space-y-2 ml-6">
{section.items.map((item) => (
<div key={item.title} className="flex items-center justify-between p-2 rounded hover:bg-muted/50 cursor-pointer">
<div>
<div className="font-medium text-sm">{item.title}</div>
<div className="text-xs text-muted-foreground">{item.description}</div>
</div>
<ExternalLink className="h-3 w-3 text-muted-foreground" />
</div>
))}
</div>
</div>
))}
</div>
</div>
</ScrollArea>
<DialogFooter className="p-4 border-t">
<Button variant="outline" size="sm" className="flex items-center space-x-2">
<ExternalLink className="h-3 w-3" />
<span>Full Documentation</span>
</Button>
<Button variant="outline" size="sm">
Contact Support
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
