GearBox/src/client/components/ShareModal.tsx

import { useEffect, useState } from "react";
import {
	useCreateShareLink,
	useRevokeShareLink,
	useShareLinks,
} from "../hooks/useShares";
import { LucideIcon } from "../lib/iconData";

interface ShareModalProps {
	isOpen: boolean;
	onClose: () => void;
	setupId: number;
	currentVisibility: "private" | "link" | "public";
	onVisibilityChange: (visibility: "private" | "link" | "public") => void;
}

const VISIBILITY_OPTIONS = [
	{
		value: "private" as const,
		icon: "lock",
		label: "Private",
		description: "Only you can access",
		color: "gray",
		border: "border-gray-200",
		selectedBorder: "border-gray-300 bg-gray-50",
		iconColor: "text-gray-500",
	},
	{
		value: "link" as const,
		icon: "link",
		label: "Link sharing",
		description: "Anyone with the link",
		color: "blue",
		border: "border-gray-200",
		selectedBorder: "border-blue-200 bg-blue-50",
		iconColor: "text-blue-600",
	},
	{
		value: "public" as const,
		icon: "globe",
		label: "Public",
		description: "Visible on your profile",
		color: "green",
		border: "border-gray-200",
		selectedBorder: "border-green-200 bg-green-50",
		iconColor: "text-green-700",
	},
] as const;

const EXPIRATION_OPTIONS = [
	{ value: 7, label: "7 days" },
	{ value: 14, label: "14 days" },
	{ value: 30, label: "30 days" },
	{ value: null, label: "No expiration" },
] as const;

