'use client'

/**
 * 拓撲圖 Page — Sprint 5 React Flow 完整版
 * ==========================================
 * 嵌套群組拓撲圖 (elkjs + React Flow)
 * 串接真實 /api/v1/dashboard API
 * 零假數據
 *
 * @created 2026-04-01 ogt
 * @updated 2026-04-09 Claude Code — Sprint 5 React Flow 完整升級
 */

import { useEffect } from 'react'
import { useTranslations } from 'next-intl'
import { AppLayout } from '@/components/layout'
import { ServiceTopology } from '@/components/topology'
import { useDashboardStore } from '@/stores/dashboard.store'

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

  // 確保 SSE 連接啟動，拓撲圖才有資料
  useEffect(() => {
    const apiBase = process.env.NEXT_PUBLIC_API_URL
    if (apiBase) {
      useDashboardStore.getState().connect(apiBase)
    }
  }, [])

  return (
    <AppLayout locale={params.locale}>
      <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 68px)' }}>
        {/* 標題列 */}
        <div style={{
          padding: '12px 20px',
          borderBottom: '0.5px solid #e0ddd4',
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          background: '#faf9f3',
          flexShrink: 0,
        }}>
          <h2 style={{
            fontFamily: "'Syne', sans-serif",
            fontSize: 18,
            fontWeight: 800,
            color: '#141413',
          }}>
            {t('title')}
          </h2>
          <span style={{ fontSize: 12, color: '#87867f' }}>{t('subtitle')}</span>
        </div>

        {/* React Flow 拓撲圖 (全高度) */}
        <div style={{ flex: 1 }}>
          <ServiceTopology
            mode="full"
            showControls={true}
            showMiniMap={true}
            height="100%"
          />
        </div>
      </div>
    </AppLayout>
  )
}
