"use client";

import {
	AlertCircle,
	CheckCircle2,
	ClipboardList,
	ExternalLink,
	Loader2,
	SearchX,
} from "lucide-react";
import { useCallback, useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { adminFetch } from "@/lib/admin-fetch";

interface AuditIssue {
	type: string;
	severity: "error" | "warning" | "info";
	classname?: string;
	itemId?: number;
	catalogId?: number;
	message: string;
	sourceName?: string;
}

interface MissingFromSource {
	sourceName: string;
	sourceId: string;
	classname: string;
	itemName: string;
}

interface AuditResult {
	issues: AuditIssue[];
	missingFromSources: MissingFromSource[];
	summary: {
		totalItemsBase: number;
		totalCatalogItems: number;
		missingCatalog: number;
		orphanedCatalog: number;
		missingNitro: number;
		missingIcon: number;
		duplicates: number;
		missingFromSourcesTotal: number;
	};
}

const ICON_COLORS: Record<string, string> = {
	error: "text-[var(--admin-error)]",
	warning: "text-[var(--admin-warning)]",
	info: "text-[var(--admin-text-muted)]",
};

const TYPE_LABELS: Record<string, string> = {
	missing_catalog: "No catalog entry",
	orphaned_catalog: "Orphaned catalog reference",
	missing_nitro: "Missing .nitro file",
	missing_icon: "Missing icon file",
	duplicate_classname: "Duplicate classname",
	source_fetch_failed: "Source fetch failed",
	sources_list_failed: "Sources list failed",
};

export function AuditClient() {
	const [loading, setLoading] = useState(false);
	const [result, setResult] = useState<AuditResult | null>(null);
	const [progress, setProgress] = useState("");
	const [activeTab, setActiveTab] = useState<"issues" | "sources">("issues");

	const runAudit = useCallback(async () => {
		setLoading(true);
		setResult(null);
		setProgress("Starting audit…");

		try {
			const res = await adminFetch("/api/admin/import/audit", {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({}),
			});

			if (!res.ok) {
				const data = await res.json().catch(() => ({}));
				toast.error(data.error || "Audit failed");
				setProgress("");
				setLoading(false);
				return;
			}

			const data = await res.json();
			setResult(data);
			toast.success("Audit complete");
		} catch {
			toast.error("Audit request failed");
		} finally {
			setLoading(false);
			setProgress("");
		}
	}, []);

	const hasIssues = result && result.issues.length > 0;
	const errors = result?.issues.filter((i) => i.severity === "error") ?? [];
	const warnings = result?.issues.filter((i) => i.severity === "warning") ?? [];

	return (
		<div className="space-y-6">
			{!result && (
				<Button onClick={runAudit} disabled={loading} size="lg">
					{loading ? (
						<Loader2 className="w-4 h-4 animate-spin mr-2" />
					) : (
						<ClipboardList className="w-4 h-4 mr-2" />
					)}
					{loading ? progress || "Running…" : "Run Full Catalog Audit"}
				</Button>
			)}

			{result && (
				<>
					{/* Summary cards */}
					<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
						<div className="rounded-xl border bg-card p-4 space-y-1">
							<div className="text-2xl font-bold">
								{result.summary.totalItemsBase}
							</div>
							<div className="text-xs text-muted-foreground">
								items_base entries
							</div>
						</div>
						<div className="rounded-xl border bg-card p-4 space-y-1">
							<div className="text-2xl font-bold">
								{result.summary.totalCatalogItems}
							</div>
							<div className="text-xs text-muted-foreground">
								catalog_items entries
							</div>
						</div>
						<div
							className={`rounded-xl border p-4 space-y-1 ${errors.length > 0 ? "border-[var(--admin-error-border)] bg-[var(--admin-error-subtle)]" : "bg-card"}`}
						>
							<div
								className={`text-2xl font-bold ${errors.length > 0 ? "text-[var(--admin-error)]" : ""}`}
							>
								{errors.length}
							</div>
							<div className="text-xs text-muted-foreground">Errors</div>
						</div>
						<div
							className={`rounded-xl border p-4 space-y-1 ${warnings.length > 0 ? "border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)]" : "bg-card"}`}
						>
							<div
								className={`text-2xl font-bold ${warnings.length > 0 ? "text-[var(--admin-warning)]" : ""}`}
							>
								{warnings.length}
							</div>
							<div className="text-xs text-muted-foreground">Warnings</div>
						</div>
					</div>

					{/* Quick stats */}
					<div className="grid gap-2 sm:grid-cols-3 text-sm">
						<div className="flex items-center gap-2">
							{result.summary.missingCatalog > 0 ? (
								<AlertCircle className="w-4 h-4 text-[var(--admin-warning)]" />
							) : (
								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
							)}
							<span>
								{result.summary.missingCatalog} items without catalog entry
							</span>
						</div>
						<div className="flex items-center gap-2">
							{result.summary.orphanedCatalog > 0 ? (
								<AlertCircle className="w-4 h-4 text-[var(--admin-error)]" />
							) : (
								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
							)}
							<span>
								{result.summary.orphanedCatalog} orphaned catalog references
							</span>
						</div>
						<div className="flex items-center gap-2">
							{result.summary.missingNitro > 0 ? (
								<AlertCircle className="w-4 h-4 text-[var(--admin-error)]" />
							) : (
								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
							)}
							<span>{result.summary.missingNitro} items without .nitro</span>
						</div>
						<div className="flex items-center gap-2">
							{result.summary.missingIcon > 0 ? (
								<AlertCircle className="w-4 h-4 text-[var(--admin-warning)]" />
							) : (
								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
							)}
							<span>{result.summary.missingIcon} items without icon</span>
						</div>
						<div className="flex items-center gap-2">
							{result.summary.duplicates > 0 ? (
								<AlertCircle className="w-4 h-4 text-[var(--admin-error)]" />
							) : (
								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
							)}
							<span>{result.summary.duplicates} duplicate classnames</span>
						</div>
						<div className="flex items-center gap-2">
							{result.summary.missingFromSourcesTotal > 0 ? (
								<AlertCircle className="w-4 h-4 text-[var(--admin-warning)]" />
							) : (
								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
							)}
							<span>
								{result.summary.missingFromSourcesTotal} items missing from
								clone sources
							</span>
						</div>
					</div>

					{/* Tabs */}
					{hasIssues || result.missingFromSources.length > 0 ? (
						<div className="border-b border-border">
							<div className="flex gap-4">
								<button
									type="button"
									onClick={() => setActiveTab("issues")}
									className={`pb-2 text-sm font-medium border-b-2 transition-colors ${
										activeTab === "issues"
											? "border-primary text-foreground"
											: "border-transparent text-muted-foreground hover:text-foreground"
									}`}
								>
									Issues ({result.issues.length})
								</button>
								<button
									type="button"
									onClick={() => setActiveTab("sources")}
									className={`pb-2 text-sm font-medium border-b-2 transition-colors ${
										activeTab === "sources"
											? "border-primary text-foreground"
											: "border-transparent text-muted-foreground hover:text-foreground"
									}`}
								>
									Missing from sources ({result.missingFromSources.length})
								</button>
							</div>
						</div>
					) : null}

					{/* Issues list */}
					{activeTab === "issues" && hasIssues && (
						<div className="space-y-2">
							{result.issues.map((issue) => (
								<div
									key={issue.message}
									className={`rounded-xl border p-4 text-sm ${
										issue.severity === "error"
											? "border-[var(--admin-error-border)] bg-[var(--admin-error-subtle)]"
											: issue.severity === "warning"
												? "border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)]"
												: "bg-card"
									}`}
								>
									<div className="flex items-start gap-2">
										<AlertCircle
											className={`w-4 h-4 mt-0.5 shrink-0 ${ICON_COLORS[issue.severity]}`}
										/>
										<div className="space-y-0.5 min-w-0">
											<div className="flex items-center gap-2 flex-wrap">
												<span
													className={`font-medium ${ICON_COLORS[issue.severity]}`}
												>
													{TYPE_LABELS[issue.type] || issue.type}
												</span>
												{issue.classname && (
													<code className="text-xs bg-background/50 px-1.5 py-0.5 rounded font-mono">
														{issue.classname}
													</code>
												)}
												{issue.sourceName && (
													<span className="text-xs text-muted-foreground">
														source: {issue.sourceName}
													</span>
												)}
											</div>
											<p className="text-muted-foreground">{issue.message}</p>
										</div>
									</div>
								</div>
							))}
						</div>
					)}

					{/* Missing from sources list */}
					{activeTab === "sources" && result.missingFromSources.length > 0 && (
						<div className="space-y-2">
							{result.missingFromSources.map((item) => (
								<div
									key={`${item.sourceId}-${item.classname}`}
									className="rounded-xl border bg-card p-3 text-sm flex items-center gap-2"
								>
									<ExternalLink className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
									<code className="font-mono text-xs">{item.classname}</code>
									<span className="text-xs text-muted-foreground">
										— {item.itemName}
									</span>
									<span className="text-xs text-muted-foreground ml-auto">
										in {item.sourceName}
									</span>
								</div>
							))}
						</div>
					)}

					{activeTab === "issues" &&
						!hasIssues &&
						result.missingFromSources.length === 0 && (
							<div className="rounded-xl border bg-card p-12 text-center text-muted-foreground">
								<CheckCircle2 className="w-12 h-12 mx-auto mb-3 text-[var(--admin-success)]" />
								<p className="text-lg font-medium">No issues found</p>
								<p className="text-sm">Your catalog is clean!</p>
							</div>
						)}

					<Button
						variant="outline"
						onClick={() => {
							setResult(null);
							setProgress("");
						}}
					>
						Run Again
					</Button>
				</>
			)}

			{!loading && !result && (
				<div className="rounded-xl border bg-card p-12 text-center text-muted-foreground">
					<SearchX className="w-12 h-12 mx-auto mb-3 opacity-40" />
					<p>
						Run a full audit to check for missing catalog entries, broken
						references, missing files, and items available from clone sources.
					</p>
				</div>
			)}
		</div>
	);
}