"use client";

import {
	Box,
	Check,
	Compass,
	Copy,
	Eye,
	Layers,
	Loader2,
	MousePointerClick,
	Palette,
	RotateCcw,
	Ruler,
	Save,
	Sparkles,
} from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogFooter,
	DialogHeader,
	DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import { adminFetch } from "@/lib/admin-fetch";

interface NitroEditorDialogProps {
	classname: string;
	open: boolean;
	onOpenChange: (open: boolean) => void;
}

// Keep these helpers on `any` — Next's build-time checker has repeatedly
// disagreed with `tsc` on stricter JSON typings for this editor.
// biome-ignore lint/suspicious/noExplicitAny: metadata tree is untyped JSON
function updateNested(obj: any, path: string, value: unknown): any {
	const clone = JSON.parse(JSON.stringify(obj));
	const keys = path.split(".");
	let current = clone;
	for (let i = 0; i < keys.length - 1; i++) {
		if (!current[keys[i]]) current[keys[i]] = {};
		current = current[keys[i]];
	}
	current[keys[keys.length - 1]] = value;
	return clone;
}

// biome-ignore lint/suspicious/noExplicitAny: metadata tree is untyped JSON
function getNested(obj: any, path: string, fallback?: unknown): any {
	const keys = path.split(".");
	let current = obj;
	for (const key of keys) {
		if (current == null || typeof current !== "object") return fallback;
		current = current[key];
	}
	return current ?? fallback;
}

const ALL_DIRECTIONS = [0, 1, 2, 3, 4, 5, 6, 7];
const DIR_LABELS = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];

function hexToColor(hex: string): string {
	return `#${hex.padStart(6, "0")}`;
}

function CopyClassname({ value }: { value: string }) {
	const [copied, setCopied] = useState(false);
	return (
		<button
			type="button"
			className="flex items-center gap-1.5 font-mono text-sm text-muted-foreground mt-0.5 hover:text-foreground transition-colors"
			onClick={() => {
				navigator.clipboard.writeText(value);
				setCopied(true);
				setTimeout(() => setCopied(false), 1500);
			}}
		>
			<span className="truncate">{value}</span>
			{copied ? (
				<Check className="w-3 h-3 text-[var(--admin-success)] shrink-0" />
			) : (
				<Copy className="w-3 h-3 shrink-0" />
			)}
		</button>
	);
}

