'use client'

import type { Department, User } from '../types'
import { useThemeStyles, cn } from '@/lib/ui-styles'
import { formatDateTime } from '../../_utils/formatters'
import Modal from '@/components/ui/Modal'

interface UserEditModalProps {
  isOpen: boolean
  user: User | null
  departments: Department[]
  editingUsername: string
  selectedDepartment: string
  managerNames: string[]
  showTransferButton: boolean
  canChangeProtectedFields: boolean
  onChangeUsername: (value: string) => void
  onChangeDepartment: (value: string) => void
  onClose: () => void
  onSave: () => void
  onToggleRole: () => void
  onToggleActive: () => void
  onToggleDownload: () => void
  onDelete: () => void
  onOpenTransferModal: () => void
  hasDepartments: boolean
}

export default function UserEditModal({
  isOpen,
  user,
  departments,
  editingUsername,
  selectedDepartment,
  managerNames,
  showTransferButton,
  canChangeProtectedFields,
  onChangeUsername,
  onChangeDepartment,
  onClose,
  onSave,
  onToggleRole,
  onToggleActive,
  onToggleDownload,
  onDelete,
  onOpenTransferModal,
  hasDepartments,
}: UserEditModalProps) {
  const styles = useThemeStyles()
  if (!isOpen || !user) return null

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="编辑用户"
      size="large"
      containerClassName="max-h-[90vh]"
      bodyClassName="overflow-y-auto max-h-[calc(90vh-180px)]"
      footer={
        <div className="flex justify-end gap-3">
          <button
            type="button"
            onClick={onClose}
            className={cn(
              styles.buttonStyles.secondary,
              'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200'
            )}
          >
            取消
          </button>
          <button
            type="button"
            onClick={onSave}
            className={cn(
              styles.buttonStyles.primary,
              'bg-indigo-600 hover:bg-indigo-700 text-white'
            )}
          >
            保存
          </button>
        </div>
      }
    >
      <div className="space-y-5">
        <div>
          <p className="text-sm text-slate-500 dark:text-slate-400 mb-4 break-all">{user.email}</p>
        </div>

        <section className="grid gap-4 md:grid-cols-3">
            <div>
              <p className="text-sm text-slate-500 dark:text-slate-400">注册时间</p>
              <p className="text-sm font-medium text-slate-900 dark:text-white">
                {formatDateTime(user.createdAt)}
              </p>
            </div>
            <div className="md:col-span-2">
              <p className="text-sm text-slate-500 dark:text-slate-400">直属上级</p>
              <p className="text-sm font-medium text-slate-900 dark:text-white">
                {managerNames.length ? managerNames.join('、') : '暂无'}
              </p>
            </div>
          </section>

          <section className="space-y-2">
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">用户名</label>
            <input
              type="text"
              value={editingUsername}
              onChange={(e) => onChangeUsername(e.target.value)}
              className={styles.inputStyles.base}
              placeholder="请输入用户名"
            />
          </section>

          <section className="space-y-2">
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">选择部门</label>
            <select
              value={selectedDepartment}
              onChange={(e) => onChangeDepartment(e.target.value)}
              disabled={!canChangeProtectedFields}
              className={cn(styles.inputStyles.base, 'pr-10')}
            >
              <option value="">-- 未分配部门 --</option>
              {departments.map((dept) => (
                <option key={dept.id} value={dept.name}>
                  {dept.name}
                </option>
              ))}
            </select>
            <p className="text-xs text-slate-500 dark:text-slate-400">
              {canChangeProtectedFields
                ? '更改部门后将自动为其匹配该部门的管理员作为直属上级。'
                : '只有最高权限账号可以调整用户部门。'}
            </p>
          </section>

          {canChangeProtectedFields && (
          <section className="space-y-3">
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">角色与高危操作</label>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <button
                type="button"
                onClick={onToggleRole}
                className={cn(
                  styles.buttonStyles.secondary,
                  'w-full justify-center h-12',
                  'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-200',
                  user.role === 'ADMIN' && '!bg-purple-600 !text-white hover:!bg-purple-700',
                )}
              >
                {user.role === 'ADMIN' ? '管理员' : '设为管理员'}
              </button>
              <button
                type="button"
                onClick={onDelete}
                className={cn(
                  styles.buttonStyles.danger,
                  'w-full justify-center h-12',
                )}
              >
                删除用户
              </button>
            </div>
          </section>
          )}

          {canChangeProtectedFields && (
          <section className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <button
              type="button"
              onClick={onToggleActive}
              className={cn(
                styles.buttonStyles.secondary,
                'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-200', // 显式添加文字颜色，确保在浅色模式下清晰可见
                user.isActive
                  ? 'bg-rose-100 dark:bg-rose-900/30 text-rose-800 dark:text-rose-300 hover:bg-rose-200 dark:hover:bg-rose-900/50' // 使用更深的文字颜色
                  : 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-300 hover:bg-emerald-200 dark:hover:bg-emerald-900/50', // 使用更深的文字颜色
              )}
            >
              {user.isActive ? '禁用用户' : '激活用户'}
            </button>
            <button
              type="button"
              onClick={onToggleDownload}
              className={cn(
                styles.buttonStyles.secondary,
                'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-200', // 显式添加文字颜色，确保在浅色模式下清晰可见
                user.canDownload
                  ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-900/50' // 使用更深的文字颜色
                  : 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-900/50', // 使用更深的文字颜色
              )}
            >
              {user.canDownload ? '禁止下载' : '允许下载'}
            </button>
          </section>
          )}

          {showTransferButton && (
            <section className="space-y-2 border-t border-slate-200 dark:border-slate-700 pt-4">
              <button
                type="button"
                onClick={onOpenTransferModal}
                className={cn(
                  styles.buttonStyles.primary,
                  'w-full justify-center',
                  // 统一UI样式已包含颜色，不需要额外添加
                )}
              >
                转移最高权限
              </button>
              <p className="text-xs text-slate-500 dark:text-slate-400">仅当前最高权限持有者可执行此操作。</p>
            </section>
          )}

        {!hasDepartments && (
          <div className="text-sm text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
            ⚠️ 暂无部门，请先在系统设置中添加部门。
          </div>
        )}
      </div>
    </Modal>
  )
}