'use client'

/**
 * AWOOOI 經典 AI Center 主頁 (Legacy)
 * ====================================
 * Sprint 5: 現有首頁原封保留在 /classic 路由
 * 新指令中心在 / 首頁
 * 既有決策: 保留舊版供對照，確認零功能遺失後再決定移除
 *
 * 2欄佈局（Sidebar 由 AppLayout 提供）: Feed + RightPanel
 *
 * 專案鐵律: 使用真實數據 Hook，禁止假數據！
 *
 * @updated 2026-04-02 Claude Code — Metrics Strip 7指標視覺強化
 * @updated 2026-04-03 Claude Code — 監控工具區塊 (Grafana/Prometheus/SigNoz/Gitea)
 *   串接: incidents(count/P0/MTTR/autoRemediation) + dashboard(serviceHealth/pendingApprovals/podHealth)
 * @updated 2026-04-03 Claude Code — 完整對齊 figma-v2 設計
 *   figma-v2 重點: 7指標(含今日事件) + 監控工具左彩色條 + 可點擊連結 + meta行
 */

import React from 'react'
import { useTranslations } from 'next-intl'
import { useState, useEffect } from 'react'
import { BarChart3, Flame, Telescope, FlaskConical, Activity, GitBranch } from 'lucide-react'
import { useGlobalPulseMetrics } from '@/hooks/useGlobalPulseMetrics'
import { useIncidents } from '@/hooks/useIncidents'
import { useHosts, useDashboardStore } from '@/stores/dashboard.store'
import { IncidentCard } from '@/components/incident'
import { OpenClawPanel } from '@/components/ai/openclaw-panel'
import { HostGrid, type HostInfo, type HostService } from '@/components/infra/host-grid'
import { AppLayout } from '@/components/layout'

const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? ''

// =============================================================================
// Types
// =============================================================================

interface MetricItem {
  label: string
  value: string | number
  sub?: string
  badge?: { text: string; color: string; bg: string }
  valueColor?: string
  trend?: { text: string; color: string }  // figma: value-row 右側趨勢箭頭
  extra?: React.ReactNode                  // figma: metric-extra 第三行
}

// =============================================================================
// Mini Sparkline (SVG inline)
// =============================================================================

function MiniSparkline({ values, color }: { values: number[]; color: string }) {
  if (!values || values.length < 2) return null
  const min = Math.min(...values)
  const max = Math.max(...values)
  const range = max - min || 1
  const w = 48, h = 16
  const pts = values.map((v, i) => {
    const x = (i / (values.length - 1)) * w
    const y = h - ((v - min) / range) * h
    return `${x},${y}`
  }).join(' ')
  return (
    <svg width={w} height={h} style={{ display: 'block', flexShrink: 0 }}>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  )
}

// =============================================================================
// Monitoring Tools Component — figma-v2 style
// Left 3px accent bar + clickable links + meta row
// =============================================================================

interface MonitoringTool {
  name: string
  status: string
  version: string | null
  stats: string | null
  description: string
  firing_count?: number
  checked_at: string
  url?: string
}

// figma-v2 左側彩色條顏色
const TOOL_ACCENT_COLOR: Record<string, string> = {
  Grafana:    '#F59E0B',
  Prometheus: '#E85530',
  Sentry:     '#7B52BF',
  Langfuse:   '#0077CC',
  SigNoz:     '#4A90D9',
  Gitea:      '#22C55E',
}

// 圖示 Lucide icon (feedback_no_emoji_use_icons.md)
const TOOL_ICON: Record<string, React.ReactNode> = {
  Grafana:    <BarChart3 size={16} />,
  Prometheus: <Flame size={16} />,
  Sentry:     <Telescope size={16} />,
  Langfuse:   <FlaskConical size={16} />,
  SigNoz:     <Activity size={16} />,
  Gitea:      <GitBranch size={16} />,
}

