'use client'

/**
 * 可觀測性 (/observability) — Sprint 5 整合頁面
 * ================================================
 * 整合: 服務監控 + APM + 錯誤追蹤 + 應用 + 服務目錄
 * 全部使用 Panel 元件 (無雙重 AppLayout)
 *
 * 零假數據: 全部串接真實 API
 *
 * 建立時間: 2026-04-08 (台北時區)
 * 更新時間: 2026-04-09 — 全部 Tab Panel 抽取完成
 */

import { useTranslations } from 'next-intl'
import { AppLayout } from '@/components/layout'
import { PageTabs, type TabConfig } from '@/components/layout/page-tabs'
import { MonitoringPanel } from '@/components/panels/MonitoringPanel'
import { ApmPanel } from '@/components/panels/ApmPanel'
import { ErrorsPanel } from '@/components/panels/ErrorsPanel'
import { AppsPanel } from '@/components/panels/AppsPanel'
import { ServicesPanel } from '@/components/panels/ServicesPanel'

export default function ObservabilityPage({ params }: { params: { locale: string } }) {
  const t = useTranslations('nav')

  const tabs: TabConfig[] = [
    {
      id: 'monitoring',
      label: t('monitoring'),
      content: <MonitoringPanel />,
    },
    {
      id: 'apm',
      label: t('apm'),
      content: <ApmPanel />,
    },
    {
      id: 'errors',
      label: t('errors'),
      content: <ErrorsPanel />,
    },
    {
      id: 'apps',
      label: t('apps'),
      content: <AppsPanel />,
    },
    {
      id: 'services',
      label: t('services'),
      content: <ServicesPanel />,
    },
  ]

  return (
    <AppLayout locale={params.locale}>
      <PageTabs tabs={tabs} defaultTab="monitoring" syncWithUrl={true} />
    </AppLayout>
  )
}
