"use client"
import { X, User, LogOut, Settings, Shield, Key } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
interface AuthPanelProps {
onClose: () => void
}
// Mock user data - in real app this would come from authentication system
const currentUser = {
name: 'sandraschi',
email: 'robotics@sandraschi.dev',
avatar: '',
role: 'Administrator',
permissions: ['full_access', 'robot_control', 'system_admin'],
lastLogin: '2025-12-17 14:30:00',
robotsControlled: 3,
environmentsCreated: 12
}
const authOptions = [
{ icon: Shield, label: 'Administrator Access', description: 'Full system control and configuration' },
{ icon: Settings, label: 'System Settings', description: 'Modify application preferences' },
{ icon: Key, label: 'API Keys', description: 'Manage external service integrations' }
]
export function AuthPanel({ onClose }: AuthPanelProps) {
return (
<div className="fixed right-0 top-16 z-50 h-[calc(100vh-4rem)] w-96 bg-slate-900/80 backdrop-blur-xl border-l border-white/10 shadow-2xl">
<div className="flex items-center justify-between p-4 border-b">
<div className="flex items-center space-x-2">
<User className="h-5 w-5" />
<h2 className="text-lg font-semibold">Authentication</h2>
</div>
<Button variant="ghost" size="sm" onClick={onClose}>
<X className="h-4 w-4" />
</Button>
</div>
<div className="p-4 space-y-6">
{/* User Profile */}
<div className="flex items-center space-x-3 p-3 bg-muted/50 rounded-lg">
<Avatar className="h-12 w-12">
<AvatarImage src={currentUser.avatar} />
<AvatarFallback>{currentUser.name.split(' ').map(n => n[0]).join('')}</AvatarFallback>
</Avatar>
<div className="flex-1">
<div className="font-medium">{currentUser.name}</div>
<div className="text-sm text-muted-foreground">{currentUser.email}</div>
<div className="text-xs text-primary font-medium">{currentUser.role}</div>
</div>
</div>
{/* User Stats */}
<div className="grid grid-cols-2 gap-3">
<div className="text-center p-3 bg-muted/50 rounded-lg">
<div className="text-2xl font-bold text-primary">{currentUser.robotsControlled}</div>
<div className="text-xs text-muted-foreground">Robots Controlled</div>
</div>
<div className="text-center p-3 bg-muted/50 rounded-lg">
<div className="text-2xl font-bold text-primary">{currentUser.environmentsCreated}</div>
<div className="text-xs text-muted-foreground">Environments Created</div>
</div>
</div>
<Separator />
{/* Authentication Options */}
<div className="space-y-3">
<h3 className="font-medium">Access Control</h3>
{authOptions.map((option) => (
<div key={option.label} className="flex items-center space-x-3 p-3 rounded-lg hover:bg-muted/50 cursor-pointer">
<option.icon className="h-5 w-5 text-muted-foreground" />
<div className="flex-1">
<div className="font-medium text-sm">{option.label}</div>
<div className="text-xs text-muted-foreground">{option.description}</div>
</div>
</div>
))}
</div>
<Separator />
{/* Session Info */}
<div className="space-y-2">
<h3 className="font-medium">Session Information</h3>
<div className="text-sm space-y-1">
<div className="flex justify-between">
<span className="text-muted-foreground">Last Login:</span>
<span>{currentUser.lastLogin}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Session:</span>
<span className="text-green-600">Active</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Security:</span>
<span className="text-green-600">Verified</span>
</div>
</div>
</div>
<Separator />
{/* Permissions */}
<div className="space-y-2">
<h3 className="font-medium">Permissions</h3>
<div className="flex flex-wrap gap-1">
{currentUser.permissions.map((permission) => (
<span
key={permission}
className="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full"
>
{permission.replace('_', ' ')}
</span>
))}
</div>
</div>
{/* Action Buttons */}
<div className="space-y-2 pt-4">
<Button variant="outline" className="w-full justify-start">
<Settings className="mr-2 h-4 w-4" />
Account Settings
</Button>
<Button variant="outline" className="w-full justify-start">
<Key className="mr-2 h-4 w-4" />
API Management
</Button>
<Separator />
<Button variant="destructive" className="w-full justify-start">
<LogOut className="mr-2 h-4 w-4" />
Sign Out
</Button>
</div>
</div>
</div>
)
}
