import { useChatContext } from "../../context/ChatContext";
import { modelKey, modelLabel, shortModelLabel } from "../../utils/sessionTitle";
import { ExportMenu } from "../chat/ExportMenu";
import { SessionContextBar } from "../chat/SessionContextBar";
import styles from "./Header.module.css";

function ModelControls({
	availableModels,
	currentModelKey,
	currentModel,
	thinkingLevel,
	availableThinkingLevels,
	isStreaming,
	isApplyingModelSettings,
	applyModelSelection,
	applyThinkingSelection,
}: {
	availableModels: ReturnType<typeof useChatContext>["availableModels"];
	currentModelKey: string;
	currentModel: ReturnType<typeof useChatContext>["availableModels"][number] | undefined;
	thinkingLevel: string;
	availableThinkingLevels: ReturnType<typeof useChatContext>["availableThinkingLevels"];
	isStreaming: boolean;
	isApplyingModelSettings: boolean;
	applyModelSelection: (key: string) => Promise<void>;
	applyThinkingSelection: (level: string) => Promise<void>;
}) {
	return (
		<div className={styles.controls}>
			<label className={styles.field}>
				<span className={styles.fieldLabel}>模型</span>
				<div className={styles.selectWrap}>
					<select
						className={`${styles.select} ${styles.selectModel}`}
						aria-label="选择模型"
						title={currentModel ? modelLabel(currentModel) : "选择模型"}
						value={currentModelKey}
						disabled={isStreaming || isApplyingModelSettings}
						onChange={(e) => void applyModelSelection(e.target.value)}
					>
						{availableModels.length === 0 ? (
							<option value="">加载中…</option>
						) : (
							availableModels.map((m) => (
								<option key={modelKey(m)} value={modelKey(m)} title={modelLabel(m)}>
									{shortModelLabel(m)}
								</option>
							))
						)}
					</select>
				</div>
			</label>

			<label className={styles.field}>
				<span className={styles.fieldLabel}>推理</span>
				<div className={styles.selectWrap}>
					<select
						className={`${styles.select} ${styles.selectCompact}`}
						aria-label="选择推理强度"
						title="推理强度"
						value={
							availableThinkingLevels.includes(thinkingLevel as typeof availableThinkingLevels[number])
								? thinkingLevel
								: availableThinkingLevels[0] || "off"
						}
						disabled={
							!availableThinkingLevels.length ||
							availableThinkingLevels.length === 1 ||
							isStreaming ||
							isApplyingModelSettings
						}
						onChange={(e) => void applyThinkingSelection(e.target.value)}
					>
						{availableThinkingLevels.map((level) => (
							<option key={level} value={level}>
								{level}
							</option>
						))}
					</select>
				</div>
			</label>
		</div>
	);
}

function ToolsToggleButton({
	expanded,
	onClick,
}: {
	expanded: boolean;
	onClick: () => void;
}) {
	return (
		<button
			type="button"
			className={styles.toolsToggleBtn}
			onClick={onClick}
			title={expanded ? "折叠全部 tool (Ctrl+O)" : "展开全部 tool (Ctrl+O)"}
			aria-label={expanded ? "折叠全部 tool" : "展开全部 tool"}
		>
			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
				<polyline points="6 9 12 15 18 9" />
			</svg>
		</button>
	);
}

export function Header() {
	const {
		headerTitle,
		headerMeta,
		toggleSidebar,
		toggleToolsExpanded,
		toolsExpanded,
		availableModels,
		currentModelKey,
		thinkingLevel,
		availableThinkingLevels,
		isStreaming,
		isApplyingModelSettings,
		applyModelSelection,
		applyThinkingSelection,
	} = useChatContext();

	const currentModel = availableModels.find((m) => modelKey(m) === currentModelKey);
	const controlProps = {
		availableModels,
		currentModelKey,
		currentModel,
		thinkingLevel,
		availableThinkingLevels,
		isStreaming,
		isApplyingModelSettings,
		applyModelSelection,
		applyThinkingSelection,
	};

	return (
		<header className={styles.header}>
			<div className={styles.topRow}>
				<button type="button" className={styles.menuBtn} onClick={toggleSidebar} aria-label="切换菜单">
					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
						<path d="M3 12h18M3 6h18M3 18h18" />
					</svg>
				</button>
				<div className={styles.titleBlock}>
					<h1 className={styles.title} title={headerTitle}>
						{headerTitle}
					</h1>
					{headerMeta ? <span className={styles.meta}>{headerMeta}</span> : null}
				</div>
				<div className={styles.topActions}>
					<ToolsToggleButton expanded={toolsExpanded} onClick={toggleToolsExpanded} />
					<ExportMenu compact />
				</div>
			</div>

			<div className={styles.bottomRow}>
				<ModelControls {...controlProps} />
				<div className={styles.statsWrap}>
					<SessionContextBar />
				</div>
			</div>
		</header>
	);
}
