'use client'

import { useState, useEffect } from 'react'
import { useSession } from 'next-auth/react'
import apiClient from '@/lib/api-client'
import FunctionFormModal from './FunctionFormModal'
import AlertDialog from '@/components/ui/AlertDialog'
import ConfirmDialog from '@/components/ui/ConfirmDialog'

interface SystemFunction {
  id: number
  code: string
  name: string
  function_type: number  // 1=NODE, 2=FUNCTION
  upper_function_id: number
  order: number
  function_icon: string
  module_code: string | null
  module_functions: string[]
  description: string
  is_mana: boolean
  is_active: boolean
}

interface ParentFunction {
  id: number
  code: string
  name: string
}

export default function SystemFunctionsPage() {
  const { data: session } = useSession()
  const [allFunctions, setAllFunctions] = useState<SystemFunction[]>([]) // 所有資料
  const [functions, setFunctions] = useState<SystemFunction[]>([]) // 當前頁面顯示的資料
  const [parentFunctions, setParentFunctions] = useState<ParentFunction[]>([])
  const [loading, setLoading] = useState(true)
  const [showModal, setShowModal] = useState(false)
  const [editingFunction, setEditingFunction] = useState<SystemFunction | null>(null)

  // 對話框狀態
  const [alertDialog, setAlertDialog] = useState<{
    isOpen: boolean
    title: string
    message: string
    type: 'info' | 'warning' | 'error' | 'success'
  }>({
    isOpen: false,
    title: '',
    message: '',
    type: 'info',
  })

  const [confirmDialog, setConfirmDialog] = useState<{
    isOpen: boolean
    title: string
    message: string
    type: 'info' | 'warning' | 'error' | 'success'
    onConfirm: () => void
  }>({
    isOpen: false,
    title: '',
    message: '',
    type: 'warning',
    onConfirm: () => {},
  })

  // 篩選條件
  const [filterType, setFilterType] = useState<string>('')
  const [filterActive, setFilterActive] = useState<string>('')
  const [filterParent, setFilterParent] = useState<string>('')

  // 分頁與排序
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [sortField, setSortField] = useState<'order' | 'id'>('order')
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')

  // 載入功能列表
  const loadFunctions = async () => {
    try {
      setLoading(true)
      console.log('[SystemFunctions] Loading functions...')

      // 建立查詢參數 - 不使用 URLSearchParams，直接建立 query string
      let queryParts = ['page_size=100']  // 後端限制最大 100

      if (filterType) {
        queryParts.push(`function_type=${filterType}`)
      }

      // is_active 特殊處理：空字串表示不篩選，所以不加這個參數
      if (filterActive) {
        queryParts.push(`is_active=${filterActive}`)
      } else {
        // 不傳 is_active 參數，讓後端使用預設值或不篩選
        // 為了顯示所有資料（包含停用），我們明確傳 is_active=None 或不傳
      }

      if (filterParent) {
        queryParts.push(`upper_function_id=${filterParent}`)
      }

      const queryString = queryParts.join('&')
      console.log('[SystemFunctions] Query:', queryString)

      const response: any = await apiClient.get(`/system-functions?${queryString}`)
      console.log('[SystemFunctions] Response:', response)
      console.log('[SystemFunctions] Items count:', response.items?.length || 0)
      setAllFunctions(response.items || [])
      setCurrentPage(1) // 重置到第一頁
    } catch (error) {
      console.error('[SystemFunctions] Failed to load functions:', error)
      setAlertDialog({
        isOpen: true,
        title: '載入失敗',
        message: `載入系統功能失敗: ${(error as any)?.message || '未知錯誤'}`,
        type: 'error',
      })
    } finally {
      setLoading(false)
    }
  }

  // 載入上層功能選項 (用於篩選)
  const loadParentFunctions = async () => {
    try {
      const response: any = await apiClient.get('/system-functions?function_type=1&page_size=100')
      const parents = response.items || []
      setParentFunctions([{ id: 0, code: 'root', name: '根層 (無上層)' }, ...parents])
    } catch (error) {
      console.error('Failed to load parent functions:', error)
    }
  }

  useEffect(() => {
    if (session) {
      loadParentFunctions()
      loadFunctions()
    }
  }, [session])

  // 當篩選條件改變時重新載入
  useEffect(() => {
    if (session) {
      loadFunctions()
    }
  }, [filterType, filterActive, filterParent])

  // 排序和分頁處理
  useEffect(() => {
    // 排序
    const sorted = [...allFunctions].sort((a, b) => {
      const aValue = a[sortField]
      const bValue = b[sortField]

      if (sortDirection === 'asc') {
        return aValue > bValue ? 1 : -1
      } else {
        return aValue < bValue ? 1 : -1
      }
    })

    // 分頁
    const startIndex = (currentPage - 1) * pageSize
    const endIndex = startIndex + pageSize
    const paginated = sorted.slice(startIndex, endIndex)

    setFunctions(paginated)
  }, [allFunctions, currentPage, pageSize, sortField, sortDirection])

  // 排序處理
  const handleSort = (field: 'order' | 'id') => {
    if (sortField === field) {
      // 切換排序方向
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
    } else {
      // 新欄位，預設升序
      setSortField(field)
      setSortDirection('asc')
    }
  }

  // 計算總頁數
  const totalPages = Math.ceil(allFunctions.length / pageSize)

  // 切換頁碼
  const handlePageChange = (page: number) => {
    if (page >= 1 && page <= totalPages) {
      setCurrentPage(page)
    }
  }

  // 產生頁碼按鈕
  const renderPageNumbers = () => {
    const pages = []
    const maxVisiblePages = 5
    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2))
    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1)

    if (endPage - startPage < maxVisiblePages - 1) {
      startPage = Math.max(1, endPage - maxVisiblePages + 1)
    }

    for (let i = startPage; i <= endPage; i++) {
      pages.push(
        <button
          key={i}
          onClick={() => handlePageChange(i)}
          className={`px-3 py-1 rounded ${
            i === currentPage
              ? 'bg-blue-600 text-white'
              : 'bg-white text-gray-700 hover:bg-gray-100'
          } border border-gray-300`}
        >
          {i}
        </button>
      )
    }

    return pages
  }

  // 新增功能
  const handleCreate = () => {
    setEditingFunction(null)
    setShowModal(true)
  }

  // 編輯功能
  const handleEdit = (func: SystemFunction) => {
    setEditingFunction(func)
    setShowModal(true)
  }

  // 刪除功能 (軟刪除)
  const handleDelete = (id: number) => {
    setConfirmDialog({
      isOpen: true,
      title: '確認刪除',
      message: '確定要刪除此功能嗎？刪除後將無法復原。',
      type: 'warning',
      onConfirm: async () => {
        try {
          await apiClient.delete(`/system-functions/${id}`)
          loadFunctions()
          setAlertDialog({
            isOpen: true,
            title: '刪除成功',
            message: '功能已成功刪除',
            type: 'success',
          })
        } catch (error) {
          console.error('Failed to delete function:', error)
          setAlertDialog({
            isOpen: true,
            title: '刪除失敗',
            message: '刪除功能時發生錯誤，請稍後再試',
            type: 'error',
          })
        } finally {
          setConfirmDialog({ ...confirmDialog, isOpen: false })
        }
      },
    })
  }

  // 切換啟用狀態
  const handleToggleActive = async (func: SystemFunction) => {
    try {
      await apiClient.patch(`/system-functions/${func.id}`, {
        is_active: !func.is_active,
        edit_by: 1 // TODO: 從 session 取得當前用戶 ID
      })
      loadFunctions()
    } catch (error) {
      console.error('Failed to toggle active status:', error)
      setAlertDialog({
        isOpen: true,
        title: '操作失敗',
        message: '切換狀態失敗，請稍後再試',
        type: 'error',
      })
    }
  }

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

  return (
    <div>
      {/* Header */}
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">🎯 系統功能設定</h1>
          <p className="mt-1 text-sm text-gray-500">
            管理系統功能列表，包含功能代碼、名稱、圖示等設定
          </p>
        </div>
        <button
          onClick={handleCreate}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        >
          + 新增功能
        </button>
      </div>

      {/* 篩選條件 */}
      <div className="mb-4 flex gap-4">
        <div>
          <label className="block text-xs font-medium text-gray-700 mb-1">類型</label>
          <select
            value={filterType}
            onChange={(e) => setFilterType(e.target.value)}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm text-gray-900 bg-white"
          >
            <option value="" className="text-gray-900">全部</option>
            <option value="1" className="text-gray-900">NODE (分類)</option>
            <option value="2" className="text-gray-900">FUNCTION (功能)</option>
          </select>
        </div>

        <div>
          <label className="block text-xs font-medium text-gray-700 mb-1">啟用狀態</label>
          <select
            value={filterActive}
            onChange={(e) => setFilterActive(e.target.value)}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm text-gray-900 bg-white"
          >
            <option value="" className="text-gray-900">全部</option>
            <option value="true" className="text-gray-900">啟用</option>
            <option value="false" className="text-gray-900">停用</option>
          </select>
        </div>

        <div>
          <label className="block text-xs font-medium text-gray-700 mb-1">上層項目</label>
          <select
            value={filterParent}
            onChange={(e) => setFilterParent(e.target.value)}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm text-gray-900 bg-white"
          >
            <option value="" className="text-gray-900">全部</option>
            {parentFunctions.map(parent => (
              <option key={parent.id} value={parent.id} className="text-gray-900">
                {parent.name}
              </option>
            ))}
          </select>
        </div>

        {(filterType || filterActive || filterParent) && (
          <div className="flex items-end">
            <button
              onClick={() => {
                setFilterType('')
                setFilterActive('')
                setFilterParent('')
              }}
              className="px-3 py-2 text-sm text-gray-600 hover:text-gray-900"
            >
              清除篩選
            </button>
          </div>
        )}
      </div>

      {/* 每頁筆數選擇 */}
      <div className="mb-3 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <label className="text-sm text-gray-700">每頁顯示</label>
          <select
            value={pageSize}
            onChange={(e) => {
              setPageSize(Number(e.target.value))
              setCurrentPage(1)
            }}
            className="px-3 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm text-gray-900 bg-white"
          >
            <option value={5} className="text-gray-900">5</option>
            <option value={10} className="text-gray-900">10</option>
            <option value={15} className="text-gray-900">15</option>
            <option value={20} className="text-gray-900">20</option>
            <option value={25} className="text-gray-900">25</option>
            <option value={50} className="text-gray-900">50</option>
          </select>
          <span className="text-sm text-gray-700">筆</span>
        </div>
        <div className="text-sm text-gray-700">
          共 {allFunctions.length} 筆資料
        </div>
      </div>

      {/* Table */}
      <div className="bg-white rounded-lg shadow overflow-hidden">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-blue-900">
            <tr>
              <th className="px-6 py-3 text-left text-sm font-medium text-white uppercase tracking-wider">
                ID
              </th>
              <th className="px-6 py-3 text-left text-sm font-medium text-white uppercase tracking-wider">
                圖示
              </th>
              <th className="px-6 py-3 text-left text-sm font-medium text-white uppercase tracking-wider">
                功能代碼
              </th>
              <th className="px-6 py-3 text-left text-sm font-medium text-white uppercase tracking-wider">
                功能名稱
              </th>
              <th
                className="px-6 py-3 text-left text-sm font-medium text-white uppercase tracking-wider cursor-pointer hover:bg-blue-800"
                onClick={() => handleSort('order')}
              >
                <div className="flex items-center gap-1">
                  順序
                  {sortField === 'order' && (
                    <span className="text-yellow-300">
                      {sortDirection === 'asc' ? '↑' : '↓'}
                    </span>
                  )}
                </div>
              </th>
              <th className="px-6 py-3 text-center text-sm font-medium text-white uppercase tracking-wider">
                啟用
              </th>
              <th className="px-6 py-3 text-center text-sm font-medium text-white uppercase tracking-wider">
                操作
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {functions.map((func) => (
              <tr key={func.id} className="hover:bg-gray-50">
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  {func.id}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-xl">
                  {func.function_icon}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
                  {func.code}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  {func.name}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {func.order}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-center">
                  <button
                    onClick={() => handleToggleActive(func)}
                    className={`px-3 py-1 rounded text-xs font-medium transition-colors cursor-pointer ${
                      func.is_active
                        ? 'bg-green-100 text-green-800 hover:bg-green-200'
                        : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
                    }`}
                  >
                    {func.is_active ? '是' : '否'}
                  </button>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-center text-sm font-medium space-x-3">
                  <button
                    onClick={() => handleEdit(func)}
                    className="px-3 py-1 border border-blue-600 text-blue-600 rounded hover:bg-blue-50 transition-colors"
                  >
                    編輯
                  </button>
                  <button
                    onClick={() => handleDelete(func.id)}
                    className="px-3 py-1 border border-red-600 text-red-600 rounded hover:bg-red-50 transition-colors"
                  >
                    刪除
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {allFunctions.length === 0 && !loading && (
        <div className="text-center py-12 text-gray-500">
          尚無功能資料
        </div>
      )}

      {/* 分頁控制 */}
      {allFunctions.length > 0 && (
        <div className="mt-4 flex items-center justify-between">
          <div className="text-sm text-gray-700">
            顯示第 {(currentPage - 1) * pageSize + 1} - {Math.min(currentPage * pageSize, allFunctions.length)} 筆，
            共 {allFunctions.length} 筆
          </div>

          <div className="flex items-center gap-2">
            {/* 第一頁 */}
            <button
              onClick={() => handlePageChange(1)}
              disabled={currentPage === 1}
              className="px-3 py-1 rounded bg-white text-gray-700 border border-gray-300 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              ««
            </button>

            {/* 上一頁 */}
            <button
              onClick={() => handlePageChange(currentPage - 1)}
              disabled={currentPage === 1}
              className="px-3 py-1 rounded bg-white text-gray-700 border border-gray-300 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              «
            </button>

            {/* 頁碼 */}
            {renderPageNumbers()}

            {/* 下一頁 */}
            <button
              onClick={() => handlePageChange(currentPage + 1)}
              disabled={currentPage === totalPages}
              className="px-3 py-1 rounded bg-white text-gray-700 border border-gray-300 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              »
            </button>

            {/* 最後一頁 */}
            <button
              onClick={() => handlePageChange(totalPages)}
              disabled={currentPage === totalPages}
              className="px-3 py-1 rounded bg-white text-gray-700 border border-gray-300 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              »»
            </button>

            {/* 跳頁 */}
            <div className="flex items-center gap-2 ml-4">
              <span className="text-sm text-gray-700">跳至</span>
              <input
                type="number"
                min={1}
                max={totalPages}
                value={currentPage}
                onChange={(e) => {
                  const page = Number(e.target.value)
                  if (page >= 1 && page <= totalPages) {
                    handlePageChange(page)
                  }
                }}
                className="w-16 px-2 py-1 border border-gray-300 rounded text-center text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <span className="text-sm text-gray-700">頁</span>
            </div>
          </div>
        </div>
      )}

      {/* Modal */}
      {showModal && (
        <FunctionFormModal
          function={editingFunction}
          onClose={() => setShowModal(false)}
          onSave={(isEdit: boolean) => {
            setShowModal(false)
            loadFunctions()
            setAlertDialog({
              isOpen: true,
              title: '儲存成功',
              message: `功能已成功${isEdit ? '更新' : '新增'}`,
              type: 'success',
            })
          }}
        />
      )}

      {/* Alert Dialog */}
      <AlertDialog
        isOpen={alertDialog.isOpen}
        title={alertDialog.title}
        message={alertDialog.message}
        type={alertDialog.type}
        onConfirm={() => setAlertDialog({ ...alertDialog, isOpen: false })}
      />

      {/* Confirm Dialog */}
      <ConfirmDialog
        isOpen={confirmDialog.isOpen}
        title={confirmDialog.title}
        message={confirmDialog.message}
        type={confirmDialog.type}
        onConfirm={confirmDialog.onConfirm}
        onCancel={() => setConfirmDialog({ ...confirmDialog, isOpen: false })}
      />
    </div>
  )
}