import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
    Modal,
    Button,
    CheckboxControl,
    TextareaControl,
    Spinner,
} from '@wordpress/components';

/**
 * Reusable confirmation modal for admin booking status changes.
 *
 * Replaces the window.confirm() alerts used by handleConfirm,
 * handleDecline, and handleCancel in BookingDetail.jsx and
 * BookingTable.jsx. Shows the action's description, a "notify
 * customer via email" checkbox (default checked), and an optional
 * admin note textarea that ends up in both the DB and the outgoing
 * email.
 *
 * Props:
 *   - title: string
 *   - description: string
 *   - confirmLabel: string
 *   - confirmVariant: 'primary' | 'secondary' (default 'primary')
 *   - confirmIsDestructive: bool (default false)
 *   - defaultNotify: bool (default true)
 *   - busy: bool (default false)
 *   - onConfirm: ({ notifyCustomer, adminNote }) => void
 *   - onCancel: () => void
 */
export default function StatusChangeModal( {
    title,
    description,
    confirmLabel,
    confirmVariant = 'primary',
    confirmIsDestructive = false,
    defaultNotify = true,
    busy = false,
    onConfirm,
    onCancel,
} ) {
    const [ notifyCustomer, setNotifyCustomer ] = useState( defaultNotify );
    const [ adminNote, setAdminNote ]           = useState( '' );

    const handleClick = () => {
        onConfirm( {
            notifyCustomer,
            adminNote: adminNote.trim(),
        } );
    };

    return (
        <Modal
            title={ title }
            onRequestClose={ onCancel }
            className="appointly-status-change-modal"
            size="small"
        >
            <p className="appointly-status-change-modal__description">
                { description }
            </p>

            <CheckboxControl
                label={ __( 'Inform the customer via email', 'appointly' ) }
                checked={ notifyCustomer }
                onChange={ setNotifyCustomer }
                __nextHasNoMarginBottom
            />

            <TextareaControl
                label={ __( 'Note for the customer (optional)', 'appointly' ) }
                help={ __( 'Shown in the email if "Inform the customer" is checked. Also stored on the booking for your records.', 'appointly' ) }
                value={ adminNote }
                onChange={ setAdminNote }
                rows={ 3 }
                __nextHasNoMarginBottom
            />

            <div className="appointly-status-change-modal__actions">
                <Button variant="secondary" onClick={ onCancel } disabled={ busy }>
                    { __( 'Cancel', 'appointly' ) }
                </Button>
                <Button
                    variant={ confirmVariant }
                    isDestructive={ confirmIsDestructive }
                    onClick={ handleClick }
                    disabled={ busy }
                >
                    { busy && <Spinner /> }
                    { confirmLabel }
                </Button>
            </div>
        </Modal>
    );
}