import * as Popover from "@radix-ui/react-popover";
import Fuse, { FuseResult } from "fuse.js";
import React, { useEffect, useMemo, useRef, useState } from "react";

import { t } from "../../lang/helpers";
import { ApiProvider } from "../../types/llm/model";
import { InfioSettings } from "../../types/settings";
// import { PROVIDERS } from '../constants';
import { GetAllProviders, GetEmbeddingProviderModelIds, GetEmbeddingProviders, GetProviderModelIds } from "../../utils/api";

import { getProviderSettingKey } from "./ModelProviderSettings";

type TextSegment = {
	text: string;
	isHighlighted: boolean;
};

type SearchableItem = {
	id: string;
	html: string | TextSegment[];
};

type HighlightedItem = {
	id: string;
	html: TextSegment[];
	isCustom?: boolean;
};

// Type guard for Record<string, unknown>
function isRecord(value: unknown): value is Record<string, unknown> {
	return typeof value === 'object' && value !== null;
}

// https://gist.github.com/evenfrost/1ba123656ded32fb7a0cd4651efd4db0
export const highlight = (fuseSearchResult: FuseResult<SearchableItem>[]): HighlightedItem[] => {
	const set = (obj: Record<string, unknown>, path: string, value: TextSegment[]): void => {
		const pathValue = path.split(".")
		let i: number
		let current = obj

		for (i = 0; i < pathValue.length - 1; i++) {
			const nextValue = current[pathValue[i]]
			if (isRecord(nextValue)) {
				current = nextValue
			} else {
				throw new Error(`Invalid path: ${path}`)
			}
		}

		current[pathValue[i]] = value
	}

	// Function to merge overlapping regions
	const mergeRegions = (regions: [number, number][]): [number, number][] => {
		if (regions.length === 0) return regions

		// Sort regions by start index
		regions.sort((a, b) => a[0] - b[0])

		const merged: [number, number][] = [regions[0]]

		for (let i = 1; i < regions.length; i++) {
			const last = merged[merged.length - 1]
			const current = regions[i]

			if (current[0] <= last[1] + 1) {
				// Overlapping or adjacent regions
				last[1] = Math.max(last[1], current[1])
			} else {
				merged.push(current)
			}
		}

		return merged
	}

	const generateHighlightedSegments = (inputText: string, regions: [number, number][] = []): TextSegment[] => {
		if (regions.length === 0) {
			return [{ text: inputText, isHighlighted: false }];
		}

		// Sort and merge overlapping regions
		const mergedRegions = mergeRegions(regions);
		const segments: TextSegment[] = [];
		let nextUnhighlightedRegionStartingIndex = 0;

		mergedRegions.forEach((region) => {
			const start = region[0];
			const end = region[1];
			const lastRegionNextIndex = end + 1;

			// Add unhighlighted segment before the highlight
			if (nextUnhighlightedRegionStartingIndex < start) {
				segments.push({
					text: inputText.substring(nextUnhighlightedRegionStartingIndex, start),
					isHighlighted: false,
				});
			}

			// Add highlighted segment
			segments.push({
				text: inputText.substring(start, lastRegionNextIndex),
				isHighlighted: true,
			});

			nextUnhighlightedRegionStartingIndex = lastRegionNextIndex;
		});

		// Add remaining unhighlighted text
		if (nextUnhighlightedRegionStartingIndex < inputText.length) {
			segments.push({
				text: inputText.substring(nextUnhighlightedRegionStartingIndex),
				isHighlighted: false,
			});
		}

		return segments;
	}

	return fuseSearchResult
		.filter(({ matches }) => matches && matches.length)
		.map(({ item, matches }): HighlightedItem => {
			const highlightedItem: HighlightedItem = {
				id: item.id,
				html: typeof item.html === 'string' ? [{ text: item.html, isHighlighted: false }] : [...item.html]
			}

			matches?.forEach((match) => {
				if (match.key && typeof match.value === "string" && match.indices) {
					const mergedIndices = mergeRegions([...match.indices])
					set(highlightedItem, match.key, generateHighlightedSegments(match.value, mergedIndices))
				}
			})

			return highlightedItem
		})
}

