/**
 * Disconnect Modal Component.
 *
 * Confirmation modal for disconnecting site from Sideconvo.
 *
 * @package Sideconvo
 */

import { useState } from '@wordpress/element';
import './disconnect-modal.css';

interface DisconnectModalProps {
	isOpen: boolean;
	onClose: () => void;
	onConfirm: (deleteSyncData: boolean) => void;
}

/**
 * DisconnectModal component.
 *
 * @param {DisconnectModalProps} props Component props.
 * @return {JSX.Element|null} DisconnectModal component.
 */
export default function DisconnectModal({ isOpen, onClose, onConfirm }: DisconnectModalProps) {
	const [deleteSyncData, setDeleteSyncData] = useState(false);
	const [isProcessing, setIsProcessing] = useState(false);

	if (!isOpen) {
		return null;
	}

	const handleConfirm = () => {
		setIsProcessing(true);
		onConfirm(deleteSyncData);
	};

	return (
		<div className="disconnect-modal__overlay" onClick={onClose}>
			<div className="disconnect-modal" onClick={(e) => e.stopPropagation()}>
				<div className="disconnect-modal__header">
					<h2>Disconnect Site</h2>
					<button
						className="disconnect-modal__close"
						onClick={onClose}
						aria-label="Close"
					>
						<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
							<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
						</svg>
					</button>
				</div>

				<div className="disconnect-modal__content">
					<div className="disconnect-modal__warning">
						<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
							<circle cx="24" cy="24" r="20" fill="#FEF2F2"/>
							<path d="M24 16V26M24 30V32" stroke="#EF4444" strokeWidth="2" strokeLinecap="round"/>
						</svg>
					</div>

					<p className="disconnect-modal__message">
						This will disconnect your WordPress site from Sideconvo. Your API key will be removed from this site.
					</p>

					<p className="disconnect-modal__note">
						<strong>Important:</strong> Your indexed content will remain on the Sideconvo platform. To remove it completely, you must delete it from the Sideconvo dashboard.
					</p>

					<label className="disconnect-modal__checkbox">
						<input
							type="checkbox"
							checked={deleteSyncData}
							onChange={(e) => setDeleteSyncData(e.target.checked)}
						/>
						<span>Also delete local sync history</span>
					</label>
				</div>

				<div className="disconnect-modal__footer">
					<button
						className="disconnect-modal__button disconnect-modal__button--secondary"
						onClick={onClose}
						disabled={isProcessing}
					>
						Cancel
					</button>
					<button
						className="disconnect-modal__button disconnect-modal__button--danger"
						onClick={handleConfirm}
						disabled={isProcessing}
					>
						{isProcessing ? 'Disconnecting...' : 'Disconnect'}
					</button>
				</div>
			</div>
		</div>
	);
}