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

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

interface KeycloakConfig {
  url: string
  realm: string
  admin_username: string
  admin_password: string
}

interface TestResult {
  success: boolean
  message: string
  keycloak_version?: string
  realm_info?: string
}

export default function Phase3Keycloak() {
  const router = useRouter()
  const [config, setConfig] = useState<KeycloakConfig>({
    url: 'https://auth.lab.taipei',
    realm: 'porscheworld',
    admin_username: 'admin',
    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/keycloak')

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

      const data = await response.json()

      if (data.configured && data.config) {
        setConfig({
          url: data.config.url || 'https://auth.lab.taipei',
          realm: data.config.realm || 'porscheworld',
          admin_username: data.config.admin_username || 'admin',
          admin_password: data.config.admin_password === '****' ? '' : (data.config.admin_password || ''),
        })
        setAlreadyConfigured(true)
      }
    } catch (error) {
      console.error('[Keycloak] 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-keycloak', {
        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-keycloak', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(config),
      })

      const data = await response.json()

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

      alert('Keycloak 設定成功！')
      router.push('/installation')
    } 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-green-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">3 / 7</span>
            </div>
            <div className="w-full bg-gray-700 rounded-full h-2">
              <div className="bg-green-600 h-2 rounded-full" style={{ width: '42.9%' }}></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-green-900/30 rounded-full flex items-center justify-center mr-4 border border-green-800">
                <span className="text-2xl">🔐</span>
              </div>
              <div>
                <h1 className="text-2xl font-bold text-gray-100">Phase 3: Keycloak SSO 設定</h1>
                <p className="text-gray-400">設定統一身份認證服務</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>Keycloak 是開源的 SSO 解決方案，用於統一管理使用者身份認證。HR Portal 將透過 Keycloak 進行登入驗證。
              </p>
            </div>

            {/* Form */}
            <div className="space-y-4 mb-6">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">
                  Keycloak 服務網址 <span className="text-green-400">*</span>
                </label>
                <input
                  type="text"
                  value={config.url}
                  onChange={(e) => setConfig({ ...config, url: 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-green-500 focus:border-transparent"
                  placeholder="例如: https://auth.lab.taipei"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    Realm 名稱 <span className="text-green-400">*</span>
                  </label>
                  <input
                    type="text"
                    value={config.realm}
                    onChange={(e) => setConfig({ ...config, realm: 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-green-500 focus:border-transparent"
                    placeholder="porscheworld"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    管理員帳號 <span className="text-green-400">*</span>
                  </label>
                  <input
                    type="text"
                    value={config.admin_username}
                    onChange={(e) => setConfig({ ...config, admin_username: 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-green-500 focus:border-transparent"
                    placeholder="admin"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">
                  管理員密碼 <span className="text-green-400">*</span>
                </label>
                <input
                  type="password"
                  value={config.admin_password}
                  onChange={(e) => setConfig({ ...config, admin_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-green-500 focus:border-transparent"
                  placeholder="管理員密碼"
                />
              </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.keycloak_version && (
                      <div className="mt-2 text-sm text-green-400">
                        <p>Keycloak 版本: {testResult.keycloak_version}</p>
                        {testResult.realm_info && <p>Realm 資訊: {testResult.realm_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.url || !config.realm || !config.admin_username || !config.admin_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-green-600 text-white py-2 px-6 rounded-lg hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors font-semibold"
              >
                儲存並繼續
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}