const HighlightedText: React.FC<{ segments: TextSegment[] }> = ({ segments }) => {
	return (
		<>
			{segments.map((segment, index) => (
				segment.isHighlighted ? (
					<span key={index} className="infio-llm-setting-model-item-highlight">{segment.text}</span>
				) : (
					<span key={index}>{segment.text}</span>
				)
			))}
		</>
	);
};

export type ComboBoxComponentProps = {
	name: string;
	provider: ApiProvider;
	modelId: string;
	settings?: InfioSettings | null;
	isEmbedding?: boolean,
	description?: string;
	updateModel: (provider: ApiProvider, modelId: string, isCustom?: boolean) => void;
};

export const ComboBoxComponent: React.FC<ComboBoxComponentProps> = ({
	name,
	provider,
	modelId,
	settings = null,
	isEmbedding = false,
	description,
	updateModel,
}) => {
	// provider state
	const [modelProvider, setModelProvider] = useState(provider);

	// search state
	const [searchTerm, setSearchTerm] = useState("");
	const [isOpen, setIsOpen] = useState(false);
	const [selectedIndex, setSelectedIndex] = useState(0);

	const providers = isEmbedding ? GetEmbeddingProviders() : GetAllProviders()

	const [modelIds, setModelIds] = useState<string[]>([]);

	// 统一处理模型选择和保存
	const handleModelSelect = (provider: ApiProvider, modelId: string, isCustom?: boolean) => {
		console.debug(`handleModelSelect: ${provider} -> ${modelId}`)

		// 检查是否是自定义模型（不在官方模型列表中）
		// const isCustomModel = !modelIds.includes(modelId);

		updateModel(provider, modelId, isCustom);
	};

	// Replace useMemo with useEffect for async fetching
	useEffect(() => {
		const fetchModelIds = async () => {
			const ids = isEmbedding
				? GetEmbeddingProviderModelIds(modelProvider)
				: await GetProviderModelIds(modelProvider, settings);
			console.debug(`📝 Fetched ${ids.length} official models for ${modelProvider}:`, ids);
			setModelIds(ids);
		};

		fetchModelIds();
	}, [modelProvider, isEmbedding, settings]);

	const combinedModelIds = useMemo(() => {
		const providerKey = getProviderSettingKey(modelProvider);
		const providerModels = settings?.[providerKey]?.models;
		console.debug(`🔍 Custom models in settings for ${modelProvider}:`, providerModels || 'none')
		// Ensure providerModels is an array of strings
		if (!providerModels || !Array.isArray(providerModels)) {
			console.debug(`📋 Using only official models (${modelIds.length}):`, modelIds);
			return modelIds;
		}
		const additionalModels = providerModels.filter((model): model is string => typeof model === 'string');
		console.debug(`📋 Combined models: ${modelIds.length} official + ${additionalModels.length} custom`);
		return [...modelIds, ...additionalModels];
	}, [modelIds, settings, modelProvider]);

	const searchableItems = useMemo(() => {
		return combinedModelIds.map((id): SearchableItem => ({
			id: String(id),
			html: String(id),
		}))
	}, [combinedModelIds])

	// fuse, used for fuzzy search, simple configuration threshold can be adjusted as needed
	const fuse: Fuse<SearchableItem> = useMemo(() => {
		return new Fuse<SearchableItem>(searchableItems, {
			keys: ["html"],
			threshold: 1,
			shouldSort: true,
			isCaseSensitive: false,
			ignoreLocation: false,
			includeMatches: true,
			minMatchCharLength: 4,
		})
	}, [searchableItems])

	// 根据 searchTerm 得到过滤后的数据列表
	const filteredOptions = useMemo(() => {
		const results: HighlightedItem[] = searchTerm
			? highlight(fuse.search(searchTerm))
			: searchableItems.map(item => ({
				...item,
				html: typeof item.html === 'string' ? [{ text: item.html, isHighlighted: false }] : item.html
			}))

		// 如果有搜索词，添加自定义选项（如果不存在完全匹配的话）
		if (searchTerm && searchTerm.trim()) {
			const exactMatch = searchableItems.some(item => item.id === searchTerm);
			if (!exactMatch) {
				results.unshift({
					id: searchTerm,
					html: [{ text: `${modelIds.length > 0 ? t("settings.ModelProvider.custom") : ''}${searchTerm}`, isHighlighted: false }],
					isCustom: true
				});
			}
		}

		return results
	}, [searchableItems, searchTerm, fuse, modelIds.length])

	const listRef = useRef<HTMLDivElement>(null);
	const itemRefs = useRef<Array<HTMLDivElement | null>>([]);

	// when selected index changes, scroll to visible area
	useEffect(() => {
		if (itemRefs.current[selectedIndex]) {
			itemRefs.current[selectedIndex]?.scrollIntoView({
				block: "nearest",
				behavior: "smooth"
			});
		}
	}, [selectedIndex]);

	// Handle provider change
	const handleProviderChange = (newProvider: string) => {
		// Use proper type checking without type assertion
		const availableProviders = providers;
		const isValidProvider = (value: string): value is ApiProvider => {
			// @ts-expect-error - checking if providers array includes the value
			return availableProviders.includes(value);
		};

		if (isValidProvider(newProvider)) {
			setModelProvider(newProvider);
			// 当提供商变更时，清空模型选择让用户重新选择
			updateModel(newProvider, '', false);
		}
	};

	return (
		<div className="infio-llm-setting-item">
			<div className="infio-llm-setting-item-name">{name}</div>
			{description && (
				<div className="infio-llm-setting-item-description">{description}</div>
			)}
			<div className="infio-llm-setting-item-content">
				{/* Provider Selection - Now visible outside */}
				<div className="infio-llm-setting-provider-container">
					<label className="infio-llm-setting-provider-label">{t("settings.ModelProvider.provider")}</label>
					<select
						className="dropdown infio-llm-setting-provider-select"
						value={modelProvider}
						onChange={(e) => handleProviderChange(e.target.value)}
					>
						{providers.map((providerOption) => (
							<option
								key={providerOption}
								value={providerOption}
							>
								{providerOption}
							</option>
						))}
					</select>
				</div>

				{/* Model Selection */}
				<div className="infio-llm-setting-model-container">
					<label className="infio-llm-setting-model-label">{t("settings.ModelProvider.model")}</label>
					<Popover.Root modal={false} open={isOpen} onOpenChange={setIsOpen}>
						<Popover.Trigger asChild>
							<button className="infio-llm-setting-model-trigger clickable-icon" type="button">
								<span className="infio-llm-setting-model-display">
									{modelId || t("settings.ModelProvider.selectModel")}
								</span>
								<svg
									className="infio-llm-setting-model-arrow"
									width="12"
									height="12"
									viewBox="0 0 12 12"
									fill="none"
								>
									<path
										d="M3 4.5L6 7.5L9 4.5"
										stroke="currentColor"
										strokeWidth="1.5"
										strokeLinecap="round"
										strokeLinejoin="round"
									/>
								</svg>
							</button>
						</Popover.Trigger>
						<Popover.Content
							side="bottom"
							align="start"
							sideOffset={4}
							className="infio-llm-setting-combobox-dropdown"
						>
							<div ref={listRef}>
								<div className="infio-llm-setting-search-container">
									<input
										type="text"
										className="infio-llm-setting-item-search"
										placeholder={modelIds.length > 0 ? t("settings.ModelProvider.searchOrEnterModelName") : t("settings.ModelProvider.enterCustomModelName")}
										value={searchTerm}
										onChange={(e) => {
											setSearchTerm(e.target.value);
											setSelectedIndex(0);
										}}
										onKeyDown={(e) => {
											switch (e.key) {
												case "ArrowDown":
													e.preventDefault();
													setSelectedIndex((prev) =>
														Math.min(prev + 1, filteredOptions.length - 1)
													);
													break;
												case "ArrowUp":
													e.preventDefault();
													setSelectedIndex((prev) => Math.max(prev - 1, 0));
													break;
												case "Enter": {
													e.preventDefault();
													if (filteredOptions.length > 0) {
														const selectedOption = filteredOptions[selectedIndex];
														if (selectedOption) {
															handleModelSelect(modelProvider, selectedOption.id, selectedOption.isCustom);
														}
													} else if (searchTerm.trim()) {
														// If no options but there is input content, use the input content directly
														handleModelSelect(modelProvider, searchTerm.trim(), true);
													}
													setSearchTerm("");
													setIsOpen(false);
													break;
												}
												case "Escape":
													e.preventDefault();
													setIsOpen(false);
													setSearchTerm("");
													break;
											}
										}}
									/>
								</div>
								{filteredOptions.length > 0 ? (
									<div className="infio-llm-setting-options-list">
										{filteredOptions.map((option, index) => (
											<Popover.Close key={option.id} asChild>
												<div
													ref={(el) => (itemRefs.current[index] = el)}
													onMouseEnter={() => setSelectedIndex(index)}
													onClick={() => {
														handleModelSelect(modelProvider, option.id, option.isCustom);
														setSearchTerm("");
														setIsOpen(false);
													}}
													className={`infio-llm-setting-combobox-option ${index === selectedIndex ? 'is-selected' : ''}`}
												>
													<HighlightedText segments={option.html} />
												</div>
											</Popover.Close>
										))}
									</div>
								) : null}
							</div>
						</Popover.Content>
					</Popover.Root>
				</div>
			</div>
			<style>{`
				.infio-llm-setting-item {
					margin-bottom: 8px;
					padding: 12px;
					background: var(--background-secondary);
					border-radius: 6px;
					border: 1px solid var(--background-modifier-border);
				}

				.infio-llm-setting-item-name {
					font-size: 14px;
					font-weight: 500;
					color: var(--text-normal);
					margin-bottom: 8px;
					padding-bottom: 4px;
					border-bottom: 1px solid var(--background-modifier-border);
				}

				.infio-llm-setting-item-description {
					font-size: 12px;
					color: var(--text-muted);
					margin-bottom: 8px;
					line-height: 1.4;
				}

				.infio-llm-setting-item-content {
					display: flex;
					flex-direction: column;
					gap: 8px;
				}

				.infio-llm-setting-provider-container,
				.infio-llm-setting-model-container {
					display: flex;
					align-items: center;
					gap: 12px;
				}

				.infio-llm-setting-provider-label,
				.infio-llm-setting-model-label {
					font-size: 13px;
					font-weight: 500;
					color: var(--text-muted);
					min-width: 50px;
					text-align: left;
				}

				.infio-llm-setting-provider-select {
					max-width: 200px;
					min-width: 120px;
					padding: 6px 8px;
					border: 1px solid var(--background-modifier-border);
					border-radius: 4px;
					background: var(--background-primary);
					color: var(--text-normal);
					font-size: 13px;
					transition: all 0.2s ease;
					appearance: none;
					background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
					background-repeat: no-repeat;
					background-position: right 8px center;
					background-size: 12px;
					padding-right: 28px;
				}

				.infio-llm-setting-provider-select:hover {
					border-color: var(--interactive-accent);
				}

				.infio-llm-setting-provider-select:focus {
					outline: none;
					border-color: var(--interactive-accent);
					box-shadow: 0 0 0 2px var(--interactive-accent-hover);
				}

				.infio-llm-setting-model-trigger {
					max-width: 300px;
					min-width: 150px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 6px 8px;
					border: 1px solid var(--background-modifier-border);
					border-radius: 4px;
					background: var(--background-primary);
					color: var(--text-normal);
					font-size: 13px;
					cursor: pointer;
					transition: all 0.2s ease;
					min-height: 32px;
				}

				.infio-llm-setting-model-trigger:hover {
					border-color: var(--interactive-accent);
					background: var(--background-modifier-hover);
				}

				.infio-llm-setting-model-trigger:focus {
					outline: none;
					border-color: var(--interactive-accent);
					box-shadow: 0 0 0 2px var(--interactive-accent-hover);
				}

				.infio-llm-setting-model-display {
					flex: 1;
					text-align: left;
					color: var(--text-normal);
					font-family: var(--font-monospace);
					font-size: 12px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.infio-llm-setting-model-arrow {
					color: var(--text-muted);
					transition: transform 0.2s ease;
					flex-shrink: 0;
				}

				.infio-llm-setting-model-trigger[data-state="open"] .infio-llm-setting-model-arrow {
					transform: rotate(180deg);
				}

				.infio-llm-setting-combobox-dropdown {
					background: var(--background-primary);
					border: 1px solid var(--background-modifier-border);
					border-radius: 6px;
					box-shadow: var(--shadow-s);
					padding: 6px;
					min-width: 300px;
					max-width: 500px;
					z-index: 1000;
				}

				.infio-llm-setting-search-container {
					margin-bottom: 6px;
				}

				.infio-llm-setting-item-search {
					width: 100%;
					padding: 6px 8px;
					border: 1px solid var(--background-modifier-border);
					border-radius: 4px;
					background: var(--background-primary);
					color: var(--text-normal);
					font-size: 13px;
					transition: all 0.2s ease;
				}

				.infio-llm-setting-item-search:focus {
					outline: none;
					border-color: var(--interactive-accent);
					box-shadow: 0 0 0 2px var(--interactive-accent-hover);
				}

				.infio-llm-setting-options-list {
					max-height: 200px;
					overflow-y: auto;
				}

				.infio-llm-setting-combobox-option {
					padding: 6px 8px;
					border-radius: 3px;
					cursor: pointer;
					font-family: var(--font-monospace);
					font-size: 12px;
					color: var(--text-normal);
					transition: all 0.15s ease;
					word-break: break-all;
				}

				.infio-llm-setting-combobox-option:hover,
				.infio-llm-setting-combobox-option.is-selected {
					background: var(--background-modifier-hover);
					color: var(--text-accent);
				}

				.infio-llm-setting-model-item-highlight {
					color: var(--text-accent);
				}

				.infio-llm-setting-no-results {
					padding: 12px 8px;
					text-align: center;
					color: var(--text-muted);
					font-size: 13px;
				}

				/* 滚动条样式 */
				.infio-llm-setting-options-list::-webkit-scrollbar {
					width: 4px;
				}

				.infio-llm-setting-options-list::-webkit-scrollbar-track {
					background: var(--background-secondary);
					border-radius: 2px;
				}

				.infio-llm-setting-options-list::-webkit-scrollbar-thumb {
					background: var(--background-modifier-border);
					border-radius: 2px;
				}

				.infio-llm-setting-options-list::-webkit-scrollbar-thumb:hover {
					background: var(--text-muted);
				}

				/* 响应式设计 */
				@media (max-width: 768px) {
					.infio-llm-setting-provider-container,
					.infio-llm-setting-model-container {
						flex-direction: column;
						align-items: flex-start;
						gap: 6px;
					}

					.infio-llm-setting-provider-label,
					.infio-llm-setting-model-label {
						min-width: auto;
					}

					.infio-llm-setting-provider-select,
					.infio-llm-setting-model-trigger {
						width: 100%;
						max-width: none;
					}
				}
			`}</style>
		</div>
	);
};