'use client'

// 2026-04-26 P2.5 by Claude — AIOps Timeline
// ============================================================
// AIOps 全景時序頁面
// 告警→感官調查→AI決策→自動執行→驗證→學習 完整鏈路視覺化
//
// 範例資料模式：NEXT_PUBLIC_AIOPS_TIMELINE_MOCK=true
// 真實 API: GET /api/v1/aiops/timeline?incident_id=&limit=20
// ============================================================

import dynamic from 'next/dynamic'
import { AppLayout } from '@/components/layout'

// SSR 跳過 — Timeline 面板含動畫與 client-only state
const AiopsTimelinePanel = dynamic(
  () => import('@/components/aiops/timeline/AiopsTimelinePanel'),
  {
    ssr: false,
    loading: () => (
      <div className="flex items-center justify-center py-24">
        <div className="w-5 h-5 rounded-full border-2 border-claw-blue border-t-transparent animate-spin" />
      </div>
    ),
  }
)

interface AiopsTimelinePageProps {
  params: { locale: string }
}

export default function AiopsTimelinePage({ params }: AiopsTimelinePageProps) {
  return (
    <AppLayout locale={params.locale}>
      <AiopsTimelinePanel />
    </AppLayout>
  )
}
