import { useQuery } from "@tanstack/react-query"
import { CircleCheck, CircleX, Loader2 } from "lucide-react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { getServerUrl } from "@/lib/server-url"

async function checkHealth(serverUrl: string): Promise<boolean> {
	const res = await fetch(`${serverUrl}/health`)
	if (!res.ok) throw new Error(`HTTP ${res.status}`)
	const data = (await res.json()) as { status: string }
	if (data.status !== "ok") throw new Error("Unexpected response")
	return true
}

export function GeneralSettingsPanel() {
	const serverUrl = getServerUrl()

	const { isLoading, isError, error } = useQuery({
		queryKey: ["health", serverUrl],
		queryFn: () => checkHealth(serverUrl),
	})

	const status = isLoading ? "checking" : isError ? "error" : "ok"
	const errorMsg = error instanceof Error ? error.message : null

	return (
		<div className="mx-auto max-w-xl space-y-6">
			<div className="space-y-1">
				<h2 className="text-lg font-semibold tracking-tight">General</h2>
				<p className="text-sm text-muted-foreground">Backend server information.</p>
			</div>

			<Card className="-mx-4">
				<CardHeader className="pb-4">
					<CardTitle className="text-sm">Server</CardTitle>
					<CardDescription>Connected backend instance.</CardDescription>
				</CardHeader>
				<CardContent>
					<div className="space-y-3 text-sm">
						<div className="flex items-center justify-between gap-4">
							<span className="shrink-0 text-muted-foreground">URL</span>
							<span className="select-text truncate font-mono text-xs">{serverUrl}</span>
						</div>
						<div className="flex items-center justify-between">
							<span className="text-muted-foreground">Status</span>
							{status === "checking" && (
								<span className="flex items-center gap-1.5 text-xs text-muted-foreground">
									<Loader2 className="size-3 animate-spin" />
									Checking…
								</span>
							)}
							{status === "ok" && (
								<span className="flex items-center gap-1.5 text-xs text-muted-foreground">
									<CircleCheck className="size-3.5 text-primary" />
									Connected
								</span>
							)}
							{status === "error" && (
								<span className="flex items-center gap-1.5 text-xs text-destructive">
									<CircleX className="size-3.5" />
									{errorMsg ?? "Unreachable"}
								</span>
							)}
						</div>
					</div>
				</CardContent>
			</Card>
		</div>
	)
}
