import type { ReactNode } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUserPen } from '@fortawesome/pro-duotone-svg-icons';
import { ModalOverlay, Modal, Dialog } from '@/components/application/modals/modal';
import { Button } from '@/components/base/buttons/button';

// Generic confirmation modal shown before any destructive edit to a
// patient's record. Used by the call-desk forms (appointment, enquiry)
// to gate the patient-name rename flow, but intentionally non-specific:
// any page that needs a "are you sure you want to change this patient
// field?" confirm should reuse this modal instead of building its own.
//
// The lock-by-default + explicit-confirm gate is deliberately heavy
// because patient edits cascade workspace-wide — they hit past
// appointments, lead history, AI summaries, and the Redis
// caller-resolution cache. The default path should always be "don't
// touch the record"; the only way to actually commit a change is
// clicking an Edit button, reading this prompt, and confirming.
//
// Styling matches the sign-out confirmation in sidebar.tsx — same
// warning circle, same button layout — so the weight of the action
// reads immediately.

type EditPatientConfirmModalProps = {
    isOpen: boolean;
    onOpenChange: (open: boolean) => void;
    onConfirm: () => void;
    /** Modal heading. Defaults to "Edit patient details?". */
    title?: string;
    /** Body copy explaining the consequences of the edit. Accepts any
     *  ReactNode so callers can inline markup / inline the specific
     *  field being edited. A sensible generic default is provided. */
    description?: ReactNode;
    /** Confirm-button label. Defaults to "Yes, edit details". */
    confirmLabel?: string;
};

const DEFAULT_TITLE = 'Edit patient details?';

const DEFAULT_DESCRIPTION = (
    <>
        You&apos;re about to change a detail on this patient&apos;s record. The update will cascade
        across Helix Engage — past appointments, lead history, and the AI summary all reflect
        the new value. Only proceed if the current data is actually wrong; for all other
        cases, cancel and continue with the current record.
    </>
);

const DEFAULT_CONFIRM_LABEL = 'Yes, edit details';

export const EditPatientConfirmModal = ({
    isOpen,
    onOpenChange,
    onConfirm,
    title = DEFAULT_TITLE,
    description = DEFAULT_DESCRIPTION,
    confirmLabel = DEFAULT_CONFIRM_LABEL,
}: EditPatientConfirmModalProps) => (
    <ModalOverlay isOpen={isOpen} onOpenChange={onOpenChange} isDismissable>
        <Modal className="max-w-md">
            <Dialog>
                <div className="rounded-xl bg-primary p-6 shadow-xl">
                    <div className="flex flex-col items-center text-center gap-4">
                        <div className="flex size-12 items-center justify-center rounded-full bg-warning-secondary">
                            <FontAwesomeIcon icon={faUserPen} className="size-5 text-fg-warning-primary" />
                        </div>
                        <div>
                            <h3 className="text-lg font-semibold text-primary">{title}</h3>
                            <p className="mt-1 text-sm text-tertiary">{description}</p>
                        </div>
                        <div className="flex w-full gap-3">
                            <Button size="md" color="secondary" className="flex-1" onClick={() => onOpenChange(false)}>
                                Cancel
                            </Button>
                            <Button size="md" color="primary-destructive" className="flex-1" onClick={onConfirm}>
                                {confirmLabel}
                            </Button>
                        </div>
                    </div>
                </div>
            </Dialog>
        </Modal>
    </ModalOverlay>
);