export type StatusType = 'info' | 'success' | 'warning' | 'error';

// One pictogram per status: spinner=in progress, check=saved, triangle=unsaved, cross=error.
// `data-tooltip` carries the message so `initTooltips()` (already bound to this span) shows it on hover.
const ICONS: Record<StatusType, string> = {
    info: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9" /></svg>',
    success: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>',
    warning: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>',
    error: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18" /><path d="M6 6l12 12" /></svg>',
};

export class StatusMessenger {
    private element: HTMLElement | null;

    constructor(elementId: string) {
        this.element = document.getElementById(elementId);
    }

    public show(message: string, type: StatusType): void {
        if (this.element) {
            this.element.innerHTML = ICONS[type];
            this.element.className = `save-status ${type}`;
            this.element.setAttribute('data-tooltip', message);
            this.element.setAttribute('aria-label', message);
        }
    }

    public hide(): void {
        if (this.element) {
            this.element.innerHTML = '';
            this.element.className = 'save-status';
            this.element.removeAttribute('data-tooltip');
            this.element.removeAttribute('aria-label');
        }
    }
}