import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Progress } from '@/components/ui/progress'
import { Button } from '@/components/ui/button'
import { Headset, Gamepad2, Users, Zap, Eye, Mic, Play } from 'lucide-react'
export default function VRPlatformsPage() {
return (
<div className="container mx-auto px-6 py-8 max-w-7xl">
<div className="space-y-8">
{/* Header */}
<div className="text-center space-y-4">
<div className="flex items-center justify-center space-x-3">
<Headset className="h-12 w-12 text-primary" />
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-cyan-600 bg-clip-text text-transparent">
VR Platforms
</h1>
</div>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Immersive robotics control and simulation across VRChat and Resonite platforms
</p>
<div className="flex items-center justify-center space-x-4">
<Badge variant="secondary" className="px-3 py-1">
<Headset className="h-3 w-3 mr-1" />
VRChat OSC
</Badge>
<Badge variant="outline" className="px-3 py-1">
<Zap className="h-3 w-3 mr-1" />
Resonite ProtoFlux
</Badge>
<Badge variant="outline" className="px-3 py-1">
<Users className="h-3 w-3 mr-1" />
Multi-user
</Badge>
</div>
</div>
{/* Platform Comparison */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Headset className="h-5 w-5 text-purple-500" />
<span>VRChat</span>
</CardTitle>
<CardDescription>Social VR platform with OSC integration</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>Integration Level</span>
<span className="text-green-600">85%</span>
</div>
<Progress value={85} className="h-2" />
</div>
<div className="space-y-2 text-sm">
<h4 className="font-semibold">Key Features</h4>
<ul className="text-muted-foreground space-y-1">
<li>• OSC parameter control</li>
<li>• Avatar-based interaction</li>
<li>• World upload system</li>
<li>• Multi-user synchronization</li>
</ul>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Zap className="h-5 w-5 text-blue-500" />
<span>Resonite</span>
</CardTitle>
<CardDescription>Advanced VR creation platform</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>Integration Level</span>
<span className="text-yellow-600">60%</span>
</div>
<Progress value={60} className="h-2" />
</div>
<div className="space-y-2 text-sm">
<h4 className="font-semibold">Key Features</h4>
<ul className="text-muted-foreground space-y-1">
<li>• ProtoFlux visual scripting</li>
<li>• Advanced physics</li>
<li>• Custom shader support</li>
<li>• Collaborative editing</li>
</ul>
</div>
</CardContent>
</Card>
</div>
{/* Technical Implementation */}
<Tabs defaultValue="osc" className="w-full">
<TabsList className="grid w-full grid-cols-4">
<TabsTrigger value="osc">OSC Protocol</TabsTrigger>
<TabsTrigger value="avatars">Avatars</TabsTrigger>
<TabsTrigger value="worlds">Worlds</TabsTrigger>
<TabsTrigger value="multiplayer">Multiplayer</TabsTrigger>
</TabsList>
<TabsContent value="osc" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>OSC Integration</CardTitle>
<CardDescription>Open Sound Control for real-time communication</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">OSC Parameters</h4>
<div className="space-y-2 text-sm font-mono">
<div className="flex justify-between">
<span>/avatar/parameters/LinearX</span>
<Badge variant="outline" className="text-xs">Float</Badge>
</div>
<div className="flex justify-between">
<span>/avatar/parameters/AngularZ</span>
<Badge variant="outline" className="text-xs">Float</Badge>
</div>
<div className="flex justify-between">
<span>/avatar/parameters/Battery</span>
<Badge variant="outline" className="text-xs">Float</Badge>
</div>
<div className="flex justify-between">
<span>/avatar/parameters/Status</span>
<Badge variant="outline" className="text-xs">Int</Badge>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Control Mapping</h4>
<div className="space-y-2 text-sm">
<div className="flex items-center space-x-2">
<Gamepad2 className="h-4 w-4 text-green-500" />
<span>VR Controllers → Robot movement</span>
</div>
<div className="flex items-center space-x-2">
<Eye className="h-4 w-4 text-blue-500" />
<span>Head tracking → Camera control</span>
</div>
<div className="flex items-center space-x-2">
<Mic className="h-4 w-4 text-purple-500" />
<span>Voice commands → Robot actions</span>
</div>
<div className="flex items-center space-x-2">
<Headset className="h-4 w-4 text-orange-500" />
<span>Haptic feedback → Force feedback</span>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">OSC Server Configuration</h4>
<div className="bg-muted p-4 rounded-lg font-mono text-sm">
<div>OSC Server Settings:</div>
<div>- Port: 9000 (receive)</div>
<div>- Port: 9001 (send)</div>
<div>- IP: 127.0.0.1</div>
<div>- Update Rate: 60Hz</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="avatars" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Avatar Integration</CardTitle>
<CardDescription>VR avatars as robot control interfaces</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">Control Gestures</h4>
<div className="space-y-2 text-sm">
<div className="flex items-center space-x-2">
<span className="w-20">Forward:</span>
<span>Point forward gesture</span>
</div>
<div className="flex items-center space-x-2">
<span className="w-20">Stop:</span>
<span>Cross arms gesture</span>
</div>
<div className="flex items-center space-x-2">
<span className="w-20">Turn:</span>
<span>Lean left/right</span>
</div>
<div className="flex items-center space-x-2">
<span className="w-20">Speed:</span>
<span>Arm extension distance</span>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Visual Feedback</h4>
<div className="space-y-2 text-sm">
<div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
<span>Robot status indicators</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
<span>Speed visualization</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
<span>Battery level display</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
<span>Error/warning states</span>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Avatar Customization</h4>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="text-center p-3 border rounded-lg">
<div className="font-semibold text-sm">Control Scheme</div>
<div className="text-xs text-muted-foreground">Gesture vs Button</div>
</div>
<div className="text-center p-3 border rounded-lg">
<div className="font-semibold text-sm">Sensitivity</div>
<div className="text-xs text-muted-foreground">Movement scaling</div>
</div>
<div className="text-center p-3 border rounded-lg">
<div className="font-semibold text-sm">Feedback</div>
<div className="text-xs text-muted-foreground">Haptic intensity</div>
</div>
<div className="text-center p-3 border rounded-lg">
<div className="font-semibold text-sm">Theme</div>
<div className="text-xs text-muted-foreground">UI appearance</div>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="worlds" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>World Integration</CardTitle>
<CardDescription>Gaussian splat environments in VR platforms</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">World Labs Integration</h4>
<div className="space-y-2 text-sm">
<div className="flex items-center space-x-2">
<span className="w-20">Marble:</span>
<span>Environment generation</span>
</div>
<div className="flex items-center space-x-2">
<span className="w-20">Chisel:</span>
<span>Fine-tuning tools</span>
</div>
<div className="flex items-center space-x-2">
<span className="w-20">RTFM:</span>
<span>Rendering pipeline</span>
</div>
<div className="flex items-center space-x-2">
<span className="w-20">Export:</span>
<span>PLY/GLB formats</span>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">VR Platform Support</h4>
<div className="space-y-2 text-sm">
<div className="flex items-center space-x-2">
<Headset className="h-4 w-4 text-purple-500" />
<span>VRChat Udon shaders</span>
</div>
<div className="flex items-center space-x-2">
<Zap className="h-4 w-4 text-blue-500" />
<span>Resonite material system</span>
</div>
<div className="flex items-center space-x-2">
<Eye className="h-4 w-4 text-green-500" />
<span>Real-time lighting</span>
</div>
<div className="flex items-center space-x-2">
<Users className="h-4 w-4 text-orange-500" />
<span>Multi-user sync</span>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Performance Optimization</h4>
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>LOD System</span>
<span className="text-green-600">Implemented</span>
</div>
<div className="flex justify-between text-sm">
<span>Occlusion Culling</span>
<span className="text-green-600">Implemented</span>
</div>
<div className="flex justify-between text-sm">
<span>Texture Streaming</span>
<span className="text-yellow-600">Partial</span>
</div>
<div className="flex justify-between text-sm">
<span>Physics Optimization</span>
<span className="text-blue-600">In Progress</span>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="multiplayer" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Multi-user Collaboration</CardTitle>
<CardDescription>Synchronized robotics control in shared VR spaces</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">Collaboration Features</h4>
<div className="space-y-2 text-sm">
<div className="flex items-center space-x-2">
<Users className="h-4 w-4 text-green-500" />
<span>Shared robot control</span>
</div>
<div className="flex items-center space-x-2">
<Gamepad2 className="h-4 w-4 text-blue-500" />
<span>Role-based permissions</span>
</div>
<div className="flex items-center space-x-2">
<Mic className="h-4 w-4 text-purple-500" />
<span>Voice communication</span>
</div>
<div className="flex items-center space-x-2">
<Eye className="h-4 w-4 text-orange-500" />
<span>Spectator mode</span>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Session Management</h4>
<div className="space-y-2 text-sm">
<div className="flex items-center space-x-2">
<span className="w-20">Host:</span>
<span>Session coordinator</span>
</div>
<div className="flex items-center space-x-2">
<span className="w-20">Pilot:</span>
<span>Primary controller</span>
</div>
<div className="flex items-center space-x-2">
<span className="w-20">Observer:</span>
<span>View-only access</span>
</div>
<div className="flex items-center space-x-2">
<span className="w-20">Guest:</span>
<span>Limited interaction</span>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Network Architecture</h4>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="text-center p-4 border rounded-lg">
<div className="font-semibold text-sm">State Sync</div>
<div className="text-xs text-muted-foreground">Real-time synchronization</div>
</div>
<div className="text-center p-4 border rounded-lg">
<div className="font-semibold text-sm">Conflict Resolution</div>
<div className="text-xs text-muted-foreground">Input arbitration</div>
</div>
<div className="text-center p-4 border rounded-lg">
<div className="font-semibold text-sm">Latency Compensation</div>
<div className="text-xs text-muted-foreground">Prediction algorithms</div>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
</Tabs>
{/* Quick Start Guide */}
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Play className="h-5 w-5" />
<span>Quick Start Guide</span>
</CardTitle>
<CardDescription>Get started with VR robotics control</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">VRChat Setup</h4>
<div className="space-y-2 text-sm">
<div className="flex items-start space-x-2">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">1</div>
<span>Install VRChat and OSC tools</span>
</div>
<div className="flex items-start space-x-2">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">2</div>
<span>Enable OSC in VRChat settings</span>
</div>
<div className="flex items-start space-x-2">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">3</div>
<span>Upload robot control world</span>
</div>
<div className="flex items-start space-x-2">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">4</div>
<span>Join world and start controlling</span>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Resonite Setup</h4>
<div className="space-y-2 text-sm">
<div className="flex items-start space-x-2">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">1</div>
<span>Install Resonite client</span>
</div>
<div className="flex items-start space-x-2">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">2</div>
<span>Import ProtoFlux components</span>
</div>
<div className="flex items-start space-x-2">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">3</div>
<span>Load Gaussian splat environments</span>
</div>
<div className="flex items-start space-x-2">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">4</div>
<span>Connect to robotics backend</span>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Troubleshooting</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div className="p-3 border rounded-lg">
<div className="font-semibold">OSC Connection Issues</div>
<div className="text-muted-foreground">Check firewall settings and port 9000/9001 availability</div>
</div>
<div className="p-3 border rounded-lg">
<div className="font-semibold">Performance Problems</div>
<div className="text-muted-foreground">Reduce environment complexity or increase LOD distance</div>
</div>
<div className="p-3 border rounded-lg">
<div className="font-semibold">Avatar Not Responding</div>
<div className="text-muted-foreground">Verify OSC parameters are correctly mapped in avatar</div>
</div>
<div className="p-3 border rounded-lg">
<div className="font-semibold">Multi-user Sync Issues</div>
<div className="text-muted-foreground">Check network latency and session host permissions</div>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
)
}
