'use client'

import { useEffect, useState } from 'react'
import { useSession } from 'next-auth/react'

interface EmailAccount {
  id: number
  email_address: string
  quota_mb: number
  used_mb?: number
  forward_to?: string
  auto_reply?: string
  is_active: boolean
  created_at: string
  updated_at: string
}

interface EmailAccountsTabProps {
  employeeId: number
  // Phase 2.4: 員工主要身份資訊
  primaryIdentity?: {
    email_domain: string
    business_unit_name: string
    email_quota_mb: number
  }
}

export default function EmailAccountsTab({ employeeId, primaryIdentity }: EmailAccountsTabProps) {
  const { data: session } = useSession()
  const [emailAccounts, setEmailAccounts] = useState<EmailAccount[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [showAddForm, setShowAddForm] = useState(false)

  // Phase 2.4: 根據主要身份設定預設網域和配額
  const defaultDomain = primaryIdentity?.email_domain || 'porscheworld.tw'
  const defaultQuota = primaryIdentity?.email_quota_mb || 2048

  const [newEmail, setNewEmail] = useState({
    emailPrefix: '',
    domain: defaultDomain,
    quota_mb: defaultQuota,
  })

  useEffect(() => {
    fetchEmailAccounts()
  }, [employeeId])

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

      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/email-accounts/?employee_id=${employeeId}`
      )

      if (!response.ok) {
        throw new Error('無法載入郵件帳號')
      }

      const data = await response.json()
      setEmailAccounts(data.items || [])
    } catch (err) {
      setError(err instanceof Error ? err.message : '載入失敗')
    } finally {
      setLoading(false)
    }
  }

  const handleCreateEmailAccount = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!newEmail.emailPrefix.trim()) {
      alert('請輸入郵件帳號')
      return
    }

    try {
      const emailAddress = `${newEmail.emailPrefix}@${newEmail.domain}`

      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/email-accounts/`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            employee_id: employeeId,
            email_address: emailAddress,
            quota_mb: newEmail.quota_mb,
          }),
        }
      )

      if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.detail || '創建郵件帳號失敗')
      }

      alert('郵件帳號創建成功!')
      setShowAddForm(false)
      setNewEmail({ emailPrefix: '', domain: 'porscheworld.tw', quota_mb: 2048 })
      fetchEmailAccounts()
    } catch (err) {
      alert(err instanceof Error ? err.message : '操作失敗')
    }
  }

  const handleToggleActive = async (accountId: number, currentStatus: boolean) => {
    if (!confirm(`確定要${currentStatus ? '停用' : '啟用'}此郵件帳號嗎?`)) {
      return
    }

    try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/email-accounts/${accountId}`,
        {
          method: currentStatus ? 'DELETE' : 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: !currentStatus ? JSON.stringify({ is_active: true }) : undefined,
        }
      )

      if (!response.ok) {
        throw new Error('操作失敗')
      }

      alert(`郵件帳號已${currentStatus ? '停用' : '啟用'}`)
      fetchEmailAccounts()
    } catch (err) {
      alert(err instanceof Error ? err.message : '操作失敗')
    }
  }

  const formatQuotaUsage = (used: number, total: number) => {
    const percentage = (used / total) * 100
    return {
      percentage: Math.round(percentage),
      usedGB: (used / 1024).toFixed(2),
      totalGB: (total / 1024).toFixed(2),
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center py-8">
        <div className="text-gray-600">載入中...</div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
        {error}
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* 標題與新增按鈕 */}
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold text-gray-900">郵件帳號列表</h3>
        <button
          onClick={() => setShowAddForm(!showAddForm)}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        >
          {showAddForm ? '取消' : '+ 新增郵件帳號'}
        </button>
      </div>

      {/* 新增表單 */}
      {showAddForm && (
        <form
          onSubmit={handleCreateEmailAccount}
          className="bg-blue-50 border border-blue-200 rounded-lg p-6"
        >
          <h4 className="text-md font-semibold text-gray-900 mb-4">
            新增郵件帳號
          </h4>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                郵件帳號 *
                {primaryIdentity && (
                  <span className="ml-2 text-xs text-blue-600">
                    (預設使用 {primaryIdentity.business_unit_name} 的網域)
                  </span>
                )}
              </label>
              <div className="flex gap-2">
                <input
                  type="text"
                  value={newEmail.emailPrefix}
                  onChange={(e) =>
                    setNewEmail({ ...newEmail, emailPrefix: e.target.value })
                  }
                  placeholder="例如: john.doe"
                  className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  required
                />
                <span className="flex items-center px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg">
                  @
                </span>
                <select
                  value={newEmail.domain}
                  onChange={(e) =>
                    setNewEmail({ ...newEmail, domain: e.target.value })
                  }
                  className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                >
                  <option value="porscheworld.tw">porscheworld.tw</option>
                  <option value="lab.taipei">lab.taipei</option>
                  <option value="ease.taipei">ease.taipei</option>
                </select>
              </div>
              {primaryIdentity && newEmail.domain !== primaryIdentity.email_domain && (
                <p className="mt-1 text-xs text-amber-600">
                  ⚠️ 注意:您選擇的網域與員工所屬事業部不同
                </p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                配額 (MB) *
              </label>
              <select
                value={newEmail.quota_mb}
                onChange={(e) =>
                  setNewEmail({ ...newEmail, quota_mb: parseInt(e.target.value) })
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
              >
                <option value={1024}>1 GB (一般員工)</option>
                <option value={2048}>2 GB (標準)</option>
                <option value={5120}>5 GB (主管)</option>
                <option value={10240}>10 GB (高階)</option>
              </select>
            </div>
          </div>

          <div className="flex gap-2 justify-end">
            <button
              type="button"
              onClick={() => setShowAddForm(false)}
              className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
            >
              取消
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
            >
              創建
            </button>
          </div>
        </form>
      )}

      {/* 郵件帳號列表 */}
      {emailAccounts.length === 0 ? (
        <div className="bg-gray-50 rounded-lg p-8 text-center text-gray-600">
          <p>此員工尚未建立任何郵件帳號</p>
          <p className="text-sm mt-2">點擊上方「新增郵件帳號」按鈕來創建</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-4">
          {emailAccounts.map((account) => {
            const quotaInfo = account.used_mb
              ? formatQuotaUsage(account.used_mb, account.quota_mb)
              : null

            return (
              <div
                key={account.id}
                className={`border rounded-lg p-4 ${
                  account.is_active
                    ? 'bg-white border-gray-200'
                    : 'bg-gray-50 border-gray-300 opacity-60'
                }`}
              >
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    {/* 郵件地址 */}
                    <div className="flex items-center gap-2 mb-2">
                      <h4 className="text-lg font-semibold text-gray-900 font-mono">
                        {account.email_address}
                      </h4>
                      <span
                        className={`px-2 py-1 text-xs font-semibold rounded-full ${
                          account.is_active
                            ? 'bg-green-100 text-green-800'
                            : 'bg-gray-100 text-gray-800'
                        }`}
                      >
                        {account.is_active ? '啟用' : '停用'}
                      </span>
                    </div>

                    {/* 配額資訊 */}
                    <div className="mb-3">
                      <div className="flex items-center justify-between mb-1">
                        <span className="text-sm text-gray-600">儲存空間</span>
                        <span className="text-sm font-medium text-gray-900">
                          {quotaInfo
                            ? `${quotaInfo.usedGB} / ${quotaInfo.totalGB} GB (${quotaInfo.percentage}%)`
                            : `${(account.quota_mb / 1024).toFixed(2)} GB`}
                        </span>
                      </div>
                      {quotaInfo && (
                        <div className="w-full bg-gray-200 rounded-full h-2">
                          <div
                            className={`h-2 rounded-full ${
                              quotaInfo.percentage >= 90
                                ? 'bg-red-600'
                                : quotaInfo.percentage >= 80
                                ? 'bg-yellow-600'
                                : 'bg-green-600'
                            }`}
                            style={{ width: `${quotaInfo.percentage}%` }}
                          />
                        </div>
                      )}
                    </div>

                    {/* 轉寄與自動回覆 */}
                    {account.forward_to && (
                      <div className="text-sm text-gray-600 mb-1">
                        <span className="font-medium">轉寄:</span> {account.forward_to}
                      </div>
                    )}
                    {account.auto_reply && (
                      <div className="text-sm text-gray-600 mb-1">
                        <span className="font-medium">自動回覆:</span> 已啟用
                      </div>
                    )}

                    {/* 時間戳 */}
                    <div className="text-xs text-gray-500 mt-2">
                      建立時間:{' '}
                      {new Date(account.created_at).toLocaleString('zh-TW')}
                    </div>
                  </div>

                  {/* 操作按鈕 */}
                  <div className="flex flex-col gap-2 ml-4">
                    <button
                      onClick={() =>
                        handleToggleActive(account.id, account.is_active)
                      }
                      className={`px-3 py-1 text-sm rounded ${
                        account.is_active
                          ? 'bg-red-100 text-red-700 hover:bg-red-200'
                          : 'bg-green-100 text-green-700 hover:bg-green-200'
                      }`}
                    >
                      {account.is_active ? '停用' : '啟用'}
                    </button>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      )}

      {/* WebMail 連結提示 */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <h4 className="text-sm font-semibold text-blue-900 mb-2">
          📧 WebMail 登入說明
        </h4>
        <p className="text-sm text-blue-800">
          員工可使用 Keycloak SSO 登入{' '}
          <a
            href="https://mail.ease.taipei"
            target="_blank"
            rel="noopener noreferrer"
            className="underline font-semibold"
          >
            WebMail
          </a>
          ,系統會自動載入所有啟用的郵件帳號並支援多帳號切換。
        </p>
        <p className="text-xs text-blue-700 mt-1">
          ⚠️ 注意:員工無法自行新增郵件帳號,所有帳號必須由 HR 透過此系統授予。
        </p>
      </div>
    </div>
  )
}