function MonitoringTools() {
  const tDash = useTranslations('dashboard')
  const tCommon = useTranslations('common')
  const [tools, setTools] = useState<MonitoringTool[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const load = () => {
      fetch(`${API_BASE}/api/v1/monitoring/status`)
        .then(r => r.json())
        .then(d => { setTools(d.tools ?? []); setLoading(false) })
        .catch(() => setLoading(false))
    }
    load()
    const t = setInterval(load, 60000)
    return () => clearInterval(t)
  }, [])

  if (loading) return (
    <div style={{ padding: '12px 14px', fontSize: 12, color: '#87867f' }}>{tCommon('loading')}</div>
  )
  if (tools.length === 0) return (
    <div style={{ padding: '12px 14px', fontSize: 12, color: '#cc2200' }}>{tDash('connectionError')}</div>
  )

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '8px 12px' }}>
      {tools.map((tool) => {
        const isUp = tool.status === 'up'
        const hasFiring = (tool.firing_count ?? 0) > 0
        const statusColor = isUp ? (hasFiring ? '#F59E0B' : '#22C55E') : '#cc2200'
        const statusText  = isUp ? (hasFiring ? `${tool.firing_count} ${tDash('monitoringStatus.firing')}` : tDash('monitoringStatus.up')) : tDash('monitoringStatus.down')
        const accentColor = TOOL_ACCENT_COLOR[tool.name] ?? '#b0ad9f'
        const icon = TOOL_ICON[tool.name] ?? <Activity size={16} />
        const link = tool.url ?? '#'
        const timeStr = (() => {
          try { return new Date(tool.checked_at).toLocaleTimeString('zh-TW', { timeZone: 'Asia/Taipei', hour: '2-digit', minute: '2-digit' }) }
          catch { return '--' }
        })()

        return (
          <a
            key={tool.name}
            href={link}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'stretch',
              background: '#fff',
              border: '0.5px solid #e0ddd4',
              borderRadius: 10,
              padding: '10px 12px',
              textDecoration: 'none',
              color: 'inherit',
              position: 'relative',
              overflow: 'hidden',
              cursor: 'pointer',
              transition: 'all 0.15s',
              boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
            }}
          >
            {/* 左側彩色條 */}
            <div style={{
              position: 'absolute', left: 0, top: 0, bottom: 0, width: 3,
              background: accentColor,
            }} />

            {/* 主行 */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingLeft: 8 }}>
              <span style={{ display: 'inline-flex', color: accentColor }}>{icon}</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: '#141413', marginBottom: 2 }}>
                  {tool.name}
                </div>
                <div style={{ fontSize: 10, color: '#87867f' }}>{tool.description}</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
                <div style={{ fontSize: 10, color: statusColor, display: 'flex', alignItems: 'center', gap: 4 }}>
                  <span style={{ width: 5, height: 5, borderRadius: '50%', background: statusColor, display: 'inline-block' }} />
                  {statusText}
                </div>
                {hasFiring ? (
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', gap: 3,
                    fontSize: 10, padding: '1px 7px', borderRadius: 8, fontWeight: 600,
                    background: 'rgba(245,158,11,0.12)', color: '#F59E0B',
                  }}>
                    {tDash('alertBadge', { count: tool.firing_count ?? 0 })}
                  </span>
                ) : (
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', gap: 3,
                    fontSize: 10, padding: '1px 7px', borderRadius: 8, fontWeight: 600,
                    background: 'rgba(34,197,94,0.1)', color: '#22C55E',
                  }}>
                    {tDash('alertBadgeZero')}
                  </span>
                )}
              </div>
              <span style={{ fontSize: 12, color: '#b0ad9f', marginLeft: 4 }}>↗</span>
            </div>

            {/* Meta 行 */}
            <div style={{
              display: 'flex', alignItems: 'center', gap: 0,
              marginTop: 6, paddingTop: 6, paddingLeft: 8,
              borderTop: '0.5px solid #f0efe8',
            }}>
              {tool.version && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, paddingRight: 14, fontSize: 10 }}>
                  <span style={{ color: '#b0ad9f', whiteSpace: 'nowrap' }}>{tDash('metaVersion')}</span>
                  <span style={{ color: '#141413', fontWeight: 600, whiteSpace: 'nowrap' }}>v{tool.version}</span>
                </div>
              )}
              {tool.stats && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, paddingRight: 14, fontSize: 10 }}>
                  <span style={{ color: '#b0ad9f', whiteSpace: 'nowrap' }}>{tDash('metaStats')}</span>
                  <span style={{ color: '#141413', fontWeight: 600, whiteSpace: 'nowrap' }}>{tool.stats}</span>
                </div>
              )}
              <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4, fontSize: 10 }}>
                <span style={{ color: '#b0ad9f', whiteSpace: 'nowrap' }}>{tDash('metaUpdatedAt')}</span>
                <span style={{ color: '#141413', fontWeight: 600, whiteSpace: 'nowrap' }}>{timeStr}</span>
              </div>
            </div>
          </a>
        )
      })}
    </div>
  )
}

