import { useNavigate } from "react-router-dom";
import { Boxes, ChevronRight, type LucideIcon } from "lucide-react";

import { cn } from "@/lib/utils";

/**
 * Pinned service link rendered on named dashboards. A card-shaped shortcut
 * that navigates to a service page (or a specific tab via query param).
 *
 * The `target` is a route path like `/services/jellyfin/svc-1` or
 * `/services/ssh_tasks/svc-2?tab=Files`.
 */
export interface PinnedServiceLinkProps {
	label: string;
	target: string;
	icon?: LucideIcon;
	className?: string;
}

export function PinnedServiceLink({
	label,
	target,
	icon: Icon = Boxes,
	className,
}: PinnedServiceLinkProps) {
	const navigate = useNavigate();
	return (
		<button
			type="button"
			onClick={() => navigate(target)}
			className={cn(
				"mobile-touch-target group flex min-h-16 w-full items-center justify-between rounded-lg border border-border bg-card p-4 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
				className,
			)}
		>
			<div className="flex items-center gap-3">
				<Icon className="size-5 shrink-0 text-muted-foreground" />
				<span className="text-sm font-medium text-foreground">{label}</span>
			</div>
			<ChevronRight className="size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
		</button>
	);
}

/**
 * Static helper: build a target path for a pinned service link.
 * Returns `/services/:type/:id` or with a `?tab=` suffix when provided.
 */
// eslint-disable-next-line react-refresh/only-export-components
export function serviceLinkTarget(
	serviceType: string,
	serviceId: string,
	tab?: string,
): string {
	const base = `/services/${serviceType}/${serviceId}`;
	return tab ? `${base}?tab=${tab}` : base;
}