"use client";

import { GitBranchIcon } from "lucide-react";
import { cn } from "@/lib/utils";

type Props = {
	sessionId: string | null;
	isTraining: boolean;
	onChange: (next: boolean) => void;
	disabled?: boolean;
	lockedReason?: string;
};

export function TrainingModeToggle({
	sessionId,
	isTraining,
	onChange,
	disabled,
	lockedReason,
}: Props) {
	const isDisabled = disabled || !sessionId;
	const tooltip = !sessionId
		? "发送首条消息后开启"
		: lockedReason
			? lockedReason
			: "切换训练模式";

	return (
		<button
			type="button"
			disabled={isDisabled}
			onClick={() => onChange(!isTraining)}
			title={tooltip}
			aria-pressed={isTraining}
			className={cn(
				"inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs transition-colors",
				"disabled:cursor-not-allowed disabled:opacity-50",
				isTraining
					? "border-amber-300 bg-amber-50 text-amber-800 hover:bg-amber-100"
					: "border-border bg-background text-foreground hover:bg-muted",
			)}
		>
			<GitBranchIcon className="size-3.5" />
			<span>训练模式</span>
			<span
				className={cn(
					"ml-1 inline-flex h-3.5 w-7 shrink-0 items-center rounded-full transition-colors",
					isTraining ? "bg-amber-400" : "bg-muted",
				)}
			>
				<span
					className={cn(
						"inline-block size-3 rounded-full bg-background shadow-sm transition-transform",
						isTraining ? "translate-x-3.5" : "translate-x-0.5",
					)}
				/>
			</span>
		</button>
	);
}