Robotics MCP Server

'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import {
  Zap,
  Map,
  Navigation,
  Battery,
  Eye,
  ChevronRight,
  CheckCircle,
  Info,
  ExternalLink,
  Home,
  MapPin,
  Shield,
  Wifi
} from 'lucide-react'
import Link from 'next/link'

const specifications = {
  dimensions: '350mm × 350mm × 96mm',
  weight: '3.7 kg',
  suction: '5000 Pa',
  battery: '5200 mAh',
  runtime: '3 hours',
  charging: '6 hours',
  dustbin: '570 ml',
  waterTank: '270 ml',
  navigation: 'LIDAR SLAM',
  app: 'Dreamehome/Mi Home',
  connectivity: 'WiFi 2.4GHz/5GHz'
}

const features = [
  {
    icon: Map,
    title: 'LIDAR SLAM',
    description: 'Advanced laser navigation with precise mapping and localization'
  },
  {
    icon: Navigation,
    title: 'Multi-Floor Mapping',
    description: 'Automatic floor detection and separate maps for each level'
  },
  {
    icon: Home,
    title: 'Room Cleaning',
    description: 'Clean specific rooms with intelligent room recognition'
  },
  {
    icon: MapPin,
    title: 'Zone Cleaning',
    description: 'Define custom cleaning zones and no-go areas'
  },
  {
    icon: Shield,
    title: 'Obstacle Avoidance',
    description: 'Advanced sensors prevent collisions and detect small objects'
  },
  {
    icon: Battery,
    title: 'Auto Recharge',
    description: 'Returns to dock when battery is low, resumes cleaning automatically'
  }
]

const cleaningModes = [
  'Auto Cleaning',
  'Room Cleaning',
  'Zone Cleaning',
  'Spot Cleaning',
  'Edge Cleaning',
  'Custom Cleaning Sequences'
]

const integrationFeatures = [
  'python-miio library support',
  'Real-time map data extraction',
  'ROS-compatible map export',
  'Multi-robot coordination',
  'Cleaning schedule automation',
  'Status monitoring API',
  'Zone definition API',
  'Firmware update support'
]

