"use client";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { adminFetch } from "@/lib/admin-fetch";
import type { NitroQuality, ScaleReport } from "@/lib/furni/nitro-quality";

function ScalePanel({
	report,
	classname,
	revision,
}: {
	report: ScaleReport;
	classname: string;
	revision: number;
}) {
	const [asset, setAsset] = useState(report.assets[0] ?? ""),
		[failed, setFailed] = useState(false);
	return (
		<section className="min-w-0 space-y-3 rounded-lg border p-3">
			<h3 className="font-semibold">
				Scale {report.size} ·{" "}
				{report.state === "missing"
					? "Not included"
					: report.state === "issues"
						? "Needs review"
						: "Present"}
			</h3>
			<p className="text-xs text-muted-foreground">
				{report.assets.length} sprites · {report.animations.length} animation
				definitions · directions {report.directions.join(", ") || "—"}
			</p>
			{report.state === "missing" && (
				<p className="text-sm">
					This bundle contains no sprites at this scale. Missing scale 32 does
					not by itself mean the furniture is unusable.
				</p>
			)}
			{report.assets.length > 0 && (
				<>
					<label className="block text-sm">
						Sprite
						<select
							className="mt-1 block w-full rounded border bg-background p-2"
							value={asset}
							onChange={(event) => {
								setAsset(event.target.value);
								setFailed(false);
							}}
						>
							{report.assets.map((name) => (
								<option key={name} value={name}>
									{name}
								</option>
							))}
						</select>
					</label>
					<div className="flex h-56 items-center justify-center overflow-auto rounded border bg-muted/30">
						{failed ? (
							<p role="alert">This sprite could not be rendered.</p>
						) : (
							<img
								key={`${asset}-${revision}`}
								src={`/api/admin/studio/nitro-quality?classname=${encodeURIComponent(classname)}&asset=${encodeURIComponent(asset)}&v=${revision}`}
								alt={asset}
								style={{
									imageRendering: "pixelated",
									maxWidth: "none",
									flexShrink: 0,
								}}
								onError={() => setFailed(true)}
							/>
						)}
					</div>
				</>
			)}
			{report.issues.length > 0 && (
				<ul className="max-h-40 overflow-auto space-y-2 text-xs">
					{report.issues.map((issue) => (
						<li key={`${issue.asset ?? ""}-${issue.message}`}>
							<strong className="break-all">{issue.asset}</strong>{" "}
							{issue.message}
						</li>
					))}
				</ul>
			)}
		</section>
	);
}
export function NitroQualityPanel({ classname }: { classname: string }) {
	const [report, setReport] = useState<NitroQuality | null>(null),
		[error, setError] = useState(""),
		[revision, setRevision] = useState(0);
	useEffect(() => {
		const controller = new AbortController();
		setReport(null);
		setError("");
		void (async () => {
			try {
				const response = await adminFetch(
					`/api/admin/studio/nitro-quality?classname=${encodeURIComponent(classname)}&v=${revision}`,
					{ signal: controller.signal },
				);
				const data = await response.json();
				if (!response.ok) throw Error(data.error || "Inspection failed");
				if (!controller.signal.aborted) setReport(data.report);
			} catch (error) {
				if (!controller.signal.aborted)
					setError(
						error instanceof Error ? error.message : "Inspection failed",
					);
			}
		})();
		return () => controller.abort();
	}, [classname, revision]);
	return (
		<div className="space-y-3">
			<div className="flex items-center justify-between gap-3">
				<p className="text-sm">
					Inspect the saved bundle at both scales. Previews show individual
					sprites, not the assembled furniture or animation playback.
				</p>
				<Button
					variant="outline"
					onClick={() => setRevision((value) => value + 1)}
				>
					Recheck
				</Button>
			</div>
			{error ? (
				<p role="alert">{error}</p>
			) : !report ? (
				<p role="status">Checking scales and texture references…</p>
			) : (
				<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
					{report.scales.map((scale) => (
						<ScalePanel
							key={`${scale.size}-${revision}`}
							report={scale}
							classname={classname}
							revision={revision}
						/>
					))}
				</div>
			)}
		</div>
	);
}