import { useState, useEffect, useCallback } from 'react'
import { motion } from 'framer-motion'
import {
  Server,
  Wifi,
  Globe,
  Container,
  Database,
  HardDrive,
  RefreshCw,
  CheckCircle2,
  AlertTriangle,
  Activity,
  Clock,
  Wrench,
  Code,
  Network,
  Cpu,
  MemoryStick,
  MonitorDot,
  Laptop2,
} from 'lucide-react'

// Types
interface MonitorItem {
  id: number
  name: string
  category: string
  status: 'ok' | 'up' | 'warning' | 'down' | 'failed' | 'critical'
  details: Record<string, any>
  last_check: string
}

interface CategorySummary {
  category: string
  total: number
  ok: number
  warning: number
  critical: number
}

interface MonitorData {
  items: Record<string, MonitorItem[]>
  summary: CategorySummary[]
  overall: 'ok' | 'warning' | 'critical'
  stats: {
    total_ok: number
    total_warning: number
    total_critical: number
  }
}

interface VMConfig {
  name: string
  id: string
  type: 'QEMU' | 'LXC'
  ip: string
  role: string
  icon: React.ElementType
  accent: string
  accentBg: string
  accentBorder: string
}
interface FleetSystem {
  name: string
  host: string
  status: string
  cpu: number
  mem: number
  disk: number
  containers: number
  load: number
  uptime: number
}

interface FleetData {
  total: number
  up: number
  down: number
  systems: FleetSystem[]
}

// VM definitions matching cluster architecture
const VM_CONFIG: Record<string, VMConfig> = {
  'CWP Server': {
    name: 'Server',
    id: 'VM 100',
    type: 'QEMU',
    ip: '5.9.90.105',
    role: 'CWP - hosting clientes',
    icon: Server,
    accent: 'text-emerald-400',
    accentBg: 'bg-emerald-500/10',
    accentBorder: 'border-emerald-500/20',
  },
  'EasyPanel': {
    name: 'Easy',
    id: 'VM 101',
    type: 'QEMU',
    ip: '5.9.90.70',
    role: 'Docker Swarm - 46 servicos',
    icon: Container,
    accent: 'text-cyan-400',
    accentBg: 'bg-cyan-500/10',
    accentBorder: 'border-cyan-500/20',
  },
  'Dev': {
    name: 'Dev',
    id: 'CT 102',
    type: 'LXC',
    ip: '10.10.10.10',
    role: 'Node.js, Docker, TypeScript',
    icon: Code,
    accent: 'text-violet-400',
    accentBg: 'bg-violet-500/10',
    accentBorder: 'border-violet-500/20',
  },
  'Gateway': {
    name: 'Gateway',
    id: 'VM 103',
    type: 'QEMU',
    ip: '5.9.90.69',
    role: '26 MCPs, Nginx proxy',
    icon: Network,
    accent: 'text-amber-400',
    accentBg: 'bg-amber-500/10',
    accentBorder: 'border-amber-500/20',
  },
}

// Animation variants
const containerVariants = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.06 }
  }
}

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  show: {
    opacity: 1,
    y: 0,
    transition: { type: 'spring' as const, stiffness: 300, damping: 30 }
  }
}

// --- Sub-components ---

const StatusDot = ({ status }: { status: string }) => {
  const color = (status === 'ok' || status === 'up')
    ? 'bg-emerald-400 shadow-[0_0_12px_rgba(16,185,129,0.6)]'
    : status === 'warning'
    ? 'bg-amber-400 shadow-[0_0_12px_rgba(245,158,11,0.6)]'
    : 'bg-red-400 shadow-[0_0_12px_rgba(239,68,68,0.6)] animate-pulse'
  return <div className={`w-2.5 h-2.5 rounded-full ${color}`} />
}

