"use client";

import {
	Armchair,
	ArrowDown,
	ArrowLeft,
	ArrowUp,
	ArrowUpDown,
	ChevronLeft,
	ChevronRight,
	Frame,
	Layers,
	Pencil,
	RefreshCw,
	Search,
	Trash2,
	Users,
	UserX,
} from "lucide-react";
import Link from "next/link";
import { useMemo, useState } from "react";
import {
	bulkDeleteRoomItems,
	deleteRoomItem,
	roomRconAction,
} from "@/actions/rooms";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useServerAction } from "@/hooks/use-server-action";
import { EditItemDialog } from "./edit-item-dialog";

interface FurniRow {
	id: number;
	baseId: number;
	name: string;
	itemName: string;
	type: string;
	x: number;
	y: number;
	z: number;
	rot: number;
	wallPos: string;
	userId: number;
	ownerUsername: string | null;
	extraData: string;
}

interface Props {
	room: {
		id: number;
		name: string;
		ownerUsername: string;
	};
	items?: FurniRow[];
	canEdit: boolean;
}

const PER_PAGE = 50;
type SortKey = "id" | "name" | "type" | "pos" | "owner";
type SortDir = "asc" | "desc";
type View = "flat" | "grouped";

function iconUrl(itemName: string) {
	if (!itemName) return null;
	const base = itemName.split("*")[0];
	return `/swf/dcr/hof_furni/icons/${base}_icon.png`;
}

function isWallType(t: string) {
	return t === "i";
}