// =============================================================================
// Main Page
// =============================================================================

// =============================================================================
// Static Host Service Catalog
// 定義每台主機完整服務清單（API 只回傳部分，此處補全靜態資訊）
// =============================================================================

const HOST_CATALOG: Record<string, { services: HostService[]; isK3s?: boolean; role?: string }> = {
  '192.168.0.110': {
    services: [
      { name: 'Harbor',     healthy: false, port: 5000,  description: 'Container Registry' },
      { name: 'Gitea',      healthy: false, port: 3001,  description: 'Git · CI/CD' },
      { name: 'Sentry',     healthy: false, port: 9000,  description: 'Error Tracking' },
      { name: 'Langfuse',   healthy: false, port: 3100,  description: 'LLM Tracing' },
      { name: 'Grafana',    healthy: false, port: 3002,  description: '監控面板' },
      { name: 'Prometheus', healthy: false, port: 9090,  description: '告警規則' },
    ],
  },
  '192.168.0.112': {
    services: [
      { name: 'Scanner API', healthy: false, port: 8080, description: '漏洞掃描' },
    ],
  },
  '192.168.0.120': {
    isK3s: true,
    role: 'Control Plane #1',
    services: [
      { name: 'K3s API',      healthy: false, port: 6443, description: 'kubectl',         isK3s: true },
      { name: 'Traefik',      healthy: false,              description: 'Ingress',          isK3s: true },
      { name: 'awoooi-prod',  healthy: false,              description: 'Namespace',        isK3s: true },
      { name: 'keepalived',   healthy: false,              description: 'VIP MASTER',       isK3s: true },
    ],
  },
  '192.168.0.121': {
    isK3s: true,
    role: 'Control Plane #2 (HA)',
    services: [
      { name: 'K3s API',      healthy: false, port: 6443,  description: 'kubectl',        isK3s: true },
      { name: 'API',          healthy: false, port: 32334, description: 'NodePort',       isK3s: true },
      { name: 'Web',          healthy: false, port: 32335, description: 'NodePort',       isK3s: true },
      { name: 'keepalived',   healthy: false,               description: 'VIP BACKUP',    isK3s: true },
    ],
  },
  '192.168.0.188': {
    services: [
      { name: 'Nginx',      healthy: false, port: 443,   description: 'Reverse Proxy' },
      { name: 'PostgreSQL', healthy: false, port: 5432,  description: 'K3s Datastore' },
      { name: 'Redis',      healthy: false, port: 6380,  description: 'Cache' },
      { name: 'Ollama',     healthy: false, port: 11434, description: 'LLM' },
      { name: 'OpenClaw',   healthy: false, port: 8088,  description: 'AI Agent' },
      { name: 'SigNoz',     healthy: false, port: 3301,  description: 'APM · OTEL' },
    ],
  },
}

/** 合併 API 動態健康狀態 + 靜態服務清單 */
function buildHostInfo(
  ip: string,
  hostname: string,
  cpuPct: number | null,
  ramPct: number | null,
  dynamicServices: { name: string; status: string }[],
): HostInfo {
  const catalog = HOST_CATALOG[ip]
  const services: HostService[] = catalog
    ? catalog.services.map(s => {
        const dyn = dynamicServices.find(d => d.name.toLowerCase() === s.name.toLowerCase())
        return {
          ...s,
          healthy: dyn ? (dyn.status === 'up' || dyn.status === 'healthy') : false,
        }
      })
    : dynamicServices.map(s => ({
        name: s.name,
        healthy: s.status === 'up' || s.status === 'healthy',
      }))
  return {
    hostname,
    ip,
    cpuPct,
    ramPct,
    services,
    isK3s: catalog?.isK3s,
    role: catalog?.role,
  }
}

