"use client"

import React, { useState, useEffect, useRef, useCallback } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
import { Button } from "../ui/button"
import { MoonUIBadgePro as Badge } from "../ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
import { cn } from "../../lib/utils"
import { 
  Activity, 
  Monitor, 
  Cpu, 
  MemoryStick, 
  Network, 
  HardDrive,
  Zap,
  Eye,
  EyeOff,
  BarChart3,
  TrendingUp,
  TrendingDown,
  AlertTriangle,
  CheckCircle,
  RefreshCw,
  Download,
  Lock,
  Sparkles,
  Timer,
  Gauge
} from "lucide-react"
import { useSubscription } from "../../hooks/use-subscription"

interface PerformanceMetrics {
  cpu: {
    usage: number
    cores: number
    temperature?: number
  }
  memory: {
    used: number
    total: number
    available: number
    percentage: number
  }
  disk: {
    used: number
    total: number
    free: number
    percentage: number
  }
  network: {
    download: number
    upload: number
    latency: number
  }
  system: {
    uptime: number
    loadAverage: number[]
    processes: number
  }
  browser?: {
    jsHeapUsed: number
    jsHeapTotal: number
    jsHeapLimit: number
  }
}

interface PerformanceAlert {
  id: string
  type: "warning" | "critical" | "info"
  metric: string
  message: string
  value: number
  threshold: number
  timestamp: Date
}

interface PerformanceMonitorProps {
  autoRefresh?: boolean
  refreshInterval?: number
  showAlerts?: boolean
  alertThresholds?: {
    cpu: number
    memory: number
    disk: number
    network: number
  }
  showCharts?: boolean
  chartDuration?: number
  maxDataPoints?: number
  onAlert?: (alert: PerformanceAlert) => void
  onMetricsUpdate?: (metrics: PerformanceMetrics) => void
  className?: string
}

