/**
 * 完成初始化頁面
 *
 * 流程：
 * 1. 填寫公司基本資訊
 * 2. 設定郵件網域
 * 3. 設定管理員帳號
 * 4. 確認並執行初始化
 */
'use client'

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

interface CompanyInfo {
  company_name: string
  company_name_en: string
  tenant_code: string
  tenant_prefix: string
  tax_id: string
  tel: string
  add: string
}

interface MailDomainInfo {
  domain_set: 1 | 2
  domain: string
}

interface AdminInfo {
  admin_legal_name: string
  admin_english_name: string
  admin_email: string
  admin_phone: string
  password_method: 'auto' | 'manual'
  manual_password?: string
}

export default function CompleteInitialization() {
  const router = useRouter()
  const [step, setStep] = useState<'checking' | 'company' | 'maildomain' | 'admin' | 'confirm' | 'executing'>('checking')
  const [sessionId, setSessionId] = useState<number | null>(null)
  const [checkingDb, setCheckingDb] = useState(true)
  const [dbReady, setDbReady] = useState(false)

  const [companyInfo, setCompanyInfo] = useState<CompanyInfo>({
    company_name: '',
    company_name_en: '',
    tenant_code: '',
    tenant_prefix: '',
    tax_id: '',
    tel: '',
    add: '',
  })

  const [mailDomainInfo, setMailDomainInfo] = useState<MailDomainInfo>({
    domain_set: 2,
    domain: '',
  })

  const [adminInfo, setAdminInfo] = useState<AdminInfo>({
    admin_legal_name: '',
    admin_english_name: '',
    admin_email: '',
    admin_phone: '',
    password_method: 'auto',
  })

  const [generatedPassword, setGeneratedPassword] = useState<string>('')
  const [executing, setExecuting] = useState(false)

  // 載入 Keycloak Realm 名稱作為租戶代碼預設值
  useEffect(() => {
    const loadKeycloakRealm = async () => {
      try {
        const response = await fetch('http://10.1.0.245:10181/api/v1/installation/get-config/keycloak')
        if (response.ok) {
          const data = await response.json()
          if (data.configured && data.config && data.config.realm) {
            setCompanyInfo(prev => ({
              ...prev,
              tenant_code: data.config.realm.toLowerCase(),  // ⚠️ 必須小寫,與 Keycloak Realm 一致
            }))
          }
        }
        setCheckingDb(false)
        setDbReady(true)
        setStep('company')
      } catch (error) {
        console.error('[Installation] Failed to load Keycloak config:', error)
        setCheckingDb(false)
        setDbReady(true)
        setStep('company')
      }
    }
    loadKeycloakRealm()
  }, [])

  // Step 1: 建立會話並儲存公司資訊
  const handleSaveCompany = async () => {
    try {
      // 建立會話
      if (!sessionId) {
        const sessionResponse = await fetch('http://10.1.0.245:10181/api/v1/installation/sessions', {
          method: 'POST',
        })

        if (!sessionResponse.ok) {
          throw new Error('建立會話失敗')
        }

        const sessionData = await sessionResponse.json()
        setSessionId(sessionData.session_id)
      }

      setStep('maildomain')
    } catch (error) {
      alert(`錯誤: ${error instanceof Error ? error.message : '未知錯誤'}`)
    }
  }

  // Step 2: 儲存郵件網域設定
  const handleSaveMailDomain = async () => {
    try {
      if (!sessionId) {
        throw new Error('會話 ID 不存在')
      }

      // 合併公司資訊 + 郵件網域資訊
      const tenantData = {
        ...companyInfo,
        ...mailDomainInfo,
      }

      const response = await fetch(`http://10.1.0.245:10181/api/v1/installation/sessions/${sessionId}/tenant-info`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(tenantData),
      })

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({ detail: `HTTP ${response.status}` }))
        throw new Error(`儲存租戶資訊失敗: ${errorData.detail || response.statusText}`)
      }

      setStep('admin')
    } catch (error) {
      console.error('[MailDomain] Save failed:', error)
      alert(`錯誤: ${error instanceof Error ? error.message : '未知錯誤'}`)
    }
  }

  // Step 3: 設定管理員帳號
  const handleSaveAdmin = async () => {
    try {
      if (!sessionId) {
        throw new Error('會話 ID 不存在')
      }

      const response = await fetch(`http://10.1.0.245:10181/api/v1/installation/sessions/${sessionId}/admin-setup`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(adminInfo),
      })

      const data = await response.json()

      if (!response.ok) {
        throw new Error(data.detail || '設定管理員失敗')
      }

      if (data.initial_password) {
        setGeneratedPassword(data.initial_password)
      }

      setStep('confirm')
    } catch (error) {
      alert(`錯誤: ${error instanceof Error ? error.message : '未知錯誤'}`)
    }
  }

  // Step 4: 執行初始化
  const handleExecute = async () => {
    try {
      if (!sessionId) {
        throw new Error('會話 ID 不存在')
      }

      setStep('executing')
      setExecuting(true)

      const response = await fetch(`http://10.1.0.245:10181/api/v1/installation/sessions/${sessionId}/execute`, {
        method: 'POST',
      })

      const data = await response.json()

      if (!response.ok) {
        throw new Error(data.detail || '初始化失敗')
      }

      // 從回應中取得臨時密碼
      const tempPassword = data.result?.credentials?.plain_password || '(密碼已清除，請聯絡管理員)'
      const username = adminInfo.admin_english_name

      // 顯示完成訊息和臨時密碼
      alert(`初始化完成！

請使用以下資訊登入 SSO 系統:

帳號: ${username}
臨時密碼: ${tempPassword}

⚠️ 重要提醒:
1. 請立即記下或截圖這個密碼
2. 首次登入後系統會要求您變更密碼
3. 此密碼僅顯示一次，關閉後將無法再次查看

點擊「確定」後將跳轉至登入頁面。`)

      // 跳轉到登入頁面
      window.location.href = '/auth/signin'
    } catch (error) {
      alert(`錯誤: ${error instanceof Error ? error.message : '未知錯誤'}`)
      setExecuting(false)
    }
  }

  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">
                {step === 'company' ? '1' : step === 'maildomain' ? '2' : step === 'admin' ? '3' : step === 'confirm' ? '4' : '5'} / 4
              </span>
            </div>
            <div className="w-full bg-gray-700 rounded-full h-2">
              <div
                className="bg-gradient-to-r from-green-500 to-emerald-600 h-2 rounded-full transition-all"
                style={{
                  width:
                    step === 'company' ? '25%' :
                    step === 'maildomain' ? '50%' :
                    step === 'admin' ? '75%' : '100%'
                }}
              ></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">完成初始化</h1>
                <p className="text-gray-400">
                  {step === 'company' && '填寫公司基本資訊'}
                  {step === 'maildomain' && '設定郵件網域'}
                  {step === 'admin' && '設定系統管理員'}
                  {step === 'confirm' && '確認並執行'}
                  {step === 'executing' && '正在初始化系統...'}
                </p>
              </div>
            </div>

            {/* Step 1: 公司資訊 */}
            {step === 'company' && (
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    公司名稱（中文） <span className="text-green-400">*</span>
                  </label>
                  <input
                    type="text"
                    value={companyInfo.company_name}
                    onChange={(e) => setCompanyInfo({ ...companyInfo, company_name: 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>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    公司名稱（英文）
                  </label>
                  <input
                    type="text"
                    value={companyInfo.company_name_en}
                    onChange={(e) => setCompanyInfo({ ...companyInfo, company_name_en: 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="例如: Porsche World Co., Ltd."
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    統一編號
                  </label>
                  <input
                    type="text"
                    value={companyInfo.tax_id}
                    onChange={(e) => setCompanyInfo({ ...companyInfo, tax_id: 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="例如: 82871784"
                    maxLength={8}
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    公司電話
                  </label>
                  <input
                    type="text"
                    value={companyInfo.tel}
                    onChange={(e) => setCompanyInfo({ ...companyInfo, tel: 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="例如: 02-26262026"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    公司地址
                  </label>
                  <textarea
                    value={companyInfo.add}
                    onChange={(e) => setCompanyInfo({ ...companyInfo, add: 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="例如: 新北市淡水區北新路197號7樓"
                    rows={2}
                  />
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      租戶代碼（Keycloak Realm） <span className="text-green-400">*</span>
                    </label>
                    <input
                      type="text"
                      value={companyInfo.tenant_code}
                      readOnly
                      className="w-full px-4 py-2 bg-gray-600 border border-gray-500 rounded-lg text-gray-300 font-mono cursor-not-allowed"
                      placeholder="自動載入 Keycloak Realm..."
                    />
                    <p className="text-xs text-gray-400 mt-1">🔒 已鎖定（與 Keycloak Realm 同步）</p>
                  </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={companyInfo.tenant_prefix}
                      onChange={(e) => setCompanyInfo({ ...companyInfo, tenant_prefix: e.target.value.toUpperCase() })}
                      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 font-mono"
                      placeholder="例如: PW"
                      maxLength={10}
                    />
                    <p className="text-xs text-gray-400 mt-1">員工編號格式：{companyInfo.tenant_prefix || 'XX'}001</p>
                  </div>
                </div>

                <div className="bg-blue-900/20 border border-blue-700 rounded-lg p-4">
                  <p className="text-sm text-blue-300">
                    <strong>💡 提示：</strong>
                  </p>
                  <ul className="text-sm text-blue-300 mt-2 space-y-1 ml-4 list-disc">
                    <li>租戶代碼（code）= Keycloak Realm 名稱，用於 SSO 識別</li>
                    <li>⚠️ 租戶代碼必須為<strong>小寫英文</strong>，與 Keycloak Realm 保持一致</li>
                    <li>員工編號前綴（prefix）用於產生員工工號，例如：PW → PW001</li>
                    <li>兩者可以相同或不同，視需求而定</li>
                  </ul>
                </div>

                <div className="flex gap-4 mt-8">
                  <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={handleSaveCompany}
                    disabled={!companyInfo.company_name || !companyInfo.tenant_code || !companyInfo.tenant_prefix}
                    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>
            )}

            {/* Step 2: 郵件網域設定 */}
            {step === 'maildomain' && (
              <div className="space-y-4">
                <div className="bg-yellow-900/20 border border-yellow-700 rounded-lg p-4 mb-6">
                  <p className="text-sm text-yellow-300">
                    <strong>⚠️ DNS 設定提醒：</strong>
                  </p>
                  <p className="text-sm text-yellow-300 mt-2">
                    本系統不提供 DNS 服務，請在您的網域服務商設定 MX 記錄後再繼續。
                  </p>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    郵件網域條件 <span className="text-green-400">*</span>
                  </label>
                  <div className="space-y-2">
                    <label className="flex items-start p-4 bg-gray-700/50 border border-gray-600 rounded-lg cursor-pointer hover:bg-gray-700">
                      <input
                        type="radio"
                        name="domainSet"
                        checked={mailDomainInfo.domain_set === 1}
                        onChange={() => setMailDomainInfo({ ...mailDomainInfo, domain_set: 1 })}
                        className="mr-3 mt-1"
                      />
                      <div>
                        <span className="text-gray-200 font-medium">組織網域</span>
                        <p className="text-sm text-gray-400 mt-1">
                          所有員工使用統一網域，例如：user@porscheworld.tw
                        </p>
                      </div>
                    </label>
                    <label className="flex items-start p-4 bg-gray-700/50 border border-gray-600 rounded-lg cursor-pointer hover:bg-gray-700">
                      <input
                        type="radio"
                        name="domainSet"
                        checked={mailDomainInfo.domain_set === 2}
                        onChange={() => setMailDomainInfo({ ...mailDomainInfo, domain_set: 2 })}
                        className="mr-3 mt-1"
                      />
                      <div>
                        <span className="text-gray-200 font-medium">部門網域（推薦）</span>
                        <p className="text-sm text-gray-400 mt-1">
                          不同部門使用不同網域，例如：hr@ease.taipei, mis@lab.taipei
                        </p>
                      </div>
                    </label>
                  </div>
                </div>

                {/* 組織網域模式：所有員工使用統一網域 */}
                {mailDomainInfo.domain_set === 1 && (
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      組織網域名稱 <span className="text-green-400">*</span>
                    </label>
                    <input
                      type="text"
                      value={mailDomainInfo.domain}
                      onChange={(e) => setMailDomainInfo({ ...mailDomainInfo, domain: 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.tw"
                    />
                    <p className="text-xs text-gray-400 mt-2">
                      請先在 DNS 服務商設定：<br/>
                      MX 記錄: {mailDomainInfo.domain || 'yourdomain.tw'} → mail.{mailDomainInfo.domain || 'yourdomain.tw'} (優先級 10)
                    </p>
                  </div>
                )}

                {/* 部門網域模式：需要輸入預設網域給系統管理員使用 */}
                {mailDomainInfo.domain_set === 2 && (
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      預設網域（系統管理員使用） <span className="text-green-400">*</span>
                    </label>
                    <input
                      type="text"
                      value={mailDomainInfo.domain}
                      onChange={(e) => setMailDomainInfo({ ...mailDomainInfo, domain: 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.tw"
                    />
                    <p className="text-xs text-gray-400 mt-2">
                      此網域用於初始化部門與系統管理員郵箱，後續各部門可設定自己的網域。
                    </p>
                  </div>
                )}

                {mailDomainInfo.domain_set === 2 && (
                  <div className="bg-blue-900/20 border border-blue-700 rounded-lg p-4">
                    <p className="text-sm text-blue-300">
                      <strong>💡 部門網域說明：</strong>
                    </p>
                    <p className="text-sm text-blue-300 mt-2">
                      選擇部門網域後，每個部門可以設定獨立的郵件網域。<br/>
                      例如：ease.taipei (業務部)、lab.taipei (技術部)、porscheworld.tw (營運部)
                    </p>
                    <p className="text-sm text-blue-300 mt-2">
                      初始化完成後，人資可以在部門管理中為每個部門設定專屬網域。
                    </p>
                  </div>
                )}

                <div className="flex gap-4 mt-8">
                  <button
                    onClick={() => setStep('company')}
                    className="px-6 py-2 border border-gray-600 rounded-lg text-gray-300 hover:bg-gray-700 transition-colors"
                  >
                    上一步
                  </button>
                  <button
                    onClick={handleSaveMailDomain}
                    disabled={!mailDomainInfo.domain}
                    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>
            )}

            {/* Step 3: 管理員資訊 */}
            {step === 'admin' && (
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      管理員姓名 <span className="text-green-400">*</span>
                    </label>
                    <input
                      type="text"
                      value={adminInfo.admin_legal_name}
                      onChange={(e) => setAdminInfo({ ...adminInfo, admin_legal_name: 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>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      英文姓名
                    </label>
                    <input
                      type="text"
                      value={adminInfo.admin_english_name}
                      onChange={(e) => setAdminInfo({ ...adminInfo, admin_english_name: 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="例如: Porsche Chen"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    Email <span className="text-green-400">*</span>
                  </label>
                  <input
                    type="email"
                    value={adminInfo.admin_email}
                    onChange={(e) => setAdminInfo({ ...adminInfo, admin_email: 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@example.com"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    電話
                  </label>
                  <input
                    type="tel"
                    value={adminInfo.admin_phone}
                    onChange={(e) => setAdminInfo({ ...adminInfo, admin_phone: 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="例如: 0912345678"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    密碼設定方式
                  </label>
                  <div className="space-y-2">
                    <label className="flex items-center p-3 bg-gray-700/50 border border-gray-600 rounded-lg cursor-pointer hover:bg-gray-700">
                      <input
                        type="radio"
                        name="passwordMethod"
                        checked={adminInfo.password_method === 'auto'}
                        onChange={() => setAdminInfo({ ...adminInfo, password_method: 'auto', manual_password: undefined })}
                        className="mr-3"
                      />
                      <span className="text-gray-200">自動產生密碼（推薦）</span>
                    </label>
                    <label className="flex items-center p-3 bg-gray-700/50 border border-gray-600 rounded-lg cursor-pointer hover:bg-gray-700">
                      <input
                        type="radio"
                        name="passwordMethod"
                        checked={adminInfo.password_method === 'manual'}
                        onChange={() => setAdminInfo({ ...adminInfo, password_method: 'manual' })}
                        className="mr-3"
                      />
                      <span className="text-gray-200">手動輸入密碼</span>
                    </label>
                  </div>
                </div>

                {adminInfo.password_method === 'manual' && (
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      密碼 <span className="text-green-400">*</span>
                    </label>
                    <input
                      type="password"
                      value={adminInfo.manual_password || ''}
                      onChange={(e) => setAdminInfo({ ...adminInfo, manual_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 className="bg-blue-900/20 border border-blue-700 rounded-lg p-4 mt-6">
                  <p className="text-sm text-blue-300">
                    <strong>💡 提示：</strong>
                  </p>
                  <ul className="text-sm text-blue-300 mt-2 space-y-1 ml-4 list-disc">
                    <li>系統管理員將自動歸屬於「初始化部門」</li>
                    <li>初始化完成後，可由人資建立正式組織架構</li>
                    <li>人資可將管理員調動至正式的 MIS 部門</li>
                  </ul>
                </div>

                <div className="flex gap-4 mt-8">
                  <button
                    onClick={() => setStep('maildomain')}
                    className="px-6 py-2 border border-gray-600 rounded-lg text-gray-300 hover:bg-gray-700 transition-colors"
                  >
                    上一步
                  </button>
                  <button
                    onClick={handleSaveAdmin}
                    disabled={!adminInfo.admin_legal_name || !adminInfo.admin_email || (adminInfo.password_method === 'manual' && !adminInfo.manual_password)}
                    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>
            )}

            {/* Step 4: 確認資訊 */}
            {step === 'confirm' && (
              <div className="space-y-6">
                <div className="bg-blue-900/20 border border-blue-700 rounded-lg p-4">
                  <p className="text-sm text-blue-300">
                    <strong>⚠️ 注意：</strong>執行初始化後，系統將自動建立：
                  </p>
                  <ul className="text-sm text-blue-300 mt-2 space-y-1 ml-4 list-disc">
                    <li>租戶資料（公司）</li>
                    <li>初始化部門（INIT）</li>
                    <li>系統管理員帳號（{companyInfo.tenant_prefix}001）</li>
                    <li>Keycloak SSO 帳號</li>
                    <li>郵件帳號 ({adminInfo.admin_email})</li>
                  </ul>
                  <p className="text-sm text-blue-300 mt-2">
                    此操作無法復原，請確認資料正確。
                  </p>
                </div>

                <div className="space-y-4">
                  <div className="bg-gray-700/50 rounded-lg p-4">
                    <h3 className="text-lg font-semibold text-green-300 mb-3">公司資訊</h3>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-gray-400">公司名稱：</span>
                        <span className="text-gray-200">{companyInfo.company_name}</span>
                      </div>
                      {companyInfo.company_name_en && (
                        <div className="flex justify-between">
                          <span className="text-gray-400">英文名稱：</span>
                          <span className="text-gray-200">{companyInfo.company_name_en}</span>
                        </div>
                      )}
                      <div className="flex justify-between">
                        <span className="text-gray-400">租戶代碼：</span>
                        <span className="text-gray-200 font-mono">{companyInfo.tenant_code}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">員工編號前綴：</span>
                        <span className="text-gray-200 font-mono">{companyInfo.tenant_prefix}</span>
                      </div>
                      {companyInfo.tax_id && (
                        <div className="flex justify-between">
                          <span className="text-gray-400">統一編號：</span>
                          <span className="text-gray-200">{companyInfo.tax_id}</span>
                        </div>
                      )}
                    </div>
                  </div>

                  <div className="bg-gray-700/50 rounded-lg p-4">
                    <h3 className="text-lg font-semibold text-green-300 mb-3">郵件網域</h3>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-gray-400">網域條件：</span>
                        <span className="text-gray-200">
                          {mailDomainInfo.domain_set === 1 ? '組織網域' : '部門網域'}
                        </span>
                      </div>
                      {mailDomainInfo.domain_set === 1 && mailDomainInfo.domain && (
                        <div className="flex justify-between">
                          <span className="text-gray-400">組織網域：</span>
                          <span className="text-gray-200 font-mono">{mailDomainInfo.domain}</span>
                        </div>
                      )}
                    </div>
                  </div>

                  <div className="bg-gray-700/50 rounded-lg p-4">
                    <h3 className="text-lg font-semibold text-green-300 mb-3">管理員資訊</h3>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-gray-400">姓名：</span>
                        <span className="text-gray-200">{adminInfo.admin_legal_name}</span>
                      </div>
                      {adminInfo.admin_english_name && (
                        <div className="flex justify-between">
                          <span className="text-gray-400">英文姓名：</span>
                          <span className="text-gray-200">{adminInfo.admin_english_name}</span>
                        </div>
                      )}
                      <div className="flex justify-between">
                        <span className="text-gray-400">Email：</span>
                        <span className="text-gray-200">{adminInfo.admin_email}</span>
                      </div>
                      {adminInfo.admin_phone && (
                        <div className="flex justify-between">
                          <span className="text-gray-400">電話：</span>
                          <span className="text-gray-200">{adminInfo.admin_phone}</span>
                        </div>
                      )}
                    </div>
                  </div>

                  {generatedPassword && (
                    <div className="bg-yellow-900/20 border border-yellow-700 rounded-lg p-4">
                      <h3 className="text-lg font-semibold text-yellow-300 mb-3">⚠️ 初始密碼（請妥善保存）</h3>
                      <div className="bg-gray-900 rounded p-3 font-mono text-yellow-200 text-center text-lg">
                        {generatedPassword}
                      </div>
                      <p className="text-xs text-yellow-400 mt-2">
                        此密碼僅顯示一次，請立即記錄。首次登入後請更改密碼。
                      </p>
                    </div>
                  )}
                </div>

                <div className="bg-yellow-900/20 border border-yellow-700 rounded-lg p-4">
                  <p className="text-sm text-yellow-300">
                    <strong>📋 初始化後續工作：</strong>
                  </p>
                  <ol className="text-sm text-yellow-300 mt-2 space-y-1 ml-4 list-decimal">
                    <li>使用管理員帳號登入系統</li>
                    <li>建立「人資部門」並新增第一位人資人員</li>
                    <li>由人資建立完整組織架構</li>
                    <li>由人資將管理員調動至正式部門（選填）</li>
                  </ol>
                </div>

                <div className="flex gap-4 mt-8">
                  <button
                    onClick={() => setStep('admin')}
                    className="px-6 py-2 border border-gray-600 rounded-lg text-gray-300 hover:bg-gray-700 transition-colors"
                  >
                    上一步
                  </button>
                  <button
                    onClick={handleExecute}
                    className="flex-1 bg-gradient-to-r from-green-600 to-emerald-600 text-white py-3 px-6 rounded-lg font-semibold text-lg hover:from-green-700 hover:to-emerald-700 transition-all transform hover:scale-105 shadow-lg"
                  >
                    🚀 執行初始化
                  </button>
                </div>
              </div>
            )}

            {/* Step 4: 執行中 */}
            {step === 'executing' && (
              <div className="text-center py-12">
                <div className="w-20 h-20 border-4 border-green-500 border-t-transparent rounded-full animate-spin mx-auto mb-6"></div>
                <h3 className="text-xl font-semibold text-green-300 mb-2">正在初始化系統</h3>
                <p className="text-gray-400">請稍候，這可能需要幾秒鐘...</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}