'use client';

import * as React from 'react';
import { useState, useRef } from 'react';
import { Button } from '@nice/ui/components/button';
import { Popover, PopoverContent, PopoverTrigger } from '@nice/ui/components/popover';
import {
	Command,
	CommandEmpty,
	CommandGroup,
	CommandInput,
	CommandItem,
	CommandList,
} from '@nice/ui/components/command';
import { IconChevronDown, IconCheck, IconBuilding, IconX } from '@tabler/icons-react';
import { cn } from '@nice/ui/lib/utils';
import { useTRPC } from '@fenghuo/client';
import { useQuery } from '@tanstack/react-query';
import { Badge } from '@nice/ui/components/badge';
import { TaxonomySlug } from '@fenghuo/common';

// 站点接口定义
export interface Station {
	id: string;
	name: string;
	slug: string | null;
	description: string | null;
	displayName: string; // 格式化后的显示名称：父组织/当前组织
	parentId: string | null;
	parent: {
		id: string;
		name: string;
		slug: string | null;
	} | null;
	terms: Array<{
		id: string;
		name: string;
		slug: string;
		taxonomy: {
			id: string;
			name: string;
			slug: string;
		};
	}>;
	createdAt: Date;
	updatedAt: Date;
}

// 站点选择器属性
interface StationSelectorProps {
	value?: string | string[]; // 支持单选和多选
	onValueChange?: (value: string | string[]) => void;
	placeholder?: string;
	className?: string;
	disabled?: boolean;
	allowClear?: boolean;
	multiple?: boolean; // 是否支持多选
	showDescription?: boolean; // 是否显示组织描述
	showBadge?: boolean; // 是否显示组织类型标识
	includeInactive?: boolean; // 是否包含非活跃组织
	modal?: boolean; // 是否为模态模式，用于在 Dialog 中解决滚轮问题
}

// 站点项组件
interface StationItemProps {
	station: Station;
	isSelected: boolean;
	showDescription?: boolean;
	showBadge?: boolean;
	onSelect: () => void;
}

function StationItem({ station, isSelected, showDescription = true, showBadge = true, onSelect }: StationItemProps) {
	// 提取组织类型术语（除了 station 之外的其他类型）
	const organizationTypeTerms = station.terms?.filter(
		(term) => term.taxonomy?.slug === TaxonomySlug.ORGANIZATION_TYPE && term.slug !== 'station'
	) || [];

	return (
		<CommandItem
			value={`${station.id}-${station.name}`}
			onSelect={onSelect}
			className={cn(
				'flex items-center justify-between cursor-pointer p-3',
				'hover:bg-primary/10 hover:text-primary hover:font-medium',
				isSelected && 'bg-accent text-primary font-medium',
			)}
		>
			<div className="flex items-center gap-3 flex-1 min-w-0">
				{/* 站点图标 */}
				<IconBuilding className="h-4 w-4 text-muted-foreground shrink-0" />

				{/* 站点信息 */}
				<div className="flex-1 min-w-0">
					<div className="flex items-center gap-2">
						<span className="font-medium truncate">{station.displayName}</span>
						{showBadge && organizationTypeTerms.map((term) => (
							<Badge key={term.id} variant="secondary" className="text-xs">
								{term.name}
							</Badge>
						))}
					</div>
					{showDescription && station.description && (
						<p className="text-sm text-muted-foreground truncate mt-0.5">{station.description}</p>
					)}
				</div>
			</div>

			{/* 选中状态指示 */}
			{isSelected && <IconCheck className="h-4 w-4 text-primary shrink-0" />}
		</CommandItem>
	);
}

