"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import {
	applyPreset,
	bulkImportPermissions,
	clearAllPermissions,
	deletePermission,
	exportPermissions,
	upsertPermission,
} from "@/actions/admin-housekeeping";

const PAGE_SIZE = 25;

interface HKPerm {
	id: bigint;
	permission: string;
	minRank: number;
	description: string | null;
	groupName: string | null;
	dependsOn: string | null;
}

interface SharedProps {
	permissions: HKPerm[];
	groups: string[];
	groupCounts: Record<string, number>;
	permSet: Set<string>;
}

export function ManageSection(props: SharedProps) {
	const t = useTranslations("pages.admin.housekeeping");
	const router = useRouter();
	const sp = useSearchParams();
	const [search, setSearch] = useState(sp.get("search") ?? "");
	const [groupFilter, setGroupFilter] = useState(sp.get("group") ?? "");
	const [page, setPage] = useState(1);
	const [pendingDel, setPendingDel] = useState<string | null>(null);

	const filtered = useMemo(() => {
		return props.permissions.filter((p) => {
			if (search && !p.permission.toLowerCase().includes(search.toLowerCase()))
				return false;
			if (groupFilter && (p.groupName ?? "") !== groupFilter) return false;
			return true;
		});
	}, [props.permissions, search, groupFilter]);

	const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
	const safePage = Math.min(page, totalPages);
	const paginated = filtered.slice(
		(safePage - 1) * PAGE_SIZE,
		safePage * PAGE_SIZE,
	);

	const syncUrl = useCallback(
		(s: string, g: string) => {
			const params = new URLSearchParams();
			if (s) params.set("search", s);
			if (g) params.set("group", g);
			const qs = params.toString();
			router.replace(
				"/admin/housekeeping?tab=manage" + (qs ? "&" + qs : ""),
				{ scroll: false },
			);
		},
		[router],
	);

	const handleUpsert = useCallback(
		async (formData: FormData) => {
			try {
				await upsertPermission(formData);
				toast.success(t("saved"));
				router.refresh();
			} catch {
				toast.error(t("errorOccurred"));
			}
		},
		[router, t],
	);

	const handleDelete = useCallback(
		async (id: string) => {
			if (!confirm(t("confirmDelete"))) return;
			setPendingDel(id);
			try {
				const fd = new FormData();
				fd.set("id", id);
				await deletePermission(fd);
				toast.success(t("deleted"));
				router.refresh();
			} catch {
				toast.error(t("errorOccurred"));
			}
			setPendingDel(null);
		},
		[router, t],
	);

	return (
		<div>
			<div className="admin-filter-bar">
				<div className="flex gap-2 flex-1 flex-wrap">
					<input
						value={search}
						onChange={(e) => {
							const v = e.target.value;
							setSearch(v);
							setPage(1);
							syncUrl(v, groupFilter);
						}}
						placeholder={t("searchPermission")}
						className="flex-1 min-w-[200px]"
					/>
					<select
						value={groupFilter}
						onChange={(e) => {
							const v = e.target.value;
							setGroupFilter(v);
							setPage(1);
							syncUrl(search, v);
						}}
						className="w-[180px]"
					>
						<option value="">{t("allGroups")}</option>
						{props.groups.map((g) => (
							<option key={g} value={g}>
								{g} ({props.groupCounts[g] ?? 0})
							</option>
						))}
					</select>
				</div>
			</div>

			<section>
				<h2 className="admin-section-title">
					{t("addPermission")}
				</h2>
				<form
					onSubmit={(e) => {
						e.preventDefault();
						handleUpsert(new FormData(e.currentTarget));
					}}
					className="admin-card"
				>
					<div className="flex gap-2 flex-wrap">
						<input
							name="permission"
							placeholder={t("permissionKey")}
							required
							className="min-w-[200px] flex-1"
						/>
						<input
							name="minRank"
							type="number"
							min={0}
							placeholder={t("minRank")}
							required
							className="w-[110px]"
						/>
						<input
							name="description"
							placeholder={t("description")}
							className="flex-1 min-w-[160px]"
						/>
						<select name="groupName" className="w-[150px]">
							<option value="">{t("noGroup")}</option>
							{props.groups.map((g) => (
								<option key={g} value={g}>
									{g}
								</option>
							))}
						</select>
						<input
							name="dependsOn"
							placeholder={t("dependsOn")}
							className="min-w-[160px] flex-1"
						/>
						<button type="submit" className="btn btn-primary">
							{t("save")}
						</button>
					</div>
				</form>
			</section>

			<section>
				<h2 className="admin-section-title">
					{t("permissions")}{" "}
					<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-accent)]/18 text-[var(--admin-text)]">
						{filtered.length}
					</span>
				</h2>
				{filtered.length === 0 ? (
					<div className="admin-empty">{t("noPermissions")}</div>
				) : (
					<div className="overflow-x-auto">
						<table>
							<thead>
								<tr>
									<th className="w-[40px]">#</th>
									<th>{t("colPermission")}</th>
									<th>{t("colDescription")}</th>
									<th className="w-[120px]">{t("colGroup")}</th>
									<th className="w-[100px]">{t("colMinRank")}</th>
									<th className="w-[180px]">{t("colDepends")}</th>
									<th className="w-[80px]" />
								</tr>
							</thead>
							<tbody>
								{paginated.map((p, i) => (
									<tr key={String(p.id)}>
										<td className="muted w-[40px]">
											{(safePage - 1) * PAGE_SIZE + i + 1}
										</td>
										<td>
											<strong>{p.permission}</strong>
										</td>
										<td className="muted">{p.description || "\u2014"}</td>
										<td>
											{p.groupName ? (
												<span className="inline-block px-2 py-0.5 rounded-full bg-[var(--admin-accent)]/12 text-xs font-medium">
													{p.groupName}
												</span>
											) : (
												<span className="text-xs opacity-50">\u2014</span>
											)}
										</td>
										<td>
											<form
												onSubmit={(e) => {
													e.preventDefault();
													handleUpsert(new FormData(e.currentTarget));
												}}
												style={{ display: "flex", gap: "0.5rem" }}
											>
												<input
													type="hidden"
													name="permission"
													value={p.permission}
												/>
												<input
													type="hidden"
													name="description"
													value={p.description ?? ""}
												/>
												<input
													type="hidden"
													name="groupName"
													value={p.groupName ?? ""}
												/>
												<input
													type="hidden"
													name="dependsOn"
													value={p.dependsOn ?? ""}
												/>
												<input
													name="minRank"
													type="number"
													min={0}
													defaultValue={p.minRank}
													style={{ width: 80 }}
												/>
												<button
													type="submit"
													className="btn btn-outline btn-sm"
												>
													{t("save")}
												</button>
											</form>
										</td>
										<td className="text-xs">
											{p.dependsOn ? (
												<span
													className={
														props.permSet.has(p.dependsOn)
															? "opacity-70"
															: "opacity-100 font-semibold"
													}
													style={
														!props.permSet.has(p.dependsOn)
															? { color: "var(--color-danger)" }
															: {}
													}
												>
													{p.dependsOn}
													{!props.permSet.has(p.dependsOn) ? " " + t("missing") : ""}
												</span>
											) : (
												<span className="opacity-50">\u2014</span>
											)}
										</td>
										<td>
											<button
												type="button"
												className="btn btn-danger btn-sm"
												onClick={() => handleDelete(String(p.id))}
												disabled={pendingDel === String(p.id)}
											>
												{pendingDel === String(p.id) ? "..." : "\u2715"}
											</button>
										</td>
									</tr>
								))}
							</tbody>
						</table>
					</div>
				)}
				{totalPages > 1 && (
					<div className="flex items-center justify-center gap-2 mt-4">
						<button
							type="button"
							className="btn btn-outline btn-sm"
							disabled={safePage <= 1}
							onClick={() => setPage(safePage - 1)}
						>
							{t("prev")}
						</button>
						<span className="text-xs opacity-60">
							{safePage} / {totalPages}
						</span>
						<button
							type="button"
							className="btn btn-outline btn-sm"
							disabled={safePage >= totalPages}
							onClick={() => setPage(safePage + 1)}
						>
							{t("next")}
						</button>
					</div>
				)}
			</section>
		</div>
	);
}