export default function DreameD20ProPage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-8 max-w-6xl">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center space-x-4 mb-4">
            <Zap className="h-12 w-12 text-primary" />
            <div>
              <h1 className="text-4xl font-bold">Dreame D20 Pro</h1>
              <p className="text-xl text-muted-foreground">
                Advanced robotic vacuum with LIDAR mapping and intelligent cleaning
              </p>
            </div>
            <Badge variant="default" className="text-sm">
              Active Platform
            </Badge>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <Card>
              <CardContent className="p-4 text-center">
                <Map className="h-8 w-8 text-blue-500 mx-auto mb-2" />
                <div className="text-2xl font-bold">LIDAR</div>
                <div className="text-sm text-muted-foreground">SLAM</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <Navigation className="h-8 w-8 text-green-500 mx-auto mb-2" />
                <div className="text-2xl font-bold">5000</div>
                <div className="text-sm text-muted-foreground">Pa Suction</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <Battery className="h-8 w-8 text-yellow-500 mx-auto mb-2" />
                <div className="text-2xl font-bold">3h</div>
                <div className="text-sm text-muted-foreground">Runtime</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <Home className="h-8 w-8 text-purple-500 mx-auto mb-2" />
                <div className="text-2xl font-bold">Multi</div>
                <div className="text-sm text-muted-foreground">Floor Maps</div>
              </CardContent>
            </Card>
          </div>
        </div>

        {/* Overview */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>Overview</CardTitle>
            <CardDescription>
              The Dreame D20 Pro is a premium robotic vacuum cleaner featuring advanced LIDAR navigation,
              multi-floor mapping, and intelligent cleaning capabilities. Perfect for integration into
              multi-robot cleaning and mapping systems.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="font-medium mb-3">Key Capabilities</h3>
                <ul className="space-y-2">
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    <span className="text-sm">LIDAR SLAM Navigation</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    <span className="text-sm">Multi-floor Mapping</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    <span className="text-sm">Room and Zone Cleaning</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    <span className="text-sm">Auto-empty Station Compatible</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    <span className="text-sm">Advanced Obstacle Avoidance</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    <span className="text-sm">Real-time Status Monitoring</span>
                  </li>
                </ul>
              </div>
              <div>
                <h3 className="font-medium mb-3">Technical Specifications</h3>
                <dl className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <dt className="text-muted-foreground">Dimensions:</dt>
                    <dd>{specifications.dimensions}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-muted-foreground">Weight:</dt>
                    <dd>{specifications.weight}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-muted-foreground">Suction Power:</dt>
                    <dd>{specifications.suction}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-muted-foreground">Battery:</dt>
                    <dd>{specifications.battery}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-muted-foreground">Runtime:</dt>
                    <dd>{specifications.runtime}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-muted-foreground">Navigation:</dt>
                    <dd>{specifications.navigation}</dd>
                  </div>
                </dl>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Features Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
          {features.map((feature, index) => (
            <Card key={index}>
              <CardHeader>
                <div className="flex items-center space-x-3">
                  <feature.icon className="h-8 w-8 text-primary" />
                  <CardTitle className="text-lg">{feature.title}</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">{feature.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Cleaning Modes */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>Cleaning Modes</CardTitle>
            <CardDescription>
              Versatile cleaning options for different scenarios
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {cleaningModes.map((mode, index) => (
                <div key={index} className="flex items-center space-x-2">
                  <CheckCircle className="h-4 w-4 text-green-500" />
                  <span className="text-sm">{mode}</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* LIDAR Mapping */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>LIDAR Mapping & Navigation</CardTitle>
            <CardDescription>
              Advanced laser-based mapping for precise navigation and cleaning
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="font-medium mb-3">Mapping Features</h3>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Real-time SLAM processing</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Persistent map storage</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Multi-floor mapping</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Room segmentation</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>No-go zone support</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Virtual wall creation</span>
                  </li>
                </ul>
              </div>
              <div>
                <h3 className="font-medium mb-3">Navigation Intelligence</h3>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Efficient path planning</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Dynamic obstacle avoidance</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Return-to-dock routing</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Resume cleaning capability</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Anti-drop protection</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Cliff detection</span>
                  </li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Integration */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>Robotics MCP Integration</CardTitle>
            <CardDescription>
              Full integration with our robotics platform for advanced automation
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="text-center">
                <Map className="h-12 w-12 text-primary mx-auto mb-3" />
                <h3 className="font-medium mb-2">Map Sharing</h3>
                <p className="text-sm text-muted-foreground">
                  LIDAR maps shared with other robots for coordinated navigation
                </p>
              </div>
              <div className="text-center">
                <Eye className="h-12 w-12 text-blue-500 mx-auto mb-3" />
                <h3 className="font-medium mb-2">Live Visualization</h3>
                <p className="text-sm text-muted-foreground">
                  Real-time map visualization in web dashboard
                </p>
              </div>
              <div className="text-center">
                <Shield className="h-12 w-12 text-green-500 mx-auto mb-3" />
                <h3 className="font-medium mb-2">Multi-Robot Safety</h3>
                <p className="text-sm text-muted-foreground">
                  Collision avoidance with other robots and humans
                </p>
              </div>
            </div>

            <Separator className="my-6" />

            <div>
              <h3 className="font-medium mb-3">Integration Features</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {integrationFeatures.map((feature, index) => (
                  <div key={index} className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span className="text-sm">{feature}</span>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Navigation */}
        <div className="flex items-center justify-between pt-8 border-t">
          <Link href="/docs/robots">
            <Button variant="outline">
              <ChevronRight className="mr-2 h-4 w-4 rotate-180" />
              Back to Robots
            </Button>
          </Link>
          <div className="flex space-x-2">
            <Link href="/map">
              <Button variant="outline">
                View Maps
                <Map className="ml-2 h-4 w-4" />
              </Button>
            </Link>
            <Link href="/robot-control">
              <Button>
                Control Robot
                <ExternalLink className="ml-2 h-4 w-4" />
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}