/**
 * filekorolheader: 员工管理页面 - 企业员工账户管理页面
 * 功能：员工列表查询、添加编辑、状态管理、角色分配
 * 路径：/central-config/user/employee
 * 规范：遵循crop-x/docs/开发项目规范.md，使用事件驱动模式，SearchFormPagination重构
 */
'use client';

import { useState, useEffect, useCallback, useRef } from 'react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Plus, Eye, Edit, Trash2, Power, PowerOff } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

import { EmployeeManagementHeader } from './components/EmployeeManagementHeader';
import { EmployeeManagementStatsCards } from './components/EmployeeManagementStatsCards';
import { EmployeeFormDialog } from './components/EmployeeFormDialog';
import { EmployeeDetailDialog } from './components/EmployeeDetailDialog';
import { SearchFormPagination, type SearchFieldConfig, type TableColumnConfig } from '@/components/common/searchFormPagination';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Employee, Role, EmployeeFormData } from './types';
import {
  fetchEmployees,
  transformEmployeesList,
  createEmployee,
  updateEmployee,
  activateUser,
  deactivateUser,
  deleteUser,
  CreateEmployeeRequest,
  UpdateEmployeeRequest,
  PaginationState,
  EmployeesQueryParams
} from './components/employeeApi';
import {
  fetchRoles,
  transformRolesList
} from '../role/components/roleApi';

