import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../../components/ui/dialog';
import type { Disclaimer } from '../../../config/communicationPreferences';
import './PatientSettingsPage.css';

export interface CommunicationConsentDialogProps {
    open: boolean;
    channelLabel: string;
    disclaimer: Disclaimer;
    submitting: boolean;
    onAgree: () => void;
    onClose: () => void;
}

// Informed-consent gate shown before turning a channel ON. No Cancel button - the dialog's X closes (= decline,
// the toggle stays off). Agreeing records the disclaimer version + timestamp server-side.
export function CommunicationConsentDialog({
    open,
    channelLabel,
    disclaimer,
    submitting,
    onAgree,
    onClose,
}: CommunicationConsentDialogProps) {
    return (
        <Dialog
            open={open}
            onOpenChange={(next) => {
                if (!next) onClose();
            }}
        >
            <DialogContent className="patient-settings-consent max-w-md">
                <DialogHeader className="text-left sm:text-left">
                    <DialogTitle className="ak-overlay__title">Enable {channelLabel}</DialogTitle>
                    <DialogDescription>Please read and agree before we turn this on.</DialogDescription>
                </DialogHeader>

                <p className="patient-settings-consent__text">{disclaimer.text}</p>

                <div className="flex justify-end">
                    <button type="button" className="btn btn-green" disabled={submitting} onClick={onAgree}>
                        {submitting ? 'Saving…' : 'I agree'}
                    </button>
                </div>
            </DialogContent>
        </Dialog>
    );
}

export default CommunicationConsentDialog;