import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Settings2, Copy } from "lucide-react";
import { useServiceInstances } from "../hooks/useServices";
import { resolveWidget } from "../integrations/registry";
import type { WidgetInstance } from "../types";
import { SectionCard } from "./SectionCard";

interface Props {
	widget: WidgetInstance;
	/** When provided, an edit button appears in the top-right corner (hover on desktop, always on mobile). */
	onEdit?: (widgetId: string) => void;
	/** When provided, a copy/detach button appears next to edit (for referenced widgets). */
	onCopy?: (widgetId: string) => void;
}

export function WidgetInstanceCard({ widget, onEdit, onCopy }: Props) {
	const { data: services = [] } = useServiceInstances();
	const resolved = resolveWidget(widget, services);

	// Edit + copy buttons: always visible on mobile (below md), hover-reveal on desktop.
	const actionButtons = (
		<div className="absolute right-2 top-2 z-10 flex items-center gap-1">
			{onCopy ? (
				<Button
					variant="ghost"
					size="icon-sm"
					className="opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100 mobile-touch-target"
					onClick={() => onCopy(widget.id)}
					aria-label="Create independent copy"
				>
					<Copy className="h-4 w-4" />
				</Button>
			) : null}
			{onEdit ? (
				<Button
					variant="ghost"
					size="icon-sm"
					className="opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100 mobile-touch-target"
					onClick={() => onEdit(widget.id)}
					aria-label="Edit widget"
				>
					<Settings2 className="h-4 w-4" />
				</Button>
			) : null}
		</div>
	);

	if (!resolved) {
		const label = widget.service_id
			? `Unknown widget: ${widget.widget_kind} (service-bound)`
			: `Unknown widget: ${widget.widget_kind} (built-in)`;
		return (
			<div className="group relative">
				{onEdit || onCopy ? actionButtons : null}
				<SectionCard title={widget.title}>
					<Alert>
						<AlertDescription>{label}</AlertDescription>
					</Alert>
				</SectionCard>
			</div>
		);
	}

	const Component = resolved.component;
	return (
		<div className="group relative">
			{onEdit || onCopy ? actionButtons : null}
			<Component
				widget={widget}
				refreshIntervalMs={resolved.refreshIntervalMs}
				description={resolved.description}
			/>
		</div>
	);
}