"use client";

import { Eye, EyeOff } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { toggleUserWatch } from "@/actions/watch";
import { Button } from "@/components/ui/button";

interface UserWatchToggleProps {
	targetUserId: number;
	username: string;
	initialWatching: boolean;
}

export function UserWatchToggle({
	targetUserId,
	username,
	initialWatching,
}: UserWatchToggleProps) {
	const [watching, setWatching] = useState(initialWatching);
	const [busy, setBusy] = useState(false);

	async function handleToggle() {
		setBusy(true);
		try {
			const result = await toggleUserWatch({ targetUserId });
			if (result.ok) {
				const data = result.data as { watching: boolean };
				setWatching(data.watching);
				toast.success(
					data.watching
						? `Now watching ${username}`
						: `Stopped watching ${username}`,
				);
			} else {
				toast.error(result.error);
			}
		} finally {
			setBusy(false);
		}
	}

	return (
		<Button
			variant={watching ? "default" : "outline"}
			size="sm"
			disabled={busy}
			onClick={handleToggle}
			title={watching ? "Stop watching this user" : "Watch this user"}
		>
			{watching ? (
				<>
					<Eye className="mr-1.5 h-3.5 w-3.5" /> Watching
				</>
			) : (
				<>
					<EyeOff className="mr-1.5 h-3.5 w-3.5" /> Watch
				</>
			)}
		</Button>
	);
}