import React from 'react'
import { Link } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import {
Bot,
Zap,
Plane,
Lightbulb,
Activity,
Settings,
ArrowRight
} from 'lucide-react'
// Robot Control Hub - Overview of all available robot types
const robotTypes = [
{
id: 'yahboom',
name: 'Yahboom ROSMASTER',
type: 'ROS 2 Wheeled Robot',
status: 'available',
battery: 78,
description: 'AI-powered wheeled robot with multimodal capabilities, LIDAR mapping, and robotic arm',
features: ['ROS 2', 'AI Vision', 'Robotic Arm', 'SLAM', 'Voice Control'],
icon: '🤖',
controlUrl: '/robot-control/yahboom'
},
{
id: 'dreame',
name: 'Dreame D20 Pro',
type: 'Robotic Vacuum',
status: 'available',
battery: 82,
description: 'Advanced vacuum robot with LIDAR mapping, zone cleaning, and auto-empty station',
features: ['LIDAR Mapping', 'Zone Cleaning', 'Auto-Empty', 'App Control', 'HEPA Filter'],
icon: '🧹',
controlUrl: '/robot-control/flying-cleaning'
},
{
id: 'tdrone',
name: 'Tdrone Mini',
type: 'Educational Drone',
status: 'available',
battery: 68,
description: 'Affordable PX4/ArduPilot drone for education, mapping, and aerial photography',
features: ['PX4 Flight Controller', 'GPS Navigation', 'FPV Camera', 'Waypoint Navigation', 'Return-to-Home'],
icon: '🚁',
controlUrl: '/robot-control/flying-cleaning'
},
{
id: 'hue',
name: 'Philips Hue Bridge Pro',
type: 'Smart Home Hub',
status: 'connected',
description: 'Smart lighting control with HomeAware RF movement detection and automation',
features: ['Smart Lighting', 'HomeAware Motion', 'Automation', 'Scenes', 'Zigbee Hub'],
icon: '💡',
controlUrl: '/robot-control/hue'
},
{
id: 'scout',
name: 'VBot Scout Mini',
type: 'Legacy Wheeled Robot',
status: 'offline',
battery: 0,
description: 'ROS-based wheeled robot with basic navigation and sensor suite',
features: ['ROS Navigation', 'SLAM', 'Sensor Fusion', 'Legacy Support'],
icon: '🔧',
controlUrl: '/robot-control'
}
]
export default function RobotControlPage() {
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
<div className="container mx-auto px-4 py-8 max-w-7xl">
{/* Header */}
<div className="mb-8">
<div className="flex items-center justify-center mb-6">
<div className="relative">
<Bot className="h-16 w-16 text-primary animate-pulse" />
<div className="absolute -top-1 -right-1 h-6 w-6 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-ping"></div>
</div>
</div>
<h1 className="text-4xl lg:text-6xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 bg-clip-text text-transparent text-center mb-6">
Robot Control Center
</h1>
<p className="text-xl lg:text-2xl text-gray-600 max-w-3xl mx-auto text-center mb-8 leading-relaxed">
Unified control interface for all your robots - from wheeled platforms to aerial drones and smart home devices.
</p>
</div>
{/* Robot Type Overview */}
<div className="mb-12">
<h2 className="text-3xl font-bold text-center mb-8 text-gray-900">Available Robot Types</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{robotTypes.map((robot) => (
<Card key={robot.id} className="hover:shadow-xl transition-all duration-300 hover:scale-105 cursor-pointer border-0 bg-white/80 backdrop-blur-sm">
<CardContent className="p-6">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-3">
<div className="text-3xl">{robot.icon}</div>
<div>
<h3 className="text-xl font-semibold text-gray-900">{robot.name}</h3>
<p className="text-sm text-gray-600">{robot.type}</p>
</div>
</div>
<Badge variant={robot.status === 'available' ? "default" : robot.status === 'connected' ? "default" : "secondary"} className="text-xs">
{robot.status}
</Badge>
</div>
<p className="text-gray-700 mb-4 leading-relaxed">{robot.description}</p>
<div className="mb-4">
<div className="flex items-center justify-between text-sm text-gray-600 mb-2">
<span>Battery</span>
<span>{robot.battery}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className={`h-2 rounded-full ${
robot.battery > 80 ? 'bg-green-500' :
robot.battery > 50 ? 'bg-yellow-500' :
robot.battery > 20 ? 'bg-orange-500' : 'bg-red-500'
}`}
style={{ width: `${robot.battery}%` }}
></div>
</div>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-gray-700 mb-2">Key Features:</p>
<div className="flex flex-wrap gap-1">
{robot.features.slice(0, 3).map((feature, index) => (
<Badge key={index} variant="outline" className="text-xs">
{feature}
</Badge>
))}
{robot.features.length > 3 && (
<Badge variant="outline" className="text-xs">
+{robot.features.length - 3} more
</Badge>
)}
</div>
</div>
<Button asChild className="w-full">
<Link to={robot.controlUrl}>
Control {robot.name}
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</CardContent>
</Card>
))}
</div>
</div>
{/* Quick Stats */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<Card className="text-center border-0 shadow-lg bg-gradient-to-br from-blue-50 to-blue-100">
<CardContent className="p-6">
<Bot className="h-8 w-8 text-blue-600 mx-auto mb-3" />
<div className="text-3xl font-bold text-blue-800 mb-1">
{robotTypes.filter(r => r.status === 'available' || r.status === 'connected').length}
</div>
<div className="text-sm text-blue-600 font-medium">Active Robots</div>
</CardContent>
</Card>
<Card className="text-center border-0 shadow-lg bg-gradient-to-br from-green-50 to-green-100">
<CardContent className="p-6">
<Activity className="h-8 w-8 text-green-600 mx-auto mb-3" />
<div className="text-3xl font-bold text-green-800 mb-1">4</div>
<div className="text-sm text-green-600 font-medium">Robot Types</div>
</CardContent>
</Card>
<Card className="text-center border-0 shadow-lg bg-gradient-to-br from-purple-50 to-purple-100">
<CardContent className="p-6">
<Zap className="h-8 w-8 text-purple-600 mx-auto mb-3" />
<div className="text-3xl font-bold text-purple-800 mb-1">85%</div>
<div className="text-sm text-purple-600 font-medium">Avg Battery</div>
</CardContent>
</Card>
<Card className="text-center border-0 shadow-lg bg-gradient-to-br from-orange-50 to-orange-100">
<CardContent className="p-6">
<Settings className="h-8 w-8 text-orange-600 mx-auto mb-3" />
<div className="text-3xl font-bold text-orange-800 mb-1">Real-time</div>
<div className="text-sm text-orange-600 font-medium">Control</div>
</CardContent>
</Card>
</div>
{/* System Status */}
<Card className="border-0 shadow-xl bg-gradient-to-r from-gray-50 to-blue-50">
<CardHeader>
<CardTitle className="text-2xl">System Status</CardTitle>
<CardDescription>Current status of all robot control systems</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="flex items-center space-x-3 p-4 bg-white rounded-lg">
<div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
<div>
<div className="font-medium">Robotics MCP Server</div>
<div className="text-sm text-gray-600">Active - All systems operational</div>
</div>
</div>
<div className="flex items-center space-x-3 p-4 bg-white rounded-lg">
<div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
<div>
<div className="font-medium">WebSocket Connections</div>
<div className="text-sm text-gray-600">Real-time data streaming</div>
</div>
</div>
<div className="flex items-center space-x-3 p-4 bg-white rounded-lg">
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
<div>
<div className="font-medium">Legacy Systems</div>
<div className="text-sm text-gray-600">VBot Scout offline - upgrading</div>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
)
}