export function FurniClient({ room, items = [], canEdit }: Props) {
	const { run, isPending } = useServerAction();
	const [search, setSearch] = useState("");
	const [page, setPage] = useState(1);
	const [view, setView] = useState<View>("flat");
	const [typeFilter, setTypeFilter] = useState<"all" | "floor" | "wall">("all");
	const [ownerFilter, setOwnerFilter] = useState<string>("all");
	const [sortKey, setSortKey] = useState<SortKey>("id");
	const [sortDir, setSortDir] = useState<SortDir>("desc");
	const [selected, setSelected] = useState<Set<number>>(new Set());
	const [editingItem, setEditingItem] = useState<FurniRow | null>(null);

	// ── Stats ──────────────────────────────────────────────────
	const stats = useMemo(() => {
		const floor = items.filter((i) => !isWallType(i.type)).length;
		const wall = items.filter((i) => isWallType(i.type)).length;
		const uniqueBases = new Set(items.map((i) => i.baseId)).size;
		const owners = new Set(items.map((i) => i.userId).filter((u) => u > 0))
			.size;
		return { total: items.length, floor, wall, uniqueBases, owners };
	}, [items]);

	// ── Owner options for filter ───────────────────────────────
	const ownerOptions = useMemo(() => {
		const map = new Map<string, number>();
		for (const i of items) {
			const key = i.ownerUsername ?? `#${i.userId}`;
			map.set(key, (map.get(key) ?? 0) + 1);
		}
		return Array.from(map.entries()).sort((a, b) => b[1] - a[1]);
	}, [items]);

	// ── Filtering ──────────────────────────────────────────────
	const filtered = useMemo(() => {
		const q = search.trim().toLowerCase();
		return items.filter((i) => {
			if (typeFilter === "floor" && isWallType(i.type)) return false;
			if (typeFilter === "wall" && !isWallType(i.type)) return false;
			if (ownerFilter !== "all") {
				const key = i.ownerUsername ?? `#${i.userId}`;
				if (key !== ownerFilter) return false;
			}
			if (q) {
				return (
					i.name.toLowerCase().includes(q) ||
					i.itemName.toLowerCase().includes(q) ||
					String(i.baseId).includes(q) ||
					String(i.id).includes(q)
				);
			}
			return true;
		});
	}, [items, search, typeFilter, ownerFilter]);

	// ── Sorting ────────────────────────────────────────────────
	const sorted = useMemo(() => {
		const arr = [...filtered];
		arr.sort((a, b) => {
			let cmp = 0;
			switch (sortKey) {
				case "id":
					cmp = a.id - b.id;
					break;
				case "name":
					cmp = a.name.localeCompare(b.name);
					break;
				case "type":
					cmp = a.type.localeCompare(b.type);
					break;
				case "pos":
					cmp = a.x - b.x || a.y - b.y;
					break;
				case "owner":
					cmp = (a.ownerUsername ?? "").localeCompare(b.ownerUsername ?? "");
					break;
			}
			return sortDir === "asc" ? cmp : -cmp;
		});
		return arr;
	}, [filtered, sortKey, sortDir]);

	// ── Grouped view ───────────────────────────────────────────
	const grouped = useMemo(() => {
		const map = new Map<
			number,
			{ base: FurniRow; count: number; ids: number[] }
		>();
		for (const i of filtered) {
			const existing = map.get(i.baseId);
			if (existing) {
				existing.count++;
				existing.ids.push(i.id);
			} else {
				map.set(i.baseId, { base: i, count: 1, ids: [i.id] });
			}
		}
		return Array.from(map.values()).sort((a, b) => b.count - a.count);
	}, [filtered]);

	// ── Pagination (flat view only) ─────────────────────────────
	const lastPage = Math.max(1, Math.ceil(sorted.length / PER_PAGE));
	const currentPage = Math.min(page, lastPage);
	const pageRows = sorted.slice(
		(currentPage - 1) * PER_PAGE,
		currentPage * PER_PAGE,
	);

	// ── Handlers ───────────────────────────────────────────────
	function toggleSort(key: SortKey) {
		if (sortKey === key) {
			setSortDir((d) => (d === "asc" ? "desc" : "asc"));
		} else {
			setSortKey(key);
			setSortDir("asc");
		}
	}

	function SortIcon({ k }: { k: SortKey }) {
		if (sortKey !== k) return <ArrowUpDown className="w-3 h-3 opacity-40" />;
		return sortDir === "asc" ? (
			<ArrowUp className="w-3 h-3" />
		) : (
			<ArrowDown className="w-3 h-3" />
		);
	}

	function togglePageSelection(checked: boolean) {
		const next = new Set(selected);
		for (const r of pageRows) {
			if (checked) next.add(r.id);
			else next.delete(r.id);
		}
		setSelected(next);
	}

	function toggleRowSelection(id: number, checked: boolean) {
		const next = new Set(selected);
		if (checked) next.add(id);
		else next.delete(id);
		setSelected(next);
	}

	function handleRcon(action: "reload" | "kick") {
		if (action === "kick" && !confirm("Kick all users from this room?")) return;
		run(() => roomRconAction({ roomId: room.id, action }), {
			successMessage:
				action === "reload" ? "Room reloaded" : "All users kicked",
		});
	}

	function handleDelete(itemId: number, name: string) {
		if (!confirm(`Delete "${name}" (#${itemId}) from this room?`)) return;
		run(() => deleteRoomItem({ roomId: room.id, itemId }), {
			successMessage: "Item deleted",
		});
	}

	function handleBulkDelete() {
		if (selected.size === 0) return;
		if (
			!confirm(
				`Delete ${selected.size} selected item${selected.size > 1 ? "s" : ""}?`,
			)
		)
			return;
		run(
			() =>
				bulkDeleteRoomItems({ roomId: room.id, itemIds: Array.from(selected) }),
			{
				successMessage: `${selected.size} item(s) deleted`,
				onSuccess: () => setSelected(new Set()),
			},
		);
	}

	function handleDeleteGroup(_baseId: number, ids: number[], name: string) {
		if (!confirm(`Delete all ${ids.length} "${name}" from this room?`)) return;
		run(() => bulkDeleteRoomItems({ roomId: room.id, itemIds: ids }), {
			successMessage: `${ids.length} item(s) deleted`,
		});
	}

	const allPageSelected =
		pageRows.length > 0 && pageRows.every((r) => selected.has(r.id));

	return (
		<div className="space-y-6">
			{/* ── Header ─────────────────────────────────────────── */}
			<div className="flex flex-wrap items-center justify-between gap-4">
				<div className="flex items-center gap-4">
					<Link href={`/admin/rooms/show/${room.id}`}>
						<Button variant="outline" size="sm">
							<ArrowLeft className="w-4 h-4 mr-1" /> Back
						</Button>
					</Link>
					<div>
						<h1 className="text-2xl font-bold flex items-center gap-2">
							<Armchair className="w-6 h-6" />
							{room.name}
						</h1>
						<p className="text-sm text-muted-foreground">
							Room #{room.id} · Owner: {room.ownerUsername}
						</p>
					</div>
				</div>
				{canEdit && (
					<div className="flex gap-2">
						<Button
							variant="outline"
							size="sm"
							onClick={() => handleRcon("reload")}
							disabled={isPending}
						>
							<RefreshCw className="w-4 h-4 mr-1" /> Reload
						</Button>
						<Button
							variant="destructive"
							size="sm"
							onClick={() => handleRcon("kick")}
							disabled={isPending}
						>
							<UserX className="w-4 h-4 mr-1" /> Kick All
						</Button>
					</div>
				)}
			</div>

			{/* ── Stats Cards ────────────────────────────────────── */}
			<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
				<StatCard
					icon={<Armchair className="w-4 h-4" />}
					label="Total"
					value={stats.total}
				/>
				<StatCard
					icon={<Layers className="w-4 h-4" />}
					label="Floor"
					value={stats.floor}
				/>
				<StatCard
					icon={<Frame className="w-4 h-4" />}
					label="Wall"
					value={stats.wall}
				/>
				<StatCard
					icon={<Armchair className="w-4 h-4" />}
					label="Unique furni"
					value={stats.uniqueBases}
				/>
				<StatCard
					icon={<Users className="w-4 h-4" />}
					label="Owners"
					value={stats.owners}
				/>
			</div>

			{/* ── Toolbar ────────────────────────────────────────── */}
			<Card>
				<CardContent className="pt-6 space-y-4">
					<div className="flex flex-wrap items-center gap-3">
						<div className="relative flex-1 min-w-[200px] max-w-sm">
							<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
							<Input
								placeholder="Search by name or ID..."
								value={search}
								onChange={(e) => {
									setSearch(e.target.value);
									setPage(1);
								}}
								className="pl-8"
							/>
						</div>

						<Select
							value={typeFilter}
							onValueChange={(v: "all" | "floor" | "wall") => {
								setTypeFilter(v);
								setPage(1);
							}}
						>
							<SelectTrigger className="w-[140px]">
								<SelectValue />
							</SelectTrigger>
							<SelectContent>
								<SelectItem value="all">All types</SelectItem>
								<SelectItem value="floor">Floor only</SelectItem>
								<SelectItem value="wall">Wall only</SelectItem>
							</SelectContent>
						</Select>

						<Select
							value={ownerFilter}
							onValueChange={(v) => {
								setOwnerFilter(v);
								setPage(1);
							}}
						>
							<SelectTrigger className="w-[180px]">
								<SelectValue />
							</SelectTrigger>
							<SelectContent>
								<SelectItem value="all">All owners</SelectItem>
								{ownerOptions.map(([name, count]) => (
									<SelectItem key={name} value={name}>
										{name} ({count})
									</SelectItem>
								))}
							</SelectContent>
						</Select>

						<Tabs
							value={view}
							onValueChange={(v) => setView(v as View)}
							className="ml-auto"
						>
							<TabsList>
								<TabsTrigger value="flat">Flat</TabsTrigger>
								<TabsTrigger value="grouped">Grouped</TabsTrigger>
							</TabsList>
						</Tabs>
					</div>

					{/* Bulk action bar */}
					{view === "flat" && selected.size > 0 && canEdit && (
						<div className="flex items-center justify-between bg-muted/50 border rounded-md px-3 py-2">
							<span className="text-sm">
								<strong>{selected.size}</strong> selected
							</span>
							<div className="flex gap-2">
								<Button
									variant="ghost"
									size="sm"
									onClick={() => setSelected(new Set())}
								>
									Clear
								</Button>
								<Button
									variant="destructive"
									size="sm"
									onClick={handleBulkDelete}
									disabled={isPending}
								>
									<Trash2 className="w-4 h-4 mr-1" /> Delete selected
								</Button>
							</div>
						</div>
					)}

					{/* ── Flat Table ─────────────────────────────────── */}
					{view === "flat" ? (
						<>
							<div className="border rounded-md overflow-hidden">
								<Table>
									<TableHeader>
										<TableRow>
											{canEdit && (
												<TableHead className="w-10">
													<Checkbox
														checked={allPageSelected}
														onCheckedChange={(c) =>
															togglePageSelection(c === true)
														}
													/>
												</TableHead>
											)}
											<TableHead className="w-16"></TableHead>
											<TableHead>
												<button
													type="button"
													className="flex items-center gap-1 hover:text-foreground"
													onClick={() => toggleSort("name")}
												>
													Name <SortIcon k="name" />
												</button>
											</TableHead>
											<TableHead className="w-20">
												<button
													type="button"
													className="flex items-center gap-1 hover:text-foreground"
													onClick={() => toggleSort("type")}
												>
													Type <SortIcon k="type" />
												</button>
											</TableHead>
											<TableHead className="w-32">
												<button
													type="button"
													className="flex items-center gap-1 hover:text-foreground"
													onClick={() => toggleSort("pos")}
												>
													Position <SortIcon k="pos" />
												</button>
											</TableHead>
											<TableHead className="w-16">Rot</TableHead>
											<TableHead className="w-32">
												<button
													type="button"
													className="flex items-center gap-1 hover:text-foreground"
													onClick={() => toggleSort("owner")}
												>
													Owner <SortIcon k="owner" />
												</button>
											</TableHead>
											<TableHead className="w-24">
												<button
													type="button"
													className="flex items-center gap-1 hover:text-foreground"
													onClick={() => toggleSort("id")}
												>
													ID <SortIcon k="id" />
												</button>
											</TableHead>
											{canEdit && (
												<TableHead className="w-24 text-right">
													Actions
												</TableHead>
											)}
										</TableRow>
									</TableHeader>
									<TableBody>
										{pageRows.length === 0 ? (
											<TableRow>
												<TableCell
													colSpan={canEdit ? 9 : 7}
													className="text-center text-muted-foreground py-12"
												>
													{items.length === 0 ? (
														<div className="space-y-2">
															<Armchair className="w-10 h-10 mx-auto opacity-30" />
															<p>This room has no furniture.</p>
														</div>
													) : (
														<p>No items match your filters.</p>
													)}
												</TableCell>
											</TableRow>
										) : (
											pageRows.map((item) => {
												const icon = iconUrl(item.itemName);
												const wall = isWallType(item.type);
												const isSelected = selected.has(item.id);
												return (
													<TableRow
														key={item.id}
														className={
															isSelected ? "bg-muted/40" : "hover:bg-muted/30"
														}
													>
														{canEdit && (
															<TableCell>
																<Checkbox
																	checked={isSelected}
																	onCheckedChange={(c) =>
																		toggleRowSelection(item.id, c === true)
																	}
																/>
															</TableCell>
														)}
														<TableCell>
															{icon ? (
																// eslint-disable-next-line @next/next/no-img-element
																<img
																	src={icon}
																	alt={item.name}
																	className="w-10 h-10 object-contain"
																	onError={(e) => {
																		(
																			e.target as HTMLImageElement
																		).style.visibility = "hidden";
																	}}
																/>
															) : (
																<div className="w-10 h-10 bg-muted rounded" />
															)}
														</TableCell>
														<TableCell>
															<div className="font-medium">{item.name}</div>
															<div className="text-xs text-muted-foreground font-mono">
																{item.itemName || `base #${item.baseId}`}
															</div>
														</TableCell>
														<TableCell>
															<Badge variant={wall ? "outline" : "secondary"}>
																{wall
																	? "Wall"
																	: item.type === "s"
																		? "Floor"
																		: item.type}
															</Badge>
														</TableCell>
														<TableCell className="font-mono text-xs">
															{wall
																? item.wallPos || "-"
																: `${item.x},${item.y},${item.z.toFixed(1)}`}
														</TableCell>
														<TableCell className="font-mono text-xs">
															{item.rot}
														</TableCell>
														<TableCell className="text-sm">
															{item.ownerUsername ? (
																<Link
																	href={`/admin/users/show/${item.userId}`}
																	className="text-primary hover:underline"
																>
																	{item.ownerUsername}
																</Link>
															) : (
																<span className="text-muted-foreground">
																	#{item.userId}
																</span>
															)}
														</TableCell>
														<TableCell className="font-mono text-xs">
															#{item.id}
														</TableCell>
														{canEdit && (
															<TableCell className="text-right">
																<div className="flex justify-end gap-1">
																	<Button
																		variant="ghost"
																		size="sm"
																		onClick={() => setEditingItem(item)}
																		disabled={isPending}
																		title="Edit"
																	>
																		<Pencil className="w-4 h-4" />
																	</Button>
																	<Button
																		variant="ghost"
																		size="sm"
																		onClick={() =>
																			handleDelete(item.id, item.name)
																		}
																		disabled={isPending}
																		title="Delete"
																	>
																		<Trash2 className="w-4 h-4 text-destructive" />
																	</Button>
																</div>
															</TableCell>
														)}
													</TableRow>
												);
											})
										)}
									</TableBody>
								</Table>
							</div>

							{lastPage > 1 && (
								<div className="flex items-center justify-between">
									<span className="text-sm text-muted-foreground">
										Showing {(currentPage - 1) * PER_PAGE + 1}-
										{Math.min(currentPage * PER_PAGE, sorted.length)} of{" "}
										{sorted.length}
									</span>
									<div className="flex gap-2">
										<Button
											variant="outline"
											size="sm"
											onClick={() => setPage((p) => Math.max(1, p - 1))}
											disabled={currentPage === 1}
										>
											<ChevronLeft className="w-4 h-4" />
										</Button>
										<span className="text-sm flex items-center px-2">
											{currentPage} / {lastPage}
										</span>
										<Button
											variant="outline"
											size="sm"
											onClick={() => setPage((p) => Math.min(lastPage, p + 1))}
											disabled={currentPage === lastPage}
										>
											<ChevronRight className="w-4 h-4" />
										</Button>
									</div>
								</div>
							)}
						</>
					) : (
						/* ── Grouped View ──────────────────────────────── */
						<div className="border rounded-md overflow-hidden">
							<Table>
								<TableHeader>
									<TableRow>
										<TableHead className="w-16"></TableHead>
										<TableHead>Furniture</TableHead>
										<TableHead className="w-24">Type</TableHead>
										<TableHead className="w-24 text-right">Count</TableHead>
										{canEdit && (
											<TableHead className="w-32 text-right">Action</TableHead>
										)}
									</TableRow>
								</TableHeader>
								<TableBody>
									{grouped.length === 0 ? (
										<TableRow>
											<TableCell
												colSpan={canEdit ? 5 : 4}
												className="text-center text-muted-foreground py-12"
											>
												No items.
											</TableCell>
										</TableRow>
									) : (
										grouped.map((g) => {
											const icon = iconUrl(g.base.itemName);
											const wall = isWallType(g.base.type);
											return (
												<TableRow
													key={g.base.baseId}
													className="hover:bg-muted/30"
												>
													<TableCell>
														{icon ? (
															// eslint-disable-next-line @next/next/no-img-element
															<img
																src={icon}
																alt={g.base.name}
																className="w-10 h-10 object-contain"
																onError={(e) => {
																	(
																		e.target as HTMLImageElement
																	).style.visibility = "hidden";
																}}
															/>
														) : (
															<div className="w-10 h-10 bg-muted rounded" />
														)}
													</TableCell>
													<TableCell>
														<div className="font-medium">{g.base.name}</div>
														<div className="text-xs text-muted-foreground font-mono">
															{g.base.itemName || `base #${g.base.baseId}`}
														</div>
													</TableCell>
													<TableCell>
														<Badge variant={wall ? "outline" : "secondary"}>
															{wall
																? "Wall"
																: g.base.type === "s"
																	? "Floor"
																	: g.base.type}
														</Badge>
													</TableCell>
													<TableCell className="text-right">
														<Badge>{g.count}</Badge>
													</TableCell>
													{canEdit && (
														<TableCell className="text-right">
															<Button
																variant="ghost"
																size="sm"
																onClick={() =>
																	handleDeleteGroup(
																		g.base.baseId,
																		g.ids,
																		g.base.name,
																	)
																}
																disabled={isPending}
															>
																<Trash2 className="w-4 h-4 text-destructive mr-1" />
																Delete all
															</Button>
														</TableCell>
													)}
												</TableRow>
											);
										})
									)}
								</TableBody>
							</Table>
						</div>
					)}
				</CardContent>
			</Card>

			<EditItemDialog
				roomId={room.id}
				item={editingItem}
				open={editingItem !== null}
				onOpenChange={(o) => !o && setEditingItem(null)}
			/>
		</div>
	);
}

function StatCard({
	icon,
	label,
	value,
}: {
	icon: React.ReactNode;
	label: string;
	value: number;
}) {
	return (
		<Card>
			<CardContent className="pt-6">
				<div className="flex items-center justify-between">
					<div>
						<div className="text-xs text-muted-foreground">{label}</div>
						<div className="text-2xl font-bold">{value.toLocaleString()}</div>
					</div>
					<div className="text-muted-foreground">{icon}</div>
				</div>
			</CardContent>
		</Card>
	);
}