import { useQuery } from "@tanstack/react-query";
import { CalendarDays, DollarSign } from "lucide-react";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { type Domain, getDomains } from "@/api/domain";
import { cn } from "@/lib/utils";
import RemainPercentBar from "./RemainPercentBar";

const DomainNoteTags = ({ notes }: { notes?: string }) => {
	if (!notes) {
		return null;
	}

	const colors = [
		"bg-blue-500 text-white",
		"bg-green-500 text-white",
		"bg-purple-500 text-white",
		"bg-red-500 text-white",
		"bg-gray-600 text-white",
	];

	const tags = notes
		.split(";")
		.map((tag) => tag.trim())
		.filter((tag) => tag);

	return (
		<div className="flex items-center flex-wrap gap-1 mt-2">
			{tags.map((tag, index) => (
				<span
					key={index}
					className={cn(
						"text-[10px] font-bold px-1.5 py-0.5 rounded-md",
						colors[index % colors.length],
					)}
				>
					{tag}
				</span>
			))}
		</div>
	);
};

const DomainCardInline = ({ domain }: { domain: Domain }) => {
	const { t } = useTranslation();
	const expiresIn = domain.expires_in_days;
	const billingData = domain.BillingData || {};
	const customBackgroundImage =
		(window as any).CustomBackgroundImage !== ""
			? (window as any).CustomBackgroundImage
			: undefined;

	let statusColorClass = "bg-green-500";
	if (expiresIn !== undefined && expiresIn <= 10)
		statusColorClass = "bg-red-500";
	else if (expiresIn !== undefined && expiresIn <= 30)
		statusColorClass = "bg-yellow-500";

	return (
		<a
			href={`https://${domain.Domain}`}
			target="_blank"
			rel="noopener noreferrer"
			className="block"
		>
			<div
				className={cn(
					"rounded-lg border bg-card text-card-foreground shadow-sm p-3 cursor-pointer hover:bg-accent/50 transition-colors w-full",
					{ "bg-card/70 backdrop-blur-sm": customBackgroundImage },
				)}
			>
				<div className="flex items-center justify-between">
					<div className="flex items-center gap-3 flex-1 min-w-0">
						<span className={`relative flex h-2.5 w-2.5`}>
							<span
								className={`animate-ping absolute inline-flex h-full w-full rounded-full ${statusColorClass} opacity-75`}
							></span>
							<span
								className={`relative inline-flex rounded-full h-2.5 w-2.5 ${statusColorClass}`}
							></span>
						</span>
						<p className="font-mono font-semibold truncate">{domain.Domain}</p>
					</div>
					<div className="flex items-center gap-6 text-xs text-muted-foreground ml-4">
						<span className="w-24 truncate">
							{billingData.registrar || "N/A"}
						</span>
						<div className="flex items-center gap-1.5 w-28">
							<CalendarDays className="h-3.5 w-3.5" />
							<span>
								{t("domain.expiryPrefix")}:{" "}
								{billingData.endDate
									? new Date(billingData.endDate).toLocaleDateString()
									: "N/A"}
							</span>
						</div>
						<div className="flex items-center gap-1.5 w-24">
							<DollarSign className="h-3.5 w-3.5" />
							<span>{billingData.renewalPrice || "N/A"}</span>
						</div>
						<span className="font-semibold w-24">
							{expiresIn !== undefined
								? `${expiresIn} ${t("domain.days")}`
								: "N/A"}
						</span>
					</div>
				</div>
				<DomainNoteTags notes={billingData.notes} />
			</div>
		</a>
	);
};

const DomainCard = ({ domain }: { domain: Domain }) => {
	const { t } = useTranslation();
	const expiresIn = domain.expires_in_days;
	const billingData = domain.BillingData || {};
	const customBackgroundImage =
		(window as any).CustomBackgroundImage !== ""
			? (window as any).CustomBackgroundImage
			: undefined;

	return (
		<a
			href={`https://${domain.Domain}`}
			target="_blank"
			rel="noopener noreferrer"
			className="block h-full"
		>
			<div
				className={cn(
					"relative flex flex-col justify-between rounded-lg border bg-card text-card-foreground shadow-sm p-4 space-y-3 transition-all hover:shadow-md cursor-pointer h-full",
					{ "bg-card/70 backdrop-blur-sm": customBackgroundImage },
				)}
			>
				<div>
					<h4 className="font-semibold font-mono tracking-tight">
						{domain.Domain}
					</h4>
				</div>
				<div className="flex items-center justify-between text-xs text-muted-foreground">
					<span className="font-medium">
						{billingData.registrar || t("domain.unknownRegistrar")}
					</span>
					<div className="flex items-center gap-1">
						<CalendarDays className="h-3 w-3" />
						<span>
							{billingData.endDate
								? new Date(billingData.endDate).toLocaleDateString()
								: "N/A"}
						</span>
					</div>
				</div>
				<div className="flex items-center gap-4 text-xs">
					<div className="flex items-center gap-1 text-muted-foreground w-1/3">
						<DollarSign className="h-3 w-3" />
						<span className="truncate">
							{billingData.renewalPrice || "N/A"}
						</span>
					</div>
					<div className="flex-1">
						<RemainPercentBar
							value={
								expiresIn
									? Math.max(0, Math.min(100, (expiresIn / 365) * 100))
									: 100
							}
							className="w-full h-1.5"
						/>
					</div>
					<span className="font-medium text-muted-foreground w-12 text-right">
						{expiresIn !== undefined
							? `${expiresIn}${t("domain.days")}`
							: "N/A"}
					</span>
				</div>
				<div className="pt-1">
					<DomainNoteTags notes={billingData.notes} />
				</div>
			</div>
		</a>
	);
};

export const DomainStatus = () => {
	const {
		data: domains,
		isLoading,
		error,
	} = useQuery({
		queryKey: ["domains"],
		queryFn: getDomains,
		refetchInterval: 60 * 60 * 1000,
	});

	const [inline, setInline] = useState<string>("0");
	useEffect(() => {
		const checkInlineSettings = () => {
			const isMobile = window.innerWidth < 768;
			if (!isMobile) {
				const inlineState = localStorage.getItem("inline");
				if ((window as any).ForceCardInline) setInline("1");
				else if (inlineState !== null) setInline(inlineState);
			}
		};
		checkInlineSettings();

		const handleStorageChange = () => checkInlineSettings();
		window.addEventListener("storage", handleStorageChange);

		const handleViewChange = () => {
			const inlineState = localStorage.getItem("inline");
			setInline(inlineState ?? "0");
		};
		window.addEventListener("nezha-view-change", handleViewChange);

		return () => {
			window.removeEventListener("storage", handleStorageChange);
			window.removeEventListener("nezha-view-change", handleViewChange);
		};
	}, []);

	const filteredDomains = domains?.filter(
		(d) => d.Status === "verified" || d.Status === "expired",
	);

	if (error || isLoading || !filteredDomains || filteredDomains.length === 0) {
		return null;
	}

	if (inline === "1") {
		return (
			<div className="flex flex-col gap-2">
				{filteredDomains.map((domain) => (
					<DomainCardInline key={domain.ID} domain={domain} />
				))}
			</div>
		);
	}

	return (
		<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
			{filteredDomains.map((domain) => (
				<DomainCard key={domain.ID} domain={domain} />
			))}
		</div>
	);
};