sarlink-portal/components/block-device-dialog.tsx

"use client";

import { DialogDescription } from "@radix-ui/react-dialog";
import { OctagonX, ShieldBan } from "lucide-react";
import { useActionState, useEffect, useState, useTransition } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import type { Device } from "@/lib/backend-types";
import { cn } from "@/lib/utils";
import { blockDeviceAction } from "@/queries/devices";
import { TextShimmer } from "./ui/text-shimmer";
import { Textarea } from "./ui/textarea";

export type BlockDeviceFormState = {
	message: string;
	success: boolean;
	fieldErrors?: {
		reason_for_blocking?: string[];
	};
	payload?: FormData;
};

const initialState: BlockDeviceFormState = {
	message: "",
	success: false,
	fieldErrors: {},
};

export default function BlockDeviceDialog({
	device,
	// admin,
	parentalControl = false,
}: {
	device: Device;
	type: "block" | "unblock";
	admin?: boolean;
	parentalControl?: boolean;
}) {
	const [open, setOpen] = useState(false);
	const [state, formAction, isPending] = useActionState(blockDeviceAction, initialState);
	const [isTransitioning, startTransition] = useTransition();

	const handleSimpleBlock = () => {
		startTransition(() => {
			const formData = new FormData();
			formData.append("deviceId", String(device.id));
			formData.append("reason_for_blocking", "");
			formData.append("action", "simple-block");
			formData.append("blocked_by", "PARENT");

			formAction(formData);
		});
	};

	const handleUnblock = () => {
		startTransition(() => {
			const formData = new FormData();
			formData.append("deviceId", String(device.id));
			formData.append("reason_for_blocking", "");
			formData.append("action", "unblock");
			formData.append("blocked_by", "PARENT");

			formAction(formData);
		});
	};

	// Show toast notifications based on state changes
	useEffect(() => {
		if (state.message) {
			if (state.success) {
				toast.success(state.message);
				if (open) setOpen(false);
			} else {
				toast.error(state.message);
			}
		}
	}, [state, open]);

	const isLoading = isPending || isTransitioning;

	// If device is blocked and user is not admin, show unblock button
	if (device.blocked && parentalControl) {
		return (
			<Button onClick={handleUnblock} disabled={isLoading}>
				{isLoading ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
			</Button>
		);
	}

	// If device is not blocked and user is not admin, show simple block button
	if (!device.blocked && parentalControl) {
		return (
			<Button onClick={handleSimpleBlock} disabled={isLoading} variant="destructive">
				<ShieldBan />
				{isLoading ? <TextShimmer>Blocking</TextShimmer> : "Block"}
			</Button>
		);
	}

	// If user is admin, show block with reason dialog
	return (
		<div>
			<Dialog open={open} onOpenChange={setOpen}>
				<DialogTrigger asChild>
					<Button disabled={isLoading} variant="destructive">
						<OctagonX />
						Block
					</Button>
				</DialogTrigger>
				<DialogContent className="sm:max-w-[425px]">
					<DialogHeader>
						<DialogTitle>Block 🚫</DialogTitle>
						<DialogDescription className="text-sm text-muted-foreground">
							Please provide a reason for blocking this device
						</DialogDescription>
					</DialogHeader>
					<form action={formAction} className="space-y-4">
						<input type="hidden" name="deviceId" value={String(device.id)} />
						<input type="hidden" name="action" value="block" />
						<input type="hidden" name="blocked_by" value="ADMIN" />

						<div className="grid gap-4 py-4">
							<div className="flex flex-col items-start gap-1">
								<Label htmlFor="reason_for_blocking" className="text-right">
									Reason for blocking
								</Label>
								<Textarea
									rows={10}
									name="reason_for_blocking"
									id="reason_for_blocking"
									defaultValue={(state?.payload?.get("reason_for_blocking") || "") as string}
									className={cn(
										"col-span-5",
										(state.fieldErrors?.reason_for_blocking) && "ring-2 ring-red-500",
									)}
								/>
								<span className="text-sm text-red-500">
									{state.fieldErrors?.reason_for_blocking?.[0]}
								</span>
							</div>
						</div>
						<DialogFooter>
							<Button variant="destructive" disabled={isLoading} type="submit">
								{isLoading ? "Blocking..." : "Block"}
							</Button>
						</DialogFooter>
					</form>
				</DialogContent>
			</Dialog>
		</div>
	);
}