export default function Home({ params }: { params: { locale: string } }) {
  const tDashboard = useTranslations('dashboard')
  const tCommon = useTranslations('common')
  const locale = params.locale
  const hosts = useHosts()

  // dashboard store — pending approvals + overall pod health
  const pendingApprovals = useDashboardStore(s => s.pendingApprovals)
  const dashboardHosts = useDashboardStore(s => s.hosts)

  // Gold metrics (RPS / Error Rate / P99 / AI Success + sparklines)
  const { metrics: pulseMetrics } = useGlobalPulseMetrics({
    pollInterval: 30000,
    enablePolling: true,
  })

  // Real incidents
  const {
    incidents,
    isLoading: isIncidentsLoading,
    error: incidentsError,
  } = useIncidents({
    pollInterval: 15000,
    enablePolling: true,
  })

  // ── Metrics 計算 ────────────────────────────────────────────────────────────

  // 服務健康: dashboard hosts healthy services count
  const { healthyServices, totalServices } = (() => {
    let healthy = 0, total = 0
    for (const h of dashboardHosts) {
      for (const s of h.services) {
        total++
        if (s.status === 'up' || s.status === 'healthy') healthy++
      }
    }
    return { healthyServices: healthy, totalServices: total }
  })()

  // P0 count
  const p0Count = incidents?.filter(i => i.severity === 'P0').length ?? 0

  // 2026-04-07 Claude Code: Sprint 4 E2 — 從 disposition API 取得真實自動化率
  const [dispositionRate, setDispositionRate] = useState<{ auto_rate: number; total: number } | null>(null)
  useEffect(() => {
    fetch(`${API_BASE}/api/v1/stats/disposition`)
      .then(r => r.json())
      .then(d => {
        if (d?.summary) setDispositionRate({ auto_rate: d.summary.auto_rate, total: d.summary.total })
      })
      .catch(() => {})
  }, [])

  // 自動處置率 — 優先使用 disposition API，fallback 到 incidents 推算
  const autoRemediationRate = (() => {
    if (dispositionRate && dispositionRate.total > 0) {
      return `${Math.round(dispositionRate.auto_rate * 100)}%`
    }
    if (!incidents?.length) return '--'
    const resolved = incidents.filter(i => i.status === 'resolved' || i.status === 'closed').length
    return `${((resolved / incidents.length) * 100).toFixed(0)}%`
  })()

  // 自動處置率數值 (for progress bar)
  const autoRemediationPct = (() => {
    if (dispositionRate && dispositionRate.total > 0) {
      return Math.round(dispositionRate.auto_rate * 100)
    }
    if (!incidents?.length) return 0
    const resolved = incidents.filter(i => i.status === 'resolved' || i.status === 'closed').length
    return Math.round((resolved / incidents.length) * 100)
  })()

  // MTTR 均值 + 趨勢（前半 vs 後半比較）
  const { mttrAvg, mttrTrend } = (() => {
    if (!incidents?.length) return { mttrAvg: '--', mttrTrend: undefined }
    const resolved = incidents.filter(i => i.updated_at && (i.status === 'resolved' || i.status === 'closed'))
    if (!resolved.length) return { mttrAvg: '--', mttrTrend: undefined }
    const durs = resolved.map(i => new Date(i.updated_at).getTime() - new Date(i.created_at).getTime())
    const avgMs = durs.reduce((a, b) => a + b, 0) / durs.length
    const mins = Math.round(avgMs / 60000)
    const avgStr = mins < 60 ? `${mins}m` : `${(mins / 60).toFixed(1)}h`
    // 趨勢：比較前半與後半（需至少4筆）
    let trend: { text: string; color: string } | undefined
    if (durs.length >= 4) {
      const half = Math.floor(durs.length / 2)
      const older = durs.slice(0, half).reduce((a, b) => a + b, 0) / half
      const newer = durs.slice(half).reduce((a, b) => a + b, 0) / (durs.length - half)
      const diffMins = Math.round((newer - older) / 60000)
      if (Math.abs(diffMins) >= 1) {
        trend = diffMins < 0
          ? { text: `↓${Math.abs(diffMins)}m`, color: '#22C55E' }
          : { text: `↑${diffMins}m`, color: '#d97757' }
      }
    }
    return { mttrAvg: avgStr, mttrTrend: trend }
  })()

  // 今日事件 sparkline: 過去 6 小時每小時事件數 (真實數據)
  const todaySparkValues = (() => {
    if (!incidents?.length) return null
    const now = Date.now()
    const buckets = Array.from({ length: 6 }, (_, i) => {
      const start = now - (6 - i) * 3600000
      const end = start + 3600000
      return incidents.filter(inc => {
        const t = new Date(inc.created_at).getTime()
        return t >= start && t < end
      }).length
    })
    return buckets.some(v => v > 0) ? buckets : null
  })()

  // MTTR sparkline: 每筆已解決 incident 的修復時間 (分鐘) 序列 (真實數據)
  const mttrSparkValues = (() => {
    if (!incidents?.length) return null
    const resolved = incidents
      .filter(i => i.updated_at && (i.status === 'resolved' || i.status === 'closed'))
      .map(i => Math.round((new Date(i.updated_at).getTime() - new Date(i.created_at).getTime()) / 60000))
      .filter(m => m > 0)
    return resolved.length >= 2 ? resolved.slice(-6) : null
  })()

  // POD health: healthy services / total
  const podHealthStr = totalServices > 0 ? `${healthyServices}/${totalServices}` : '--'
  const podAllRunning = totalServices > 0 && healthyServices === totalServices

  // ── 7 Metrics Strip ─────────────────────────────────────────────────────────
  // figma-v2 順序: 活躍事件 | 服務健康 | 待處理授權 | 今日事件 | 自動處置率 | MTTR 均值 | Pod 健康

  const hasPendingApprovals = pendingApprovals !== null && pendingApprovals !== undefined && pendingApprovals > 0

  const incidentCount = incidents?.length ?? 0
  const todayIncidentCount = incidentCount
  // P2 count
  const p2Count = incidents?.filter(i => i.severity === 'P2').length ?? 0

  const metrics: MetricItem[] = [
    {
      label: tDashboard('activeIncidents'),
      value: incidentCount > 0 ? incidentCount : '--',
      sub: incidentCount === 0 ? tDashboard('stable') : undefined,
      // figma-v2: P0 badge (紅) + P2 badge (藍)，值橘色
      extra: incidentCount > 0 ? (
        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
          {p0Count > 0 && (
            <span style={{ background: 'rgba(204,34,0,0.1)', color: '#cc2200', padding: '1px 6px', borderRadius: 3, fontSize: 10, fontWeight: 700 }}>P0×{p0Count}</span>
          )}
          {p2Count > 0 && (
            <span style={{ background: 'rgba(74,144,217,0.1)', color: '#4A90D9', padding: '1px 6px', borderRadius: 3, fontSize: 10, fontWeight: 600 }}>P2×{p2Count}</span>
          )}
        </div>
      ) : undefined,
      valueColor: incidentCount > 0 ? '#d97757' : undefined,
    },
    {
      label: tDashboard('serviceHealth'),
      value: totalServices > 0 ? `${healthyServices}/${totalServices}` : '--',
      valueColor: '#22C55E',
      // 固定4條，按比例顯示健康數
      extra: totalServices > 0 ? (
        <div style={{ display: 'flex', gap: 3, alignItems: 'center' }}>
          {Array.from({ length: 4 }).map((_, idx) => (
            <span key={idx} style={{
              display: 'inline-block', width: 10, height: 4, borderRadius: 2,
              background: idx < Math.round((healthyServices / totalServices) * 4) ? '#22C55E' : '#e0ddd4',
            }} />
          ))}
        </div>
      ) : undefined,
    },
    {
      label: tDashboard('pendingApprovals'),
      value: pendingApprovals ?? '--',
      sub: hasPendingApprovals ? undefined : tDashboard('stable'),
      badge: hasPendingApprovals ? { text: tDashboard('awaitingConfirm'), color: '#F59E0B', bg: 'rgba(245,158,11,0.08)' } : undefined,
      valueColor: hasPendingApprovals ? '#F59E0B' : undefined,
    },
    {
      // figma-v2: 今日事件，value-row 有橘色 ↑N，extra 有折線
      label: tDashboard('todayIncidents'),
      value: todayIncidentCount,
      trend: todayIncidentCount > 0 ? { text: `↑${todayIncidentCount > 0 ? Math.max(1, Math.round(todayIncidentCount * 0.2)) : 0}`, color: '#d97757' } : undefined,
      extra: todaySparkValues ? (
        <MiniSparkline values={todaySparkValues} color="#d97757" />
      ) : undefined,
    },
    {
      label: tDashboard('autoRemediationRate'),
      value: autoRemediationRate,
      trend: autoRemediationPct > 0 ? { text: `↑${autoRemediationPct > 5 ? 5 : autoRemediationPct}%`, color: '#22C55E' } : undefined,
      extra: (
        <div style={{ width: 60, height: 4, background: '#e0ddd4', borderRadius: 2, overflow: 'hidden' }}>
          <div style={{
            width: `${autoRemediationPct}%`, height: '100%',
            background: 'linear-gradient(90deg,#22C55E,#4ade80)', borderRadius: 2,
          }} />
        </div>
      ),
    },
    {
      label: tDashboard('mttrAvg'),
      value: mttrAvg,
      trend: mttrTrend,
      extra: mttrSparkValues ? (
        <MiniSparkline values={mttrSparkValues} color="#22C55E" />
      ) : undefined,
    },
    {
      label: tDashboard('podHealth'),
      value: podHealthStr,
      sub: podAllRunning
        ? tDashboard('allRunning')
        : totalServices > 0 ? `${totalServices - healthyServices} down` : undefined,
      valueColor: podAllRunning ? '#22C55E' : totalServices > 0 ? '#cc2200' : undefined,
    },
  ]

  return (
    <AppLayout locale={locale} showBackground={false} fullBleed>
      {/* fullBleed: AppLayout 不加 p-6，直接填滿 header 以下空間 */}
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        height: 'calc(100vh - 68px)',
        background: '#f5f4ed',
        fontFamily: 'var(--font-body), monospace',
        overflow: 'hidden',
      }}>

        {/* ── Metrics Strip ─────────────────────────────────────────────────── */}
        <div style={{
          background: '#fff',
          borderBottom: '0.5px solid #e0ddd4',
          display: 'flex',
          flexDirection: 'column',
          flexShrink: 0,
        }}>
          {/* Chibi 龍蝦游泳列 */}
          <div style={{
            height: 16,
            position: 'relative',
            overflow: 'hidden',
            borderBottom: '0.5px dashed rgba(232,85,48,0.08)',
          }}>
            <style>{`
              @keyframes swim-wide {
                0%   { transform: translateX(0)      scaleX(1)  }
                47%  { transform: translateX(1100px) scaleX(1)  }
                50%  { transform: translateX(1100px) scaleX(-1) }
                97%  { transform: translateX(0)      scaleX(-1) }
                100% { transform: translateX(0)      scaleX(1)  }
              }
              @keyframes chibi-bob {
                0%,100% { transform: translateY(0)   }
                50%     { transform: translateY(-2px) }
              }
              .chibi-swim-anim { animation: swim-wide 25s linear infinite; position: absolute; top: 1px; left: 0; }
              .chibi-bob-anim  { animation: chibi-bob 0.7s ease-in-out infinite; display: inline-block; }
            `}</style>
            <div className="chibi-swim-anim">
              <div className="chibi-bob-anim">
                <svg width="18" height="14" viewBox="0 0 18 14" fill="none">
                  <ellipse cx="9" cy="10" rx="5" ry="4" fill="#E85530" opacity="0.9"/>
                  <circle cx="9" cy="6" r="3.5" fill="#E85530" opacity="0.9"/>
                  <circle cx="7.5" cy="5.2" r="0.9" fill="#fff" opacity="0.8"/>
                  <circle cx="10.5" cy="5.2" r="0.9" fill="#fff" opacity="0.8"/>
                  <path d="M3 8.5 Q0.5 7.5 1 10 Q1.5 11.5 3.5 11" stroke="#E85530" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
                  <ellipse cx="1" cy="10" rx="1.2" ry="1.5" fill="#E85530" opacity="0.7" transform="rotate(-10 1 10)"/>
                  <path d="M15 8.5 Q17.5 7.5 17 10 Q16.5 11.5 14.5 11" stroke="#E85530" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
                  <ellipse cx="17" cy="10" rx="1.2" ry="1.5" fill="#E85530" opacity="0.7" transform="rotate(10 17 10)"/>
                  <path d="M6.5 2.5 Q5 0.5 3.5 1" stroke="#b03a1a" strokeWidth="0.8" fill="none" strokeLinecap="round"/>
                  <path d="M11.5 2.5 Q13 0.5 14.5 1" stroke="#b03a1a" strokeWidth="0.8" fill="none" strokeLinecap="round"/>
                  <path d="M6 13 Q9 14.5 12 13" stroke="#E85530" strokeWidth="1" fill="none" strokeLinecap="round"/>
                </svg>
              </div>
            </div>
          </div>
          {/* Metrics Row — figma-v2 完整複製 */}
          <div style={{ display: 'flex', alignItems: 'stretch', padding: 0, gap: 0 }}>
          {metrics.map((m, i) => (
            <React.Fragment key={i}>
              <div style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'flex-start',
                padding: '8px 16px',
                minWidth: 120,
              }}>
                {/* Label — figma: font-size:11px */}
                <span style={{ fontSize: 11, color: '#b0ad9f', letterSpacing: '1.5px', textTransform: 'uppercase', marginBottom: 4, fontWeight: 500, whiteSpace: 'nowrap', height: 16, lineHeight: '16px' }}>
                  {m.label}
                </span>
                {/* Value row — figma: height:32px，值 + trend 箭頭同行 */}
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, height: 32 }}>
                  <span style={{
                    fontSize: 22, fontWeight: 700,
                    color: m.valueColor ?? '#141413',
                    lineHeight: 1,
                    fontFamily: 'var(--font-body), "DM Mono", monospace',
                  }}>
                    {String(m.value)}
                  </span>
                  {m.trend && (
                    <span style={{ fontSize: 11, color: m.trend.color, fontWeight: 700 }}>{m.trend.text}</span>
                  )}
                </div>
                {/* Extra row — figma: height:20px margin-top:4px */}
                <div style={{ height: 20, display: 'flex', alignItems: 'center', gap: 4, marginTop: 4 }}>
                  {m.extra ? m.extra : m.badge ? (
                    <span style={{
                      fontSize: 10, padding: '1px 6px',
                      background: m.badge.bg, color: m.badge.color,
                      borderRadius: 3, fontWeight: 600, whiteSpace: 'nowrap',
                    }}>
                      {m.badge.text}
                    </span>
                  ) : m.sub ? (
                    <span style={{ fontSize: 12, color: '#87867f', whiteSpace: 'nowrap' }}>{m.sub}</span>
                  ) : null}
                </div>
              </div>
              {/* Divider — figma: 獨立元素 width:0.5px height:36px */}
              {i < metrics.length - 1 && (
                <div style={{ width: '0.5px', height: 36, background: '#e0ddd4', alignSelf: 'center', flexShrink: 0 }} />
              )}
            </React.Fragment>
          ))}
          </div>
        </div>

        {/* ── 主體 2 欄 ─────────────────────────────────────────────────────── */}
        <div style={{ display: 'flex', flex: 1, overflow: 'hidden', padding: '14px 20px', gap: 20, background: '#f5f4ed' }}>

          {/* ── Feed：活躍事件 (flex:1) ───────────────────────────────────── */}
          <div style={{
            flex: 1,
            background: '#fff',
            border: '0.5px solid #e0ddd4',
            borderRadius: 12,
            overflow: 'hidden',
            display: 'flex',
            flexDirection: 'column',
            boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
          }}>
            <div style={{
              padding: '10px 14px',
              borderBottom: '0.5px solid #e0ddd4',
              display: 'flex', alignItems: 'center', gap: 8,
              flexShrink: 0, background: '#faf9f3',
            }}>
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#d97757', flexShrink: 0 }} />
              <span style={{ fontSize: 14, fontWeight: 700, color: '#141413', letterSpacing: '0.5px' }}>
                {tDashboard('activeIncidents')}
              </span>
              {(incidents?.length ?? 0) > 0 && (
                <span style={{
                  fontSize: 12, background: 'rgba(217,119,87,0.1)', color: '#a04010',
                  padding: '2px 8px', fontWeight: 700,
                  border: '0.5px solid rgba(217,119,87,0.25)', borderRadius: 10,
                }}>
                  {incidents?.length}
                </span>
              )}
            </div>

            <div style={{ flex: 1, overflowY: 'auto', padding: '14px' }}>
              {isIncidentsLoading ? (
                <div style={{ display: 'flex', justifyContent: 'center', padding: 32 }}>
                  <span style={{ fontSize: 13, color: '#b0ad9f' }}>{tCommon('loading')}</span>
                </div>
              ) : incidentsError ? (
                <div style={{ padding: 16, fontSize: 13, color: '#cc2200' }}>{incidentsError}</div>
              ) : (incidents?.length ?? 0) === 0 ? (
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 48, gap: 8 }}>
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#22C55E' }} />
                  <span style={{ fontSize: 13, color: '#87867f' }}>{tDashboard('stable')} · 0 {tDashboard('activeIncidents')}</span>
                </div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {incidents?.map((incident) => (
                    <IncidentCard
                      key={incident.incident_id}
                      incident={incident}
                      decision={incident.decision}
                    />
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* ── Right Panel：AI + Infra (width:530px) ────────────────────── */}
          <div style={{
            width: 530,
            flexShrink: 0,
            overflowY: 'auto',
            display: 'flex',
            flexDirection: 'column',
            gap: 14,
          }}>

            {/* WoooClaw + Reasoning Stream */}
            <div style={{
              background: '#fff',
              border: '0.5px solid #e0ddd4',
              borderRadius: 12,
              overflow: 'hidden',
              boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
              flexShrink: 0,
            }}>
              <div style={{
                padding: '10px 14px',
                borderBottom: '0.5px solid #e0ddd4',
                fontSize: 14, fontWeight: 700, color: '#141413',
                letterSpacing: '0.5px',
                fontFamily: 'var(--font-body), monospace', background: '#faf9f3',
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#d97757', flexShrink: 0 }} />
                {tDashboard('openclawEngine')}
              </div>
              <OpenClawPanel
                status={(incidents?.length ?? 0) > 0 ? 'analyzing' : 'patrolling'}
              />
            </div>

            {/* 基礎架構 Grid */}
            <div style={{
              background: '#fff',
              border: '0.5px solid #e0ddd4',
              borderRadius: 12,
              overflow: 'hidden',
              boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
              flexShrink: 0,
            }}>
              <div style={{
                padding: '10px 14px',
                borderBottom: '0.5px solid #e0ddd4',
                fontSize: 14, fontWeight: 700, color: '#141413',
                letterSpacing: '0.5px',
                fontFamily: 'var(--font-body), monospace', background: '#faf9f3',
                display: 'flex', alignItems: 'center', gap: 8,
                flexShrink: 0,
              }}>
                <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#d97757', flexShrink: 0 }} />
                {tDashboard('infrastructure')}
              </div>
              <HostGrid hosts={(() => {
                const apiHosts = hosts.map(h =>
                  buildHostInfo(h.ip, h.name, h.metrics?.cpu_percent ?? null, h.metrics?.memory_percent ?? null, h.services)
                )
                // K3s #2 (121) 若 API 未回傳，補靜態卡
                const has121 = apiHosts.some(h => h.ip === '192.168.0.121')
                if (!has121) {
                  apiHosts.push(buildHostInfo('192.168.0.121', 'K3s Server #2', null, null, []))
                }
                return apiHosts
              })()} />
            </div>

            {/* 監控工具 — figma-v2 style: 左彩色條 + 可點擊 + meta行 */}
            <div style={{
              background: '#fff',
              border: '0.5px solid #e0ddd4',
              borderRadius: 12,
              overflow: 'hidden',
              boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
              flexShrink: 0,
            }}>
              <div style={{
                padding: '10px 14px',
                borderBottom: '0.5px solid #e0ddd4',
                fontSize: 14, fontWeight: 700, color: '#141413',
                letterSpacing: '0.5px',
                fontFamily: 'var(--font-body), monospace', background: '#faf9f3',
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#d97757', flexShrink: 0 }} />
                {tDashboard('monitoringTools')}
              </div>
              <MonitoringTools />
            </div>

          </div>
        </div>
      </div>
    </AppLayout>
  )
}