export function PresetsSection() {
	const t = useTranslations("pages.admin.housekeeping");
	const router = useRouter();
	const [busy, setBusy] = useState<string | null>(null);

	const handleApplyPreset = useCallback(
		async (preset: string) => {
			setBusy(preset);
			try {
				const fd = new FormData();
				fd.set("preset", preset);
				await applyPreset(fd);
				toast.success(t("presetApplied"));
				router.refresh();
			} catch {
				toast.error(t("errorOccurred"));
			}
			setBusy(null);
		},
		[router, t],
	);

	const handleClearAll = useCallback(async () => {
		if (!confirm(t("confirmClearAll"))) return;
		setBusy("__clear__");
		try {
			await clearAllPermissions();
			toast.success(t("cleared"));
			router.refresh();
		} catch {
			toast.error(t("errorOccurred"));
		}
		setBusy(null);
	}, [router, t]);

	return (
		<section>
			<h2 className="admin-section-title">{t("presets")}</h2>
			<p className="text-xs text-[var(--admin-text-muted)] -mt-2 mb-3">
				{t("presetsHint")}
			</p>
			<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
				{(["moderator", "admin", "superadmin"] as const).map((preset) => {
					const labels: Record<string, string> = {
						moderator: t("presetModerator"),
						admin: t("presetAdmin"),
						superadmin: t("presetSuperAdmin"),
					};
					const descs: Record<string, string> = {
						moderator: t("presetModeratorDesc"),
						admin: t("presetAdminDesc"),
						superadmin: t("presetSuperAdminDesc"),
					};
					const loading = busy === preset;
					return (
						<div key={preset} className="admin-card">
							<h3 className="font-bold text-lg mb-1">{labels[preset]}</h3>
							<p className="text-xs opacity-60 mb-3">{descs[preset]}</p>
							<button
								type="button"
								onClick={() => handleApplyPreset(preset)}
								disabled={loading || busy === "__clear__"}
								className="btn btn-primary w-full"
							>
								{loading ? t("loading") : t("applyPreset")}
							</button>
						</div>
					);
				})}
			</div>
			<div className="mt-4">
				<button
					type="button"
					onClick={handleClearAll}
					disabled={busy !== null}
					className="btn btn-danger"
				>
					{busy === "__clear__" ? t("loading") : t("clearAll")}
				</button>
			</div>
		</section>
	);
}