export function ShareModal({
	isOpen,
	onClose,
	setupId,
	currentVisibility,
	onVisibilityChange,
}: ShareModalProps) {
	const { data: shareLinks } = useShareLinks(isOpen ? setupId : null);
	const createShareLink = useCreateShareLink(setupId);
	const revokeShareLink = useRevokeShareLink(setupId);

	const [expiresInDays, setExpiresInDays] = useState<number | null>(14);
	const [copiedId, setCopiedId] = useState<number | null>(null);
	const [justCreatedToken, setJustCreatedToken] = useState<string | null>(null);

	// Handle Escape key
	useEffect(() => {
		if (!isOpen) return;
		function handleKeyDown(e: KeyboardEvent) {
			if (e.key === "Escape") onClose();
		}
		document.addEventListener("keydown", handleKeyDown);
		return () => document.removeEventListener("keydown", handleKeyDown);
	}, [isOpen, onClose]);

	if (!isOpen) return null;

	const activeLinks = shareLinks?.filter((link) => !link.revokedAt) ?? [];
	const showLinksSection = true;
	const switchingToPrivateWithLinks =
		currentVisibility !== "private" && activeLinks.length > 0;

	function handleCreateLink() {
		createShareLink.mutate(
			{ expiresInDays },
			{
				onSuccess: (share) => {
					const url = `${window.location.origin}/s/${share.token}`;
					navigator.clipboard.writeText(url).catch(() => {});
					setJustCreatedToken(share.token);
					setTimeout(() => setJustCreatedToken(null), 2000);
				},
			},
		);
	}

	function handleCopy(token: string, shareId: number) {
		const url = `${window.location.origin}/s/${token}`;
		navigator.clipboard.writeText(url).catch(() => {});
		setCopiedId(shareId);
		setTimeout(() => setCopiedId(null), 2000);
	}

	function handleVisibilityChange(
		newVisibility: "private" | "link" | "public",
	) {
		if (newVisibility !== currentVisibility) {
			onVisibilityChange(newVisibility);
		}
	}

	function formatExpiration(expiresAt: string | null) {
		if (!expiresAt) return "No expiration";
		const date = new Date(expiresAt);
		const now = new Date();
		if (date < now) return "Expired";
		const days = Math.ceil(
			(date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
		);
		if (days === 0) return "Expires today";
		if (days === 1) return "Expires tomorrow";
		return `Expires in ${days} days`;
	}

	return (
		<div className="fixed inset-0 z-50 flex items-center justify-center">
			{/* Overlay */}
			<div
				className="absolute inset-0 bg-black/50"
				onClick={onClose}
				onKeyDown={() => {}}
			/>

			{/* Modal */}
			<div className="relative bg-white rounded-xl shadow-lg p-6 max-w-md mx-4 w-full max-h-[80vh] overflow-y-auto">
				{/* Header */}
				<div className="flex items-center justify-between mb-4">
					<h3 className="text-lg font-semibold text-gray-900">Share Setup</h3>
					<button
						type="button"
						onClick={onClose}
						className="p-1 text-gray-400 hover:text-gray-600 rounded"
					>
						<LucideIcon name="x" size={20} />
					</button>
				</div>

				{/* Visibility Picker */}
				<div className="flex flex-col gap-2 mb-4">
					{VISIBILITY_OPTIONS.map((option) => (
						<button
							key={option.value}
							type="button"
							onClick={() => handleVisibilityChange(option.value)}
							className={`flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
								currentVisibility === option.value
									? option.selectedBorder
									: `${option.border} hover:border-gray-300`
							}`}
						>
							<LucideIcon
								name={option.icon}
								size={20}
								className={option.iconColor}
							/>
							<div className="text-left">
								<div className="text-sm font-medium text-gray-900">
									{option.label}
								</div>
								<div className="text-xs text-gray-500">
									{option.description}
								</div>
							</div>
						</button>
					))}
				</div>

				{/* Deactivation Warning */}
				{currentVisibility === "private" && switchingToPrivateWithLinks && (
					<div className="flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg mb-4">
						<LucideIcon
							name="alert-triangle"
							size={16}
							className="text-amber-500 mt-0.5 shrink-0"
						/>
						<p className="text-xs text-amber-700">
							Switching to private will deactivate all share links. They can be
							reactivated by switching back.
						</p>
					</div>
				)}

				{/* Share Links Section */}
				{showLinksSection && (
					<div className="border-t border-gray-100 pt-4 mt-2">
						<div className="text-sm font-medium text-gray-700 mb-3">
							Share Links
						</div>

						{/* Create Link Row */}
						<div className="flex items-center gap-2 mb-4">
							<select
								value={expiresInDays === null ? "null" : String(expiresInDays)}
								onChange={(e) =>
									setExpiresInDays(
										e.target.value === "null" ? null : Number(e.target.value),
									)
								}
								className="px-3 py-2 text-sm border border-gray-200 rounded-lg bg-white"
							>
								{EXPIRATION_OPTIONS.map((opt) => (
									<option
										key={String(opt.value)}
										value={opt.value === null ? "null" : String(opt.value)}
									>
										{opt.label}
									</option>
								))}
							</select>
							<button
								type="button"
								onClick={handleCreateLink}
								disabled={createShareLink.isPending}
								className="px-4 py-2 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
							>
								{createShareLink.isPending ? "Creating..." : "Create Link"}
							</button>
						</div>

						{/* Active Links List */}
						{activeLinks.length > 0 ? (
							<div className="space-y-2">
								{activeLinks.map((link) => (
									<div
										key={link.id}
										className="flex items-center gap-2 p-3 bg-gray-50 rounded-lg"
									>
										<div className="flex-1 min-w-0">
											<div className="text-sm text-gray-600 truncate">
												/s/{link.token.slice(0, 12)}...
											</div>
											<div className="text-xs text-gray-400">
												{formatExpiration(link.expiresAt)}
											</div>
										</div>
										<button
											type="button"
											onClick={() => handleCopy(link.token, link.id)}
											className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg shrink-0"
											title="Copy link"
										>
											<LucideIcon
												name={
													copiedId === link.id ||
													justCreatedToken === link.token
														? "check"
														: "copy"
												}
												size={16}
												className={
													copiedId === link.id ||
													justCreatedToken === link.token
														? "text-green-500"
														: ""
												}
											/>
										</button>
										<button
											type="button"
											onClick={() => revokeShareLink.mutate(link.id)}
											className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg shrink-0"
											title="Revoke link"
										>
											<LucideIcon name="trash-2" size={16} />
										</button>
									</div>
								))}
							</div>
						) : (
							<p className="text-sm text-gray-400 text-center py-4">
								No share links yet
							</p>
						)}
					</div>
				)}
			</div>
		</div>
	);
}