'use client'

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

interface Department {
  id: number
  tenant_id: number
  parent_id: number | null
  code: string
  name: string
  name_en: string | null
  depth: number
  email_domain: string | null
  effective_email_domain: string | null
  email_address: string | null
  email_quota_mb: number
  description: string | null
  is_active: boolean
  member_count: number
}

interface ParentDepartment {
  id: number
  name: string
  depth: number
}

export default function DepartmentsPage() {
  const [departments, setDepartments] = useState<Department[]>([])
  const [parentDepartments, setParentDepartments] = useState<ParentDepartment[]>([])
  const [loading, setLoading] = useState(true)
  const [showModal, setShowModal] = useState(false)
  const [editingDepartment, setEditingDepartment] = useState<Department | null>(null)

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

  // 分頁
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)

  // 對話框
  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
    onConfirm: () => void
  }>({
    isOpen: false,
    title: '',
    message: '',
    onConfirm: () => {},
  })

  useEffect(() => {
    loadDepartments()
    loadParentDepartments()
  }, [])

  const loadDepartments = async () => {
    try {
      setLoading(true)
      const response: any = await apiClient.get('/departments?include_inactive=true')
      setDepartments(response || [])
    } catch (error: any) {
      console.error('Failed to load departments:', error)
      setAlertDialog({
        isOpen: true,
        title: '載入失敗',
        message: error.response?.data?.detail || '無法載入部門資料',
        type: 'error',
      })
    } finally {
      setLoading(false)
    }
  }

  const loadParentDepartments = async () => {
    try {
      // 載入所有部門作為上層部門選項
      const response: any = await apiClient.get('/departments?include_inactive=false')
      setParentDepartments(response || [])
    } catch (error) {
      console.error('Failed to load parent departments:', error)
    }
  }

  const handleAdd = () => {
    setEditingDepartment(null)
    setShowModal(true)
  }

  const handleEdit = (department: Department) => {
    setEditingDepartment(department)
    setShowModal(true)
  }

  const handleDelete = (department: Department) => {
    setConfirmDialog({
      isOpen: true,
      title: '確認刪除',
      message: `確定要刪除部門「${department.name}」嗎?此操作無法復原。`,
      onConfirm: async () => {
        try {
          await apiClient.delete(`/departments/${department.id}`)
          loadDepartments()
          setAlertDialog({
            isOpen: true,
            title: '刪除成功',
            message: '部門已成功刪除',
            type: 'success',
          })
        } catch (error: any) {
          setAlertDialog({
            isOpen: true,
            title: '刪除失敗',
            message: error.response?.data?.detail || '刪除失敗，請稍後再試',
            type: 'error',
          })
        }
        setConfirmDialog({ ...confirmDialog, isOpen: false })
      },
    })
  }

  const handleToggleActive = async (department: Department) => {
    try {
      await apiClient.patch(`/departments/${department.id}`, {
        is_active: !department.is_active,
      })
      loadDepartments()
      setAlertDialog({
        isOpen: true,
        title: '切換成功',
        message: `部門已${!department.is_active ? '啟用' : '停用'}`,
        type: 'success',
      })
    } catch (error: any) {
      setAlertDialog({
        isOpen: true,
        title: '切換失敗',
        message: error.response?.data?.detail || '切換狀態失敗',
        type: 'error',
      })
    }
  }

  // 篩選邏輯
  const filteredDepartments = departments.filter(dept => {
    if (filterDepth !== 'all' && dept.depth !== parseInt(filterDepth)) return false
    if (filterActive === 'active' && !dept.is_active) return false
    if (filterActive === 'inactive' && dept.is_active) return false
    if (filterParent === 'top' && dept.parent_id !== null) return false
    if (filterParent !== 'all' && filterParent !== 'top' && dept.parent_id !== parseInt(filterParent)) return false
    return true
  })

  // 分頁邏輯
  const totalPages = Math.ceil(filteredDepartments.length / pageSize)
  const startIndex = (currentPage - 1) * pageSize
  const paginatedDepartments = filteredDepartments.slice(startIndex, startIndex + pageSize)

  const getParentName = (parentId: number | null) => {
    if (!parentId) return '-'
    const parent = departments.find(d => d.id === parentId)
    return parent ? parent.name : '-'
  }

  const getDepthLabel = (depth: number) => {
    return `第${depth + 1}層`
  }

  return (
    <div>
      {/* Header */}
      <div className="mb-6 flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">部門資料維護</h1>
          <p className="text-sm text-gray-600 mt-1">管理組織架構與部門資料</p>
        </div>
        <button
          onClick={handleAdd}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
        >
          + 新增部門
        </button>
      </div>

      {/* Filters */}
      <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-4">
        <div className="grid grid-cols-3 gap-4">
          <div>
            <label className="block text-xs font-medium text-gray-700 mb-1">層級</label>
            <select
              value={filterDepth}
              onChange={(e) => { setFilterDepth(e.target.value); setCurrentPage(1); }}
              className="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="all">全部</option>
              <option value="0">第1層</option>
              <option value="1">第2層</option>
              <option value="2">第3層</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); setCurrentPage(1); }}
              className="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="all">全部</option>
              <option value="active">啟用</option>
              <option value="inactive">停用</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); setCurrentPage(1); }}
              className="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="all">全部</option>
              <option value="top">第一層</option>
              {parentDepartments.map(dept => (
                <option key={dept.id} value={dept.id}>{dept.name}</option>
              ))}
            </select>
          </div>
        </div>
      </div>

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

      {/* DataTable */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-blue-900">
              <tr>
                <th className="px-4 py-2.5 text-left text-xs font-semibold text-white uppercase tracking-wider">ID</th>
                <th className="px-4 py-2.5 text-left text-xs font-semibold text-white uppercase tracking-wider">層級</th>
                <th className="px-4 py-2.5 text-left text-xs font-semibold text-white uppercase tracking-wider">部門代碼</th>
                <th className="px-4 py-2.5 text-left text-xs font-semibold text-white uppercase tracking-wider">部門名稱</th>
                <th className="px-4 py-2.5 text-left text-xs font-semibold text-white uppercase tracking-wider">上層部門</th>
                <th className="px-4 py-2.5 text-left text-xs font-semibold text-white uppercase tracking-wider">郵件網域</th>
                <th className="px-4 py-2.5 text-left text-xs font-semibold text-white uppercase tracking-wider">成員數</th>
                <th className="px-4 py-2.5 text-left text-xs font-semibold text-white uppercase tracking-wider">啟用</th>
                <th className="px-4 py-2.5 text-center text-xs font-semibold text-white uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {loading ? (
                <tr>
                  <td colSpan={9} className="px-4 py-8 text-center text-sm text-gray-500">
                    載入中...
                  </td>
                </tr>
              ) : paginatedDepartments.length === 0 ? (
                <tr>
                  <td colSpan={9} className="px-4 py-8 text-center text-sm text-gray-500">
                    尚無部門資料
                  </td>
                </tr>
              ) : (
                paginatedDepartments.map((dept) => (
                  <tr key={dept.id} className="hover:bg-gray-50">
                    <td className="px-4 py-2.5 text-sm text-gray-900">{dept.id}</td>
                    <td className="px-4 py-2.5 text-sm text-gray-900">{getDepthLabel(dept.depth)}</td>
                    <td className="px-4 py-2.5 text-sm text-gray-900 font-medium">{dept.code}</td>
                    <td className="px-4 py-2.5 text-sm text-gray-900">{dept.name}</td>
                    <td className="px-4 py-2.5 text-sm text-gray-600">{getParentName(dept.parent_id)}</td>
                    <td className="px-4 py-2.5 text-sm text-gray-600">{dept.effective_email_domain || '-'}</td>
                    <td className="px-4 py-2.5 text-sm text-gray-900">{dept.member_count || 0}</td>
                    <td className="px-4 py-2.5">
                      <button
                        onClick={() => handleToggleActive(dept)}
                        className={`px-2 py-1 rounded text-xs font-medium cursor-pointer ${
                          dept.is_active
                            ? 'bg-green-100 text-green-800 hover:bg-green-200'
                            : 'bg-red-100 text-red-800 hover:bg-red-200'
                        }`}
                      >
                        {dept.is_active ? '是' : '否'}
                      </button>
                    </td>
                    <td className="px-4 py-2.5 text-center">
                      <div className="flex justify-center gap-2">
                        <button
                          onClick={() => handleEdit(dept)}
                          className="px-3 py-1 text-xs font-medium text-blue-600 hover:text-blue-800 border border-blue-600 hover:border-blue-800 rounded transition-colors"
                        >
                          編輯
                        </button>
                        <button
                          onClick={() => handleDelete(dept)}
                          className="px-3 py-1 text-xs font-medium text-red-600 hover:text-red-800 border border-red-600 hover:border-red-800 rounded transition-colors"
                        >
                          刪除
                        </button>
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="bg-gray-50 px-4 py-3 flex items-center justify-between border-t border-gray-200">
            <div className="text-sm text-gray-700">
              顯示第 {startIndex + 1} - {Math.min(startIndex + pageSize, filteredDepartments.length)} 筆，共 {filteredDepartments.length} 筆
            </div>
            <div className="flex gap-2">
              <button
                onClick={() => setCurrentPage(1)}
                disabled={currentPage === 1}
                className="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                «
              </button>
              <button
                onClick={() => setCurrentPage(currentPage - 1)}
                disabled={currentPage === 1}
                className="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                ‹
              </button>
              {[...Array(totalPages)].map((_, i) => (
                <button
                  key={i + 1}
                  onClick={() => setCurrentPage(i + 1)}
                  className={`px-3 py-1 text-sm border rounded ${
                    currentPage === i + 1
                      ? 'bg-blue-600 text-white border-blue-600'
                      : 'border-gray-300 hover:bg-gray-100'
                  }`}
                >
                  {i + 1}
                </button>
              ))}
              <button
                onClick={() => setCurrentPage(currentPage + 1)}
                disabled={currentPage === totalPages}
                className="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                ›
              </button>
              <button
                onClick={() => setCurrentPage(totalPages)}
                disabled={currentPage === totalPages}
                className="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                »
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Modal */}
      {showModal && (
        <DepartmentFormModal
          department={editingDepartment}
          parentDepartments={parentDepartments}
          onClose={() => setShowModal(false)}
          onSave={(isEdit: boolean) => {
            setShowModal(false)
            loadDepartments()
            loadParentDepartments()
            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}
        onConfirm={confirmDialog.onConfirm}
        onCancel={() => setConfirmDialog({ ...confirmDialog, isOpen: false })}
      />
    </div>
  )
}