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 {
  Plane,
  Camera,
  Navigation,
  Cpu,
  Battery,
  ChevronRight,
  CheckCircle,
  Info,
  ExternalLink,
  Wifi,
  Zap,
  Eye,
  Target
} from 'lucide-react'
import Link from 'next/link'

const specifications = {
  dimensions: '200mm × 200mm × 80mm',
  weight: '250g (RTF)',
  payload: '100g',
  flightTime: '10-15 minutes',
  range: '500m (visual)',
  maxSpeed: '15 m/s',
  controller: 'PX4/ArduPilot compatible',
  camera: '720p WiFi FPV',
  battery: '3.7V 1200mAh LiPo',
  connectivity: 'WiFi 2.4GHz',
  price: '$50-150'
}

const features = [
  {
    icon: Cpu,
    title: 'PX4 Compatible',
    description: 'Full PX4/ArduPilot flight stack support with MAVLink protocol'
  },
  {
    icon: Camera,
    title: 'FPV Camera',
    description: '720p WiFi streaming for real-time video feed'
  },
  {
    icon: Navigation,
    title: 'GPS Navigation',
    description: 'Built-in GPS with waypoint navigation and return-to-home'
  },
  {
    icon: Eye,
    title: 'Optical Flow',
    description: 'Indoor flight stabilization without GPS dependency'
  },
  {
    icon: Target,
    title: 'Follow Me Mode',
    description: 'Automatically follow a person or moving target'
  },
  {
    icon: Zap,
    title: 'Quick Assembly',
    description: 'Ready-to-fly in minutes with minimal setup required'
  }
]

const flightModes = [
  'Manual Control',
  'Stabilized Mode',
  'Altitude Hold',
  'Position Hold',
  'Return to Home',
  'Follow Me',
  'Waypoint Navigation',
  'Orbit Mode'
]

const integrationFeatures = [
  'MAVLink protocol support',
  'QGroundControl compatibility',
  'Mission Planner integration',
  'ROS flight stack integration',
  'Real-time telemetry',
  'Video streaming APIs',
  'Waypoint programming',
  'Firmware updates via USB'
]

export default function TdroneMiniPage() {
  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">
            <Plane className="h-12 w-12 text-primary" />
            <div>
              <h1 className="text-4xl font-bold">Tdrone Mini Quadcopter</h1>
              <p className="text-xl text-muted-foreground">
                Affordable educational drone with PX4 flight controller
              </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">
                <Plane className="h-8 w-8 text-blue-500 mx-auto mb-2" />
                <div className="text-2xl font-bold">250g</div>
                <div className="text-sm text-muted-foreground">Weight</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <Battery className="h-8 w-8 text-green-500 mx-auto mb-2" />
                <div className="text-2xl font-bold">15</div>
                <div className="text-sm text-muted-foreground">Min Flight</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <Camera className="h-8 w-8 text-purple-500 mx-auto mb-2" />
                <div className="text-2xl font-bold">720p</div>
                <div className="text-sm text-muted-foreground">FPV Camera</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <Zap className="h-8 w-8 text-orange-500 mx-auto mb-2" />
                <div className="text-2xl font-bold">$50</div>
                <div className="text-sm text-muted-foreground">Starting Price</div>
              </CardContent>
            </Card>
          </div>
        </div>

        {/* Overview */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>Overview</CardTitle>
            <CardDescription>
              The Tdrone Mini is an affordable educational quadcopter featuring PX4 flight controller
              compatibility. Perfect for learning UAV development, aerial photography, and robotics
              research without the high cost of professional drones.
            </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">PX4/ArduPilot Flight Stack</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    <span className="text-sm">WiFi FPV Video Streaming</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    <span className="text-sm">GPS Waypoint Navigation</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    <span className="text-sm">MAVLink Protocol Support</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    <span className="text-sm">Optical Flow Stabilization</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    <span className="text-sm">Open-source Flight Software</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">Flight Time:</dt>
                    <dd>{specifications.flightTime}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-muted-foreground">Max Speed:</dt>
                    <dd>{specifications.maxSpeed}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-muted-foreground">Range:</dt>
                    <dd>{specifications.range}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-muted-foreground">Flight Controller:</dt>
                    <dd>{specifications.controller}</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>

        {/* Flight Modes */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>Flight Modes</CardTitle>
            <CardDescription>
              Comprehensive flight control modes for different applications
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {flightModes.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>

        {/* PX4 Integration */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>PX4 Flight Stack Integration</CardTitle>
            <CardDescription>
              Professional-grade flight control software with open-source ecosystem
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="font-medium mb-3">Flight Control 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>Advanced flight modes</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Precision navigation</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Failsafe protection</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Real-time telemetry</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Parameter tuning</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Mission planning</span>
                  </li>
                </ul>
              </div>
              <div>
                <h3 className="font-medium mb-3">Ground Control Software</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>QGroundControl</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Mission Planner</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>MAVProxy</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>APM Planner 2</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Custom GCS applications</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>ROS integration</span>
                  </li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Applications */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>Applications</CardTitle>
            <CardDescription>
              Versatile platform for various aerial robotics applications
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="font-medium mb-3">Education & Research</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>UAV flight dynamics</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Autonomous navigation</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Computer vision</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>SLAM algorithms</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Control systems</span>
                  </li>
                </ul>
              </div>
              <div>
                <h3 className="font-medium mb-3">Practical Applications</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>Aerial photography</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Mapping & surveying</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Inspection tasks</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Search operations</span>
                  </li>
                  <li className="flex items-center space-x-2">
                    <CheckCircle className="h-3 w-3 text-green-500" />
                    <span>Delivery testing</span>
                  </li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Robotics MCP Integration */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>Robotics MCP Integration</CardTitle>
            <CardDescription>
              Full integration with our unified robotics platform
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="text-center">
                <Navigation className="h-12 w-12 text-primary mx-auto mb-3" />
                <h3 className="font-medium mb-2">Waypoint Control</h3>
                <p className="text-sm text-muted-foreground">
                  Program autonomous flight missions with waypoint navigation
                </p>
              </div>
              <div className="text-center">
                <Camera className="h-12 w-12 text-blue-500 mx-auto mb-3" />
                <h3 className="font-medium mb-2">Video Streaming</h3>
                <p className="text-sm text-muted-foreground">
                  Real-time FPV video integration with robotics platform
                </p>
              </div>
              <div className="text-center">
                <Eye className="h-12 w-12 text-green-500 mx-auto mb-3" />
                <h3 className="font-medium mb-2">Multi-Robot Ops</h3>
                <p className="text-sm text-muted-foreground">
                  Coordinate with ground robots for comprehensive operations
                </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="/docs/ros-integration">
              <Button variant="outline">
                ROS Integration
                <ChevronRight className="ml-2 h-4 w-4" />
              </Button>
            </Link>
            <Link href="/robot-control">
              <Button>
                Control Drone
                <ExternalLink className="ml-2 h-4 w-4" />
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}