/**
 * PinConfirmationModal — confirmation dialog for both the pin and
 * unpin flows. Renders a read-only `PinnedMessageRow` preview of the
 * target message, a variant-specific headline + description, and a
 * primary confirm button (danger-styled for unpin).
 *
 *   - `'pin'`   → "Pin it. Pin it good." + blue primary button
 *   - `'unpin'` → "Unpin Message" + red primary button
 *
 * Calls `api.messages.setPinned` on confirm.
 */
import { useState } from 'react';
import { useMutation } from 'convex/react';
import { Modal } from '@discord-clone/ui';
import { api } from '../../../../../convex/_generated/api';
import type { Id } from '../../../../../convex/_generated/dataModel';
import { PinnedMessageRow, type PinnedMessage } from './PinnedMessageRow';
import styles from './PinConfirmationModal.module.css';

export type PinConfirmationVariant = 'pin' | 'unpin';

interface PinConfirmationModalProps {
	isOpen: boolean;
	onClose: () => void;
	channelId: string;
	messageId: string | null;
	message: PinnedMessage | null;
	variant?: PinConfirmationVariant;
}

const VARIANT_COPY: Record<
	PinConfirmationVariant,
	{
		title: string;
		description: string;
		primaryLabel: string;
		busyLabel: string;
		failedLabel: string;
	}
> = {
	pin: {
		title: 'Pin it. Pin it good.',
		description:
			"Pin this message to the channel for all to see. Unless you're chicken.",
		primaryLabel: 'Pin it real good',
		busyLabel: 'Pinning…',
		failedLabel: 'Failed to pin message.',
	},
	unpin: {
		title: 'Unpin Message',
		description: 'Do you want to send this pin back in time?',
		primaryLabel: 'Unpin it',
		busyLabel: 'Unpinning…',
		failedLabel: 'Failed to unpin message.',
	},
};

export function PinConfirmationModal({
	isOpen,
	onClose,
	channelId,
	messageId,
	message,
	variant = 'pin',
}: PinConfirmationModalProps) {
	const setPinned = useMutation(api.messages.pin);
	const [busy, setBusy] = useState(false);
	const [error, setError] = useState<string | null>(null);

	const copy = VARIANT_COPY[variant];

	const handleConfirm = async () => {
		if (!messageId || busy) return;
		setBusy(true);
		setError(null);
		try {
			await setPinned({
				id: messageId as Id<'messages'>,
				pinned: variant === 'pin',
			});
			onClose();
		} catch (err: any) {
			setError(err?.message || copy.failedLabel);
		} finally {
			setBusy(false);
		}
	};

	// Silence unused import lint — channelId is kept on the props
	// surface for future bulk-unpin flows that need scoping.
	void channelId;

	return (
		<Modal.Root isOpen={isOpen} onClose={onClose} size="small">
			<Modal.Header
				title={copy.title}
				onClose={onClose}
				className={styles.headerFlush}
			/>
			<Modal.Content>
				<div className={styles.body}>
					<p className={styles.description}>{copy.description}</p>

					{message && (
						<div className={styles.previewWrap}>
							<PinnedMessageRow message={message} />
						</div>
					)}

					{error && <div className={styles.error}>{error}</div>}

					<div className={styles.actions}>
						<button
							type="button"
							className={`${styles.primaryButton} ${
								variant === 'unpin' ? styles.primaryButtonDanger : ''
							}`}
							onClick={handleConfirm}
							disabled={busy || !messageId}
						>
							{busy ? copy.busyLabel : copy.primaryLabel}
						</button>
						<button
							type="button"
							className={styles.secondaryButton}
							onClick={onClose}
							disabled={busy}
						>
							Cancel
						</button>
					</div>
				</div>
			</Modal.Content>
		</Modal.Root>
	);
}
