awoooi/apps/web/src/components/panels/ApmPanel.tsx

'use client'

/**
 * ApmPanel — APM 黃金指標面板 (不含 AppLayout)
 * Sprint 5: 從 /apm/page.tsx 抽取
 */

import { useState, useEffect } from 'react'
import { useTranslations } from 'next-intl'
import { TimeSeriesChart } from '@/components/charts/time-series-chart'

const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? ''
const SIGNOZ_URL = process.env.NEXT_PUBLIC_SIGNOZ_URL ?? '/signoz'

interface GoldMetricItem {
  label: string; value: number | string; unit: string | null; trend: number[]; status: string
}
interface GoldMetricsResponse {
  timestamp: string; service_name: string; metrics: GoldMetricItem[]
}

const STATUS_COLOR: Record<string, string> = { healthy: '#22C55E', warning: '#F59E0B', critical: '#cc2200', unknown: '#87867f' }
const STATUS_CHART_COLOR: Record<string, 'success' | 'warning' | 'error' | 'primary'> = { healthy: 'success', warning: 'warning', critical: 'error', unknown: 'primary' }

export function ApmPanel() {
  const t = useTranslations('apm')
  const [data, setData] = useState<GoldMetricsResponse | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    fetch(`${API_BASE}/api/v1/metrics/gold?service_name=awoooi-api&time_window_minutes=10`)
      .then(r => r.json())
      .then((d: GoldMetricsResponse) => { setData(d); setLoading(false) })
      .catch(err => { setError(String(err)); setLoading(false) })
  }, [])

  return (
    <div style={{ padding: '24px', background: '#f5f4ed', minHeight: '100%' }}>
      <div style={{ marginBottom: '20px', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div>
          <h1 style={{ fontSize: 18, fontWeight: 700, color: '#141413', margin: 0, fontFamily: 'var(--font-body), monospace' }}>{t('title')}</h1>
          <p style={{ fontSize: 12, color: '#87867f', margin: '4px 0 0', fontFamily: 'var(--font-body), monospace' }}>{t('subtitle')}</p>
        </div>
        <a href={SIGNOZ_URL} target="_blank" rel="noopener noreferrer" style={{ fontSize: 12, fontWeight: 600, color: '#4A90D9', border: '0.5px solid rgba(74,144,217,0.3)', borderRadius: 6, padding: '5px 12px', textDecoration: 'none', fontFamily: 'var(--font-body), monospace', background: 'rgba(74,144,217,0.05)' }}>
          ↗ {t('openSignoz')}
        </a>
      </div>
      {loading ? (
        <div style={{ padding: '32px', textAlign: 'center', color: '#87867f', fontSize: 13 }}>{t('loading')}</div>
      ) : error ? (
        <div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, padding: '32px', textAlign: 'center', color: '#cc2200', fontSize: 13 }}>{t('error')}</div>
      ) : data && data.metrics.length > 0 ? (
        <>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 12, marginBottom: 16 }}>
            {data.metrics.map((m, i) => {
              const trendPoints = (m.trend ?? []).map((v, idx) => ({ timestamp: idx, value: v }))
              const hasTrend = trendPoints.length > 1
              const chartColor = STATUS_CHART_COLOR[m.status] ?? 'primary'
              return (
                <div key={i} style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, padding: '16px 18px 12px' }}>
                  <div style={{ fontSize: 11, color: '#87867f', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{m.label}</div>
                  <div style={{ fontSize: 24, fontWeight: 700, color: '#141413', lineHeight: 1.2 }}>
                    {typeof m.value === 'number' ? m.value.toFixed(2) : m.value}
                    {m.unit && <span style={{ fontSize: 13, color: '#87867f', marginLeft: 4 }}>{m.unit}</span>}
                  </div>
                  <div style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: STATUS_COLOR[m.status] ?? '#87867f', display: 'inline-block' }} />
                    <span style={{ fontSize: 11, fontWeight: 600, color: STATUS_COLOR[m.status] ?? '#87867f', textTransform: 'uppercase' }}>{m.status}</span>
                  </div>
                  {hasTrend && <TimeSeriesChart data={trendPoints} height={48} color={chartColor} unit={m.unit ?? undefined} showYAxis={false} showGradient={true} className="mt-1" />}
                </div>
              )
            })}
          </div>
          <div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, padding: '12px 16px' }}>
            <span style={{ fontSize: 11, color: '#87867f' }}>
              Service: <strong style={{ color: '#141413' }}>{data.service_name}</strong>{' · '}{new Date(data.timestamp).toLocaleString('zh-TW', { timeZone: 'Asia/Taipei' })}
            </span>
          </div>
        </>
      ) : (
        <div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, padding: '60px 24px', textAlign: 'center' }}>
          <div style={{ fontSize: 32, color: '#e0ddd4', marginBottom: 16 }}>◎</div>
          <div style={{ fontSize: 15, fontWeight: 700, color: '#141413', marginBottom: 8 }}>{t('noData')}</div>
          <div style={{ fontSize: 12, color: '#87867f', maxWidth: 340, margin: '0 auto' }}>{t('noDataDescription')}</div>
        </div>
      )}
    </div>
  )
}