"use client";

import { AlertCircle, Check, Loader2, Upload } from "lucide-react";
import { useRef, useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { adminFetch } from "@/lib/admin-fetch";

interface UploadResult {
	itemId: number;
	catalogItemId: number | null;
	classname: string;
	warnings: string[];
}

export function UploadFurniClient() {
	const nitroRef = useRef<HTMLInputElement>(null);
	const iconRef = useRef<HTMLInputElement>(null);

	const [classname, setClassname] = useState("");
	const [name, setName] = useState("");
	const [description, setDescription] = useState("");
	const [itemType, setItemType] = useState<"s" | "i">("s");
	const [xdim, setXdim] = useState(1);
	const [ydim, setYdim] = useState(1);
	const [canstandon, setCanstandon] = useState(false);
	const [cansiton, setCansiton] = useState(false);
	const [canlayon, setCanlayon] = useState(false);
	const [interactionType, setInteractionType] = useState("default");
	const [customparams, setCustomparams] = useState("");

	const [nitroFile, setNitroFile] = useState<File | null>(null);
	const [iconFile, setIconFile] = useState<File | null>(null);

	const [uploading, setUploading] = useState(false);
	const [result, setResult] = useState<UploadResult | null>(null);
	const [error, setError] = useState("");

	function resetForm() {
		setClassname("");
		setName("");
		setDescription("");
		setItemType("s");
		setXdim(1);
		setYdim(1);
		setCanstandon(false);
		setCansiton(false);
		setCanlayon(false);
		setInteractionType("default");
		setCustomparams("");
		setNitroFile(null);
		setIconFile(null);
		setResult(null);
		setError("");
		if (nitroRef.current) nitroRef.current.value = "";
		if (iconRef.current) iconRef.current.value = "";
	}

	async function handleSubmit(e: React.FormEvent) {
		e.preventDefault();
		setUploading(true);
		setError("");
		setResult(null);

		try {
			const fd = new FormData();
			fd.set("classname", classname.trim());
			fd.set("name", name.trim());
			fd.set("description", description.trim());
			fd.set("itemType", itemType);
			fd.set("xdim", String(xdim));
			fd.set("ydim", String(ydim));
			fd.set("canstandon", String(canstandon));
			fd.set("cansiton", String(cansiton));
			fd.set("canlayon", String(canlayon));
			fd.set("interactionType", interactionType.trim());
			fd.set("customparams", customparams.trim());
			if (nitroFile) fd.set("nitro", nitroFile);
			if (iconFile) fd.set("icon", iconFile);

			const res = await adminFetch("/api/admin/import/furni/upload", {
				method: "POST",
				body: fd,
			});
			const data = await res.json();

			if (!res.ok) {
				setError(data.error || "Upload failed");
				toast.error(data.error || "Upload failed");
				return;
			}

			setResult(data);
			toast.success(`${data.classname} imported successfully`);
		} catch {
			const msg = "Network error";
			setError(msg);
			toast.error(msg);
		} finally {
			setUploading(false);
		}
	}

	return (
		<div className="space-y-6">
			{!result ? (
				<form onSubmit={handleSubmit} className="space-y-6">
					<div className="rounded-xl border bg-card p-4 sm:p-5 space-y-5">
						<div className="text-sm font-medium">Furniture Details</div>

						<div className="grid gap-4 sm:grid-cols-2">
							<div className="space-y-1.5">
								<Label htmlFor="classname">Classname *</Label>
								<Input
									id="classname"
									placeholder="e.g. rare_dragon"
									value={classname}
									onChange={(e) => setClassname(e.target.value)}
									required
								/>
							</div>
							<div className="space-y-1.5">
								<Label htmlFor="name">Name *</Label>
								<Input
									id="name"
									placeholder="e.g. Dragon Egg"
									value={name}
									onChange={(e) => setName(e.target.value)}
									required
								/>
							</div>
						</div>

						<div className="space-y-1.5">
							<Label htmlFor="description">Description</Label>
							<Textarea
								id="description"
								placeholder="Optional description"
								value={description}
								onChange={(e) => setDescription(e.target.value)}
								rows={2}
							/>
						</div>

						<div className="grid gap-4 sm:grid-cols-4">
							<div className="space-y-1.5">
								<Label htmlFor="itemType">Type *</Label>
								<select
									id="itemType"
									value={itemType}
									onChange={(e) => setItemType(e.target.value as "s" | "i")}
									className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
								>
									<option value="s">Floor (s)</option>
									<option value="i">Wall (i)</option>
								</select>
							</div>
							<div className="space-y-1.5">
								<Label htmlFor="xdim">Width (x)</Label>
								<Input
									id="xdim"
									type="number"
									min={1}
									max={64}
									value={xdim}
									onChange={(e) => setXdim(Number(e.target.value))}
								/>
							</div>
							<div className="space-y-1.5">
								<Label htmlFor="ydim">Length (y)</Label>
								<Input
									id="ydim"
									type="number"
									min={1}
									max={64}
									value={ydim}
									onChange={(e) => setYdim(Number(e.target.value))}
								/>
							</div>
							<div className="space-y-1.5">
								<Label htmlFor="interactionType">Interaction</Label>
								<Input
									id="interactionType"
									placeholder="default"
									value={interactionType}
									onChange={(e) => setInteractionType(e.target.value)}
								/>
							</div>
						</div>

						<div className="flex items-center gap-4 flex-wrap">
							<label className="flex items-center gap-2 cursor-pointer">
								<input
									type="checkbox"
									checked={canstandon}
									onChange={(e) => setCanstandon(e.target.checked)}
									className="h-4 w-4 rounded border-input"
								/>
								<span className="text-sm">Can stand on</span>
							</label>
							<label className="flex items-center gap-2 cursor-pointer">
								<input
									type="checkbox"
									checked={cansiton}
									onChange={(e) => setCansiton(e.target.checked)}
									className="h-4 w-4 rounded border-input"
								/>
								<span className="text-sm">Can sit on</span>
							</label>
							<label className="flex items-center gap-2 cursor-pointer">
								<input
									type="checkbox"
									checked={canlayon}
									onChange={(e) => setCanlayon(e.target.checked)}
									className="h-4 w-4 rounded border-input"
								/>
								<span className="text-sm">Can lay on</span>
							</label>
						</div>

						<div className="space-y-1.5">
							<Label htmlFor="customparams">Custom params</Label>
							<Input
								id="customparams"
								placeholder="Optional custom parameters"
								value={customparams}
								onChange={(e) => setCustomparams(e.target.value)}
							/>
						</div>
					</div>

					<div className="rounded-xl border bg-card p-5 space-y-4">
						<div className="text-sm font-medium">Files</div>

						<div className="space-y-1.5">
							<Label htmlFor="nitro">.nitro file *</Label>
							<Input
								ref={nitroRef}
								id="nitro"
								type="file"
								accept=".nitro"
								onChange={(e) => setNitroFile(e.target.files?.[0] ?? null)}
								required
							/>
							<p className="text-xs text-muted-foreground">
								The .nitro bundle file (max 50MB)
							</p>
						</div>

						<div className="space-y-1.5">
							<Label htmlFor="icon">Icon (PNG)</Label>
							<Input
								ref={iconRef}
								id="icon"
								type="file"
								accept=".png,image/png"
								onChange={(e) => setIconFile(e.target.files?.[0] ?? null)}
							/>
							<p className="text-xs text-muted-foreground">
								Optional 64x64 PNG icon (max 2MB). Leave empty to skip.
							</p>
						</div>
					</div>

					{error && (
						<div className="rounded-lg border px-4 py-3 text-sm bg-destructive/10 border-destructive/20 text-destructive flex items-center gap-2">
							<AlertCircle className="w-4 h-4 shrink-0" />
							{error}
						</div>
					)}

					<div className="flex gap-3">
						<Button type="submit" disabled={uploading}>
							{uploading ? (
								<Loader2 className="w-4 h-4 animate-spin mr-2" />
							) : (
								<Upload className="w-4 h-4 mr-2" />
							)}
							{uploading ? "Importing…" : "Import Furniture"}
						</Button>
					</div>
				</form>
			) : (
				<div className="rounded-xl border bg-card p-6 space-y-4">
					<div className="flex items-center gap-2">
						<Check className="w-5 h-5 text-[var(--admin-success)]" />
						<span className="text-lg font-semibold">Import Successful</span>
					</div>
					<div className="space-y-2 text-sm">
						<div className="flex gap-2">
							<span className="text-muted-foreground w-32">Classname:</span>
							<code className="font-mono">{result.classname}</code>
						</div>
						<div className="flex gap-2">
							<span className="text-muted-foreground w-32">Item ID:</span>
							<code className="font-mono">{result.itemId}</code>
						</div>
						{result.catalogItemId && (
							<div className="flex gap-2">
								<span className="text-muted-foreground w-32">Catalog ID:</span>
								<code className="font-mono">{result.catalogItemId}</code>
							</div>
						)}
						{result.warnings.length > 0 && (
							<div className="space-y-1 pt-2">
								<span className="text-muted-foreground font-medium">
									Warnings:
								</span>
								{result.warnings.map((w) => (
									<div
										key={w}
										className="flex items-center gap-1.5 text-[var(--admin-warning)] dark:text-[var(--admin-warning)]"
									>
										<AlertCircle className="w-3 h-3 shrink-0" />
										<span>{w}</span>
									</div>
								))}
							</div>
						)}
					</div>
					<Button variant="outline" onClick={resetForm}>
						Import Another
					</Button>
				</div>
			)}
		</div>
	);
}