'use client';

import * as React from 'react';
import { useState, useMemo } from 'react';
import { Button } from '@nice/ui/components/button';
import { Input } from '@nice/ui/components/input';
import { Badge } from '@nice/ui/components/badge';
import { IconSearch, IconPlus, IconBuilding, IconBuildingBank, IconUsers } from '@tabler/icons-react';
import { UsersDataTable } from '@/components/organization/users-data-table';
import { UserDialog } from '@/components/organization/user-dialog';

import { PageInfo, SiteHeader } from '@/components/site-header';
import { useTRPC, useOrganization, useUser } from '@fenghuo/client';
import { useQuery } from '@tanstack/react-query';
import { toast } from '@nice/ui/components/sonner';
import { TreeSelector, type TreeNode, type TreeDragConfig } from '@/components/selector';
import { type OrganizationTreeNode, UserWithRelations, userWithRelationsSelect } from '@fenghuo/common';
import { type OrganizationDialogState, type UserDialogState } from '@/components/organization/types';
import { OrganizationDialog } from '@/components/organization/organization-dialog';
import { useSetPageInfo } from '@/components/providers/dashboard-provider';



export default function OrganizationPage() {
	const trpc = useTRPC();

	// 状态管理 - 将所有状态声明放在一起
	const [selectedOrganization, setSelectedOrganization] = useState<TreeNode | null>(null);
	const [organizationDialog, setOrganizationDialog] = useState<OrganizationDialogState>({
		open: false,
	});
	const [userDialog, setUserDialog] = useState<UserDialogState>({
		open: false,
	});
	const [organizationSearchQuery, setOrganizationSearchQuery] = useState('');

	// 分页和筛选状态
	const [pagination, setPagination] = useState({
		page: 1,
		pageSize: 10,
	});
	const [searchQuery, setSearchQuery] = useState('');
	const [selectedRole, setSelectedRole] = useState('');

	// 获取组织树数据（使用 tRPC）
	const { data: rawOrganizationTree = [], isLoading: organizationsLoading } = useQuery({
		...trpc.organization.getTree.queryOptions({
			includeInactive: false,
			include: {
				terms: {
					include: {
						taxonomy: true,
					},
				},
			},
		}),
	});

	// 将 OrganizationTreeNode 转换为与 TreeSelector 兼容的 TreeNode
	const organizationTree = useMemo(() => {
		const convertNode = (node: OrganizationTreeNode): TreeNode => ({
			...node,
			slug: node.slug ?? undefined,
			description: node.description ?? undefined,
			parentId: node.parentId ?? undefined,
			path: node.path ?? undefined,
			deletedAt: node.deletedAt ?? undefined,
			children: node.children ? node.children.map(convertNode) : [],
		});
		return rawOrganizationTree.map(convertNode);
	}, [rawOrganizationTree]);

	// 构建用户查询的 where 条件
	const buildUserWhereCondition = useMemo(() => {
		const conditions: any = {
			deletedAt: null,
			OR: [{ organization: { deletedAt: null } }, { organizationId: null }],
		};

		// 搜索条件 - 支持用户名搜索
		if (searchQuery) {
			conditions.username = {
				contains: searchQuery,
				mode: 'insensitive', // 忽略大小写
			};
		}

		// 角色筛选
		if (selectedRole) {
			conditions.userRoles = {
				some: {
					role: {
						id: selectedRole,
					},
				},
			};
		}

		// 部门筛选 - 考虑选中的部门及其子部门
		if (selectedOrganization) {
			// 获取选中部门及其所有子部门的ID
			const findOrganizationInTree = (depts: any[], targetId: string): any => {
				for (const dept of depts) {
					if (dept.id === targetId) {
						return dept;
					}
					if (dept.children) {
						const found = findOrganizationInTree(dept.children, targetId);
						if (found) return found;
					}
				}
				return null;
			};

			const selectedDeptWithChildren = findOrganizationInTree(organizationTree, selectedOrganization.id);
			if (selectedDeptWithChildren) {
				const organizationIds = getAllOrganizationIds(selectedDeptWithChildren as OrganizationTreeNode);
				conditions.organizationId = {
					in: organizationIds,
				};
			} else {
				conditions.organizationId = selectedOrganization.id;
			}
		}

		return conditions;
	}, [searchQuery, selectedRole, selectedOrganization, organizationTree]);

	// 获取用户数据（使用服务端分页）
	const { data: usersResponse, isLoading: usersLoading } = useQuery({
		...trpc.user.findManyWithPagination.queryOptions({
			page: pagination.page,
			pageSize: pagination.pageSize,
			where: buildUserWhereCondition,
			select: userWithRelationsSelect,
			orderBy: {
				createdAt: 'desc',
			},
		}),
	});

	// 获取角色列表用于筛选选项
	const { data: rolesResponse } = useQuery({
		...trpc.role.findManyWithPagination.queryOptions({
			page: 1,
			pageSize: 100,
			where: {
				isActive: true,
			},
		}),
	});

	// 处理用户数据
	const userData = useMemo(() => {
		if (usersLoading || !usersResponse || !usersResponse.items) return [];
		return usersResponse.items
	}, [usersResponse, usersLoading]);

	// 处理可用角色选项
	const availableRoles = useMemo(() => {
		if (!rolesResponse?.items) return [];
		return rolesResponse.items.map((role) => ({
			value: role.id,
			label: role.name,
		}));
	}, [rolesResponse]);

	// 分页信息
	const paginationInfo = useMemo(() => {
		if (!usersResponse) {
			return {
				totalPages: 0,
				totalCount: 0,
				hasNextPage: false,
				hasPreviousPage: false,
			};
		}
		return {
			totalPages: usersResponse.totalPages,
			totalCount: usersResponse.totalCount,
			hasNextPage: usersResponse.hasNextPage,
			hasPreviousPage: usersResponse.hasPreviousPage,
		};
	}, [usersResponse]);

	// 过滤部门数据 - 修改为支持已有树形结构的搜索
	const filteredOrganizations = React.useMemo(() => {
		if (!organizationSearchQuery) return organizationTree;

		const filterOrganizations = (depts: TreeNode[]): TreeNode[] => {
			return depts.reduce<TreeNode[]>((acc, dept) => {
				const matchesCurrent =
					dept.name.toLowerCase().includes(organizationSearchQuery.toLowerCase()) ||
					dept.description?.toLowerCase().includes(organizationSearchQuery.toLowerCase());

				const filteredChildren = dept.children ? filterOrganizations(dept.children as TreeNode[]) : [];

				// 如果当前部门匹配或有匹配的子部门，就包含这个部门
				if (matchesCurrent || filteredChildren.length > 0) {
					acc.push({
						...dept,
						children: filteredChildren,
					});
				}

				return acc;
			}, []);
		};
		return filterOrganizations(organizationTree);
	}, [organizationTree, organizationSearchQuery]);

	// 拖拽排序处理函数
	const handleDragEnd = async (oldData: TreeNode[], newData: TreeNode[]) => {
		// 提取排序变化
		const changes = extractOrderChanges(oldData, newData);

		// 如果有变化，调用后端API更新排序
		if (changes.length > 0) {
			try {
				await organizationMutations.updateDeptOrder.mutateAsync(
					changes.map((change) => ({ id: change.id, order: change.newOrder })),
				);
				toast.success('部门排序已更新');
			} catch (error: any) {
				console.error('排序更新失败:', error);
				toast.error('排序更新失败: ' + (error.message || '未知错误'));
			}
		}
	};

	// 提取排序变化的辅助函数
	const extractOrderChanges = (oldData: TreeNode[], newData: TreeNode[]): Array<{ id: string; newOrder: number }> => {
		const changes: Array<{ id: string; newOrder: number }> = [];

		const compareLevel = (oldNodes: TreeNode[], newNodes: TreeNode[], level = 0) => {
			newNodes.forEach((newNode, index) => {
				const oldNode = oldNodes.find((n) => n.id === newNode.id);
				if (oldNode && oldNode.order !== newNode.order) {
					changes.push({
						id: newNode.id,
						newOrder: newNode.order || index,
					});
				}

				// 递归处理子节点
				if (newNode.children && oldNode?.children) {
					compareLevel(oldNode.children as TreeNode[], newNode.children as TreeNode[], level + 1);
				}
			});
		};

		compareLevel(oldData, newData);
		return changes;
	};

	// 拖拽配置
	const dragConfig: TreeDragConfig<TreeNode> = {
		enabled: true,
		showHandle: true,
		onDragEnd: handleDragEnd,
		onDragStart: (event) => {
			console.log('开始拖拽:', event.active.id);
		},
	};

	// 处理分页变化
	const handlePaginationChange = (newPagination: { page: number; pageSize: number }) => {
		setPagination(newPagination);
	};

	// 处理搜索变化
	const handleSearchChange = (query: string) => {
		setSearchQuery(query);
		// 搜索时重置到第一页
		setPagination((prev) => ({ ...prev, page: 1 }));
	};

	// 处理角色筛选变化
	const handleRoleChange = (role: string) => {
		setSelectedRole(role);
		// 筛选时重置到第一页
		setPagination((prev) => ({ ...prev, page: 1 }));
	};

	// 处理部门筛选变化 - 当选中部门时自动应用筛选
	React.useEffect(() => {
		// 当选中部门变化时，重置到第一页
		setPagination((prev) => ({ ...prev, page: 1 }));
	}, [selectedOrganization]);

	// 处理部门选择 - 支持取消选中
	const handleOrganizationSelect = (organization: TreeNode) => {
		// 如果点击的是已选中的部门，则取消选中
		if (selectedOrganization && selectedOrganization.id === organization.id) {
			setSelectedOrganization(null);
		} else {
			// 否则选中新的部门
			setSelectedOrganization(organization);
		}
	};

	// 处理编辑部门
	const handleEditOrganization = (organization: TreeNode) => {
		setOrganizationDialog({
			open: true,
			organization: organization as OrganizationTreeNode,
			mode: 'edit',
		});
	};

	// 处理删除部门
	const handleDeleteOrganization = (organization: TreeNode) => {
		if (confirm(`确定要删除部门 "${organization.name}" 吗？这将同时删除该部门下的所有子部门。`)) {
			organizationMutations.softDeleteByIds.mutate(
				{ ids: [organization.id] },
				{
					onSuccess: () => {
						toast.success('部门删除成功');
						// 如果删除的是当前选中的部门，清空选择
						if (selectedOrganization?.id === organization.id) {
							setSelectedOrganization(null);
						}
					},
					onError: (error) => {
						toast.error('删除失败: ' + error.message);
					},
				},
			);
		}
	};

	// 处理添加子部门
	const handleAddChildOrganization = (parentId: string) => {
		setOrganizationDialog({
			open: true,
			parentId,
			mode: 'addChild',
		});
	};

	// 处理添加根部门
	const handleAddRootOrganization = () => {
		setOrganizationDialog({
			open: true,
			mode: 'add',
		});
	};

	// 添加 organization mutations
	const organizationMutations = useOrganization();

	// 修改 handleSaveOrganization 方法的参数类型和实现
	const handleSaveOrganization = (data: {
		name: string;
		slug: string;
		description: string;
		parentId?: string;
		organizationTypeId?: string;
		professionIds?: string[];
	}) => {
		// 构建术语连接数组
		const termConnections: Array<{ id: string }> = [];
		if (data.organizationTypeId) {
			termConnections.push({ id: data.organizationTypeId });
		}
		if (data.professionIds && data.professionIds.length > 0) {
			data.professionIds.forEach((professionId) => {
				termConnections.push({ id: professionId });
			});
		}

		// 构建要保存的数据
		const createData = {
			name: data.name,
			slug: data.slug || null, // 使用用户输入的 slug
			description: data.description || null,
			parentId: data.parentId || null,
			// 关联术语
			terms:
				termConnections.length > 0
					? {
						connect: termConnections,
					}
					: undefined,
		};

		// 检查是否为编辑模式
		if (organizationDialog.organization && organizationDialog.mode === 'edit') {
			// 更新部门时，需要先断开所有术语连接，再重新连接
			const updateData = {
				...createData,
				terms: {
					// 先断开所有现有的术语连接
					set: termConnections, // 使用 set 替换所有关联
				},
			};

			// 更新部门
			organizationMutations.update.mutate(
				{
					where: { id: organizationDialog.organization.id },
					data: updateData,
				},
				{
					onSuccess: () => {
						toast.success('部门更新成功');
						setOrganizationDialog({ open: false });
					},
					onError: (error: any) => {
						console.error('更新失败:', error);
						let errorMessage = '更新失败';
						if (error.message) {
							if (
								error.message.includes('already exists') ||
								error.message.includes('same') ||
								error.message.includes('unique') ||
								error.message.includes('Unique constraint')
							) {
								errorMessage = '该部门名称或别名已存在，请使用其他名称';
							} else {
								errorMessage = error.message;
							}
						}
						toast.error(errorMessage);
					},
				},
			);
		} else {
			// 创建新部门
			organizationMutations.create.mutate(
				{
					data: createData,
				},
				{
					onSuccess: () => {
						toast.success('部门创建成功');
						setOrganizationDialog({ open: false });
					},
					onError: (error: any) => {
						console.error('创建失败:', error);
						let errorMessage = '创建失败';
						if (error.message) {
							if (
								error.message.includes('already exists') ||
								error.message.includes('same') ||
								error.message.includes('unique') ||
								error.message.includes('Unique constraint')
							) {
								errorMessage = '该部门名称或别名已存在，请使用其他名称';
							} else {
								errorMessage = error.message;
							}
						}
						toast.error(errorMessage);
					},
				},
			);
		}
	};

	// 处理添加用户
	const handleAddUser = () => {
		setUserDialog({
			open: true,
			mode: 'add',
		});
	};
	const { create: createUser } = useUser();
	// 处理保存用户
	const handleSaveUser = (data: {
		username: string;
		roleIds: string[];
		organizationId: string;
		password: string;
		description?: string; // 添加可选的个人简介字段
	}) => {
		const { roleIds, ...others } = data
		createUser.mutate(
			{
				data: {
					...others,
					roles: { connect: roleIds.map(id => ({ id })) }
				}
			}, // 由于我们传入完整的 data 对象，roleIds 字段会自动包含在内
			{
				onSuccess: () => {
					toast.success('用户创建成功');
					setUserDialog({ open: false });
				},
				onError: (error: any) => {
					console.error('创建失败:', error);
					let errorMessage = '创建失败';
					if (error.message) {
						if (
							error.message.includes('already exists') ||
							error.message.includes('same') ||
							error.message.includes('unique') ||
							error.message.includes('Unique constraint')
						) {
							errorMessage = '该用户名已存在，请使用其他名称';
						} else {
							errorMessage = error.message;
						}
					}
					toast.error(errorMessage);
				},
			},
		);
	};

	useSetPageInfo({
		title: '组织管理',
		subtitle: '管理组织结构，支持人员、组织的创建、编辑、删除以及查看等操作',
	})
	return (
		<div className="flex flex-1 flex-col bg-gray-50/50 dark:bg-gray-900/50">

			<div className="@container/main flex flex-1">
				{/* 左侧：部门树 */}
				<div className="w-96 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
					{/* 标题区域 */}
					<div className="border-b border-gray-200 dark:border-gray-700 p-6">
						<div className="flex items-center justify-between">
							<div className="flex items-center gap-3">
								<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
									<IconBuildingBank className="h-5 w-5 text-blue-600 dark:text-blue-400" />
								</div>
								<div>
									<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">组织结构</h2>
									<p className="text-sm text-gray-500 dark:text-gray-400">选择一个组织来管理其用户</p>
								</div>
							</div>
							<div className="flex items-center gap-2">
								<Button size="sm" onClick={handleAddRootOrganization} className="shrink-0">
									<IconPlus className="h-4 w-4 mr-1" />
									新增
								</Button>
							</div>
						</div>
					</div>

					{/* 搜索框 */}
					<div className="p-4 border-b border-gray-200 dark:border-gray-700">
						<div className="relative">
							<IconSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
							<Input
								placeholder="搜索部门..."
								value={organizationSearchQuery}
								onChange={(e) => setOrganizationSearchQuery(e.target.value)}
								className="pl-10"
							/>
						</div>
					</div>

					{/* 部门树 */}
					<div className="flex-1 overflow-y-auto max-h-[670px]">
						{organizationsLoading ? (
							<div className="p-6 text-center text-gray-500">
								<div className="animate-pulse">加载中...</div>
							</div>
						) : filteredOrganizations.length > 0 ? (
							<div className="rounded-lg bg-white dark:bg-gray-800/50 p-2">
								<TreeSelector
									data={filteredOrganizations}
									selectedNode={selectedOrganization}
									onSelect={handleOrganizationSelect}
									iconConfig={{
										getIcon: (node, hasChildren, isExpanded) => {
											if (node.level === 0) {
												return IconBuildingBank;
											}
											return IconBuilding;
										},
									}}
									actionConfig={{
										onEdit: handleEditOrganization,
										onDelete: handleDeleteOrganization,
										onAddChild: handleAddChildOrganization,
										editLabel: '编辑部门',
										deleteLabel: '删除部门',
										addChildLabel: '添加下级',
									}}
									displayConfig={{
										showDescription: true,
										selectedClassName: 'bg-primary/10 border border-primary/20',
										hoverClassName: 'hover:bg-muted/50 border border-transparent',
									}}
									indentSize={20}
									containerized={false}
									className="space-y-1 bg-white"
									dragConfig={dragConfig}
								/>
							</div>
						) : (
							<div className="p-6 text-center">
								<div className="text-gray-400 mb-2">{organizationSearchQuery ? '没有找到匹配的部门' : '暂无部门'}</div>
								{!organizationSearchQuery && <div className="text-sm text-gray-500">点击上方按钮创建第一个组织</div>}
							</div>
						)}
					</div>
				</div>

				{/* 右侧：用户管理 */}
				<div className="flex-1 bg-white dark:bg-gray-800">
					{/* 标题区域 */}
					<div className="border-b border-gray-200 dark:border-gray-700 p-6">
						<div className="flex items-center justify-between">
							<div className="flex items-center gap-3">
								<div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
									<IconUsers className="h-5 w-5 text-green-600 dark:text-green-400" />
								</div>
								<div>
									<div className="flex items-center gap-2">
										<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">用户管理</h2>
										{selectedOrganization && (
											<Badge variant="outline" className="text-xs">
												{selectedOrganization.name}
											</Badge>
										)}
									</div>
									<p className="text-sm text-gray-500 dark:text-gray-400">
										{selectedOrganization
											? `显示 ${selectedOrganization.name} 及其下属部门的用户`
											: `共 ${paginationInfo.totalCount} 名用户`}
									</p>
								</div>
							</div>
							<Button size="sm" onClick={handleAddUser} className="shrink-0">
								<IconPlus className="h-4 w-4 mr-1" />
								新增用户
							</Button>
						</div>
					</div>

					{/* 用户内容区域 */}
					<div className="flex-1 p-6">
						<UsersDataTable
							data={userData as UserWithRelations[]}
							pagination={pagination}
							paginationInfo={paginationInfo}
							onPaginationChange={handlePaginationChange}
							searchQuery={searchQuery}
							onSearchChange={handleSearchChange}
							selectedRole={selectedRole}
							onRoleChange={handleRoleChange}
							selectedOrganizationId={selectedOrganization?.id || ''}
							onOrganizationChange={() => { }} // 部门筛选通过左侧树形选择处理
							isLoading={usersLoading}
							availableRoles={availableRoles}
							onAddUser={handleAddUser}
						/>
					</div>
				</div>
			</div>

			{/* 部门编辑对话框 */}
			<OrganizationDialog
				dialog={organizationDialog}
				onClose={() => setOrganizationDialog({ open: false })}
				onSave={handleSaveOrganization}
			/>

			{/* 用户编辑对话框 */}
			<UserDialog dialog={userDialog} onClose={() => setUserDialog({ open: false })} onSave={handleSaveUser} />
		</div>
	);
}

// 递归获取部门及其所有子部门的ID
function getAllOrganizationIds(organization: OrganizationTreeNode): string[] {
	const ids = [organization.id];
	if (organization.children) {
		organization.children.forEach((child) => {
			ids.push(...getAllOrganizationIds(child));
		});
	}
	return ids;
}