enum Callout
{
    AT_RISK = "AT_RISK",
    STUDY_SUPPORT = "STUDY_SUPPORT",
    MEDICAL_CONDITION = "MEDICAL_CONDITION",
    TEACHING_IMPLICATIONS = "TEACHING_IMPLICATIONS",
    ABS_FLAG = "ABS_FLAG",              
    CONTRACT_STAGE = "CONTRACT_STAGE",  
}
const CalloutInfo = {
    [Callout.AT_RISK]: {icon: "P/exclamation-red-frame.png", title: "At Risk"},
    [Callout.STUDY_SUPPORT]: {icon: "P/information-shield.png", title: "Receives Study Support"},
    [Callout.MEDICAL_CONDITION]: {icon: "P/plus-shield.png", title: "Identified Medical Condition"},
    [Callout.TEACHING_IMPLICATIONS]: {icon: "P/shield--pencil.png", title: "Implications for Teaching"},
    [Callout.ABS_FLAG]: {icon: "F/flag_red.png",title: "Active Absence Flag",},
    [Callout.CONTRACT_STAGE]: {icon: "",ttitle: "Active Contract",},
} as const;

export class MiniProfile extends HTMLElement
{
    private tippyInstance: any = null;

    public connectedCallback(): void
    {
        // todo 122033-mini-profile Build thumbnail in js directly.
        // todo Fetch / API driven option, cached, for loading MiniProfile data? Simplifies usage.
        const name = this.getAttribute('name') || 'Unknown';
        const reference = this.getAttribute('reference') || 'N/A';
        const pronouns = this.getAttribute('pronouns') || '';
        const photoUrl = this.getAttribute('photo-url') || '';
        const profileUrl = this.getAttribute('profile-url') || '';
        const showName = this.hasAttribute('show-name') && this.getAttribute('show-name') !== 'false';
        const tooltipHtml = `
            <div class="mini-profile align-items-center">
                <img src="${photoUrl}" alt="Profile Photo" class="img-fluid photo"/>
                <div>
                    <p class="name">${name}</p>
                    <p class="reference">${reference}</p>
                    <p class="pronouns">${pronouns}</p>
                    ${this.getCalloutHtml()}
                </div>
            </div>
        `;

        const anchor = document.createElement('a');
        anchor.textContent = showName ? name : reference;
        anchor.href = profileUrl;
        anchor.target = '_blank';
        this.appendChild(anchor);

        this.tippyInstance = window.tippy(anchor, {
            content: tooltipHtml,
            allowHTML: true,
            interactive: true,
            theme: 'light',
            placement: 'top',
            zIndex: 9999,
            delay: [200, 150], // 500ms delay for showing, no delay for hiding
            popperOptions: {
                strategy: 'fixed',
            },
        });
    }
    private getCalloutHtml(): string {
        const calloutArr = this.getAttribute('callout-csv')?.split(',') || [];
        const contractStage = this.getAttribute('contract-stage') || '';

        if (calloutArr.length === 0) return '';

        let html = '<div class="callout-wrapper">';
        for (let str of calloutArr) {
            if (str in CalloutInfo) {
                let { icon, title } = CalloutInfo[str];

                if (str === Callout.CONTRACT_STAGE && contractStage) {
                    html += `
                        <div>
                            <span class="flag-label">${contractStage} Active Contract</span>
                        </div>
                    `;
                    continue;
                }

                // Regular callout rendering
                html += `
                    <div>
                        <img class="ops_iconTag icon" src="/Static/Icons/${icon}" alt="${title}" title="${title}"/>
                        <span>${title}</span>
                    </div>
                `;
            }
        }
        html += '</div>';
        return html;
    }

    public disconnectedCallback(): void
    {
        if (this.tippyInstance) {
            this.tippyInstance.destroy();
            this.tippyInstance = null;
        }
        this.querySelector('a')?.remove();
    }
}