const StatusBadge = ({ status }: { status: string }) => {
  const styles: Record<string, string> = {
    ok: 'bg-emerald-500/20 text-emerald-400',
    up: 'bg-emerald-500/20 text-emerald-400',
    warning: 'bg-amber-500/20 text-amber-400',
    down: 'bg-red-500/20 text-red-400',
    failed: 'bg-red-500/20 text-red-400',
    critical: 'bg-red-500/20 text-red-400',
  }
  return (
    <span className={`px-3 py-1 rounded-full text-xs font-semibold uppercase ${styles[status] || styles.ok}`}>
      {status}
    </span>
  )
}

const ProgressBar = ({ percent, showLabel = true, size = 'md', inverted = false }: { percent: number; showLabel?: boolean; size?: 'sm' | 'md'; inverted?: boolean }) => {
  const color = inverted
    ? (percent > 90 ? 'from-emerald-500 to-emerald-400' : percent > 70 ? 'from-amber-500 to-amber-400' : 'from-red-500 to-red-400')
    : (percent < 70 ? 'from-emerald-500 to-emerald-400' : percent < 85 ? 'from-amber-500 to-amber-400' : 'from-red-500 to-red-400')
  const height = size === 'sm' ? 'h-1.5' : 'h-2'
  return (
    <div className="flex items-center gap-3">
      <div className={`flex-1 ${height} bg-white/10 rounded-full overflow-hidden`}>
        <motion.div
          initial={{ width: 0 }}
          animate={{ width: `${Math.min(percent, 100)}%` }}
          transition={{ duration: 0.8, ease: 'easeOut' }}
          className={`h-full rounded-full bg-gradient-to-r ${color}`}
        />
      </div>
      {showLabel && <span className="text-sm font-semibold text-white w-12 text-right">{percent}%</span>}
    </div>
  )
}

const MetricPill = ({ label, value, unit = '%' }: { label: string; value: number | string; unit?: string }) => (
  <span className="text-xs bg-white/5 px-2 py-1 rounded">
    <span className="text-zinc-500">{label}</span>{' '}
    <span className="text-white font-medium">{value}{unit}</span>
  </span>
)

const CategoryCard = ({
  title,
  icon: Icon,
  count,
  children,
}: {
  title: string
  icon: React.ElementType
  count?: number
  children: React.ReactNode
}) => (
  <motion.div variants={itemVariants} className="glass-card overflow-hidden">
    <div className="flex items-center justify-between px-5 py-4 border-b border-white/5">
      <h3 className="text-sm font-semibold text-white flex items-center gap-2 uppercase tracking-wide">
        <Icon className="w-4 h-4 text-brand-400" />
        {title}
      </h3>
      {count !== undefined && (
        <span className="text-xs text-zinc-500">{count} items</span>
      )}
    </div>
    <div className="p-4 space-y-3">{children}</div>
  </motion.div>
)

// Cluster Overview Hero
const ClusterHero = ({ data }: { data: MonitorData }) => {
  const clusterItem = data.items.server?.find(s => s.name === 'Cluster Proxmox')
  const d = clusterItem?.details || {}

  return (
    <motion.div variants={itemVariants} className="glass-card overflow-hidden col-span-full">
      <div className="px-6 py-5 border-b border-white/5 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-violet-600 flex items-center justify-center shadow-lg shadow-brand-500/30">
            <MonitorDot className="w-6 h-6 text-white" />
          </div>
          <div>
            <h2 className="text-lg font-bold text-white">Cluster Proxmox</h2>
            <p className="text-xs text-zinc-500">cluster.descomplicar.pt - 5.9.90.75 - Hetzner AX162-R</p>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <StatusDot status={data.overall} />
          <span className={`text-sm font-medium ${
            data.overall === 'ok' ? 'text-emerald-400' :
            data.overall === 'warning' ? 'text-amber-400' : 'text-red-400'
          }`}>
            {data.overall === 'ok' ? 'Operacional' : data.overall === 'warning' ? 'Atencao' : 'Critico'}
          </span>
        </div>
      </div>

      <div className="p-6">
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
          <StatMini icon={Cpu} label="CPU" value={d.cpu ? `${d.cpu}%` : '--'} />
          <StatMini icon={MemoryStick} label="RAM" value="128 GB" sub="88 GB alocado" />
          <StatMini icon={HardDrive} label="NVMe" value="950 GB" sub="RAID1" />
          <StatMini icon={Database} label="HDD" value="16 TB" sub="backups + dados" />
          <StatMini icon={Server} label="VMs" value="4" sub="3 QEMU + 1 LXC" />
          <StatMini icon={CheckCircle2} label="OK" value={String(data.stats.total_ok)} color="text-emerald-400" />
          <StatMini icon={AlertTriangle} label="Alertas" value={String(data.stats.total_warning + data.stats.total_critical)} color={data.stats.total_critical > 0 ? 'text-red-400' : data.stats.total_warning > 0 ? 'text-amber-400' : 'text-emerald-400'} />
        </div>
      </div>
    </motion.div>
  )
}