export function TestSection({ permissions }: { permissions: HKPerm[] }) {
	const t = useTranslations("pages.admin.housekeeping");
	const [testRank, setTestRank] = useState("");
	const [testResult, setTestResult] = useState<{
		rank: number;
		permissions: string[];
	} | null>(null);

	const handleTest = useCallback(() => {
		const rank = Number(testRank);
		if (!Number.isFinite(rank) || rank < 0)
			return toast.error(t("invalidRank"));
		const matching = permissions.filter((p) => p.minRank <= rank);
		setTestResult({ rank, permissions: matching.map((p) => p.permission) });
		toast.success(t("testDone", { count: matching.length }));
	}, [testRank, permissions, t]);

	return (
		<section>
			<h2 className="admin-section-title">{t("testTitle")}</h2>
			<p className="text-xs text-[var(--admin-text-muted)] -mt-2 mb-3">
				{t("testHint")}
			</p>
			<div className="admin-card flex gap-2 flex-wrap">
				<input
					value={testRank}
					onChange={(e) => setTestRank(e.target.value)}
					type="number"
					min={0}
					placeholder={t("rank")}
					className="w-[150px]"
				/>
				<button
					type="button"
					onClick={handleTest}
					className="btn btn-primary"
				>
					{t("test")}
				</button>
			</div>
			{testResult && (
				<div className="admin-card mt-3">
					<div className="font-semibold mb-2">
						{t("rank")} {testResult.rank}: {testResult.permissions.length}{" "}
						{t("permissions")}
					</div>
					<div className="max-h-48 overflow-y-auto text-xs space-y-0.5">
						{testResult.permissions.map((p) => (
							<div key={p} className="font-mono">
								{p}
							</div>
						))}
					</div>
				</div>
			)}
		</section>
	);
}

