/**
 * HR Portal 系統初始化引導頁面
 *
 * 功能：
 * 1. 檢查系統初始化狀態（三階段：Initialization/Operational/Transition）
 * 2. 引導用戶完成環境配置
 * 3. 顯示當前階段與配置進度
 */
'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'

interface SystemStatus {
  current_phase: 'initialization' | 'operational' | 'transition'
  is_initialized: boolean
  initialization_completed: boolean
  configured_count: number
  configured_categories: string[]
  missing_categories: string[]
  is_locked?: boolean
  next_action: string
  message: string
  // Operational 階段欄位
  last_health_check_at?: string
  health_check_status?: string
  // Transition 階段欄位
  env_db_consistent?: boolean
  inconsistencies?: string
}

interface ConfigDetail {
  redis?: { host: string; port: string; db: string }
  database?: { host: string; port: string; name: string; user: string }
  keycloak?: { url: string; realm: string; admin_username: string }
}

export default function InstallationPage() {
  const router = useRouter()
  const [status, setStatus] = useState<SystemStatus | null>(null)
  const [configDetails, setConfigDetails] = useState<ConfigDetail>({})
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    checkSystemStatus()
  }, [])

  const checkSystemStatus = async () => {
    try {
      setLoading(true)
      setError(null)

      const response = await fetch('http://10.1.0.245:10181/api/v1/installation/check-status')

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
      }

      const data: SystemStatus = await response.json()
      setStatus(data)

      // 載入已完成配置的詳細資訊
      if (data.configured_categories.length > 0) {
        await loadConfigDetails(data.configured_categories)
      }

      // 如果已初始化，導向健康檢查頁面
      if (data.is_initialized) {
        router.push('/installation/health-check')
      }
    } catch (err) {
      console.error('[Installation] Failed to check status:', err)
      setError(err instanceof Error ? err.message : '無法連接到後端 API')
    } finally {
      setLoading(false)
    }
  }

  const loadConfigDetails = async (categories: string[]) => {
    const details: ConfigDetail = {}

    for (const category of categories) {
      try {
        const response = await fetch(`http://10.1.0.245:10181/api/v1/installation/get-config/${category}`)
        if (response.ok) {
          const data = await response.json()
          console.log(`[Installation] Loaded ${category} config:`, data)
          if (data.configured && data.config) {
            details[category as keyof ConfigDetail] = data.config
            console.log(`[Installation] ${category} details:`, data.config)
          }
        }
      } catch (error) {
        console.error(`[Installation] Failed to load ${category} config:`, error)
      }
    }

    console.log('[Installation] All config details:', details)
    setConfigDetails(details)
  }

  const startInstallation = () => {
    // 導向下一個未完成的設定階段
    if (!status) return

    if (!status.configured_categories.includes('redis')) {
      router.push('/installation/phase1-redis')
    } else if (!status.configured_categories.includes('database')) {
      router.push('/installation/phase2-database')
    } else if (!status.configured_categories.includes('keycloak')) {
      router.push('/installation/phase3-keycloak')
    }
  }

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-950">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <h1 className="text-2xl font-bold text-gray-100 mb-2">HR Portal 系統初始化</h1>
          <p className="text-gray-400">正在檢查系統狀態...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-950">
        <div className="bg-gray-800 rounded-lg shadow-xl p-8 max-w-md border border-gray-700">
          <div className="text-center mb-6">
            <div className="w-16 h-16 bg-red-900/30 rounded-full flex items-center justify-center mx-auto mb-4 border border-red-800">
              <svg className="w-8 h-8 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </div>
            <h2 className="text-2xl font-bold text-gray-100 mb-2">連接失敗</h2>
            <p className="text-gray-300 mb-4">{error}</p>
            <div className="bg-yellow-900/20 border border-yellow-700 rounded-lg p-4 text-left text-sm">
              <p className="font-semibold text-yellow-400 mb-2">可能的原因：</p>
              <ul className="list-disc list-inside text-yellow-300 space-y-1">
                <li>後端服務未啟動 (Port 10181)</li>
                <li>資料庫連接失敗</li>
                <li>網路連接問題</li>
              </ul>
            </div>
          </div>
          <button
            onClick={checkSystemStatus}
            className="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition-colors"
          >
            重試
          </button>
        </div>
      </div>
    )
  }

  // 階段顏色與圖示（深色主題）
  const getPhaseConfig = (phase: string) => {
    switch (phase) {
      case 'initialization':
        return {
          color: 'from-blue-500 to-indigo-600',
          bgColor: 'bg-blue-900/20',
          borderColor: 'border-blue-700',
          textColor: 'text-blue-300',
          icon: '⚙️',
          title: 'Initialization 階段',
          description: '系統初始化中，正在設定環境配置'
        }
      case 'operational':
        return {
          color: 'from-green-500 to-emerald-600',
          bgColor: 'bg-green-900/20',
          borderColor: 'border-green-700',
          textColor: 'text-green-300',
          icon: '✅',
          title: 'Operational 階段',
          description: '系統正常運作中，可進行健康檢查'
        }
      case 'transition':
        return {
          color: 'from-orange-500 to-amber-600',
          bgColor: 'bg-orange-900/20',
          borderColor: 'border-orange-700',
          textColor: 'text-orange-300',
          icon: '🔄',
          title: 'Transition 階段',
          description: '系統移轉中，正在檢查環境一致性'
        }
      default:
        return {
          color: 'from-gray-500 to-gray-600',
          bgColor: 'bg-gray-800',
          borderColor: 'border-gray-700',
          textColor: 'text-gray-300',
          icon: '❓',
          title: '未知階段',
          description: '系統狀態未知'
        }
    }
  }

  const phaseConfig = status ? getPhaseConfig(status.current_phase) : null

  return (
    <div className="min-h-screen bg-gray-950">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto">
          {/* Header */}
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-gray-100 mb-4">
              HR Portal 系統狀態
            </h1>
            <p className="text-xl text-gray-400">
              三階段系統管理
            </p>
          </div>

          {/* Phase Status Card */}
          {status && phaseConfig && (
            <div className="bg-gray-800 rounded-xl shadow-2xl p-8 mb-8 border border-gray-700">
              <div className="flex items-center justify-center mb-6">
                <div className={`w-20 h-20 bg-gradient-to-br ${phaseConfig.color} rounded-full flex items-center justify-center text-4xl`}>
                  {phaseConfig.icon}
                </div>
              </div>

              <h2 className="text-2xl font-bold text-center text-gray-100 mb-2">
                {phaseConfig.title}
              </h2>

              <p className="text-center text-gray-400 mb-8">
                {phaseConfig.description}
              </p>

              {/* Message from Backend */}
              <div className={`${phaseConfig.bgColor} ${phaseConfig.borderColor} border rounded-lg p-4 mb-8`}>
                <p className={`${phaseConfig.textColor} text-center font-medium`}>
                  {status.message}
                </p>
              </div>

              {/* Configuration Progress */}
              {status.current_phase === 'initialization' && (
                <>
                  <div className="mb-6">
                    <div className="flex justify-between items-center mb-2">
                      <span className="text-sm font-medium text-gray-300">環境配置進度</span>
                      <span className="text-sm text-gray-400">
                        {status.configured_count} / 3 完成
                      </span>
                    </div>
                    <div className="w-full bg-gray-700 rounded-full h-2">
                      <div
                        className="bg-gradient-to-r from-indigo-500 to-purple-600 h-2 rounded-full transition-all"
                        style={{ width: `${(status.configured_count / 3) * 100}%` }}
                      ></div>
                    </div>
                  </div>

                  <div className="space-y-3 mb-8">
                    {[
                      { key: 'redis', name: 'Redis 快取設定', icon: '🔴', route: '/installation/phase1-redis' },
                      { key: 'database', name: '資料庫連接設定', icon: '🗄️', route: '/installation/phase2-database' },
                      { key: 'keycloak', name: 'Keycloak SSO 設定', icon: '🔐', route: '/installation/phase3-keycloak' },
                    ].map((step) => {
                      const isConfigured = status.configured_categories.includes(step.key)
                      const config = configDetails[step.key as keyof ConfigDetail]

                      // 格式化配置資訊
                      let configInfo = ''
                      if (config) {
                        if (step.key === 'redis') {
                          configInfo = `${config.host}:${config.port} (DB ${config.db})`
                        } else if (step.key === 'database') {
                          configInfo = `${config.host}:${config.port}/${config.name}`
                        } else if (step.key === 'keycloak') {
                          configInfo = `${config.url} (${config.realm})`
                        }
                      }

                      return (
                        <div
                          key={step.key}
                          className={`p-4 rounded-lg border ${
                            isConfigured
                              ? 'bg-green-900/20 border-green-700'
                              : 'bg-gray-700/50 border-gray-600'
                          }`}
                        >
                          <div className="flex items-center">
                            <span className="text-2xl mr-4">{step.icon}</span>
                            <div className="flex-1">
                              <div className={`font-medium ${isConfigured ? 'text-green-300' : 'text-gray-200'}`}>
                                {step.name}
                              </div>
                              {isConfigured && configInfo && (
                                <div className="text-xs text-green-400/70 mt-1 font-mono">
                                  {configInfo}
                                </div>
                              )}
                            </div>
                            {isConfigured ? (
                              <span className="text-sm text-green-400 font-medium flex items-center">
                                <svg className="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                </svg>
                                已完成
                              </span>
                            ) : (
                              <button
                                onClick={() => router.push(step.route)}
                                className="text-sm text-indigo-400 hover:text-indigo-300 font-medium"
                              >
                                設定 →
                              </button>
                            )}
                          </div>
                        </div>
                      )
                    })}
                  </div>

                  {/* Action Buttons */}
                  <div className="space-y-3">
                    {status.missing_categories.length > 0 ? (
                      <button
                        onClick={startInstallation}
                        className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-4 px-6 rounded-lg font-semibold text-lg hover:from-indigo-700 hover:to-purple-700 transition-all transform hover:scale-105 shadow-lg"
                      >
                        繼續環境設定
                      </button>
                    ) : (
                      <button
                        onClick={() => router.push('/installation/complete')}
                        className="w-full bg-gradient-to-r from-green-600 to-emerald-600 text-white py-4 px-6 rounded-lg font-semibold text-lg hover:from-green-700 hover:to-emerald-700 transition-all transform hover:scale-105 shadow-lg hover:shadow-green-500/50"
                      >
                        完成初始化 →
                      </button>
                    )}

                    {/* 開發測試：重置按鈕 */}
                    {status.configured_count > 0 && (
                      <button
                        onClick={async () => {
                          if (!confirm('確定要重置所有環境配置？此操作無法復原。')) return
                          try {
                            const response = await fetch('http://10.1.0.245:10181/api/v1/installation/reset-config/all', {
                              method: 'DELETE'
                            })
                            const data = await response.json()
                            if (data.success) {
                              alert('重置成功！頁面即將重新載入。')
                              window.location.reload()
                            } else {
                              alert('重置失敗：' + data.message)
                            }
                          } catch (error) {
                            alert('重置失敗：' + (error instanceof Error ? error.message : '未知錯誤'))
                          }
                        }}
                        className="w-full bg-red-600/20 border border-red-700 text-red-300 py-2 px-4 rounded-lg text-sm hover:bg-red-600/30 transition-all"
                      >
                        🔄 重置環境配置（開發測試）
                      </button>
                    )}
                  </div>
                </>
              )}

              {/* Operational Phase Actions */}
              {status.current_phase === 'operational' && (
                <div className="space-y-4">
                  <button
                    onClick={() => router.push('/installation/health-check')}
                    className="w-full bg-gradient-to-r from-green-600 to-emerald-600 text-white py-4 px-6 rounded-lg font-semibold text-lg hover:from-green-700 hover:to-emerald-700 transition-all shadow-lg hover:shadow-green-500/50"
                  >
                    執行健康檢查
                  </button>
                  <button
                    onClick={() => router.push('/dashboard')}
                    className="w-full bg-gray-700 text-gray-100 border border-gray-600 py-4 px-6 rounded-lg font-semibold text-lg hover:bg-gray-600 transition-all shadow-sm"
                  >
                    前往系統主頁
                  </button>
                </div>
              )}

              {/* Transition Phase Actions */}
              {status.current_phase === 'transition' && (
                <div className="space-y-4">
                  <button
                    onClick={() => router.push('/installation/consistency-check')}
                    className="w-full bg-gradient-to-r from-orange-600 to-amber-600 text-white py-4 px-6 rounded-lg font-semibold text-lg hover:from-orange-700 hover:to-amber-700 transition-all shadow-lg hover:shadow-orange-500/50"
                  >
                    檢查環境一致性
                  </button>
                  {status.env_db_consistent && (
                    <button
                      onClick={() => {/* TODO: Switch to operational */}}
                      className="w-full bg-gradient-to-r from-green-600 to-emerald-600 text-white py-4 px-6 rounded-lg font-semibold text-lg hover:from-green-700 hover:to-emerald-700 transition-all shadow-lg hover:shadow-green-500/50"
                    >
                      返回營運階段
                    </button>
                  )}
                </div>
              )}
            </div>
          )}

          {/* Info Card */}
          {status && (
            <div className={`${phaseConfig?.bgColor} border ${phaseConfig?.borderColor} rounded-lg p-6`}>
              <h3 className={`font-semibold ${phaseConfig?.textColor} mb-3 flex items-center`}>
                <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                </svg>
                {status.current_phase === 'initialization' && '初始化階段說明'}
                {status.current_phase === 'operational' && '營運階段說明'}
                {status.current_phase === 'transition' && '移轉階段說明'}
              </h3>
              <ul className={`space-y-2 text-sm ${phaseConfig?.textColor}`}>
                {status.current_phase === 'initialization' && (
                  <>
                    <li className="flex items-start">
                      <span className="mr-2">•</span>
                      <span>環境配置會同時寫入 .env 檔案和資料庫，確保一致性</span>
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2">•</span>
                      <span>每個環境都會進行連線測試，確保設定正確後才會儲存</span>
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2">•</span>
                      <span>完成所有環境配置後，才能進入營運階段</span>
                    </li>
                  </>
                )}
                {status.current_phase === 'operational' && (
                  <>
                    <li className="flex items-start">
                      <span className="mr-2">•</span>
                      <span>系統正常運作中，可定期執行健康檢查確保服務穩定</span>
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2">•</span>
                      <span>健康檢查會驗證 Redis、Database、Keycloak 等服務狀態</span>
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2">•</span>
                      <span>需要進行系統遷移時，請先切換到 Transition 階段</span>
                    </li>
                  </>
                )}
                {status.current_phase === 'transition' && (
                  <>
                    <li className="flex items-start">
                      <span className="mr-2">•</span>
                      <span>Transition 階段用於系統遷移或環境變更</span>
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2">•</span>
                      <span>請執行一致性檢查，確保 .env 檔案與資料庫配置同步</span>
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2">•</span>
                      <span>只有通過一致性檢查後，才能返回營運階段</span>
                    </li>
                  </>
                )}
              </ul>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}