const StatMini = ({ icon: Icon, label, value, sub, color = 'text-white' }: {
  icon: React.ElementType; label: string; value: string; sub?: string; color?: string
}) => (
  <div className="text-center p-3 rounded-xl bg-white/[0.03]">
    <Icon className="w-4 h-4 mx-auto mb-2 text-zinc-500" />
    <div className={`text-lg font-bold ${color}`}>{value}</div>
    <div className="text-xs text-zinc-500">{label}</div>
    {sub && <div className="text-[10px] text-zinc-600 mt-0.5">{sub}</div>}
  </div>
)

// VM Card
const VMCard = ({ item, config }: { item?: MonitorItem; config: VMConfig }) => {
  const Icon = config.icon
  const d = item?.details || {}
  const status = item?.status || 'ok'

  return (
    <motion.div
      variants={itemVariants}
      className={`glass-card overflow-hidden border ${config.accentBorder}`}
    >
      <div className="px-5 py-4 border-b border-white/5 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className={`w-9 h-9 rounded-lg ${config.accentBg} flex items-center justify-center`}>
            <Icon className={`w-5 h-5 ${config.accent}`} />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <h3 className="text-sm font-bold text-white">{config.name}</h3>
              <span className="text-[10px] text-zinc-600 font-mono">{config.id}</span>
            </div>
            <p className="text-xs text-zinc-500">{config.ip} - {config.type}</p>
          </div>
        </div>
        <StatusBadge status={status} />
      </div>

      <div className="p-4 space-y-3">
        <p className="text-xs text-zinc-400">{config.role}</p>

        {d.cpu !== undefined && (
          <div>
            <div className="flex justify-between text-xs mb-1">
              <span className="text-zinc-500">CPU</span>
              <span className="text-white font-medium">{d.cpu}%</span>
            </div>
            <ProgressBar percent={Number(d.cpu)} showLabel={false} size="sm" />
          </div>
        )}
        {d.ram !== undefined && (
          <div>
            <div className="flex justify-between text-xs mb-1">
              <span className="text-zinc-500">RAM</span>
              <span className="text-white font-medium">{d.ram}%</span>
            </div>
            <ProgressBar percent={Number(d.ram)} showLabel={false} size="sm" />
          </div>
        )}
        {d.disk !== undefined && (
          <div>
            <div className="flex justify-between text-xs mb-1">
              <span className="text-zinc-500">Disco</span>
              <span className="text-white font-medium">{d.disk}%</span>
            </div>
            <ProgressBar percent={Number(d.disk)} showLabel={false} size="sm" />
          </div>
        )}
        {d.load !== undefined && (
          <div className="flex items-center gap-2 pt-1">
            <MetricPill label="Load" value={d.load} unit="" />
          </div>
        )}
      </div>
    </motion.div>
  )
}

// --- Main Component ---