export default function EmployeeManagementPage() {
  const [employees, setEmployees] = useState<Employee[]>([]);
  const [roles, setRoles] = useState<Role[]>([]);
  const [loading, setLoading] = useState(false);
  const [creating, setCreating] = useState(false);
  const [updating, setUpdating] = useState(false);
  const [toggling, setToggling] = useState<string | null>(null); // 记录正在操作的用户ID
  const isFirstLoad = useRef(true);

  // 确认对话框状态
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
  const [userToDelete, setUserToDelete] = useState<Employee | null>(null);
  const [deactivateConfirmOpen, setDeactivateConfirmOpen] = useState(false);
  const [userToDeactivate, setUserToDeactivate] = useState<Employee | null>(null);
  const [pagination, setPagination] = useState<PaginationState>({
    page: 1,
    size: 10,
    total: 0,
    totalPages: 0,
    hasNext: false,
    hasPrev: false,
  });
  const [searchFilters, setSearchFilters] = useState<Record<string, string>>({
    search: '',
    status: 'all'
  });
  const [showForm, setShowForm] = useState(false);
  const [showDetailDialog, setShowDetailDialog] = useState(false);
  const [formKey, setFormKey] = useState(0); // 添加key来强制重新渲染表单
  const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null);
  const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(null);
  const [formData, setFormData] = useState<EmployeeFormData>({
    enterpriseId: 'ent-2',
    enterpriseName: '丰收现代农业集团',
    status: 'active',
    auditStatus: 'pending',
    roleIds: [],
    idCard: '',
    address: '',
  });

  // 搜索字段配置
  const searchFields: SearchFieldConfig[] = [
    {
      key: 'search',
      label: '搜索',
      type: 'text',
      placeholder: '搜索用户名、姓名、手机号...',
    },
    {
      key: 'status',
      label: '账户状态',
      type: 'select',
      defaultValue: 'all',
      options: [
        { value: 'all', label: '全部状态' },
        { value: 'active', label: '正常' },
        { value: 'frozen', label: '停用' },
      ],
    },
  ];

  // 表格列配置
  const columns: TableColumnConfig[] = [
    {
      key: 'username',
      label: '用户名',
      render: (value: string) => (
        <div className="font-medium text-foreground">{value}</div>
      ),
    },
    {
      key: 'fullName',
      label: '姓名',
      render: (value: string) => (
        <div className="text-foreground">{value || '-'}</div>
      ),
    },
    {
      key: 'phone',
      label: '手机号',
      render: (value: string) => (
        <div className="font-mono text-sm">{value || '-'}</div>
      ),
    },
    {
      key: 'roles',
      label: '角色',
      render: (value: string[]) => (
        <div className="flex flex-wrap gap-1">
          {value && value.length > 0 ? (
            value.map((role, index) => (
              <Badge key={index} variant="secondary" className="font-light">
                {role}
              </Badge>
            ))
          ) : (
            <span className="text-muted-foreground">-</span>
          )}
        </div>
      ),
    },
    {
      key: 'department',
      label: '部门',
      render: (value: string) => (
        <div className="text-sm text-muted-foreground">{value || '-'}</div>
      ),
    },
    {
      key: 'isActive',
      label: '状态',
      render: (value: boolean) => (
        <Badge className={`font-light ${
          value
            ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
            : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
        }`}>
          {value ? '正常' : '停用'}
        </Badge>
      ),
    },
    {
      key: 'createdAt',
      label: '创建时间',
      render: (value: string) => (
        <div className="text-sm text-muted-foreground">
          {value ? new Date(value).toLocaleDateString('zh-CN') : '-'}
        </div>
      ),
    },
    {
      key: 'actions',
      label: '操作',
      render: (_: any, row: Employee) => (
        <div className="flex gap-2">
          <Button
            size="sm"
            variant="outline"
            onClick={() => handleViewDetail(row)}
            className="h-8 px-2"
          >
            <Eye className="w-3 h-3 mr-1" />
            查看
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={() => handleEdit(row)}
            className="h-8 px-2"
          >
            <Edit className="w-3 h-3 mr-1" />
            编辑
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={() => handleToggleStatus(row)}
            disabled={toggling === row.id}
            className={`h-8 px-2 ${
              row.isActive
                ? 'text-orange-600 border-orange-300 hover:bg-orange-50'
                : 'text-green-600 border-green-300 hover:bg-green-50'
            }`}
          >
            {row.isActive ? (
              <PowerOff className="w-3 h-3 mr-1" />
            ) : (
              <Power className="w-3 h-3 mr-1" />
            )}
            {row.isActive ? '停用' : '启用'}
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={() => handleDelete(row.id)}
            disabled={toggling === row.id}
            className="h-8 px-2 text-red-600 border-red-300 hover:bg-red-50"
          >
            <Trash2 className="w-3 h-3 mr-1" />
            删除
          </Button>
        </div>
      ),
    },
  ];

  // 加载角色数据 - 事件驱动
  const loadRoles = useCallback(async () => {
    try {
      const response = await fetchRoles({
        page: 1,
        size: 100,
        sort_order: 'desc'
      });
      const transformedRoles = transformRolesList(response.data);
      setRoles(transformedRoles);
    } catch (error) {
      console.error('Failed to load roles:', error);
      setRoles([]);
    }
  }, []);

  // 加载员工数据 - 事件驱动，移除依赖项
  const loadEmployees = useCallback(async (params?: {
    filters?: Record<string, string>;
    pagination?: { page: number; size: number };
    resetPage?: boolean;
  }) => {
    try {
      setLoading(true);
      const queryParams: EmployeesQueryParams = {
        page: params?.resetPage ? 1 : (params?.pagination?.page || pagination.page),
        size: params?.pagination?.size || pagination.size,
        sort_order: 'desc'
      };

      // 搜索关键词
      const searchKeyword = params?.filters?.search ?? searchFilters.search;
      if (searchKeyword) {
        queryParams.search = searchKeyword;
      }

      const response = await fetchEmployees(queryParams);
      const transformedEmployees = transformEmployeesList(response.data);

      // 状态筛选（客户端过滤）
      const statusFilter = params?.filters?.status ?? searchFilters.status;
      const filteredEmployees = statusFilter === 'all'
        ? transformedEmployees
        : transformedEmployees.filter(emp => {
            const status = emp.isActive ? 'active' : 'frozen';
            return status === statusFilter;
          });

      setEmployees(filteredEmployees);
      setPagination({
        page: response.page,
        size: response.size,
        total: response.total,
        totalPages: response.total_pages,
        hasNext: response.has_next,
        hasPrev: response.has_prev,
      });
    } catch (error) {
      console.error('Failed to load employees:', error);
      toast.error('加载员工数据失败');
      setEmployees([]);
    } finally {
      setLoading(false);
    }
  }, [pagination.page, pagination.size, searchFilters]);

  // 初始化数据 - 只在组件挂载时执行一次
  useEffect(() => {
    if (isFirstLoad.current) {
      isFirstLoad.current = false;
      loadRoles();
      loadEmployees({ resetPage: true });
    }
  }, [loadRoles, loadEmployees]);

  // 事件处理器 - 事件驱动模式
  const handleSearch = useCallback((filters: Record<string, string>) => {
    setSearchFilters(filters);
    loadEmployees({
      filters,
      pagination: { page: 1, size: pagination.size }
    });
  }, [loadEmployees, pagination.size]);

  const handlePageChange = useCallback((page: number) => {
    setPagination(prev => ({ ...prev, page }));
    loadEmployees({
      filters: searchFilters,
      pagination: { page, size: pagination.size }
    });
  }, [loadEmployees, searchFilters, pagination.size]);

  const handleSizeChange = useCallback((size: number) => {
    setPagination(prev => ({ ...prev, size, page: 1 }));
    loadEmployees({
      filters: searchFilters,
      pagination: { page: 1, size }
    });
  }, [loadEmployees, searchFilters]);

  const handleAddEmployee = () => {
    setEditingEmployee(null);
    clearForm();
    setFormKey(prev => prev + 1); // 增加key强制重新渲染
    setShowForm(true);
  };

  const clearForm = () => {
    // 直接设置空表单，无需setTimeout
    const emptyForm = {
      enterpriseId: 'ent-2',
      enterpriseName: '丰收现代农业集团',
      status: 'active' as const,
      auditStatus: 'pending' as const,
      roleIds: [],
      username: '',
      name: '',
      phone: '',
      email: '',
      department: '',
      position: '',
    };
    setFormData(emptyForm);
  };

  const handleEdit = (employee: Employee) => {
    setEditingEmployee(employee);
    setFormData(employee);
    setShowForm(true);
  };

  const handleSave = async () => {
    if (!formData.username || !formData.name || !formData.phone) {
      toast.error('请填写必填项');
      return;
    }

    // 验证角色选择
    if (!formData.roleIds || formData.roleIds.length === 0) {
      toast.error('请至少选择一个角色');
      return;
    }

    // 根据角色ID设置角色名称
    const selectedRoles = roles.filter(r => formData.roleIds?.includes(r.id));
    const roleNames = selectedRoles.map(r => r.name);

    if (editingEmployee) {
      // 更新 - 调用API
      setUpdating(true);
      try {
        // 构建API请求参数
        const updateRequest: UpdateEmployeeRequest = {
          email: formData.email || '',
          username: formData.username,
          full_name: formData.name,
          phone: formData.phone,
          password: '', // 编辑时不传密码
          tenant_id: formData.enterpriseId,
          scope: 'tenant',
          department_id: formData.departmentId || '',
          is_superuser: formData.isSuperuser || false,
        };

        // 调用API更新用户
        const updatedEmployee = await updateEmployee(editingEmployee.id, updateRequest);

        // 更新本地列表中的员工数据
        const updated = employees.map(emp =>
          emp.id === editingEmployee.id
            ? {
                ...emp,
                ...updatedEmployee,
                roles: roleNames,
                updatedAt: new Date().toISOString(),
              }
            : emp
        );
        setEmployees(updated);

        toast.success('员工信息更新成功');
        setShowForm(false);
        clearForm();

        // 立即刷新员工列表数据，无需延迟
        loadEmployees({ resetPage: true });
      } catch (error) {
        console.error('更新员工失败:', error);

        // 处理错误，显示具体的错误消息
        const errorMessage = error instanceof Error ? error.message : '员工信息更新失败';
        toast.error(errorMessage);
      } finally {
        setUpdating(false);
      }
    } else {
      // 新增 - 调用API
      setCreating(true);
      try {
        // 构建API请求参数
        const createRequest: CreateEmployeeRequest = {
          email: formData.email || '', // 没有邮箱就传空字符串
          username: formData.username,
          full_name: formData.name,
          phone: formData.phone,
          password: '', // 传递空字符串给后端
          tenant_id: formData.enterpriseId,
          scope: 'tenant',
          department_id: formData.departmentId || '',
          is_superuser: formData.isSuperuser || false,
        };

        // 调用API创建用户
        const newEmployee = await createEmployee(createRequest);

        // 将新员工添加到列表
        const updated = [newEmployee, ...employees];
        setEmployees(updated);

        toast.success('员工添加成功');
        setShowForm(false);
        clearForm();

        // 立即刷新员工列表数据，无需延迟
        loadEmployees({ resetPage: true });
      } catch (error) {
        console.error('创建员工失败:', error);

        // 处理错误，显示具体的错误消息
        const errorMessage = error instanceof Error ? error.message : '员工添加失败';
        toast.error(errorMessage);
      } finally {
        setCreating(false);
      }
    }
  };

  const handleDelete = (userId: string) => {
    // 防止重复操作
    if (toggling) {
      toast.warning('操作进行中，请稍候...');
      return;
    }

    // 查找要删除的员工信息
    const employeeToDelete = employees.find(emp => emp.id === userId);
    if (!employeeToDelete) {
      toast.error('未找到要删除的用户');
      return;
    }

    // 设置要删除的用户并显示确认对话框
    setUserToDelete(employeeToDelete);
    setDeleteConfirmOpen(true);
  };

  const executeDelete = async (userId: string) => {
    setToggling(userId);

    try {
      // 调用API删除用户
      await deleteUser(userId);

      // 成功后从本地列表中移除
      const updated = employees.filter(emp => emp.id !== userId);
      setEmployees(updated);

      toast.success('用户删除成功');

      // 立即刷新列表确保数据同步
      loadEmployees({ resetPage: true });

      // 关闭确认对话框
      setDeleteConfirmOpen(false);
      setUserToDelete(null);
    } catch (error) {
      console.error('删除用户失败:', error);

      // 处理错误，显示具体的错误消息
      const errorMessage = error instanceof Error ? error.message : '删除失败，请稍后重试';
      toast.error(errorMessage);

      // 失败时不关闭确认对话框，用户可以重试
    } finally {
      setToggling(null);
    }
  };

  const handleToggleStatus = (employee: Employee) => {
    if (toggling) {
      toast.warning('操作进行中，请稍候...');
      return;
    }

    if (employee.isActive) {
      // 当前是激活状态，进行停用操作，需要二次确认
      setUserToDeactivate(employee);
      setDeactivateConfirmOpen(true);
    } else {
      // 当前是停用状态，进行激活操作（不需要确认）
      executeToggleStatus(employee);
    }
  };

  const executeToggleStatus = async (employee: Employee) => {
    setToggling(employee.id);

    try {
      if (employee.isActive) {
        // 当前是激活状态，进行停用操作
        await deactivateUser(employee.id);
        toast.success('账户已停用');
      } else {
        // 当前是停用状态，进行激活操作
        await activateUser(employee.id);
        toast.success('账户已激活');
      }

      // 成功后立即刷新列表
      loadEmployees({ resetPage: true });

      // 关闭停用确认对话框
      if (deactivateConfirmOpen) {
        setDeactivateConfirmOpen(false);
        setUserToDeactivate(null);
      }
    } catch (error) {
      console.error('切换用户状态失败:', error);

      // 处理错误，显示具体的错误消息
      const errorMessage = error instanceof Error ? error.message : '操作失败，请稍后重试';
      toast.error(errorMessage);

      // 失败时不关闭确认对话框，用户可以重试
    } finally {
      setToggling(null);
    }
  };

  
  const handleViewDetail = (employee: Employee) => {
    setSelectedEmployee(employee);
    setShowDetailDialog(true);
  };

  const handleAudit = (employee: Employee, action: 'approve' | 'reject') => {
    if (action === 'approve') {
      const updated = employees.map(emp =>
        emp.id === employee.id
          ? {
              ...emp,
              auditStatus: 'approved' as const,
              auditTime: new Date().toISOString(),
              auditor: '当前用户',
              updatedAt: new Date().toISOString(),
            }
          : emp
      );
      setEmployees(updated);
      toast.success('审核通过');
    } else {
      const reason = prompt('请输入驳回原因：');
      if (reason) {
        const updated = employees.map(emp =>
          emp.id === employee.id
            ? {
                ...emp,
                auditStatus: 'rejected' as const,
                auditReason: reason,
                auditTime: new Date().toISOString(),
                auditor: '当前用户',
                updatedAt: new Date().toISOString(),
              }
            : emp
        );
        setEmployees(updated);
        toast.success('已驳回');
      }
    }
  };

  return (
    <div className="space-y-6">
      <EmployeeManagementHeader
        onAddEmployee={handleAddEmployee}
      />

      {/* 统计卡片 - 保留原有功能 */}
      <EmployeeManagementStatsCards employees={employees} />

      {/* 搜索、表格和分页 - 使用重构后的组件 */}
      <SearchFormPagination
        formTitle="员工列表"
        formRightContent={
          <Button onClick={handleAddEmployee} disabled={loading}>
            <Plus className="w-4 h-4 mr-2" />
            添加员工
          </Button>
        }
        searchFields={searchFields}
        columns={columns}
        data={employees}
        loading={loading}
        error={null}
        pagination={pagination}
        onPageChange={handlePageChange}
        onSizeChange={handleSizeChange}
        onSearch={handleSearch}
        emptyIcon={<div className="w-12 h-12 mx-auto mb-4 opacity-20" />}
        emptyText="暂无员工数据"
        showSizeSelector={true}
        showPageInfo={true}
        sizeOptions={[10, 20, 50, 100]}
      />

      {/* 添加/编辑表单 - 保留原有功能 */}
      <EmployeeFormDialog
        key={formKey} // 使用key强制重新渲染，清除浏览器缓存
        open={showForm}
        onOpenChange={setShowForm}
        editingEmployee={editingEmployee}
        formData={formData}
        onFormDataChange={setFormData}
        onSave={handleSave}
        roles={roles}
        creating={creating}
        updating={updating}
        onClearForm={clearForm}
      />

      {/* 详情对话框 - 保留原有功能 */}
      <EmployeeDetailDialog
        open={showDetailDialog}
        onOpenChange={setShowDetailDialog}
        selectedEmployee={selectedEmployee}
      />

      {/* 删除确认对话框 - 保留原有功能 */}
      <AlertDialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>确认删除用户</AlertDialogTitle>
            <AlertDialogDescription>
              确定要删除用户 "
              {userToDelete?.displayName || userToDelete?.fullName || userToDelete?.username || ''}
              " 吗？
              <br /><br />
              <span className="text-red-600 font-semibold">
                删除后该用户将无法恢复，所有相关数据将被清除。
              </span>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={toggling !== null}>
              取消
            </AlertDialogCancel>
            <AlertDialogAction
              onClick={() => {
                if (userToDelete) {
                  executeDelete(userToDelete.id);
                }
              }}
              disabled={toggling !== null}
              className="bg-red-600 hover:bg-red-700"
            >
              {toggling ? '删除中...' : '确认删除'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* 停用确认对话框 - 保留原有功能 */}
      <AlertDialog open={deactivateConfirmOpen} onOpenChange={setDeactivateConfirmOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>确认停用用户</AlertDialogTitle>
            <AlertDialogDescription>
              确定要停用用户 "
              {userToDeactivate?.displayName || userToDeactivate?.fullName || userToDeactivate?.username || ''}
              " 吗？
              <br /><br />
              <span className="text-orange-600 font-semibold">
                停用后，该用户将无法登录系统。
              </span>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={toggling !== null}>
              取消
            </AlertDialogCancel>
            <AlertDialogAction
              onClick={() => {
                if (userToDeactivate) {
                  executeToggleStatus(userToDeactivate);
                }
              }}
              disabled={toggling !== null}
              className="bg-orange-600 hover:bg-orange-700"
            >
              {toggling ? '停用中...' : '确认停用'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}