"use client"
import { Activity, AlertCircle, Info, CheckCircle, AlertTriangle } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Badge } from '@/components/ui/badge'
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
} from '@/components/ui/dialog'
interface LoggerPanelProps {
open: boolean
onClose: () => void
}
// Mock log data - in real app this would come from WebSocket/API
const mockLogs = [
{ id: 1, timestamp: '2025-12-17 15:30:25', level: 'info', message: 'VBot Scout Mini initialized', source: 'vbot-control' },
{ id: 2, timestamp: '2025-12-17 15:30:24', level: 'success', message: 'ROS bridge connected to localhost:9090', source: 'ros-bridge' },
{ id: 3, timestamp: '2025-12-17 15:30:22', level: 'info', message: 'World Labs Marble environment loaded: urban_street_scene', source: 'world-labs' },
{ id: 4, timestamp: '2025-12-17 15:30:20', level: 'warning', message: 'OSC connection to VRChat delayed (retrying...)', source: 'osc-bridge' },
{ id: 5, timestamp: '2025-12-17 15:30:18', level: 'success', message: 'Gaussian splat renderer initialized (100k splats)', source: 'unity-integration' },
{ id: 6, timestamp: '2025-12-17 15:30:15', level: 'info', message: 'Sensor dashboard streaming IMU data at 50Hz', source: 'sensor-dashboard' },
{ id: 7, timestamp: '2025-12-17 15:30:12', level: 'error', message: 'Failed to connect to physical Scout robot (not available)', source: 'hardware-bridge' },
{ id: 8, timestamp: '2025-12-17 15:30:10', level: 'success', message: 'VBot camera feed streaming at 30fps', source: 'camera-system' },
]
const getLogIcon = (level: string) => {
switch (level) {
case 'error': return <AlertCircle className="h-4 w-4 text-red-500" />
case 'warning': return <AlertTriangle className="h-4 w-4 text-yellow-500" />
case 'success': return <CheckCircle className="h-4 w-4 text-green-500" />
default: return <Info className="h-4 w-4 text-blue-500" />
}
}
const getLogColor = (level: string) => {
switch (level) {
case 'error': return 'destructive'
case 'warning': return 'secondary'
case 'success': return 'default'
default: return 'outline'
}
}
export function LoggerPanel({ open, onClose }: LoggerPanelProps) {
return (
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
<DialogContent className="max-w-2xl max-h-[85vh] flex flex-col gap-0 p-0 bg-slate-900/80 backdrop-blur-xl border-white/10 shadow-2xl" showCloseButton={true}>
<DialogHeader className="p-4 border-b">
<DialogTitle className="flex items-center space-x-2">
<Activity className="h-5 w-5" />
<span>Activity Logger</span>
</DialogTitle>
</DialogHeader>
<ScrollArea className="flex-1 p-4 max-h-[50vh]">
<div className="space-y-3">
{mockLogs.map((log) => (
<div key={log.id} className="flex items-start space-x-3 p-3 rounded-lg bg-muted/50">
{getLogIcon(log.level)}
<div className="flex-1 min-w-0">
<div className="flex items-center space-x-2 mb-1">
<Badge variant={getLogColor(log.level) as 'destructive' | 'secondary' | 'default' | 'outline'} className="text-xs">
{log.level.toUpperCase()}
</Badge>
<span className="text-xs text-muted-foreground">{log.source}</span>
</div>
<p className="text-sm">{log.message}</p>
<p className="text-xs text-muted-foreground mt-1">{log.timestamp}</p>
</div>
</div>
))}
</div>
</ScrollArea>
<DialogFooter className="p-4 border-t flex-row justify-between sm:justify-between">
<div className="text-xs text-muted-foreground flex items-center gap-4">
<span>Auto-scroll: ON</span>
<span>Filter: ALL</span>
</div>
<Button variant="outline" size="sm">
Clear Logs
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