export default function Monitor() {
  const [data, setData] = useState<MonitorData | null>(null)
  const [fleet, setFleet] = useState<FleetData | null>(null)
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)

  const fetchData = useCallback(async () => {
    setRefreshing(true)
    try {
      const [monitorRes, fleetRes] = await Promise.all([
        fetch('/api/monitor'),
        fetch('/api/beszel'),
      ])
      if (monitorRes.ok) {
        const json = await monitorRes.json()
        setData(json)
      }
      if (fleetRes.ok) {
        const json = await fleetRes.json()
        setFleet(json)
      }
    } catch {
      if (import.meta.env.DEV) {
        setData(getMockData())
      }
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }, [])

  useEffect(() => {
    fetchData()
    const interval = setInterval(fetchData, 60000)
    return () => clearInterval(interval)
  }, [fetchData])

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center">
          <Activity className="w-12 h-12 text-brand-400 mx-auto mb-4 animate-pulse" />
          <p className="text-zinc-400">A carregar monitorizacao...</p>
        </motion.div>
      </div>
    )
  }

  if (!data) return null

  const { items } = data

  // Match server items to VM config
  const getVMItem = (name: string) => items.server?.find(s => s.name === name)

  const overallColor = {
    ok: 'text-emerald-400 bg-emerald-500/20',
    warning: 'text-amber-400 bg-amber-500/20',
    critical: 'text-red-400 bg-red-500/20',
  }[data.overall]

  const overallLabel = {
    ok: 'Operacional',
    warning: 'Atencao',
    critical: 'Critico',
  }[data.overall]

  return (
        <div className="max-w-[1600px] mx-auto px-6 lg:px-8 py-8">
          {/* Header com status e refresh */}
          <div className="flex items-center justify-between mb-6">
            <div>
              <h2 className="text-xl font-bold text-white tracking-tight">Monitorizacao</h2>
              <p className="text-xs text-zinc-500">Cluster Proxmox Descomplicar</p>
            </div>
            <div className="flex items-center gap-3">
              <span className={`px-4 py-2 rounded-full text-sm font-semibold ${overallColor}`}>
                {overallLabel}
              </span>
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={fetchData}
                disabled={refreshing}
                className="p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all"
              >
                <RefreshCw className={`w-5 h-5 text-zinc-400 ${refreshing ? 'animate-spin' : ''}`} />
              </motion.button>
            </div>
          </div>
          <motion.div variants={containerVariants} initial="hidden" animate="show">

            {/* Section 1: Cluster Overview */}
            <ClusterHero data={data} />

            {/* Section 2: VM Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mt-6">
              {Object.entries(VM_CONFIG).map(([key, config]) => (
                <VMCard key={key} item={getVMItem(key)} config={config} />
              ))}
            </div>
            {/* Section 2.5: Fleet Beszel */}
            {fleet && fleet.systems.length > 0 && (
              <motion.div variants={itemVariants} className="mt-8">
                <div className="glass-card overflow-hidden">
                  <div className="px-5 py-4 border-b border-white/5 flex items-center justify-between">
                    <h3 className="text-sm font-semibold text-white flex items-center gap-2 uppercase tracking-wide">
                      <Laptop2 className="w-4 h-4 text-cyan-400" />
                      Fleet — {fleet.up}/{fleet.total} activas
                    </h3>
                    <div className="flex items-center gap-2">
                      {fleet.down > 0 && (
                        <span className="text-xs bg-red-500/20 text-red-400 px-2 py-1 rounded-full">{fleet.down} down</span>
                      )}
                      <a
                        href="https://descomplicar-beszel.i7zsqo.easypanel.host/"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
                      >
                        Abrir Beszel →
                      </a>
                    </div>
                  </div>
                  <div className="p-4">
                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
                      {fleet.systems.sort((a, b) => a.name.localeCompare(b.name)).map((sys) => (
                        <div
                          key={sys.name}
                          className={`p-3 rounded-xl border transition-colors ${
                            sys.status === 'up'
                              ? 'bg-white/[0.02] border-white/5 hover:bg-white/[0.04]'
                              : 'bg-red-500/5 border-red-500/10'
                          }`}
                        >
                          <div className="flex items-center gap-2 mb-2">
                            <StatusDot status={sys.status} />
                            <span className="text-sm font-medium text-white truncate">{sys.name}</span>
                          </div>
                          <div className="space-y-1.5">
                            <ProgressBar percent={sys.cpu} size="sm" />
                            <div className="flex justify-between text-[10px] text-zinc-500">
                              <span>RAM {sys.mem}%</span>
                              <span>DK {sys.disk}%</span>
                            </div>
                            {sys.containers > 0 && (
                              <div className="text-[10px] text-zinc-600">{sys.containers} containers</div>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </motion.div>
            )}

            {/* Section 3: Detail Categories */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-8">

              {/* Sites WordPress */}
              {items.site && items.site.length > 0 && (
                <CategoryCard title="Sites WordPress" icon={Globe} count={items.site.length}>
                  {items.site.map((item) => (
                    <div key={item.id} className="flex items-center justify-between p-3 rounded-xl bg-white/[0.02] hover:bg-white/[0.05] transition-colors">
                      <div className="flex-1">
                        <div className="text-sm font-medium text-white">{item.name}</div>
                        <div className="flex gap-2 mt-1">
                          {item.details?.domain && <span className="text-xs text-zinc-500">{item.details.domain}</span>}
                          {item.details?.response_time !== undefined && (
                            <span className="text-xs text-zinc-600">{item.details.response_time}s</span>
                          )}
                        </div>
                      </div>
                      <StatusBadge status={item.status} />
                    </div>
                  ))}
                </CategoryCard>
              )}

              {/* Servicos EasyPanel */}
              {items.service && items.service.length > 0 && (
                <CategoryCard title="Servicos" icon={Wifi} count={items.service.length}>
                  <div className="grid grid-cols-2 gap-x-3 gap-y-1.5">
                    {items.service.map((item) => (
                      <div key={item.id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-white/[0.04] transition-colors">
                        <div className={`w-2 h-2 rounded-full flex-shrink-0 ${
                          item.status === 'ok' || item.status === 'up' ? 'bg-emerald-400' :
                          item.status === 'warning' ? 'bg-amber-400' : 'bg-red-400'
                        }`} />
                        <span className="text-sm text-zinc-300 truncate">{item.name}</span>
                      </div>
                    ))}
                  </div>
                </CategoryCard>
              )}

              {/* Containers EasyPanel */}
              {items.container && items.container[0] && (
                <CategoryCard title="Containers Docker" icon={Container}>
                  <div className="text-center py-4">
                    <div className="text-5xl font-bold text-emerald-400">
                      {items.container[0].details?.up || 0}
                    </div>
                    <div className="text-sm text-zinc-400 mt-2">
                      de {items.container[0].details?.total || 0} containers activos
                    </div>
                    {(items.container[0].details?.down || 0) > 0 && (
                      <div className="text-sm text-red-400 mt-1">
                        {items.container[0].details.down} em baixo
                      </div>
                    )}
                    <div className="mt-4 px-4">
                      <ProgressBar
                        percent={Math.round((items.container[0].details?.up / items.container[0].details?.total) * 100) || 0}
                        showLabel={false}
                        inverted
                      />
                    </div>
                  </div>
                </CategoryCard>
              )}

              {/* Backups - 3 camadas */}
              {items.backup && items.backup.length > 0 && (
                <CategoryCard title="Backups" icon={Database} count={items.backup.length}>
                  {items.backup.map((item) => (
                    <div key={item.id} className="flex items-center justify-between p-3 rounded-xl bg-white/[0.02]">
                      <div>
                        <div className="text-sm font-medium text-white">{item.name}</div>
                        {item.details?.age_hours !== undefined && (
                          <div className="text-xs text-zinc-500 mt-1">
                            {item.details.age_hours < 1 ? 'Agora' :
                             item.details.age_hours < 24 ? `ha ${item.details.age_hours}h` :
                             `ha ${Math.floor(item.details.age_hours / 24)}d`}
                          </div>
                        )}
                      </div>
                      <StatusBadge status={item.status} />
                    </div>
                  ))}
                </CategoryCard>
              )}

              {/* Storage */}
              {items.storage && items.storage.length > 0 && (
                <CategoryCard title="Storage" icon={HardDrive} count={items.storage.length}>
                  {items.storage.map((item) => (
                    <div key={item.id} className="p-3 rounded-xl bg-white/[0.02]">
                      <div className="flex items-center justify-between mb-2">
                        <span className="text-sm font-medium text-white">{item.name}</span>
                        <span className="text-xs text-zinc-400">
                          {item.details?.used} / {item.details?.total}
                        </span>
                      </div>
                      <ProgressBar percent={item.details?.percent || 0} />
                    </div>
                  ))}
                </CategoryCard>
              )}

              {/* Manutencao */}
              {items.maintenance && items.maintenance[0] && (() => {
                const m = items.maintenance[0]
                const d = m.details || {}
                const ageH = d.age_hours ?? 0
                const ageLabel = ageH < 1 ? 'agora' : ageH < 24 ? `ha ${ageH}h` : `ha ${Math.floor(ageH / 24)}d`
                const actions = (d.logs_truncated || 0) + (d.images_removed || 0) + (d.orphan_volumes || 0) + (d.tmp_cleaned || 0)
                return (
                  <CategoryCard title="Manutencao" icon={Wrench}>
                    <div className="space-y-3">
                      <div className="flex items-center justify-between p-3 rounded-xl bg-white/[0.02]">
                        <div>
                          <div className="text-sm font-medium text-white">Auto-Cleanup</div>
                          <div className="text-xs text-zinc-500 mt-1">Ultimo: {ageLabel}</div>
                        </div>
                        <StatusBadge status={m.status} />
                      </div>
                      <div className="grid grid-cols-2 gap-2 px-1">
                        <div className="text-center p-2 rounded-lg bg-white/[0.02]">
                          <div className="text-lg font-bold text-white">{d.disk_percent || 0}%</div>
                          <div className="text-xs text-zinc-500">Disco Easy</div>
                        </div>
                        <div className="text-center p-2 rounded-lg bg-white/[0.02]">
                          <div className="text-lg font-bold text-white">{d.freed_mb || 0}<span className="text-xs text-zinc-500">MB</span></div>
                          <div className="text-xs text-zinc-500">Libertado</div>
                        </div>
                      </div>
                      {actions > 0 && (
                        <div className="flex flex-wrap gap-2 px-1">
                          {d.logs_truncated > 0 && <span className="text-xs bg-white/5 px-2 py-1 rounded text-zinc-400">{d.logs_truncated} logs</span>}
                          {d.images_removed > 0 && <span className="text-xs bg-white/5 px-2 py-1 rounded text-zinc-400">{d.images_removed} images</span>}
                          {d.orphan_volumes > 0 && <span className="text-xs bg-white/5 px-2 py-1 rounded text-zinc-400">{d.orphan_volumes} volumes</span>}
                          {d.tmp_cleaned > 0 && <span className="text-xs bg-white/5 px-2 py-1 rounded text-zinc-400">{d.tmp_cleaned} tmp</span>}
                        </div>
                      )}
                    </div>
                  </CategoryCard>
                )
              })()}

              {/* WP Updates - per-site detail from 'site' category */}
              {(() => {
                const sites = items.site || []
                const sitesWithUpdates = sites.filter((s: MonitorItem) => {
                  const counts = s.details?.updates?.counts
                  return counts && counts.total > 0
                })
                const totalUpdates = sitesWithUpdates.reduce((sum: number, s: MonitorItem) => sum + (s.details?.updates?.counts?.total || 0), 0)
                const wpAgg = items.wp_update?.[0]

                return (
                  <CategoryCard title="WordPress Updates" icon={Globe} count={sitesWithUpdates.length > 0 ? sitesWithUpdates.length : undefined}>
                    {sitesWithUpdates.length > 0 ? (
                      <>
                        <div className="text-center pb-3">
                          <div className="text-3xl font-bold text-amber-400">{totalUpdates}</div>
                          <div className="text-xs text-zinc-500 mt-1">updates em {sitesWithUpdates.length} sites</div>
                        </div>
                        {sitesWithUpdates.map((site: MonitorItem) => {
                          const counts = site.details?.updates?.counts || {}
                          return (
                            <div key={site.id} className="p-3 rounded-xl bg-white/[0.02]">
                              <div className="flex items-center justify-between">
                                <span className="text-sm font-medium text-white">{site.name}</span>
                                <span className="text-xs font-semibold text-amber-400">{counts.total} updates</span>
                              </div>
                              <div className="flex gap-3 mt-1">
                                {counts.plugins > 0 && <span className="text-xs text-zinc-500">{counts.plugins} plugins</span>}
                                {counts.themes > 0 && <span className="text-xs text-zinc-500">{counts.themes} temas</span>}
                                {(counts.core || 0) > 0 && <span className="text-xs text-red-400">{counts.core} core</span>}
                              </div>
                            </div>
                          )
                        })}
                      </>
                    ) : wpAgg && (wpAgg.details?.manual_updates || 0) > 0 ? (
                      <div className="text-center py-4">
                        <div className="text-4xl font-bold text-amber-400">{wpAgg.details.manual_updates}</div>
                        <div className="text-sm text-zinc-400 mt-2">plugins precisam update</div>
                        <div className="text-xs text-zinc-600 mt-2">Sem detalhe por site disponivel</div>
                      </div>
                    ) : (
                      <div className="text-center py-4">
                        <CheckCircle2 className="w-12 h-12 text-emerald-400 mx-auto" />
                        <div className="text-sm text-zinc-400 mt-2">Tudo actualizado</div>
                      </div>
                    )}
                  </CategoryCard>
                )
              })()}
            </div>

            {/* Footer */}
            <div className="flex items-center justify-center gap-2 mt-8 text-sm text-zinc-500">
              <Clock className="w-4 h-4" />
              <span>Ultima actualizacao: {new Date().toLocaleTimeString('pt-PT')}</span>
              <span className="text-zinc-700">·</span>
              <span>Auto-refresh: 60s</span>
            </div>
          </motion.div>
        </div>
  )
}

// Mock data reflecting new cluster architecture
function getMockData(): MonitorData {
  const mockItems: Record<string, MonitorItem[]> = {
    server: [
      { id: 1, name: 'Cluster Proxmox', category: 'server', status: 'ok', details: { cpu: 12.5 }, last_check: '' },
      { id: 100, name: 'CWP Server', category: 'server', status: 'ok', details: { cpu: 7.3, ram: 25.1, disk: 39, load: 0.42 }, last_check: '' },
      { id: 101, name: 'EasyPanel', category: 'server', status: 'ok', details: { cpu: 20.5, ram: 53.1, disk: 41, load: 1.2 }, last_check: '' },
      { id: 102, name: 'Dev', category: 'server', status: 'ok', details: { cpu: 3.0, ram: 18.5, disk: 28 }, last_check: '' },
      { id: 103, name: 'Gateway', category: 'server', status: 'ok', details: { cpu: 5.2, ram: 42.0, disk: 52, load: 0.3 }, last_check: '' },
    ],
    service: [
      { id: 1, name: 'Desk CRM', category: 'service', status: 'up', details: {}, last_check: '' },
      { id: 2, name: 'N8N', category: 'service', status: 'up', details: {}, last_check: '' },
      { id: 3, name: 'Gitea', category: 'service', status: 'up', details: {}, last_check: '' },
      { id: 4, name: 'WikiJS', category: 'service', status: 'up', details: {}, last_check: '' },
      { id: 5, name: 'Authentik', category: 'service', status: 'up', details: {}, last_check: '' },
      { id: 6, name: 'Metabase', category: 'service', status: 'up', details: {}, last_check: '' },
      { id: 7, name: 'NextCloud', category: 'service', status: 'up', details: {}, last_check: '' },
      { id: 8, name: 'Syncthing', category: 'service', status: 'up', details: {}, last_check: '' },
      { id: 9, name: 'MCP Gateway', category: 'service', status: 'up', details: {}, last_check: '' },
      { id: 10, name: 'Outline', category: 'service', status: 'up', details: {}, last_check: '' },
      { id: 11, name: 'Penpot', category: 'service', status: 'warning', details: {}, last_check: '' },
      { id: 12, name: 'WhatSMS', category: 'service', status: 'up', details: {}, last_check: '' },
    ],
    site: [
      { id: 1, name: 'Descomplicar', category: 'site', status: 'up', details: { domain: 'descomplicar.pt', response_time: 0.093 }, last_check: '' },
      { id: 2, name: 'Emanuel Almeida', category: 'site', status: 'up', details: { domain: 'emanuelalmeida.pt', response_time: 1.687 }, last_check: '' },
      { id: 3, name: 'Family Clinic', category: 'site', status: 'up', details: { domain: 'familyclinic.pt', response_time: 2.712 }, last_check: '' },
      { id: 4, name: 'WTC', category: 'site', status: 'up', details: { domain: 'wtc-group.com' }, last_check: '' },
      { id: 5, name: 'Carstuff', category: 'site', status: 'down', details: { domain: 'carstuff.pt' }, last_check: '' },
      { id: 6, name: 'Espiral Senior', category: 'site', status: 'up', details: { domain: 'espiralsenior.pt' }, last_check: '' },
      { id: 7, name: 'Karate Gaia', category: 'site', status: 'up', details: { domain: 'karategaia.pt' }, last_check: '' },
    ],
    container: [
      { id: 1, name: 'Docker Swarm', category: 'container', status: 'ok', details: { up: 44, total: 46, down: 2 }, last_check: '' },
    ],
    backup: [
      { id: 1, name: 'Proxmox vzdump', category: 'backup', status: 'ok', details: { age_hours: 8 }, last_check: '' },
      { id: 2, name: 'CWP Accounts', category: 'backup', status: 'ok', details: { age_hours: 18 }, last_check: '' },
      { id: 3, name: 'MySQL Hourly', category: 'backup', status: 'ok', details: { age_hours: 1 }, last_check: '' },
    ],
    storage: [
      { id: 1, name: 'NVMe RAID1 (vg0)', category: 'storage', status: 'ok', details: { used: '650GB', total: '950GB', percent: 68 }, last_check: '' },
      { id: 2, name: 'HDD pbs-local', category: 'storage', status: 'ok', details: { used: '2.9TB', total: '6TB', percent: 49 }, last_check: '' },
      { id: 3, name: 'HDD vm-storage', category: 'storage', status: 'ok', details: { used: '480GB', total: '8.5TB', percent: 6 }, last_check: '' },
    ],
    maintenance: [
      { id: 1, name: 'EasyPanel Cleanup', category: 'maintenance', status: 'ok', details: { age_hours: 2, disk_percent: 41, freed_mb: 128, logs_truncated: 3, images_removed: 5, orphan_volumes: 0, tmp_cleaned: 1 }, last_check: '' },
    ],
    wp_update: [
      { id: 1, name: 'WordPress Plugins', category: 'wp_update', status: 'ok', details: { manual_updates: 0 }, last_check: '' },
    ],
  }

  return {
    overall: 'warning',
    summary: [
      { category: 'server', total: 5, ok: 5, warning: 0, critical: 0 },
      { category: 'service', total: 12, ok: 11, warning: 1, critical: 0 },
      { category: 'site', total: 7, ok: 6, warning: 0, critical: 1 },
      { category: 'container', total: 1, ok: 1, warning: 0, critical: 0 },
      { category: 'backup', total: 3, ok: 3, warning: 0, critical: 0 },
      { category: 'storage', total: 3, ok: 3, warning: 0, critical: 0 },
    ],
    stats: {
      total_ok: 30,
      total_warning: 1,
      total_critical: 1
    },
    items: mockItems,
  }
}