'use client'

/**
 * AppLayout - 全域應用佈局
 * ========================
 * CPO-102: 整合側邊欄 + 頂部狀態列
 *
 * Features:
 * - 響應式側邊欄折疊
 * - 主內容區域自動適應
 * - 持久化折疊狀態 (localStorage)
 * - **Phase 19 修復**: 全局 SSE 連接 (所有頁面共享連線狀態)
 *
 * @updated 2026-03-28 - 修復 Header「已斷線」狀態問題
 */

import { useState, useEffect } from 'react'
import { Sidebar } from './sidebar'
import { Header } from './header'
import { DotMatrixBg } from '@/components/ui/dot-matrix-bg'
import { cn } from '@/lib/utils'
import { useDashboardStore } from '@/stores/dashboard.store'

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

interface AppLayoutProps {
  locale: string
  children: React.ReactNode
  showBackground?: boolean
}

// =============================================================================
// Constants
// =============================================================================

const SIDEBAR_STATE_KEY = 'awoooi-sidebar-collapsed'

// =============================================================================
// Component
// =============================================================================

export function AppLayout({
  locale,
  children,
  showBackground = true,
}: AppLayoutProps) {
  const [collapsed, setCollapsed] = useState(false)
  const [mounted, setMounted] = useState(false)

  // Phase 19 修復: 全局 SSE 連接
  const { connect, disconnect } = useDashboardStore()

  // Load collapsed state from localStorage
  useEffect(() => {
    setMounted(true)
    const saved = localStorage.getItem(SIDEBAR_STATE_KEY)
    if (saved === 'true') {
      setCollapsed(true)
    }
  }, [])

  // Phase 19 修復: 全局啟動 SSE 連接 (所有頁面共享)
  useEffect(() => {
    const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || ''
    if (apiBaseUrl) {
      console.log('[AppLayout] 全局 SSE 連接啟動...', apiBaseUrl)
      connect(apiBaseUrl)
    }

    return () => {
      console.log('[AppLayout] SSE 連接關閉')
      disconnect()
    }
  }, [connect, disconnect])

  // Save collapsed state to localStorage
  const handleToggle = () => {
    const newState = !collapsed
    setCollapsed(newState)
    localStorage.setItem(SIDEBAR_STATE_KEY, String(newState))
  }

  // Prevent hydration mismatch
  if (!mounted) {
    return (
      <div className="min-h-screen bg-nothing-gray-50">
        {showBackground && (
          <DotMatrixBg
            spacing={24}
            dotSize={1}
            dotColor="rgba(0, 0, 0, 0.06)"
            bgColor="#FAFAFA"
          />
        )}
        <div className="relative z-10">{children}</div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-nothing-gray-50">
      {/* Background */}
      {showBackground && (
        <DotMatrixBg
          spacing={24}
          dotSize={1}
          dotColor="rgba(0, 0, 0, 0.06)"
          bgColor="#FAFAFA"
        />
      )}

      {/* Sidebar */}
      <Sidebar
        locale={locale}
        collapsed={collapsed}
        onToggle={handleToggle}
      />

      {/* Header */}
      <Header
        locale={locale}
        sidebarCollapsed={collapsed}
      />

      {/* Main Content */}
      <main
        className={cn(
          'relative z-10',
          'pt-16', // Header height
          'transition-all duration-300 ease-out',
          collapsed ? 'ml-16' : 'ml-64'
        )}
      >
        <div className="p-6">
          {children}
        </div>
      </main>
    </div>
  )
}
