"use client";

import {
	Dialog,
	DialogBody,
	DialogClose,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "@giselle-internal/ui/dialog";
import { DEFAULT_EMBEDDING_PROFILE_ID } from "@giselles-ai/protocol";
import * as Tooltip from "@radix-ui/react-tooltip";
import { Plus, X } from "lucide-react";
import {
	useCallback,
	useEffect,
	useMemo,
	useState,
	useTransition,
} from "react";
import { GlassButton } from "@/components/ui/glass-button";
import { Button } from "../../components/button";
import { DOCUMENT_EMBEDDING_PROFILES } from "./document-embedding-profiles";
import type { ActionResult } from "./types";
import { FormField } from "./ui/form-field";

type DocumentVectorStoreCreateDialogProps = {
	createAction: (
		name: string,
		embeddingProfileIds: number[],
	) => Promise<ActionResult>;
	disabled?: boolean;
	disabledReason?: string;
};

export function DocumentVectorStoreCreateDialog({
	createAction,
	disabled = false,
	disabledReason,
}: DocumentVectorStoreCreateDialogProps) {
	const [open, setOpen] = useState(false);
	const [name, setName] = useState("");
	const selectableProfiles = useMemo(
		() => Object.entries(DOCUMENT_EMBEDDING_PROFILES),
		[],
	);
	const defaultProfileIds = useMemo(() => {
		const profileIds = selectableProfiles.map(([id]) => Number(id));
		if (profileIds.includes(DEFAULT_EMBEDDING_PROFILE_ID)) {
			return [DEFAULT_EMBEDDING_PROFILE_ID];
		}
		return profileIds.length > 0 ? [profileIds[0]] : [];
	}, [selectableProfiles]);
	const [selectedProfiles, setSelectedProfiles] = useState<number[]>(() => [
		...defaultProfileIds,
	]);
	const [isPending, startTransition] = useTransition();
	const [error, setError] = useState<string | null>(null);

	useEffect(() => {
		if (open) {
			setSelectedProfiles([...defaultProfileIds]);
			setError(null);
		}
	}, [open, defaultProfileIds]);

	const toggleProfile = useCallback((profileId: number) => {
		setSelectedProfiles((prev) => {
			const isSelected = prev.includes(profileId);
			if (isSelected) {
				if (prev.length === 1) {
					return prev;
				}
				return prev.filter((id) => id !== profileId);
			}
			return [...prev, profileId];
		});
	}, []);

	const onSubmit = useCallback(() => {
		if (selectedProfiles.length === 0) {
			setError("Select at least one embedding profile");
			return;
		}
		setError(null);
		startTransition(async () => {
			const result = await createAction(name.trim(), selectedProfiles);
			if (result.success) {
				setOpen(false);
				setName("");
				setSelectedProfiles([...defaultProfileIds]);
			} else {
				setError(result.error);
			}
		});
	}, [createAction, name, selectedProfiles, defaultProfileIds]);

	if (disabled) {
		const disabledButton = (
			<GlassButton
				className="cursor-not-allowed opacity-60"
				disabled
				type="button"
			>
				<span className="grid place-items-center rounded-full size-4 bg-primary-200 opacity-50">
					<Plus className="size-3 text-link-muted" />
				</span>
				New Vector Store
			</GlassButton>
		);

		if (!disabledReason) {
			return disabledButton;
		}

		return (
			<Tooltip.Provider delayDuration={200}>
				<Tooltip.Root>
					<Tooltip.Trigger asChild>{disabledButton}</Tooltip.Trigger>
					<Tooltip.Portal>
						<Tooltip.Content
							side="bottom"
							className="z-50 max-w-xs rounded-md border border-border-muted bg-surface px-3 py-2 text-xs text-inverse shadow-lg"
						>
							{disabledReason}
							<Tooltip.Arrow style={{ fill: "var(--color-surface)" }} />
						</Tooltip.Content>
					</Tooltip.Portal>
				</Tooltip.Root>
			</Tooltip.Provider>
		);
	}

	return (
		<Dialog open={open} onOpenChange={setOpen}>
			<DialogTrigger asChild>
				<GlassButton className="whitespace-nowrap">
					<span className="grid place-items-center rounded-full size-4 bg-primary-200 opacity-50">
						<Plus className="size-3 text-link-muted" />
					</span>
					New Vector Store
				</GlassButton>
			</DialogTrigger>

			<DialogContent variant="glass">
				<DialogHeader>
					<div className="flex items-center justify-between">
						<DialogTitle className="font-sans text-[20px] font-medium tracking-tight text-inverse">
							Create Vector Store
						</DialogTitle>
						<DialogClose className="rounded-sm text-inverse opacity-70 hover:opacity-100 focus:outline-none">
							<X className="h-5 w-5" />
							<span className="sr-only">Close</span>
						</DialogClose>
					</div>
					<DialogDescription className="font-geist mt-2 text-[14px] text-text-muted">
						Create a new Vector Store for your documents.
					</DialogDescription>
				</DialogHeader>

				<DialogBody className="mt-4">
					<div className="flex flex-col gap-4">
						<FormField
							label="Name"
							placeholder="e.g. Product Docs"
							value={name}
							onChange={(e) => setName(e.target.value)}
						/>
						{/* Embedding Models, styled like Register Repository */}
						<div className="mt-4">
							<div className="text-text text-[14px] leading-[16.8px] font-sans mb-2">
								Embedding Models
							</div>
							<div className="text-text-muted text-[12px] mb-3">
								Select at least one embedding model for indexing
							</div>
							<div className="space-y-2">
								{selectableProfiles.map(([id, p]) => {
									const profileId = Number(id);
									const isSelected = selectedProfiles.includes(profileId);
									const isLastSelected =
										selectedProfiles.length === 1 && isSelected;
									return (
										<label
											key={profileId}
											className="flex items-start gap-3 p-3 rounded-lg border border-border-muted hover:bg-[color-mix(in_srgb,var(--color-text-inverse,#fff)_5%,transparent)] transition-colors cursor-pointer"
										>
											<input
												type="checkbox"
												checked={isSelected}
												disabled={isPending || isLastSelected}
												onChange={() => toggleProfile(profileId)}
												className="mt-1 w-4 h-4 text-[#1663F3] bg-surface border-border rounded focus:ring-[#1663F3]/20"
											/>
											<div className="flex-1">
												<div className="text-text text-[14px] font-medium">
													{p.name}
												</div>
												<div className="text-text-muted text-[12px] mt-1">
													Provider: {p.provider} • Dimensions {p.dimensions}
												</div>
											</div>
										</label>
									);
								})}
							</div>
						</div>
						{error ? <p className="text-error-900 text-sm">{error}</p> : null}
					</div>
				</DialogBody>

				<DialogFooter>
					<div className="mt-6 flex justify-end gap-x-3">
						<Button
							variant="link"
							onClick={() => setOpen(false)}
							disabled={isPending}
						>
							Cancel
						</Button>
						<Button variant="primary" onClick={onSubmit} disabled={isPending}>
							{isPending ? "Processing..." : "Create"}
						</Button>
					</div>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}