const PerformanceMonitorInternal: React.FC<PerformanceMonitorProps> = ({
  autoRefresh = true,
  refreshInterval = 5000,
  showAlerts = true,
  alertThresholds = {
    cpu: 80,
    memory: 85,
    disk: 90,
    network: 1000
  },
  showCharts = true,
  chartDuration = 300000, // 5 minutes
  maxDataPoints = 60,
  onAlert,
  onMetricsUpdate,
  className
}) => {
  const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null)
  const [history, setHistory] = useState<{ timestamp: number; metrics: PerformanceMetrics }[]>([])
  const [alerts, setAlerts] = useState<PerformanceAlert[]>([])
  const [isVisible, setIsVisible] = useState(true)
  const [isRefreshing, setIsRefreshing] = useState(false)
  const intervalRef = useRef<NodeJS.Timeout | undefined>(undefined)

  const generateMockMetrics = useCallback((): PerformanceMetrics => {
    const baseMetrics = metrics || {
      cpu: { usage: 25, cores: 8 },
      memory: { used: 4.2, total: 16, available: 11.8, percentage: 26 },
      disk: { used: 250, total: 500, free: 250, percentage: 50 },
      network: { download: 50, upload: 20, latency: 25 },
      system: { uptime: 86400, loadAverage: [1.2, 1.5, 1.8], processes: 120 }
    }

    // Simulate realistic variations
    const variance = 0.1
    return {
      cpu: {
        usage: Math.max(0, Math.min(100, baseMetrics.cpu.usage + (Math.random() - 0.5) * 20)),
        cores: baseMetrics.cpu.cores,
        temperature: 45 + Math.random() * 15
      },
      memory: {
        used: Math.max(0, baseMetrics.memory.used + (Math.random() - 0.5) * 2),
        total: baseMetrics.memory.total,
        available: baseMetrics.memory.total - baseMetrics.memory.used,
        percentage: Math.max(0, Math.min(100, baseMetrics.memory.percentage + (Math.random() - 0.5) * 10))
      },
      disk: {
        used: baseMetrics.disk.used + (Math.random() - 0.5) * 10,
        total: baseMetrics.disk.total,
        free: baseMetrics.disk.total - baseMetrics.disk.used,
        percentage: Math.max(0, Math.min(100, baseMetrics.disk.percentage + (Math.random() - 0.5) * 5))
      },
      network: {
        download: Math.max(0, baseMetrics.network.download + (Math.random() - 0.5) * 30),
        upload: Math.max(0, baseMetrics.network.upload + (Math.random() - 0.5) * 15),
        latency: Math.max(1, baseMetrics.network.latency + (Math.random() - 0.5) * 10)
      },
      system: {
        uptime: baseMetrics.system.uptime + refreshInterval / 1000,
        loadAverage: baseMetrics.system.loadAverage.map(load => 
          Math.max(0, load + (Math.random() - 0.5) * 0.2)
        ),
        processes: Math.max(50, baseMetrics.system.processes + Math.floor((Math.random() - 0.5) * 10))
      },
      browser: typeof window !== 'undefined' && 'memory' in performance ? {
        jsHeapUsed: (performance as any).memory.usedJSHeapSize / 1024 / 1024,
        jsHeapTotal: (performance as any).memory.totalJSHeapSize / 1024 / 1024,
        jsHeapLimit: (performance as any).memory.jsHeapSizeLimit / 1024 / 1024
      } : undefined
    }
  }, [metrics, refreshInterval])

  const checkAlerts = useCallback((newMetrics: PerformanceMetrics) => {
    const newAlerts: PerformanceAlert[] = []
    const now = new Date()

    // CPU Alert
    if (newMetrics.cpu.usage > alertThresholds.cpu) {
      newAlerts.push({
        id: `cpu-${Date.now()}`,
        type: newMetrics.cpu.usage > 95 ? "critical" : "warning",
        metric: "CPU",
        message: `CPU usage is ${newMetrics.cpu.usage.toFixed(1)}%`,
        value: newMetrics.cpu.usage,
        threshold: alertThresholds.cpu,
        timestamp: now
      })
    }

    // Memory Alert
    if (newMetrics.memory.percentage > alertThresholds.memory) {
      newAlerts.push({
        id: `memory-${Date.now()}`,
        type: newMetrics.memory.percentage > 95 ? "critical" : "warning",
        metric: "Memory",
        message: `Memory usage is ${newMetrics.memory.percentage.toFixed(1)}%`,
        value: newMetrics.memory.percentage,
        threshold: alertThresholds.memory,
        timestamp: now
      })
    }

    // Disk Alert
    if (newMetrics.disk.percentage > alertThresholds.disk) {
      newAlerts.push({
        id: `disk-${Date.now()}`,
        type: newMetrics.disk.percentage > 98 ? "critical" : "warning",
        metric: "Disk",
        message: `Disk usage is ${newMetrics.disk.percentage.toFixed(1)}%`,
        value: newMetrics.disk.percentage,
        threshold: alertThresholds.disk,
        timestamp: now
      })
    }

    // Network Latency Alert
    if (newMetrics.network.latency > alertThresholds.network) {
      newAlerts.push({
        id: `network-${Date.now()}`,
        type: "warning",
        metric: "Network",
        message: `High network latency: ${newMetrics.network.latency.toFixed(0)}ms`,
        value: newMetrics.network.latency,
        threshold: alertThresholds.network,
        timestamp: now
      })
    }

    if (newAlerts.length > 0) {
      setAlerts(prev => [...newAlerts, ...prev].slice(0, 20))
      newAlerts.forEach(alert => onAlert?.(alert))
    }
  }, [alertThresholds, onAlert])

  const updateMetrics = useCallback(async () => {
    setIsRefreshing(true)
    
    try {
      const newMetrics = generateMockMetrics()
      setMetrics(newMetrics)
      
      // Update history
      setHistory(prev => {
        const newHistory = [
          { timestamp: Date.now(), metrics: newMetrics },
          ...prev.slice(0, maxDataPoints - 1)
        ]
        return newHistory
      })

      // Check for alerts
      if (showAlerts) {
        checkAlerts(newMetrics)
      }

      onMetricsUpdate?.(newMetrics)
    } catch (error) {
      console.error("Failed to update metrics:", error)
    } finally {
      setIsRefreshing(false)
    }
  }, [generateMockMetrics, maxDataPoints, showAlerts, checkAlerts, onMetricsUpdate])

  // Initial load
  useEffect(() => {
    updateMetrics()
  }, [])

  // Auto refresh
  useEffect(() => {
    if (!autoRefresh) return

    intervalRef.current = setInterval(updateMetrics, refreshInterval)
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }, [autoRefresh, refreshInterval, updateMetrics])

  const formatBytes = (bytes: number, decimals = 1): string => {
    if (bytes === 0) return '0 B'
    const k = 1024
    const dm = decimals < 0 ? 0 : decimals
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
  }

  const formatUptime = (seconds: number): string => {
    const days = Math.floor(seconds / 86400)
    const hours = Math.floor((seconds % 86400) / 3600)
    const minutes = Math.floor((seconds % 3600) / 60)
    
    if (days > 0) return `${days}d ${hours}h ${minutes}m`
    if (hours > 0) return `${hours}h ${minutes}m`
    return `${minutes}m`
  }

  const getStatusColor = (percentage: number, thresholds = [70, 85]): string => {
    if (percentage >= thresholds[1]) return "text-red-500"
    if (percentage >= thresholds[0]) return "text-yellow-500"
    return "text-green-500"
  }

  const exportMetrics = () => {
    const data = {
      timestamp: new Date().toISOString(),
      currentMetrics: metrics,
      history: history.slice(0, 20),
      alerts: alerts.slice(0, 10)
    }
    
    const blob = new Blob([JSON.stringify(data, null, 2)], { 
      type: 'application/json' 
    })
    
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `performance-metrics-${Date.now()}.json`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
  }

  if (!isVisible) {
    return (
      <Button
        variant="outline"
        size="sm"
        onClick={() => setIsVisible(true)}
        className="fixed bottom-4 left-4 z-50"
      >
        <Monitor className="h-4 w-4 mr-2" />
        Performance
      </Button>
    )
  }

  if (!metrics) {
    return (
      <Card className={cn("w-full max-w-6xl", className)}>
        <CardContent className="p-6">
          <div className="text-center">
            <Activity className="h-12 w-12 animate-pulse mx-auto mb-4 text-muted-foreground" />
            <p className="text-muted-foreground">Loading performance metrics...</p>
          </div>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card className={cn("w-full max-w-6xl", className)}>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">
              <Monitor className="h-5 w-5" />
              Performance Monitor
            </CardTitle>
            <CardDescription>
              Real-time system performance monitoring and alerts
            </CardDescription>
          </div>
          
          <div className="flex items-center gap-2">
            <Badge variant={autoRefresh ? "outline" : "secondary"} className="gap-1">
              {autoRefresh ? <Activity className="h-3 w-3 animate-pulse" /> : <Timer className="h-3 w-3" />}
              {autoRefresh ? "Live" : "Paused"}
            </Badge>
            
            {showAlerts && alerts.length > 0 && (
              <Badge variant="destructive" className="gap-1">
                <AlertTriangle className="h-3 w-3" />
                {alerts.length}
              </Badge>
            )}
            
            <Button
              variant="outline"
              size="sm"
              onClick={updateMetrics}
              disabled={isRefreshing}
            >
              <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
            </Button>
            
            <Button
              variant="outline"
              size="sm"
              onClick={exportMetrics}
            >
              <Download className="h-4 w-4" />
            </Button>
            
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsVisible(false)}
            >
              <EyeOff className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </CardHeader>

      <CardContent>
        <Tabs defaultValue="overview" className="w-full">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="details">Details</TabsTrigger>
            <TabsTrigger value="alerts">Alerts</TabsTrigger>
            <TabsTrigger value="history">History</TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="space-y-6">
            {/* Key Metrics Grid */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <Card>
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Cpu className="h-4 w-4 text-blue-500" />
                      <span className="text-sm font-medium">CPU</span>
                    </div>
                    <span className={cn("font-bold", getStatusColor(metrics.cpu.usage))}>
                      {metrics.cpu.usage.toFixed(1)}%
                    </span>
                  </div>
                  <div className="h-2 mt-2 bg-secondary rounded-full overflow-hidden">
                    <div 
                      className="h-full bg-primary transition-all duration-300 ease-out"
                      style={{ width: `${metrics.cpu.usage}%` }}
                    />
                  </div>
                  <div className="text-xs text-muted-foreground mt-1">
                    {metrics.cpu.cores} cores {metrics.cpu.temperature && `• ${metrics.cpu.temperature.toFixed(0)}°C`}
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <MemoryStick className="h-4 w-4 text-green-500" />
                      <span className="text-sm font-medium">Memory</span>
                    </div>
                    <span className={cn("font-bold", getStatusColor(metrics.memory.percentage))}>
                      {metrics.memory.percentage.toFixed(1)}%
                    </span>
                  </div>
                  <div className="h-2 mt-2 bg-secondary rounded-full overflow-hidden">
                    <div 
                      className="h-full bg-primary transition-all duration-300 ease-out"
                      style={{ width: `${metrics.memory.percentage}%` }}
                    />
                  </div>
                  <div className="text-xs text-muted-foreground mt-1">
                    {formatBytes(metrics.memory.used * 1024 * 1024 * 1024)} / {formatBytes(metrics.memory.total * 1024 * 1024 * 1024)}
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <HardDrive className="h-4 w-4 text-purple-500" />
                      <span className="text-sm font-medium">Disk</span>
                    </div>
                    <span className={cn("font-bold", getStatusColor(metrics.disk.percentage, [80, 90]))}>
                      {metrics.disk.percentage.toFixed(1)}%
                    </span>
                  </div>
                  <div className="h-2 mt-2 bg-secondary rounded-full overflow-hidden">
                    <div 
                      className="h-full bg-primary transition-all duration-300 ease-out"
                      style={{ width: `${metrics.disk.percentage}%` }}
                    />
                  </div>
                  <div className="text-xs text-muted-foreground mt-1">
                    {formatBytes(metrics.disk.used * 1024 * 1024 * 1024)} / {formatBytes(metrics.disk.total * 1024 * 1024 * 1024)}
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Network className="h-4 w-4 text-orange-500" />
                      <span className="text-sm font-medium">Network</span>
                    </div>
                    <span className={cn("font-bold", getStatusColor(metrics.network.latency, [50, 100]))}>
                      {metrics.network.latency.toFixed(0)}ms
                    </span>
                  </div>
                  <div className="text-xs text-muted-foreground mt-2">
                    ↓ {metrics.network.download.toFixed(0)} MB/s • ↑ {metrics.network.upload.toFixed(0)} MB/s
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* System Info */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">System Information</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Uptime:</span>
                    <span className="font-medium">{formatUptime(metrics.system.uptime)}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Processes:</span>
                    <span className="font-medium">{metrics.system.processes}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Load Average:</span>
                    <span className="font-medium">
                      {metrics.system.loadAverage.map(load => load.toFixed(2)).join(", ")}
                    </span>
                  </div>
                </CardContent>
              </Card>

              {metrics.browser && (
                <Card>
                  <CardHeader>
                    <CardTitle className="text-base">Browser Memory</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">JS Heap Used:</span>
                      <span className="font-medium">{formatBytes(metrics.browser.jsHeapUsed * 1024 * 1024)}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">JS Heap Total:</span>
                      <span className="font-medium">{formatBytes(metrics.browser.jsHeapTotal * 1024 * 1024)}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">JS Heap Limit:</span>
                      <span className="font-medium">{formatBytes(metrics.browser.jsHeapLimit * 1024 * 1024)}</span>
                    </div>
                  </CardContent>
                </Card>
              )}
            </div>
          </TabsContent>

          <TabsContent value="details" className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Detailed CPU Info */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-base flex items-center gap-2">
                    <Cpu className="h-4 w-4" />
                    CPU Details
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <div className="flex justify-between text-sm mb-2">
                      <span>Usage</span>
                      <span className={getStatusColor(metrics.cpu.usage)}>{metrics.cpu.usage.toFixed(1)}%</span>
                    </div>
                    <div className="h-2 bg-secondary rounded-full overflow-hidden">
                      <div 
                        className="h-full bg-primary transition-all duration-300 ease-out"
                        style={{ width: `${metrics.cpu.usage}%` }}
                      />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="text-muted-foreground">Cores:</span>
                      <span className="ml-2 font-medium">{metrics.cpu.cores}</span>
                    </div>
                    {metrics.cpu.temperature && (
                      <div>
                        <span className="text-muted-foreground">Temperature:</span>
                        <span className="ml-2 font-medium">{metrics.cpu.temperature.toFixed(0)}°C</span>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>

              {/* Detailed Memory Info */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-base flex items-center gap-2">
                    <MemoryStick className="h-4 w-4" />
                    Memory Details
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <div className="flex justify-between text-sm mb-2">
                      <span>Usage</span>
                      <span className={getStatusColor(metrics.memory.percentage)}>{metrics.memory.percentage.toFixed(1)}%</span>
                    </div>
                    <div className="h-2 bg-secondary rounded-full overflow-hidden">
                      <div 
                        className="h-full bg-primary transition-all duration-300 ease-out"
                        style={{ width: `${metrics.memory.percentage}%` }}
                      />
                    </div>
                  </div>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Used:</span>
                      <span className="font-medium">{formatBytes(metrics.memory.used * 1024 * 1024 * 1024)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Available:</span>
                      <span className="font-medium">{formatBytes(metrics.memory.available * 1024 * 1024 * 1024)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Total:</span>
                      <span className="font-medium">{formatBytes(metrics.memory.total * 1024 * 1024 * 1024)}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="alerts" className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="text-sm text-muted-foreground">
                {alerts.length} alerts
              </div>
              <Button
                variant="outline"
                size="sm"
                onClick={() => setAlerts([])}
                disabled={alerts.length === 0}
              >
                Clear All
              </Button>
            </div>

            <div className="space-y-2 max-h-96 overflow-y-auto">
              <AnimatePresence>
                {alerts.map((alert, index) => (
                  <motion.div
                    key={alert.id}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: 20 }}
                    transition={{ delay: index * 0.05 }}
                  >
                    <Card>
                      <CardContent className="p-4">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-3">
                            {alert.type === "critical" ? (
                              <AlertTriangle className="h-4 w-4 text-red-500" />
                            ) : alert.type === "warning" ? (
                              <AlertTriangle className="h-4 w-4 text-yellow-500" />
                            ) : (
                              <CheckCircle className="h-4 w-4 text-blue-500" />
                            )}
                            <div>
                              <div className="font-medium text-sm">{alert.metric}</div>
                              <div className="text-sm text-muted-foreground">{alert.message}</div>
                            </div>
                          </div>
                          <div className="text-right text-sm">
                            <div className="font-medium">
                              {alert.value.toFixed(1)}{alert.metric === "Network" ? "ms" : "%"}
                            </div>
                            <div className="text-xs text-muted-foreground">
                              {alert.timestamp.toLocaleTimeString()}
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                ))}
              </AnimatePresence>
            </div>

            {alerts.length === 0 && (
              <div className="text-center py-8">
                <CheckCircle className="h-12 w-12 mx-auto mb-4 text-green-500" />
                <p className="text-muted-foreground">No alerts - System is running smoothly</p>
              </div>
            )}
          </TabsContent>

          <TabsContent value="history" className="space-y-4">
            <div className="text-sm text-muted-foreground">
              Last {history.length} data points ({Math.round(chartDuration / 60000)} minutes)
            </div>

            {showCharts && history.length > 1 && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Simple CPU History Chart */}
                <Card>
                  <CardHeader>
                    <CardTitle className="text-base">CPU Usage Trend</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="h-32 flex items-end justify-between gap-1">
                      {history.slice(-20).reverse().map((point, index) => (
                        <div
                          key={index}
                          className="bg-blue-500 rounded-t min-w-[4px] flex-1 transition-all"
                          style={{ height: `${(point.metrics.cpu.usage / 100) * 128}px` }}
                        />
                      ))}
                    </div>
                    <div className="text-xs text-muted-foreground mt-2 text-center">
                      Last 20 readings
                    </div>
                  </CardContent>
                </Card>

                {/* Simple Memory History Chart */}
                <Card>
                  <CardHeader>
                    <CardTitle className="text-base">Memory Usage Trend</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="h-32 flex items-end justify-between gap-1">
                      {history.slice(-20).reverse().map((point, index) => (
                        <div
                          key={index}
                          className="bg-green-500 rounded-t min-w-[4px] flex-1 transition-all"
                          style={{ height: `${(point.metrics.memory.percentage / 100) * 128}px` }}
                        />
                      ))}
                    </div>
                    <div className="text-xs text-muted-foreground mt-2 text-center">
                      Last 20 readings
                    </div>
                  </CardContent>
                </Card>
              </div>
            )}

            {history.length === 0 && (
              <div className="text-center py-8">
                <BarChart3 className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
                <p className="text-muted-foreground">No historical data available</p>
              </div>
            )}
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}

export const PerformanceMonitor: React.FC<PerformanceMonitorProps> = ({ className, ...props }) => {
  const { hasProAccess, isLoading } = useSubscription()
  
  // If no pro access, show upgrade prompt
  if (!isLoading && !hasProAccess) {
    return (
      <Card className={cn("w-fit", className)}>
        <CardContent className="py-6 text-center">
          <div className="space-y-4">
            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
            </div>
            <div>
              <h3 className="font-semibold text-sm mb-2">Pro Feature</h3>
              <p className="text-muted-foreground text-xs mb-4">
                Performance Monitor is available exclusively to MoonUI Pro subscribers.
              </p>
              <a href="/pricing">
                <Button size="sm">
                  <Sparkles className="mr-2 h-4 w-4" />
                  Upgrade to Pro
                </Button>
              </a>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

  return <PerformanceMonitorInternal className={className} {...props} />
}

export type { PerformanceMetrics, PerformanceAlert, PerformanceMonitorProps }