export function NitroEditorDialog({
	classname,
	open,
	onOpenChange,
}: NitroEditorDialogProps) {
	// biome-ignore lint/suspicious/noExplicitAny: explicitly chosen here, see surrounding code
	const [metadata, setMetadata] = useState<any>(null);
	// biome-ignore lint/suspicious/noExplicitAny: explicitly chosen here, see surrounding code
	const [originalMetadata, setOriginalMetadata] = useState<any>(null);
	const [jsonText, setJsonText] = useState("");
	const [loading, setLoading] = useState(false);
	const [saving, setSaving] = useState(false);
	const [activeTab, setActiveTab] = useState<string>("visual");
	const [flags, setFlags] = useState({
		canstandon: false,
		cansiton: false,
		canlayon: false,
	});
	const [originalFlags, setOriginalFlags] = useState({
		canstandon: false,
		cansiton: false,
		canlayon: false,
	});
	const [jsonError, setJsonError] = useState<string | null>(null);

	const patchMeta = (path: string, value: unknown) => {
		// Explicit any avoids noImplicitAny on updater params and dodges
		// Next build's stricter JSON inference that disagreed with tsc.
		// biome-ignore lint/suspicious/noExplicitAny: metadata tree is untyped JSON
		setMetadata((prev: any) => updateNested(prev, path, value));
	};

	const fetchMetadata = useCallback(async () => {
		if (!classname) return;
		setLoading(true);
		setJsonError(null);
		try {
			const res = await adminFetch(
				`/api/admin/import/furni/nitro-editor?classname=${encodeURIComponent(classname)}`,
			);
			if (!res.ok) {
				const err = await res.json().catch(() => ({}));
				toast.error(err.error || "Failed to load .nitro metadata");
				onOpenChange(false);
				return;
			}
			const data = await res.json();
			setMetadata(data.metadata);
			setOriginalMetadata(JSON.parse(JSON.stringify(data.metadata)));
			setJsonText(JSON.stringify(data.metadata, null, 2));
			setFlags(data.flags);
			setOriginalFlags({ ...data.flags });
		} catch {
			toast.error("Network error loading .nitro metadata");
			onOpenChange(false);
		} finally {
			setLoading(false);
		}
	}, [classname, onOpenChange]);

	useEffect(() => {
		if (open && classname) {
			setActiveTab("visual");
			fetchMetadata();
		}
	}, [open, classname, fetchMetadata]);

	const handleTabChange = (newTab: string) => {
		if (activeTab === "json" && newTab === "visual") {
			try {
				const parsed = JSON.parse(jsonText);
				setMetadata(parsed);
				setJsonError(null);
			} catch {
				toast.error("Invalid JSON — fix it before switching to Visual tab");
				return;
			}
		} else if (activeTab === "visual" && newTab === "json") {
			setJsonText(JSON.stringify(metadata, null, 2));
		}
		setActiveTab(newTab);
	};

	const handleReset = () => {
		if (!originalMetadata) return;
		setMetadata(JSON.parse(JSON.stringify(originalMetadata)));
		setFlags({ ...originalFlags });
		setJsonText(JSON.stringify(originalMetadata, null, 2));
		toast.info("Reset to original values");
	};

	const handleSave = async () => {
		let metadataToSave = metadata;

		if (activeTab === "json") {
			try {
				metadataToSave = JSON.parse(jsonText);
			} catch {
				toast.error("Invalid JSON");
				return;
			}
		}

		setSaving(true);
		try {
			const res = await adminFetch("/api/admin/import/furni/nitro-editor", {
				method: "PUT",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({
					classname,
					metadata: metadataToSave,
					...flags,
				}),
			});

			if (!res.ok) {
				const err = await res.json().catch(() => ({}));
				toast.error(err.error || "Save failed");
				return;
			}

			toast.success("Nitro metadata saved");
			setMetadata(metadataToSave);
			setOriginalMetadata(JSON.parse(JSON.stringify(metadataToSave)));
			setOriginalFlags({ ...flags });
			setJsonText(JSON.stringify(metadataToSave, null, 2));
		} catch {
			toast.error("Network error");
		} finally {
			setSaving(false);
		}
	};

	// ── Visual tab helpers ──

	const dims = (
		metadata
			? getNested(metadata, "logic.model.dimensions", { x: 1, y: 1, z: 0 })
			: { x: 1, y: 1, z: 0 }
	) as { x: number; y: number; z: number };
	const directions = (
		metadata ? getNested(metadata, "logic.model.directions", [0]) : [0]
	) as number[];

	const setDim = (axis: "x" | "y" | "z", value: string) => {
		const num =
			axis === "z" ? parseFloat(value) || 0 : parseInt(value, 10) || 0;
		patchMeta(`logic.model.dimensions.${axis}`, num);
	};

	const toggleDirection = (dir: number) => {
		const current = getNested(
			metadata,
			"logic.model.directions",
			[0],
		) as number[];
		const next = current.includes(dir)
			? current.filter((d: number) => d !== dir)
			: [...current, dir].sort((a: number, b: number) => a - b);
		if (next.length === 0) return;
		patchMeta("logic.model.directions", next);
	};

	// Get visualization with size=64 for layer/color editing
	// biome-ignore lint/suspicious/noExplicitAny: explicitly chosen here, see surrounding code
	const viz64 = metadata?.visualizations?.find((v: any) => v.size === 64);
	const viz64Index =
		metadata?.visualizations?.findIndex(
			(v: { size: number }) => v.size === 64,
		) ?? -1;

	const layerCount = viz64?.layers ? Object.keys(viz64.layers).length : 0;
	const colorCount = viz64?.colors ? Object.keys(viz64.colors).length : 0;
	const animCount = viz64?.animations
		? Object.keys(viz64.animations).length
		: 0;

	const handleJsonTextChange = (value: string) => {
		setJsonText(value);
		try {
			JSON.parse(value);
			setJsonError(null);
		} catch (e) {
			setJsonError((e as Error).message);
		}
	};

	// Check if there are unsaved changes
	const hasChanges =
		metadata &&
		originalMetadata &&
		(JSON.stringify(metadata) !== JSON.stringify(originalMetadata) ||
			JSON.stringify(flags) !== JSON.stringify(originalFlags));

	// Furni preview URL
	const starIdx = classname.indexOf("*");
	const baseClassname =
		starIdx !== -1 ? classname.substring(0, starIdx) : classname;

	return (
		<Dialog open={open} onOpenChange={onOpenChange}>
			<DialogContent className="sm:max-w-4xl max-h-[90vh] flex flex-col p-0 gap-0">
				{/* Header with preview */}
				<DialogHeader className="px-6 pt-5 pb-4 border-b bg-muted/30">
					<div className="flex items-start gap-4">
						{/* Furni preview */}
						<div
							className="w-20 h-20 rounded-lg border bg-card flex items-center justify-center shrink-0 overflow-hidden"
							style={{
								backgroundImage: "url(/images/furni_floor.png)",
								backgroundRepeat: "repeat",
								backgroundPosition: "center",
							}}
						>
							<img
								src={`/swf/dcr/hof_furni/icons/${baseClassname}_icon.png`}
								alt={classname}
								className="max-w-[60px] max-h-[60px] drop-shadow-md"
								style={{ imageRendering: "pixelated" }}
								onError={(e) => {
									(e.target as HTMLImageElement).style.opacity = "0";
								}}
							/>
						</div>
						<div className="flex-1 min-w-0">
							<DialogTitle className="text-lg">Edit Nitro</DialogTitle>
							<CopyClassname value={classname} />
							{/* Quick stats */}
							{metadata && (
								<div className="flex gap-2 mt-2 flex-wrap">
									<Badge variant="outline" className="text-[10px] gap-1">
										<Ruler className="w-2.5 h-2.5" />
										{dims.x}×{dims.y}×{dims.z}
									</Badge>
									<Badge variant="outline" className="text-[10px] gap-1">
										<Compass className="w-2.5 h-2.5" />
										{directions.length} dir
									</Badge>
									<Badge variant="outline" className="text-[10px] gap-1">
										<Layers className="w-2.5 h-2.5" />
										{layerCount} layers
									</Badge>
									{colorCount > 0 && (
										<Badge variant="outline" className="text-[10px] gap-1">
											<Palette className="w-2.5 h-2.5" />
											{colorCount} colors
										</Badge>
									)}
									{animCount > 0 && (
										<Badge variant="outline" className="text-[10px] gap-1">
											<Sparkles className="w-2.5 h-2.5" />
											{animCount} anim
										</Badge>
									)}
									<Badge variant="outline" className="text-[10px] gap-1">
										<Eye className="w-2.5 h-2.5" />
										{metadata.visualizationType || "?"}
									</Badge>
								</div>
							)}
						</div>
					</div>
				</DialogHeader>

				{loading ? (
					<div className="flex items-center justify-center py-16">
						<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
					</div>
				) : metadata ? (
					<Tabs
						value={activeTab}
						onValueChange={handleTabChange}
						className="flex-1 flex flex-col min-h-0"
					>
						<div className="px-6 pt-3 pb-0">
							<TabsList className="w-fit">
								<TabsTrigger value="visual" className="gap-1.5">
									<Box className="w-3.5 h-3.5" />
									Visual
								</TabsTrigger>
								<TabsTrigger value="json" className="gap-1.5">
									{"{ }"}
									JSON
								</TabsTrigger>
							</TabsList>
						</div>

						{/* ── Visual Tab ── */}
						<TabsContent
							value="visual"
							className="overflow-y-auto flex-1 px-6 py-4 space-y-5"
						>
							{/* Dimensions + Interaction in 2-column layout */}
							<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
								{/* Dimensions card */}
								<section className="rounded-lg border bg-card p-4">
									<div className="flex items-center gap-2 mb-3">
										<Ruler className="w-4 h-4 text-muted-foreground" />
										<h3 className="text-sm font-medium">Dimensions</h3>
									</div>
									<div className="grid grid-cols-3 gap-3">
										<div>
											<Label
												htmlFor="dim-x"
												className="text-xs text-muted-foreground"
											>
												X (width)
											</Label>
											<Input
												id="dim-x"
												type="number"
												min={1}
												value={dims.x}
												onChange={(e) => setDim("x", e.target.value)}
												className="mt-1"
											/>
										</div>
										<div>
											<Label
												htmlFor="dim-y"
												className="text-xs text-muted-foreground"
											>
												Y (depth)
											</Label>
											<Input
												id="dim-y"
												type="number"
												min={1}
												value={dims.y}
												onChange={(e) => setDim("y", e.target.value)}
												className="mt-1"
											/>
										</div>
										<div>
											<Label
												htmlFor="dim-z"
												className="text-xs text-muted-foreground"
											>
												Z (height)
											</Label>
											<Input
												id="dim-z"
												type="number"
												step={0.01}
												min={0}
												value={dims.z}
												onChange={(e) => setDim("z", e.target.value)}
												className="mt-1"
											/>
										</div>
									</div>
								</section>

								{/* Interaction card */}
								<section className="rounded-lg border bg-card p-4">
									<div className="flex items-center gap-2 mb-3">
										<MousePointerClick className="w-4 h-4 text-muted-foreground" />
										<h3 className="text-sm font-medium">Interaction</h3>
									</div>
									<div className="flex flex-col gap-3">
										<div className="flex items-center justify-between rounded-md border px-3 py-2 hover:bg-muted/50 transition-colors">
											<span className="text-sm">Can Stand On</span>
											<Switch
												checked={flags.canstandon}
												onCheckedChange={(v) =>
													setFlags((f) => ({ ...f, canstandon: !!v }))
												}
											/>
										</div>
										<div className="flex items-center justify-between rounded-md border px-3 py-2 hover:bg-muted/50 transition-colors">
											<span className="text-sm">Can Sit On</span>
											<Switch
												checked={flags.cansiton}
												onCheckedChange={(v) =>
													setFlags((f) => ({ ...f, cansiton: !!v }))
												}
											/>
										</div>
										<div className="flex items-center justify-between rounded-md border px-3 py-2 hover:bg-muted/50 transition-colors">
											<span className="text-sm">Can Lay On</span>
											<Switch
												checked={flags.canlayon}
												onCheckedChange={(v) =>
													setFlags((f) => ({ ...f, canlayon: !!v }))
												}
											/>
										</div>
									</div>
								</section>
							</div>

							{/* Directions - visual compass */}
							<section className="rounded-lg border bg-card p-4">
								<div className="flex items-center gap-2 mb-3">
									<Compass className="w-4 h-4 text-muted-foreground" />
									<h3 className="text-sm font-medium">Directions</h3>
									<span className="text-xs text-muted-foreground ml-auto">
										{directions.length} active
									</span>
								</div>
								<div className="flex items-center justify-center">
									<div className="relative w-48 h-48">
										{/* Compass circle */}
										<div className="absolute inset-0 rounded-full border-2 border-muted" />
										<div className="absolute inset-4 rounded-full border border-muted/50" />
										{/* Direction buttons arranged in circle */}
										{ALL_DIRECTIONS.map((dir) => {
											const angle = (dir * 45 - 90) * (Math.PI / 180);
											const r = 80;
											const x = 96 + r * Math.cos(angle) - 18;
											const y = 96 + r * Math.sin(angle) - 18;
											const isActive = directions.includes(dir);
											return (
												<button
													type="button"
													key={dir}
													className={`absolute w-9 h-9 rounded-full border-2 flex flex-col items-center justify-center text-xs font-medium transition-all ${
														isActive
															? "bg-primary text-primary-foreground border-primary shadow-md scale-110"
															: "bg-card text-muted-foreground border-muted hover:border-foreground/30 hover:scale-105"
													}`}
													style={{ left: x, top: y }}
													onClick={() => toggleDirection(dir)}
												>
													<span className="text-[9px] leading-none">
														{DIR_LABELS[dir]}
													</span>
													<span className="text-[8px] leading-none opacity-60">
														{dir}
													</span>
												</button>
											);
										})}
										{/* Center label */}
										<div className="absolute inset-0 flex items-center justify-center">
											<span className="text-xs text-muted-foreground font-medium">
												{directions.length}/8
											</span>
										</div>
									</div>
								</div>
							</section>

							{/* Types */}
							<section className="rounded-lg border bg-card p-4">
								<div className="flex items-center gap-2 mb-3">
									<Eye className="w-4 h-4 text-muted-foreground" />
									<h3 className="text-sm font-medium">Types</h3>
								</div>
								<div className="grid grid-cols-2 gap-3">
									<div>
										<Label
											htmlFor="viz-type"
											className="text-xs text-muted-foreground"
										>
											Visualization Type
										</Label>
										<Input
											id="viz-type"
											value={metadata.visualizationType || ""}
											onChange={(e) =>
												patchMeta("visualizationType", e.target.value)
											}
											className="mt-1 font-mono text-sm"
										/>
									</div>
									<div>
										<Label
											htmlFor="logic-type"
											className="text-xs text-muted-foreground"
										>
											Logic Type
										</Label>
										<Input
											id="logic-type"
											value={metadata.logicType || ""}
											onChange={(e) => patchMeta("logicType", e.target.value)}
											className="mt-1 font-mono text-sm"
										/>
									</div>
								</div>
							</section>

							{/* Layers */}
							{viz64?.layers && layerCount > 0 && (
								<section className="rounded-lg border bg-card p-4">
									<div className="flex items-center gap-2 mb-3">
										<Layers className="w-4 h-4 text-muted-foreground" />
										<h3 className="text-sm font-medium">Layer</h3>
										<Badge variant="secondary" className="text-[10px] ml-auto">
											{layerCount}
										</Badge>
									</div>
									<div className="rounded-md border overflow-hidden">
										{/* Header */}
										<div className="grid grid-cols-4 gap-2 items-center text-[10px] font-medium text-muted-foreground uppercase tracking-wider bg-muted/50 px-3 py-1.5">
											<span>Layer</span>
											<span>Z-Index</span>
											<span>Alpha</span>
											<span>Ink</span>
										</div>
										{Object.entries(viz64.layers).map(
											([layerId, layerData], idx) => {
												const layer = layerData as Record<string, unknown>;
												return (
													<div
														key={layerId}
														className={`grid grid-cols-4 gap-2 items-center text-sm px-3 py-1.5 ${
															idx % 2 === 0 ? "bg-card" : "bg-muted/20"
														}`}
													>
														<span className="font-mono text-xs">
															<Badge
																variant="outline"
																className="text-[10px] px-1.5"
															>
																#{layerId}
															</Badge>
														</span>
														<Input
															type="number"
															className="h-7 text-xs"
															value={(layer.z as number) ?? 0}
															onChange={(e) => {
																patchMeta(
																	`visualizations.${viz64Index}.layers.${layerId}.z`,
																	parseInt(e.target.value, 10) || 0,
																);
															}}
														/>
														<Input
															type="number"
															className="h-7 text-xs"
															min={0}
															max={255}
															value={(layer.alpha as number) ?? 255}
															onChange={(e) => {
																patchMeta(
																	`visualizations.${viz64Index}.layers.${layerId}.alpha`,
																	parseInt(e.target.value, 10) || 0,
																);
															}}
														/>
														<Input
															className="h-7 text-xs font-mono"
															value={(layer.ink as string) ?? ""}
															placeholder="—"
															onChange={(e) => {
																patchMeta(
																	`visualizations.${viz64Index}.layers.${layerId}.ink`,
																	e.target.value || undefined,
																);
															}}
														/>
													</div>
												);
											},
										)}
									</div>
								</section>
							)}

							{/* Colors */}
							{viz64?.colors && colorCount > 0 && (
								<section className="rounded-lg border bg-card p-4">
									<div className="flex items-center gap-2 mb-3">
										<Palette className="w-4 h-4 text-muted-foreground" />
										<h3 className="text-sm font-medium">Colori</h3>
										<Badge variant="secondary" className="text-[10px] ml-auto">
											{colorCount} colors
										</Badge>
									</div>
									<div className="space-y-3">
										{Object.entries(viz64.colors).map(
											([colorId, colorLayers]) => (
												<div key={colorId} className="rounded-md border p-3">
													<div className="flex items-center gap-2 mb-2">
														<span className="text-xs font-medium">
															Color Variant #{colorId}
														</span>
														{/* Color preview dots */}
														<div className="flex gap-1 ml-auto">
															{Object.values(
																colorLayers as Record<
																	string,
																	{ color: number }
																>,
															).map((lc, i) => (
																<div
																	// biome-ignore lint/suspicious/noArrayIndexKey: color preview dots, position is the identity
																	key={i}
																	className="w-4 h-4 rounded-full border border-border shadow-sm"
																	style={{
																		backgroundColor: hexToColor(
																			typeof lc.color === "number"
																				? lc.color.toString(16).padStart(6, "0")
																				: "000000",
																		),
																	}}
																/>
															))}
														</div>
													</div>
													<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
														{Object.entries(
															colorLayers as Record<string, { color: number }>,
														).map(([layerId, layerColor]) => (
															<div
																key={layerId}
																className="flex items-center gap-2"
															>
																<Label className="text-xs text-muted-foreground shrink-0 w-6">
																	L{layerId}
																</Label>
																<div className="relative flex-1">
																	<Input
																		className="h-7 text-xs font-mono pl-8"
																		value={
																			typeof layerColor.color === "number"
																				? layerColor.color
																						.toString(16)
																						.padStart(6, "0")
																						.toUpperCase()
																				: String(layerColor.color)
																		}
																		onChange={(e) => {
																			const hex = e.target.value
																				.replace(/[^0-9a-fA-F]/g, "")
																				.slice(0, 6);
																			const num = parseInt(hex, 16) || 0;
																			patchMeta(
																				`visualizations.${viz64Index}.colors.${colorId}.${layerId}.color`,
																				num,
																			);
																		}}
																	/>
																	{/* Color swatch inside input */}
																	<div
																		className="absolute left-1.5 top-1/2 -translate-y-1/2 w-4 h-4 rounded border border-border"
																		style={{
																			backgroundColor: hexToColor(
																				typeof layerColor.color === "number"
																					? layerColor.color
																							.toString(16)
																							.padStart(6, "0")
																					: "000000",
																			),
																		}}
																	/>
																</div>
															</div>
														))}
													</div>
												</div>
											),
										)}
									</div>
								</section>
							)}
						</TabsContent>

						{/* ── JSON Tab ── */}
						<TabsContent
							value="json"
							className="flex-1 flex flex-col min-h-0 px-6 py-4"
						>
							<div className="relative flex-1 min-h-0">
								<Textarea
									className="h-full min-h-[400px] font-mono text-xs resize-none"
									value={jsonText}
									onChange={(e) => handleJsonTextChange(e.target.value)}
									spellCheck={false}
								/>
								{jsonError && (
									<div className="absolute bottom-2 left-2 right-2 rounded-md bg-destructive/10 border border-destructive/20 px-3 py-1.5 text-xs text-destructive">
										{jsonError}
									</div>
								)}
							</div>
						</TabsContent>
					</Tabs>
				) : null}

				<DialogFooter className="px-6 py-4 border-t bg-muted/30">
					<div className="flex items-center gap-2 w-full">
						{hasChanges && (
							<Badge
								variant="secondary"
								className="text-[10px] gap-1 animate-[pulse_1s_ease-in-out_1]"
							>
								Unsaved changes
							</Badge>
						)}
						<div className="flex-1" />
						<Button
							variant="ghost"
							size="sm"
							onClick={handleReset}
							disabled={saving || loading || !metadata || !hasChanges}
							className="gap-1.5"
						>
							<RotateCcw className="w-3.5 h-3.5" />
							Reset
						</Button>
						<Button
							variant="outline"
							onClick={() => onOpenChange(false)}
							disabled={saving}
						>
							Cancel
						</Button>
						<Button
							onClick={handleSave}
							disabled={saving || loading || !metadata}
							className="gap-1.5"
						>
							{saving ? (
								<Loader2 className="w-4 h-4 animate-spin" />
							) : (
								<Save className="w-4 h-4" />
							)}
							Save
						</Button>
					</div>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}