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 { Code, GitBranch, TestTube, Bug, Book, Users, Zap, Settings } from 'lucide-react'

export default function DevelopmentPage() {
  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">
            <Code className="h-12 w-12 text-primary" />
            <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-indigo-600 bg-clip-text text-transparent">
              Development
            </h1>
          </div>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Complete development workflow and best practices for robotics application development
          </p>
          <div className="flex items-center justify-center space-x-4">
            <Badge variant="secondary" className="px-3 py-1">
              <GitBranch className="h-3 w-3 mr-1" />
              Git Flow
            </Badge>
            <Badge variant="outline" className="px-3 py-1">
              <TestTube className="h-3 w-3 mr-1" />
              TDD
            </Badge>
            <Badge variant="outline" className="px-3 py-1">
              <Book className="h-3 w-3 mr-1" />
              Documentation
            </Badge>
          </div>
        </div>

        {/* Development Overview */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
          <Card>
            <CardHeader className="text-center pb-3">
              <CardTitle className="text-lg flex items-center justify-center space-x-2">
                <Code className="h-5 w-5 text-blue-500" />
                <span>Coding</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="text-center">
              <div className="text-2xl font-bold text-blue-600">95%</div>
              <Progress value={95} className="h-2 mt-2" />
              <div className="text-xs text-muted-foreground mt-1">Standards & Quality</div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="text-center pb-3">
              <CardTitle className="text-lg flex items-center justify-center space-x-2">
                <TestTube className="h-5 w-5 text-green-500" />
                <span>Testing</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="text-center">
              <div className="text-2xl font-bold text-green-600">80%</div>
              <Progress value={80} className="h-2 mt-2" />
              <div className="text-xs text-muted-foreground mt-1">Coverage & Automation</div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="text-center pb-3">
              <CardTitle className="text-lg flex items-center justify-center space-x-2">
                <Book className="h-5 w-5 text-purple-500" />
                <span>Docs</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="text-center">
              <div className="text-2xl font-bold text-purple-600">90%</div>
              <Progress value={90} className="h-2 mt-2" />
              <div className="text-xs text-muted-foreground mt-1">Completeness</div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="text-center pb-3">
              <CardTitle className="text-lg flex items-center justify-center space-x-2">
                <Users className="h-5 w-5 text-orange-500" />
                <span>Collaboration</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="text-center">
              <div className="text-2xl font-bold text-orange-600">85%</div>
              <Progress value={85} className="h-2 mt-2" />
              <div className="text-xs text-muted-foreground mt-1">Processes</div>
            </CardContent>
          </Card>
        </div>

        {/* Development Workflow */}
        <Tabs defaultValue="workflow" className="w-full">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="workflow">Workflow</TabsTrigger>
            <TabsTrigger value="standards">Standards</TabsTrigger>
            <TabsTrigger value="testing">Testing</TabsTrigger>
            <TabsTrigger value="deployment">Deployment</TabsTrigger>
          </TabsList>

          <TabsContent value="workflow" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Git Flow Development Workflow</CardTitle>
                <CardDescription>Structured approach to feature development and releases</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">Branch Strategy</h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex items-center space-x-2">
                        <GitBranch className="h-4 w-4 text-blue-500" />
                        <span><code>main</code> - Production releases</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <GitBranch className="h-4 w-4 text-green-500" />
                        <span><code>develop</code> - Integration branch</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <GitBranch className="h-4 w-4 text-purple-500" />
                        <span><code>feature/*</code> - Feature branches</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <GitBranch className="h-4 w-4 text-orange-500" />
                        <span><code>hotfix/*</code> - Critical fixes</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <GitBranch className="h-4 w-4 text-red-500" />
                        <span><code>release/*</code> - Release preparation</span>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <h4 className="font-semibold">Commit Conventions</h4>
                    <div className="space-y-2 text-sm">
                      <div className="font-mono bg-muted p-2 rounded">feat: add new robot control feature</div>
                      <div className="font-mono bg-muted p-2 rounded">fix: resolve sensor calibration bug</div>
                      <div className="font-mono bg-muted p-2 rounded">docs: update API documentation</div>
                      <div className="font-mono bg-muted p-2 rounded">test: add unit tests for motor control</div>
                      <div className="font-mono bg-muted p-2 rounded">refactor: optimize physics simulation</div>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="font-semibold">Pull Request Process</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">Code Review</div>
                      <div className="text-xs text-muted-foreground">Required for all PRs</div>
                    </div>
                    <div className="text-center p-4 border rounded-lg">
                      <div className="font-semibold text-sm">CI/CD Checks</div>
                      <div className="text-xs text-muted-foreground">Automated testing</div>
                    </div>
                    <div className="text-center p-4 border rounded-lg">
                      <div className="font-semibold text-sm">Documentation</div>
                      <div className="text-xs text-muted-foreground">Updated for changes</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="standards" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Coding Standards & Best Practices</CardTitle>
                <CardDescription>Quality guidelines for maintainable code</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">Python Standards</h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex items-center space-x-2">
                        <Badge variant="secondary" className="text-xs">PEP 8</Badge>
                        <span>Style guide compliance</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Badge variant="secondary" className="text-xs">Black</Badge>
                        <span>Code formatting</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Badge variant="secondary" className="text-xs">isort</Badge>
                        <span>Import sorting</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Badge variant="secondary" className="text-xs">mypy</Badge>
                        <span>Type checking</span>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <h4 className="font-semibold">TypeScript Standards</h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex items-center space-x-2">
                        <Badge variant="outline" className="text-xs">ESLint</Badge>
                        <span>Linting rules</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Badge variant="outline" className="text-xs">Prettier</Badge>
                        <span>Code formatting</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Badge variant="outline" className="text-xs">TypeScript</Badge>
                        <span>Strict type checking</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Badge variant="outline" className="text-xs">shadcn/ui</Badge>
                        <span>Component standards</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="font-semibold">Documentation Standards</h4>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div className="text-center p-3 border rounded-lg">
                      <Book className="h-5 w-5 mx-auto mb-2 text-blue-500" />
                      <div className="font-semibold text-sm">README</div>
                      <div className="text-xs text-muted-foreground">Project overview</div>
                    </div>
                    <div className="text-center p-3 border rounded-lg">
                      <Code className="h-5 w-5 mx-auto mb-2 text-green-500" />
                      <div className="font-semibold text-sm">API Docs</div>
                      <div className="text-xs text-muted-foreground">Function documentation</div>
                    </div>
                    <div className="text-center p-3 border rounded-lg">
                      <Settings className="h-5 w-5 mx-auto mb-2 text-purple-500" />
                      <div className="font-semibold text-sm">Architecture</div>
                      <div className="text-xs text-muted-foreground">System design</div>
                    </div>
                    <div className="text-center p-3 border rounded-lg">
                      <Users className="h-5 w-5 mx-auto mb-2 text-orange-500" />
                      <div className="font-semibold text-sm">Contributing</div>
                      <div className="text-xs text-muted-foreground">Development guide</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="testing" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Testing Strategy & Automation</CardTitle>
                <CardDescription>Comprehensive testing approach for reliability</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">Test Pyramid</h4>
                    <div className="space-y-3">
                      <div className="flex items-center justify-between">
                        <span className="text-sm">Unit Tests</span>
                        <Badge variant="secondary">70%</Badge>
                      </div>
                      <Progress value={70} className="h-2" />
                      <div className="flex items-center justify-between">
                        <span className="text-sm">Integration Tests</span>
                        <Badge variant="outline">60%</Badge>
                      </div>
                      <Progress value={60} className="h-2" />
                      <div className="flex items-center justify-between">
                        <span className="text-sm">E2E Tests</span>
                        <Badge variant="outline">40%</Badge>
                      </div>
                      <Progress value={40} className="h-2" />
                    </div>
                  </div>
                  <div className="space-y-4">
                    <h4 className="font-semibold">Test Frameworks</h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex items-center space-x-2">
                        <TestTube className="h-4 w-4 text-green-500" />
                        <span>pytest - Python backend testing</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <TestTube className="h-4 w-4 text-blue-500" />
                        <span>Jest - React component testing</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <TestTube className="h-4 w-4 text-purple-500" />
                        <span>Playwright - E2E browser testing</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Bug className="h-4 w-4 text-red-500" />
                        <span>React Testing Library - Component testing</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="font-semibold">CI/CD Testing Pipeline</h4>
                  <div className="bg-muted p-4 rounded-lg font-mono text-sm space-y-2">
                    <div># GitHub Actions Workflow</div>
                    <div>- Lint & Format Check</div>
                    <div>- Type Checking</div>
                    <div>- Unit Tests</div>
                    <div>- Integration Tests</div>
                    <div>- E2E Tests</div>
                    <div>- Security Scanning</div>
                    <div>- Performance Testing</div>
                    <div>- Deployment to Staging</div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="deployment" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Deployment & DevOps</CardTitle>
                <CardDescription>Automated deployment pipelines and infrastructure</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">Container Strategy</h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex items-center space-x-2">
                        <Zap className="h-4 w-4 text-blue-500" />
                        <span>Multi-stage Docker builds</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Settings className="h-4 w-4 text-green-500" />
                        <span>Kubernetes orchestration</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Code className="h-4 w-4 text-purple-500" />
                        <span>Helm charts for deployment</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <TestTube className="h-4 w-4 text-orange-500" />
                        <span>Automated testing in containers</span>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <h4 className="font-semibold">Monitoring & Observability</h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex items-center space-x-2">
                        <Zap className="h-4 w-4 text-blue-500" />
                        <span>Prometheus metrics collection</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Settings className="h-4 w-4 text-green-500" />
                        <span>Grafana dashboards</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Code className="h-4 w-4 text-purple-500" />
                        <span>ELK stack logging</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Bug className="h-4 w-4 text-red-500" />
                        <span>Distributed tracing</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="font-semibold">Security & Compliance</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">Trivy</div>
                      <div className="text-xs text-muted-foreground">Container scanning</div>
                    </div>
                    <div className="text-center p-3 border rounded-lg">
                      <div className="font-semibold text-sm">Snyk</div>
                      <div className="text-xs text-muted-foreground">Dependency scanning</div>
                    </div>
                    <div className="text-center p-3 border rounded-lg">
                      <div className="font-semibold text-sm">CodeQL</div>
                      <div className="text-xs text-muted-foreground">Code analysis</div>
                    </div>
                    <div className="text-center p-3 border rounded-lg">
                      <div className="font-semibold text-sm">Dependabot</div>
                      <div className="text-xs text-muted-foreground">Auto-updates</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

        {/* Development Tools */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Settings className="h-5 w-5" />
              <span>Development Environment</span>
            </CardTitle>
            <CardDescription>Tools and setup for efficient development</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">Local Development</h4>
                <div className="space-y-3 text-sm">
                  <div className="flex items-center justify-between">
                    <span>VS Code + Extensions</span>
                    <Badge variant="secondary">Recommended</Badge>
                  </div>
                  <div className="flex items-center justify-between">
                    <span>Python 3.11+ Environment</span>
                    <Badge variant="secondary">Required</Badge>
                  </div>
                  <div className="flex items-center justify-between">
                    <span>Node.js 18+ & npm</span>
                    <Badge variant="secondary">Required</Badge>
                  </div>
                  <div className="flex items-center justify-between">
                    <span>Docker & Docker Compose</span>
                    <Badge variant="secondary">Required</Badge>
                  </div>
                  <div className="flex items-center justify-between">
                    <span>Git & GitHub CLI</span>
                    <Badge variant="secondary">Required</Badge>
                  </div>
                </div>
              </div>
              <div className="space-y-4">
                <h4 className="font-semibold">VS Code Extensions</h4>
                <div className="space-y-2 text-sm">
                  <div className="flex items-center space-x-2">
                    <Code className="h-3 w-3 text-blue-500" />
                    <span>Python, Pylance, Black Formatter</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Code className="h-3 w-3 text-blue-500" />
                    <span>TypeScript, ESLint, Prettier</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Code className="h-3 w-3 text-blue-500" />
                    <span>Docker, GitLens, GitHub Pull Requests</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Code className="h-3 w-3 text-blue-500" />
                    <span>ROS, Unity, Blender extensions</span>
                  </div>
                </div>
              </div>
            </div>

            <div className="space-y-4">
              <h4 className="font-semibold">Quick Start Commands</h4>
              <div className="bg-muted p-4 rounded-lg font-mono text-sm space-y-2">
                <div># Clone and setup</div>
                <div>$ git clone https://github.com/sandraschi/robotics-webapp.git</div>
                <div>$ cd robotics-webapp</div>
                <div></div>
                <div># Backend setup</div>
                <div>$ cd backend && python -m venv venv && .\venv\Scripts\activate</div>
                <div>$ pip install -r requirements.txt</div>
                <div></div>
                <div># Frontend setup</div>
                <div>$ npm install</div>
                <div>$ npm run dev</div>
                <div></div>
                <div># Start development servers</div>
                <div>$ docker compose up -d</div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}