export function ImportSection() {
	const t = useTranslations("pages.admin.housekeeping");
	const router = useRouter();
	const textareaRef = useRef<HTMLTextAreaElement>(null);
	const [importing, setImporting] = useState(false);

	const handleBulkImport = useCallback(
		async (e: React.FormEvent<HTMLFormElement>) => {
			e.preventDefault();
			const fd = new FormData(e.currentTarget);
			const raw = String(fd.get("json") ?? "").trim();
			if (!raw) return toast.error(t("emptyInput"));

			try {
				JSON.parse(raw);
			} catch {
				return toast.error(t("invalidJson"));
			}

			setImporting(true);
			try {
				const result = await bulkImportPermissions(fd);
				if (result.errors.length > 0) {
					toast.error(
						t("importedWithErrors", {
							count: result.count,
							errors: result.errors.length,
						}),
					);
				} else {
					toast.success(t("imported", { count: result.count }));
				}
				if (textareaRef.current) textareaRef.current.value = "";
				router.refresh();
			} catch {
				toast.error(t("errorOccurred"));
			}
			setImporting(false);
		},
		[router, t],
	);

	return (
		<section>
			<h2 className="admin-section-title">{t("importTitle")}</h2>
			<p className="text-xs text-[var(--admin-text-muted)] -mt-2 mb-3">
				{t("importHint")}
			</p>
			<form onSubmit={handleBulkImport} className="admin-card">
				<div className="flex flex-col gap-2">
					<textarea
						ref={textareaRef}
						name="json"
						placeholder={t("importPlaceholder")}
						required
						rows={6}
						className="w-full font-mono text-sm"
					/>
					<button
						type="submit"
						disabled={importing}
						className="btn btn-primary self-start"
					>
						{importing ? t("loading") : t("import")}
					</button>
				</div>
			</form>
		</section>
	);
}

export function ExportSection() {
	const t = useTranslations("pages.admin.housekeeping");
	const [data, setData] = useState<string | null>(null);
	const [copying, setCopying] = useState(false);
	const [exporting, setExporting] = useState(false);

	const handleExport = useCallback(async () => {
		setExporting(true);
		try {
			const json = await exportPermissions();
			setData(json);
		} finally {
			setExporting(false);
		}
	}, []);

	const handleCopy = useCallback(async () => {
		if (!data) return;
		setCopying(true);
		try {
			await navigator.clipboard.writeText(data);
		} catch {
			/* fallback */
		}
		setTimeout(() => setCopying(false), 1500);
	}, [data]);

	return (
		<section>
			<h2 className="admin-section-title">{t("exportTitle")}</h2>
			<p className="text-xs text-[var(--admin-text-muted)] -mt-2 mb-3">
				{t("exportHint")}
			</p>
			<div>
				<button
					type="button"
					onClick={handleExport}
					disabled={exporting}
					className="btn btn-outline mb-3"
				>
					{exporting ? t("loading") : t("export")}
				</button>
				{data && (
					<div className="relative">
						<pre className="admin-card font-mono text-xs overflow-auto max-h-[300px] p-3">
							{data}
						</pre>
						<button
							type="button"
							onClick={handleCopy}
							className="btn btn-outline btn-sm absolute top-2 right-2"
						>
							{copying ? t("copied") : t("copy")}
						</button>
					</div>
				)}
			</div>
		</section>
	);
}