/**
 * 30-Day Evaluation Counter
 *
 * Renders a small badge in the header showing the admin's evaluation
 * progress ("Day X of 30") or "Evaluation Expired" after day 30.
 *
 * The evaluation start date is owned by the backend; the frontend only
 * reads it from userInfo.evaluation.startDate (on page load) or from
 * the click response (on first click).
 */
(function () {
    'use strict';

    var BADGE_ID = 'evaluationBadge';
    var STYLE_ID = 'evaluation-counter-styles';
    var TOTAL_DAYS = 30;

    function injectStyles() {
        if (document.getElementById(STYLE_ID)) return;
        var style = document.createElement('style');
        style.id = STYLE_ID;
        style.textContent = [
            '#' + BADGE_ID + ' {',
            '    display: none;',
            '    padding: 5px 12px;',
            '    border-radius: 14px;',
            '    font-size: 12px;',
            '    font-weight: 600;',
            '    line-height: 1.4;',
            '    margin-right: 12px;',
            '    white-space: nowrap;',
            '    letter-spacing: 0.2px;',
            '    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);',
            '    cursor: help;',
            '}',
            '#' + BADGE_ID + '.eval-active {',
            '    display: inline-block;',
            '    background: #ffffff;',
            '    color: #1d4ed8;',
            '}',
            '#' + BADGE_ID + '.eval-expired {',
            '    display: inline-block;',
            '    background: #dc2626;',
            '    color: #ffffff;',
            '}'
        ].join('\n');
        document.head.appendChild(style);
    }

    function parseStartDate(startDate) {
        if (!startDate || typeof startDate !== 'string') return null;
        if (!/^\d{4}-\d{2}-\d{2}$/.test(startDate)) return null;
        var ms = Date.parse(startDate + 'T00:00:00Z');
        return isNaN(ms) ? null : ms;
    }

    function todayUtcMs() {
        var iso = new Date().toISOString().split('T')[0];
        return Date.parse(iso + 'T00:00:00Z');
    }

    function computeDay(startDate) {
        var startMs = parseStartDate(startDate);
        if (startMs === null) return null;
        var diff = todayUtcMs() - startMs;
        var day = Math.floor(diff / 86400000) + 1;
        if (day < 1) day = 1;
        return day;
    }

    function formatFriendlyDate(ms) {
        return new Date(ms).toLocaleDateString('en-US', {
            month: 'short',
            day: 'numeric',
            year: 'numeric'
        });
    }

    function buildTooltip(startDate, day) {
        var startMs = parseStartDate(startDate);
        if (startMs === null) return '';
        var endMs = startMs + (TOTAL_DAYS - 1) * 86400000;
        var startFmt = formatFriendlyDate(startMs);
        var endFmt = formatFriendlyDate(endMs);

        if (day > TOTAL_DAYS) {
            return 'Your 30-day evaluation ended on ' + endFmt + '.';
        }
        var remaining = TOTAL_DAYS - day;
        var remainingText = remaining === 1 ? '1 day remaining' : remaining + ' days remaining';
        return 'Your 30-day evaluation started on ' + startFmt +
               '. Ends on ' + endFmt + ' (' + remainingText + ').';
    }

    function getBadgeEl() {
        return document.getElementById(BADGE_ID);
    }

    function render(userInfo) {
        injectStyles();
        var el = getBadgeEl();
        if (!el) return;

        var startDate = userInfo && userInfo.evaluation && userInfo.evaluation.startDate;
        if (!startDate) {
            el.className = '';
            el.textContent = '';
            el.style.display = 'none';
            return;
        }

        var day = computeDay(startDate);
        if (day === null) {
            el.className = '';
            el.textContent = '';
            el.style.display = 'none';
            return;
        }

        if (day > TOTAL_DAYS) {
            el.className = 'eval-expired';
            el.textContent = 'Evaluation Expired';
        } else {
            el.className = 'eval-active';
            el.textContent = 'Day ' + day + ' of ' + TOTAL_DAYS;
        }
        el.title = buildTooltip(startDate, day);
    }

    function updateFromClickResponse(responseData) {
        if (!responseData || !responseData.evaluation) return;
        var el = getBadgeEl();
        if (el && el.textContent) return;
        render({ evaluation: responseData.evaluation });
    }

    window.EvaluationCounter = {
        render: render,
        updateFromClickResponse: updateFromClickResponse
    };
})();