Robotics MCP Server

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 { Globe, Sparkles, Wrench, Zap, Layers, Download, ExternalLink } from 'lucide-react'

export default function WorldLabsPage() {
  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">
            <Globe className="h-12 w-12 text-primary" />
            <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent">
              World Labs.ai
            </h1>
          </div>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Revolutionary AI-powered 3D environment generation transforming robotics simulation and virtual worlds
          </p>
          <div className="flex items-center justify-center space-x-4">
            <Badge variant="secondary" className="px-3 py-1">
              <Sparkles className="h-3 w-3 mr-1" />
              AI Generation
            </Badge>
            <Badge variant="outline" className="px-3 py-1">
              <Layers className="h-3 w-3 mr-1" />
              Gaussian Splats
            </Badge>
            <Badge variant="outline" className="px-3 py-1">
              <Zap className="h-3 w-3 mr-1" />
              Real-time Rendering
            </Badge>
          </div>
        </div>

        {/* Service Overview */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card>
            <CardHeader className="text-center">
              <CardTitle className="flex items-center justify-center space-x-2">
                <Sparkles className="h-5 w-5 text-purple-500" />
                <span>Marble</span>
              </CardTitle>
              <CardDescription>AI Environment Generation</CardDescription>
            </CardHeader>
            <CardContent className="text-center space-y-4">
              <p className="text-sm text-muted-foreground">
                Generate complete 3D environments from text descriptions in minutes
              </p>
              <Button variant="outline" size="sm" className="w-full">
                <ExternalLink className="h-3 w-3 mr-2" />
                Learn More
              </Button>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="text-center">
              <CardTitle className="flex items-center justify-center space-x-2">
                <Wrench className="h-5 w-5 text-blue-500" />
                <span>Chisel</span>
              </CardTitle>
              <CardDescription>3D Environment Editing</CardDescription>
            </CardHeader>
            <CardContent className="text-center space-y-4">
              <p className="text-sm text-muted-foreground">
                Fine-tune and customize generated environments with precision tools
              </p>
              <Button variant="outline" size="sm" className="w-full">
                <ExternalLink className="h-3 w-3 mr-2" />
                Try Chisel
              </Button>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="text-center">
              <CardTitle className="flex items-center justify-center space-x-2">
                <Layers className="h-5 w-5 text-green-500" />
                <span>RTFM</span>
              </CardTitle>
              <CardDescription>Real-time Feature Modeling</CardDescription>
            </CardHeader>
            <CardContent className="text-center space-y-4">
              <p className="text-sm text-muted-foreground">
                Advanced rendering pipeline for photorealistic environments
              </p>
              <Button variant="outline" size="sm" className="w-full">
                <ExternalLink className="h-3 w-3 mr-2" />
                View Docs
              </Button>
            </CardContent>
          </Card>
        </div>

        {/* Technical Deep Dive */}
        <Tabs defaultValue="technology" className="w-full">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="technology">Technology</TabsTrigger>
            <TabsTrigger value="performance">Performance</TabsTrigger>
            <TabsTrigger value="integration">Integration</TabsTrigger>
            <TabsTrigger value="use-cases">Use Cases</TabsTrigger>
          </TabsList>

          <TabsContent value="technology" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Gaussian Splatting Technology</CardTitle>
                <CardDescription>How World Labs revolutionizes 3D representation</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">Traditional 3D vs Gaussian Splats</h4>
                    <div className="space-y-2">
                      <div className="flex justify-between text-sm">
                        <span>Mesh-based rendering</span>
                        <Badge variant="destructive">Legacy</Badge>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span>Point cloud representation</span>
                        <Badge variant="default">Modern</Badge>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <h4 className="font-semibold">Key Advantages</h4>
                    <ul className="text-sm text-muted-foreground space-y-1">
                      <li>• Photorealistic quality</li>
                      <li>• Real-time rendering</li>
                      <li>• Compact file sizes</li>
                      <li>• AI generation capability</li>
                    </ul>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="font-semibold">File Formats</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-mono text-sm">.ply</div>
                      <div className="text-xs text-muted-foreground">Point clouds</div>
                    </div>
                    <div className="text-center p-3 border rounded-lg">
                      <div className="font-mono text-sm">.obj</div>
                      <div className="text-xs text-muted-foreground">Mesh data</div>
                    </div>
                    <div className="text-center p-3 border rounded-lg">
                      <div className="font-mono text-sm">.fbx</div>
                      <div className="text-xs text-muted-foreground">Unity compatible</div>
                    </div>
                    <div className="text-center p-3 border rounded-lg">
                      <div className="font-mono text-sm">.spz</div>
                      <div className="text-xs text-muted-foreground">Compressed</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="performance" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Performance Benchmarks</CardTitle>
                <CardDescription>Rendering performance across different 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">Unity Integration</h4>
                    <div className="space-y-2">
                      <div className="flex justify-between text-sm">
                        <span>Load time</span>
                        <span className="text-green-600">2-5 seconds</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span>Memory usage</span>
                        <span className="text-yellow-600">50-200MB</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span>Frame rate</span>
                        <span className="text-green-600">60+ FPS</span>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <h4 className="font-semibold">VRChat Deployment</h4>
                    <div className="space-y-2">
                      <div className="flex justify-between text-sm">
                        <span>Upload size</span>
                        <span className="text-green-600">&lt;50MB</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span>Load time</span>
                        <span className="text-yellow-600">10-30 seconds</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span>Compatibility</span>
                        <span className="text-green-600">95%</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="font-semibold">Quality Settings</h4>
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span>Low quality</span>
                      <span>10-20MB scenes</span>
                    </div>
                    <Progress value={25} className="h-1" />
                    <div className="flex justify-between text-sm">
                      <span>Medium quality</span>
                      <span>50-100MB scenes</span>
                    </div>
                    <Progress value={50} className="h-1" />
                    <div className="flex justify-between text-sm">
                      <span>High quality</span>
                      <span>200-500MB scenes</span>
                    </div>
                    <Progress value={75} className="h-1" />
                    <div className="flex justify-between text-sm">
                      <span>Ultra quality</span>
                      <span>1GB+ scenes</span>
                    </div>
                    <Progress value={100} className="h-1" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="integration" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>API Integration</CardTitle>
                <CardDescription>Seamless integration with robotics 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">REST API Endpoints</h4>
                    <div className="space-y-2 text-sm font-mono bg-muted p-3 rounded">
                      <div>POST /api/generate-environment</div>
                      <div>GET /api/environment/{'{'}id{'}'}</div>
                      <div>PUT /api/environment/{'{'}id{'}'}/edit</div>
                      <div>DELETE /api/environment/{'{'}id{'}'}</div>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <h4 className="font-semibold">SDK Support</h4>
                    <div className="space-y-2">
                      <Badge variant="secondary">Python</Badge>
                      <Badge variant="secondary">JavaScript</Badge>
                      <Badge variant="secondary">Unity C#</Badge>
                      <Badge variant="secondary">Unreal Engine</Badge>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="font-semibold">Authentication</h4>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="text-center p-3 border rounded-lg">
                      <div className="font-semibold text-sm">API Key</div>
                      <div className="text-xs text-muted-foreground">Server-side</div>
                    </div>
                    <div className="text-center p-3 border rounded-lg">
                      <div className="font-semibold text-sm">OAuth 2.0</div>
                      <div className="text-xs text-muted-foreground">Web apps</div>
                    </div>
                    <div className="text-center p-3 border rounded-lg">
                      <div className="font-semibold text-sm">JWT Tokens</div>
                      <div className="text-xs text-muted-foreground">Mobile apps</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="use-cases" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Robotics Applications</CardTitle>
                <CardDescription>How World Labs transforms robotics development</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <Card>
                    <CardHeader className="pb-3">
                      <CardTitle className="text-lg">Virtual Testing</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                      <p className="text-sm text-muted-foreground">
                        Test robot navigation and manipulation in realistic environments before physical prototyping
                      </p>
                      <div className="flex flex-wrap gap-1">
                        <Badge variant="outline" className="text-xs">Path planning</Badge>
                        <Badge variant="outline" className="text-xs">Collision avoidance</Badge>
                        <Badge variant="outline" className="text-xs">SLAM testing</Badge>
                      </div>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader className="pb-3">
                      <CardTitle className="text-lg">Training Data</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                      <p className="text-sm text-muted-foreground">
                        Generate diverse environments for machine learning training and simulation
                      </p>
                      <div className="flex flex-wrap gap-1">
                        <Badge variant="outline" className="text-xs">Synthetic data</Badge>
                        <Badge variant="outline" className="text-xs">Domain adaptation</Badge>
                        <Badge variant="outline" className="text-xs">Edge cases</Badge>
                      </div>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader className="pb-3">
                      <CardTitle className="text-lg">VR Collaboration</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                      <p className="text-sm text-muted-foreground">
                        Multi-user robotics development in immersive virtual environments
                      </p>
                      <div className="flex flex-wrap gap-1">
                        <Badge variant="outline" className="text-xs">Remote teams</Badge>
                        <Badge variant="outline" className="text-xs">Real-time sync</Badge>
                        <Badge variant="outline" className="text-xs">Haptic feedback</Badge>
                      </div>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader className="pb-3">
                      <CardTitle className="text-lg">Prototyping</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                      <p className="text-sm text-muted-foreground">
                        Rapid iteration and validation of robotics concepts in virtual space
                      </p>
                      <div className="flex flex-wrap gap-1">
                        <Badge variant="outline" className="text-xs">Concept validation</Badge>
                        <Badge variant="outline" className="text-xs">Performance testing</Badge>
                        <Badge variant="outline" className="text-xs">User testing</Badge>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

        {/* Subscription Status */}
        <Card className="border-primary/20 bg-primary/5">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Sparkles className="h-5 w-5 text-primary" />
              <span>Active Subscription</span>
            </CardTitle>
            <CardDescription>Current World Labs.ai membership status</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <div className="font-semibold">Professional Plan (€35/month)</div>
                <div className="text-sm text-muted-foreground">Active since November 2025</div>
                <div className="text-sm text-muted-foreground">Next billing: January 17, 2026</div>
              </div>
              <Badge variant="default" className="px-3 py-1">
                <Zap className="h-3 w-3 mr-1" />
                Active
              </Badge>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}