// 主组件
export function StationSelect({
	value,
	onValueChange,
	placeholder = '选择站点',
	className,
	disabled = false,
	allowClear = true,
	multiple = false,
	showDescription = true,
	showBadge = true,
	includeInactive = false,
	modal = false,
}: StationSelectorProps) {
	const [open, setOpen] = useState(false);
	const [searchValue, setSearchValue] = useState('');
	const containerRef = useRef<HTMLDivElement>(null);

	const trpc = useTRPC();

	// 使用 tRPC 获取组织列表，过滤出站点类型的组织
	const {
		data: organizationData,
		isLoading,
		error,
	} = useQuery({
		...trpc.organization.findMany.queryOptions({
			where: {
				deletedAt: includeInactive ? undefined : null,
				terms: {
					some: {
						slug: 'station',
						taxonomy: {
							slug: TaxonomySlug.ORGANIZATION_TYPE,
						},
					},
				},
			},
			include: {
				parent: {
					select: {
						id: true,
						name: true,
						slug: true,
					},
				},
				terms: {
					include: {
						taxonomy: true,
					},
				},
			},
			orderBy: [
				{ level: 'asc' },
				{ order: 'asc' },
			],
		}),
	});

	// 转换为站点数据格式
	const stations = React.useMemo(() => {
		if (!organizationData) return [];

		return organizationData.map((org: any): Station => ({
			id: org.id,
			name: org.name,
			slug: org.slug,
			description: org.description,
			displayName: org.parent ? `${org.parent.name}/${org.name}` : org.name,
			parentId: org.parentId,
			parent: org.parent,
			terms: org.terms || [],
			createdAt: org.createdAt,
			updatedAt: org.updatedAt,
		}));
	}, [organizationData]);

	// 过滤站点（根据搜索关键词）
	const filteredStations = React.useMemo(() => {
		if (!searchValue.trim()) {
			return stations;
		}

		const searchTerm = searchValue.toLowerCase();
		return stations.filter(
			(station) =>
				station.name.toLowerCase().includes(searchTerm) ||
				station.displayName.toLowerCase().includes(searchTerm) ||
				station.description?.toLowerCase().includes(searchTerm) ||
				station.slug?.toLowerCase().includes(searchTerm),
		);
	}, [stations, searchValue]);

	// 获取选中的站点
	const selectedStations = React.useMemo(() => {
		if (!value) return [];

		const selectedIds = Array.isArray(value) ? value : [value];
		return stations.filter((station) => selectedIds.includes(station.id));
	}, [stations, value]);

	// 处理选择逻辑
	const handleSelect = (stationId: string) => {
		if (!onValueChange) return;

		if (multiple) {
			const currentValues = Array.isArray(value) ? value : value ? [value] : [];

			if (currentValues.includes(stationId)) {
				// 取消选择
				const newValues = currentValues.filter((id) => id !== stationId);
				onValueChange(newValues);
			} else {
				// 添加选择
				onValueChange([...currentValues, stationId]);
			}
		} else {
			// 单选模式
			onValueChange(stationId);
			setOpen(false);
		}
	};

	// 清除选择
	const handleClear = (e: React.MouseEvent) => {
		e.preventDefault();
		e.stopPropagation();
		onValueChange?.(multiple ? [] : '');
	};

	// 处理单个站点移除（仅多选模式）
	const handleRemoveStation = (stationId: string, e: React.MouseEvent) => {
		e.preventDefault();
		e.stopPropagation();
		if (multiple) {
			const currentValues = Array.isArray(value) ? value : value ? [value] : [];
			const newValues = currentValues.filter((id) => id !== stationId);
			onValueChange?.(newValues);
		}
	};

	// 渲染触发器内容
	const renderTriggerContent = () => {
		if (selectedStations.length === 0) {
			return placeholder;
		}

		if (multiple) {
			if (selectedStations.length === 1) {
				return selectedStations[0]!.displayName;
			} else {
				return (
					<div className="flex flex-wrap gap-1 justify-start">
						{selectedStations.slice(0, 1).map((station) => (
							<Badge key={station.id} variant="secondary" className="text-xs px-1.5 py-0.5 h-5 max-w-[120px]">
								<span className="truncate">{station.displayName}</span>
								<span
									onClick={(e) => handleRemoveStation(station.id, e)}
									className="ml-1 hover:bg-muted-foreground/20 rounded-sm p-0.5 cursor-pointer inline-flex items-center justify-center"
									role="button"
									tabIndex={0}
									aria-label={`移除站点 ${station.displayName}`}
									onKeyDown={(e) => {
										if (e.key === 'Enter' || e.key === ' ') {
											e.preventDefault();
											handleRemoveStation(station.id, e as any);
										}
									}}
								>
									<IconX className="h-2.5 w-2.5" />
								</span>
							</Badge>
						))}
						{selectedStations.length > 1 && (
							<Badge variant="secondary" className="text-xs px-1.5 py-0.5 h-5">
								+{selectedStations.length - 1}
							</Badge>
						)}
					</div>
				);
			}
		}

		return selectedStations[0]!.displayName;
	};

	// 检查是否选中
	const isSelected = (stationId: string) => {
		if (!value) return false;
		return Array.isArray(value) ? value.includes(stationId) : value === stationId;
	};

	if (error) {
		console.error('加载站点列表失败:', error);
	}

	return (
		<div ref={containerRef}>
			<Popover open={open} onOpenChange={setOpen} modal={modal}>
				<PopoverTrigger asChild>
					<Button
						variant="outline"
						role="combobox"
						aria-expanded={open}
						className={cn(
							'w-full justify-start text-left font-normal',
							!selectedStations.length && 'text-muted-foreground',
							className,
						)}
						disabled={disabled}
					>
						<div className="flex items-center gap-2 flex-1 min-w-0">
							<IconBuilding className="h-4 w-4 text-muted-foreground shrink-0" />
							<div className="flex-1 min-w-0 text-left">{renderTriggerContent()}</div>
						</div>

						<div className="flex items-center gap-1 shrink-0 ml-auto">
							{allowClear && selectedStations.length > 0 && (
								<span
									onClick={handleClear}
									className="flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted/50 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
									role="button"
									tabIndex={0}
									aria-label="清除选择"
									onKeyDown={(e) => {
										if (e.key === 'Enter' || e.key === ' ') {
											e.preventDefault();
											handleClear(e as any);
										}
									}}
								>
									<IconX className="h-3 w-3" />
								</span>
							)}
							<IconChevronDown className="h-4 w-4 shrink-0 opacity-50" />
						</div>
					</Button>
				</PopoverTrigger>

				<PopoverContent className="w-full p-0" style={{ width: 'var(--radix-popover-trigger-width)' }} align="start">
					<Command shouldFilter={false}>
						<CommandInput
							placeholder="搜索站点..."
							value={searchValue}
							onValueChange={setSearchValue}
							className="h-9"
						/>
						<CommandList className="max-h-[250px] overflow-y-auto">
							{isLoading ? (
								<CommandEmpty>加载中...</CommandEmpty>
							) : filteredStations.length === 0 ? (
								<CommandEmpty>未找到站点</CommandEmpty>
							) : (
								<CommandGroup>
									{/* 多选模式下显示已选择数量 */}
									{multiple && selectedStations.length > 0 && (
										<div className="px-2 py-1.5 text-xs text-muted-foreground border-b">
											已选择 {selectedStations.length} 个站点
										</div>
									)}
									{filteredStations.map((station) => (
										<StationItem
											key={station.id}
											station={station}
											isSelected={isSelected(station.id)}
											showDescription={showDescription}
											showBadge={showBadge}
											onSelect={() => handleSelect(station.id)}
										/>
									))}
								</CommandGroup>
							)}
						</CommandList>
					</Command>
				</PopoverContent>
			</Popover>
		</div>
	);
}

// 导出便捷的单选和多选组件
export function SingleStationSelector(
	props: Omit<StationSelectorProps, 'multiple' | 'onValueChange'> & {
		onValueChange?: (value: string) => void;
	},
) {
	const handleValueChange = (value: string | string[]) => {
		if (props.onValueChange && typeof value === 'string') {
			props.onValueChange(value);
		}
	};

	return <StationSelect {...props} multiple={false} onValueChange={handleValueChange} />;
}

export function MultipleStationSelector(
	props: Omit<StationSelectorProps, 'multiple' | 'onValueChange'> & {
		onValueChange?: (value: string[]) => void;
	},
) {
	const handleValueChange = (value: string | string[]) => {
		if (props.onValueChange && Array.isArray(value)) {
			props.onValueChange(value);
		}
	};

	return <StationSelect {...props} multiple={true} onValueChange={handleValueChange} />;
}