/**
 * Phase 2: 資料庫連接設定
 *
 * 功能：
 * 1. 填寫資料庫連接資訊
 * 2. 測試資料庫連接
 * 3. 將設定寫入 .env 檔案
 */
'use client'

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

interface DatabaseConfig {
  host: string
  port: number
  database: string
  user: string
  password: string
}

interface TestResult {
  success: boolean
  message: string
  db_version?: string
  connection_info?: string
}

export default function Phase2Database() {
  const router = useRouter()
  const [config, setConfig] = useState<DatabaseConfig>({
    host: '10.1.0.20',
    port: 5433,
    database: 'hr_portal',
    user: 'admin',
    password: '',
  })

  const [testing, setTesting] = useState(false)
  const [testResult, setTestResult] = useState<TestResult | null>(null)
  const [setupPending, setSetupPending] = useState(false)
  const [loading, setLoading] = useState(true)
  const [alreadyConfigured, setAlreadyConfigured] = useState(false)

  // 載入已儲存的配置
  useEffect(() => {
    loadSavedConfig()
  }, [])

  const loadSavedConfig = async () => {
    try {
      setLoading(true)
      const response = await fetch('http://10.1.0.245:10181/api/v1/installation/get-config/database')

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

      const data = await response.json()

      if (data.configured && data.config) {
        setConfig({
          host: data.config.host || '10.1.0.20',
          port: parseInt(data.config.port) || 5433,
          database: data.config.database || 'hr_portal',
          user: data.config.user || 'admin',
          password: data.config.password === '****' ? '' : (data.config.password || ''),
        })
        setAlreadyConfigured(true)
      }
    } catch (error) {
      console.error('[Database] Failed to load saved config:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleTest = async () => {
    try {
      setTesting(true)
      setTestResult(null)

      const response = await fetch('http://10.1.0.245:10181/api/v1/installation/test-database', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(config),
      })

      const data = await response.json()

      if (!response.ok) {
        setTestResult({
          success: false,
          message: data.detail || `HTTP ${response.status}`,
        })
        return
      }

      setTestResult(data)
      if (data.success) {
        setSetupPending(true)
      }
    } catch (error) {
      setTestResult({
        success: false,
        message: error instanceof Error ? error.message : '連接失敗',
      })
    } finally {
      setTesting(false)
    }
  }

  const handleSetup = async () => {
    try {
      const response = await fetch('http://10.1.0.245:10181/api/v1/installation/setup-database', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(config),
      })

      const data = await response.json()

      if (!response.ok) {
        alert(`設定失敗: ${data.detail}`)
        return
      }

      alert('資料庫設定成功！')
      router.push('/installation/phase3-keycloak')
    } catch (error) {
      alert(`設定失敗: ${error instanceof Error ? error.message : '未知錯誤'}`)
    }
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-950 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-400">載入已儲存的配置...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-950">
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-3xl mx-auto">
          {/* Progress Bar */}
          <div className="mb-8">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm font-medium text-gray-300">進度</span>
              <span className="text-sm font-medium text-gray-300">2 / 7</span>
            </div>
            <div className="w-full bg-gray-700 rounded-full h-2">
              <div className="bg-blue-600 h-2 rounded-full" style={{ width: '28.6%' }}></div>
            </div>
          </div>

          {/* Main Card */}
          <div className="bg-gray-800 rounded-xl shadow-xl p-8 border border-gray-700">
            <div className="flex items-center mb-6">
              <div className="w-12 h-12 bg-blue-900/30 rounded-full flex items-center justify-center mr-4 border border-blue-800">
                <span className="text-2xl">🗄️</span>
              </div>
              <div>
                <h1 className="text-2xl font-bold text-gray-100">Phase 2: 資料庫連接設定</h1>
                <p className="text-gray-400">設定 PostgreSQL 主資料庫</p>
              </div>
            </div>

            {alreadyConfigured && (
              <div className="bg-green-900/20 border border-green-700 rounded-lg p-4 mb-6">
                <p className="text-sm text-green-300 flex items-center">
                  <svg className="w-5 h-5 mr-2" 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>
                  <strong>已載入先前儲存的配置</strong> - 您可以查看或修改下方設定
                </p>
              </div>
            )}

            <div className="bg-blue-900/20 border border-blue-700 rounded-lg p-4 mb-6">
              <p className="text-sm text-blue-300">
                <strong>說明：</strong>PostgreSQL 是 HR Portal 的主要資料庫，用於儲存員工、部門、權限等核心資料。
              </p>
            </div>

            {/* Form */}
            <div className="space-y-4 mb-6">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">
                  資料庫主機位址 <span className="text-blue-400">*</span>
                </label>
                <input
                  type="text"
                  value={config.host}
                  onChange={(e) => setConfig({ ...config, host: e.target.value })}
                  className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="例如: 10.1.0.20"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    連接埠 <span className="text-blue-400">*</span>
                  </label>
                  <input
                    type="number"
                    value={config.port}
                    onChange={(e) => setConfig({ ...config, port: parseInt(e.target.value) || 5432 })}
                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    資料庫名稱 <span className="text-blue-400">*</span>
                  </label>
                  <input
                    type="text"
                    value={config.database}
                    onChange={(e) => setConfig({ ...config, database: e.target.value })}
                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="hr_portal"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    使用者帳號 <span className="text-blue-400">*</span>
                  </label>
                  <input
                    type="text"
                    value={config.user}
                    onChange={(e) => setConfig({ ...config, user: e.target.value })}
                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="admin"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    密碼 <span className="text-blue-400">*</span>
                  </label>
                  <input
                    type="password"
                    value={config.password}
                    onChange={(e) => setConfig({ ...config, password: e.target.value })}
                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="資料庫密碼"
                  />
                </div>
              </div>
            </div>

            {/* Test Result */}
            {testResult && (
              <div className={`mb-6 p-4 rounded-lg ${testResult.success ? 'bg-green-900/20 border border-green-700' : 'bg-red-900/20 border border-red-700'}`}>
                <div className="flex items-start">
                  <span className="text-2xl mr-3">{testResult.success ? '✅' : '❌'}</span>
                  <div className="flex-1">
                    <h3 className={`font-semibold mb-1 ${testResult.success ? 'text-green-300' : 'text-red-300'}`}>
                      {testResult.success ? '連接成功' : '連接失敗'}
                    </h3>
                    <p className={`text-sm ${testResult.success ? 'text-green-400' : 'text-red-400'}`}>
                      {testResult.message}
                    </p>
                    {testResult.success && testResult.db_version && (
                      <div className="mt-2 text-sm text-green-400">
                        <p>資料庫版本: {testResult.db_version}</p>
                        {testResult.connection_info && <p>連接資訊: {testResult.connection_info}</p>}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}

            {/* Action Buttons */}
            <div className="flex gap-4">
              <button
                onClick={() => router.back()}
                className="px-6 py-2 border border-gray-600 rounded-lg text-gray-300 hover:bg-gray-700 transition-colors"
              >
                返回
              </button>

              <button
                onClick={handleTest}
                disabled={testing || !config.host || !config.database || !config.user || !config.password}
                className="flex-1 bg-blue-600 text-white py-2 px-6 rounded-lg hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors"
              >
                {testing ? '測試中...' : '測試連接'}
              </button>

              <button
                onClick={handleSetup}
                disabled={!setupPending}
                className="flex-1 bg-blue-600 text-white py-2 px-6 rounded-lg hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors font-semibold"
              >
                儲存並繼續
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}