// The whole story behind the bar's one number.
//
// The bar shows the fullest window across every agent, because that is the one
// about to interrupt you. This is what that number is made of: each agent's
// limits with their reset times, what today cost, and where the tokens went.
//
// A Popover anchored under the widget, the way TrayMenu hangs off a tray icon —
// the house pattern for anything that belongs to a bar item rather than to the
// shell. Clicking outside closes it; so does Escape, which Popover's focus grab
// handles for every popover in the shell.
//
// Nothing in here animates on a timer. One 30-second tick advances the clock
// that "updated 4 minutes ago" and the reset countdowns read, and it only runs
// while the panel is open.

import QtQuick
import qs.config
import qs.services
import qs.widgets

Popover {
    id: root

    implicitWidth: Theme.popoverWidth
    implicitHeight: body.implicitHeight + contentPadding * 2

    // Which agent's tab is showing. Empty means "whichever is first", so the
    // panel is never blank because a collector was switched off between opens.
    property string selectedId: ""

    readonly property var agents: AgentUsage.readyRecords

    readonly property var record: {
        const list = root.agents;
        if (list.length === 0)
            return null;
        for (const candidate of list)
            if (candidate.id === root.selectedId)
                return candidate;
        return list[0];
    }

    // One clock for the whole panel, ticking only while it is open. Every
    // elapsed-time and countdown string in here reads this instead of calling
    // Date.now() in a binding, which would never invalidate.
    property double nowMs: Date.now()

    onVisibleChanged: {
        if (root.visible) {
            root.nowMs = Date.now();
            // The local scans can be reused; the limits are what the panel is
            // being opened to read.
            AgentUsage.refreshLimits();
        }
    }

    Timer {
        interval: 30 * 1000
        running: root.visible
        repeat: true
        onTriggered: root.nowMs = Date.now()
    }

    // ── Formatting ──────────────────────────────────────────────────────────

    function tokenText(value: double): string {
        const n = Number(value) || 0;
        if (n >= 1e9)
            return (n / 1e9).toFixed(1) + "B";
        if (n >= 1e6)
            return (n / 1e6).toFixed(1) + "M";
        if (n >= 1e3)
            return Math.round(n / 1e3) + "k";
        return String(Math.round(n));
    }

    function percentText(fraction: real): string {
        return Math.round(Math.min(1, Math.max(0, Number(fraction) || 0)) * 100) + "%";
    }

    function meterColor(fraction: real): color {
        const percent = (Number(fraction) || 0) * 100;
        if (percent >= 90)
            return Theme.danger;
        if (percent >= 75)
            return Theme.warn;
        return Theme.accent;
    }

    function parseTime(iso: string): double {
        const parsed = Date.parse(String(iso ?? ""));
        return isNaN(parsed) ? 0 : parsed;
    }

    // "Updated 4 minutes ago". A record with no timestamp says so rather than
    // implying it is current.
    function agoText(iso: string): string {
        const at = root.parseTime(iso);
        if (at <= 0)
            return "Never collected";
        const minutes = Math.floor(Math.max(0, root.nowMs - at) / 60000);
        if (minutes < 1)
            return "Updated just now";
        if (minutes === 1)
            return "Updated 1 minute ago";
        if (minutes < 60)
            return `Updated ${minutes} minutes ago`;
        const hours = Math.floor(minutes / 60);
        return hours === 1 ? "Updated 1 hour ago" : `Updated ${hours} hours ago`;
    }

    // "resets 2:40 pm" for something today, "resets Thu" for something further
    // out. A window whose reset has passed says so rather than counting into
    // the negative — the collector keeps a cached limit only until its window
    // rolls over, so this is a record caught mid-rollover.
    function resetText(iso: string): string {
        const at = root.parseTime(iso);
        if (at <= 0)
            return "";
        if (at <= root.nowMs)
            return "resetting";
        const when = new Date(at);
        const sameDay = new Date(root.nowMs).toDateString() === when.toDateString();
        if (sameDay)
            return "resets " + when.toLocaleTimeString(Qt.locale(), "h:mm ap");
        return "resets " + when.toLocaleDateString(Qt.locale(), "ddd");
    }

    function weekdayText(date: string): string {
        const parts = String(date ?? "").split("-");
        if (parts.length !== 3)
            return "";
        const when = new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]));
        return when.toLocaleDateString(Qt.locale(), "ddd").slice(0, 2);
    }

    function isToday(date: string): bool {
        const parts = String(date ?? "").split("-");
        if (parts.length !== 3)
            return false;
        const when = new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]));
        return when.toDateString() === new Date(root.nowMs).toDateString();
    }

    // ── Derived views of the selected record ────────────────────────────────

    readonly property var limits: {
        const entries = root.record && Array.isArray(root.record.limits) ? root.record.limits : [];
        return entries.filter(entry => entry && Number.isFinite(Number(entry.percent)));
    }

    readonly property var days: {
        const entries = root.record && Array.isArray(root.record.recentDays) ? root.record.recentDays : [];
        // recentDays.messageCount is a token total, despite the legacy name the
        // collectors inherited.
        return entries.map(day => ({
            date: String(day?.date ?? ""),
            tokens: Number(day?.messageCount) || 0
        }));
    }

    readonly property double dayPeak: {
        let peak = 0;
        for (const day of root.days)
            peak = Math.max(peak, day.tokens);
        return peak;
    }

    // Top models by total tokens. Five rows is the whole point of the section:
    // more than that and it stops being a glance.
    readonly property var models: {
        const usage = root.record?.modelUsage;
        if (!usage || typeof usage !== "object")
            return [];
        const rows = [];
        for (const name of Object.keys(usage)) {
            const bucket = usage[name] || {};
            const total = (Number(bucket.inputTokens) || 0)
                + (Number(bucket.outputTokens) || 0)
                + (Number(bucket.cacheReadInputTokens) || 0)
                + (Number(bucket.cacheCreationInputTokens) || 0);
            if (total > 0)
                rows.push({ name: name, tokens: total });
        }
        rows.sort((a, b) => b.tokens - a.tokens);
        return rows.slice(0, 5);
    }

    readonly property double modelPeak: root.models.length > 0 ? root.models[0].tokens : 0

    Column {
        id: body
        width: parent.width
        spacing: 8

        // ── Agent tabs ──────────────────────────────────────────────────────
        //
        // Only worth drawing when there is a choice to make.
        Row {
            width: parent.width
            spacing: 6
            visible: root.agents.length > 1

            Repeater {
                model: root.agents

                delegate: Rectangle {
                    id: tab
                    required property var modelData

                    readonly property bool current: root.record && root.record.id === tab.modelData.id

                    width: (body.width - 6 * (root.agents.length - 1)) / root.agents.length
                    height: 28
                    radius: 9
                    border.width: tab.current ? 1 : 0
                    border.color: Theme.alpha(Theme.accent, 0.3)
                    color: tab.current
                        ? Theme.alpha(Theme.accent, 0.14)
                        : (tabMouse.containsMouse ? Theme.alpha(Theme.fg, Theme.hoverAlpha) : Theme.alpha(Theme.fg, 0.05))

                    Text {
                        anchors.centerIn: parent
                        text: tab.modelData.name || tab.modelData.id
                        color: tab.current ? Theme.fg : Theme.fgDim
                        elide: Text.ElideRight
                        font.family: Theme.fontFamily
                        font.pixelSize: Theme.fontSizeSmall
                        font.weight: Font.DemiBold
                    }

                    MouseArea {
                        id: tabMouse
                        anchors.fill: parent
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onClicked: root.selectedId = String(tab.modelData.id ?? "")
                    }
                }
            }
        }

        // ── Who, and how current ────────────────────────────────────────────

        Item {
            width: parent.width
            implicitHeight: Math.max(heroGlyph.implicitHeight, heroName.implicitHeight, tierChip.implicitHeight)

            Text {
                id: heroGlyph
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                text: "\u{F1719}"                        // md-robot-outline
                color: Theme.accent
                font.family: Theme.fontMono
                font.pixelSize: Theme.fontSizeLarge
            }

            Text {
                id: heroName
                anchors.left: heroGlyph.right
                anchors.leftMargin: 9
                anchors.right: tierChip.visible ? tierChip.left : parent.right
                anchors.rightMargin: 8
                anchors.verticalCenter: parent.verticalCenter
                text: root.record?.name ?? "Agent usage"
                color: Theme.fg
                elide: Text.ElideRight
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSize
                font.weight: Font.DemiBold
            }

            // The plan, when the collector could name one. It is the only thing
            // from the credential store allowed into a record.
            Rectangle {
                id: tierChip
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                visible: String(root.record?.tierLabel ?? "") !== ""
                implicitWidth: tierText.implicitWidth + 18
                implicitHeight: tierText.implicitHeight + 6
                radius: Theme.pillRadius
                border.width: 1
                border.color: Theme.alpha(Theme.accent, 0.25)
                color: Theme.alpha(Theme.accent, 0.1)

                Text {
                    id: tierText
                    anchors.centerIn: parent
                    text: String(root.record?.tierLabel ?? "").toUpperCase()
                    color: Theme.accent
                    font.family: Theme.fontFamily
                    font.pixelSize: Math.max(8, Theme.fontSizeSmall - 2)
                    font.weight: Font.DemiBold
                }
            }
        }

        Text {
            width: parent.width
            text: root.agoText(root.record?.updatedAt)
            color: Theme.fgMuted
            elide: Text.ElideRight
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
        }

        // ── An honest word when the numbers are not authoritative ───────────

        Rectangle {
            width: parent.width
            visible: String(root.record?.usageStatusText ?? "") !== ""
            implicitHeight: statusColumn.implicitHeight + 18
            radius: Theme.cardRadius
            border.width: 0
            color: Theme.alpha(Theme.warn, 0.12)

            Column {
                id: statusColumn
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 10
                anchors.rightMargin: 10
                spacing: 3

                Text {
                    width: parent.width
                    text: root.record?.usageStatusText ?? ""
                    color: Theme.warn
                    wrapMode: Text.WordWrap
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeSmall
                    font.weight: Font.DemiBold
                }

                Text {
                    width: parent.width
                    visible: String(root.record?.authHelpText ?? "") !== ""
                    text: root.record?.authHelpText ?? ""
                    color: Theme.fgDim
                    wrapMode: Text.WordWrap
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeSmall
                }
            }
        }

        // ── Limits ──────────────────────────────────────────────────────────
        //
        // Model-scoped windows sit in the same list as the flat ones: the
        // collector settles which window an entry belongs to and titles it, so
        // "Fable Weekly" reads beside "Weekly (7-day)" rather than under it.

        Repeater {
            model: root.limits

            delegate: Column {
                id: limitRow
                required property var modelData

                width: body.width
                topPadding: 5
                spacing: 6

                Item {
                    width: parent.width
                    implicitHeight: limitLabel.implicitHeight

                    Text {
                        id: limitLabel
                        anchors.left: parent.left
                        anchors.right: limitValue.left
                        anchors.rightMargin: 8
                        text: limitRow.modelData.label ?? "Limit"
                        color: Theme.fg
                        elide: Text.ElideRight
                        font.family: Theme.fontFamily
                        font.pixelSize: Theme.fontSizeSmall
                        font.weight: Font.DemiBold
                    }

                    Text {
                        id: limitValue
                        anchors.right: parent.right
                        anchors.baseline: limitLabel.baseline
                        text: {
                            const reset = root.resetText(limitRow.modelData.resetsAt);
                            const percent = root.percentText(limitRow.modelData.percent);
                            return reset ? reset + " · " + percent : percent;
                        }
                        color: Theme.fgMuted
                        font.family: Theme.fontFamily
                        font.pixelSize: Theme.fontSizeSmall
                        font.features: Theme.tabularFigures
                    }
                }

                Rectangle {
                    width: parent.width
                    height: 8
                    radius: 4
                    border.width: 0
                    color: Theme.alpha(Theme.fg, 0.08)

                    Rectangle {
                        width: Math.max(0, Math.min(1, Number(limitRow.modelData.percent) || 0)) * parent.width
                        height: parent.height
                        radius: parent.radius
                        border.width: 0
                        color: root.meterColor(limitRow.modelData.percent)
                    }
                }
            }
        }

        Rectangle {
            width: parent.width
            visible: root.days.length > 0 || root.models.length > 0
            height: 1
            color: Theme.alpha(Theme.fg, 0.08)
        }

        // ── Tokens, last seven days ─────────────────────────────────────────

        Item {
            width: parent.width
            visible: root.dayPeak > 0
            implicitHeight: dayHeader.implicitHeight + 8 + 56

            Text {
                id: dayHeader
                anchors.left: parent.left
                text: "Tokens, last 7 days"
                color: Theme.fg
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                font.weight: Font.DemiBold
            }

            Text {
                anchors.right: parent.right
                anchors.baseline: dayHeader.baseline
                text: "today " + root.tokenText(root.record?.todayTotalTokens ?? 0)
                color: Theme.fgMuted
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                font.features: Theme.tabularFigures
            }

            Row {
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                height: 56
                spacing: 6

                Repeater {
                    model: root.days

                    delegate: Column {
                        id: dayColumn
                        required property var modelData

                        readonly property bool today: root.isToday(dayColumn.modelData.date)

                        width: (body.width - 6 * 6) / 7
                        spacing: 4

                        Item {
                            width: parent.width
                            height: 56 - 4 - dayLabel.implicitHeight

                            Rectangle {
                                anchors.bottom: parent.bottom
                                width: parent.width
                                height: Math.max(
                                    dayColumn.modelData.tokens > 0 ? 2 : 0,
                                    root.dayPeak > 0 ? (dayColumn.modelData.tokens / root.dayPeak) * parent.height : 0)
                                radius: 4
                                border.width: 0
                                color: dayColumn.today ? Theme.accent : Theme.alpha(Theme.accent, 0.35)
                            }
                        }

                        Text {
                            id: dayLabel
                            width: parent.width
                            text: root.weekdayText(dayColumn.modelData.date)
                            color: dayColumn.today ? Theme.fgDim : Theme.fgMuted
                            horizontalAlignment: Text.AlignHCenter
                            font.family: Theme.fontFamily
                            font.pixelSize: Math.max(8, Theme.fontSizeSmall - 2)
                            font.weight: dayColumn.today ? Font.DemiBold : Font.Normal
                        }
                    }
                }
            }
        }

        // ── Where the tokens went ───────────────────────────────────────────

        Text {
            width: parent.width
            visible: root.models.length > 0
            topPadding: 4
            text: "By model"
            color: Theme.fg
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
            font.weight: Font.DemiBold
        }

        Repeater {
            model: root.models

            delegate: Item {
                id: modelRow
                required property var modelData

                width: body.width
                implicitHeight: 18

                Text {
                    id: modelName
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    width: 108
                    text: modelRow.modelData.name
                    color: Theme.fgDim
                    elide: Text.ElideRight
                    font.family: Theme.fontFamily
                    font.pixelSize: Math.max(9, Theme.fontSizeSmall - 1)
                }

                Item {
                    anchors.left: modelName.right
                    anchors.leftMargin: 10
                    anchors.right: modelValue.left
                    anchors.rightMargin: 10
                    anchors.verticalCenter: parent.verticalCenter
                    height: 6

                    Rectangle {
                        width: root.modelPeak > 0
                            ? Math.max(2, (modelRow.modelData.tokens / root.modelPeak) * parent.width)
                            : 0
                        height: parent.height
                        radius: 3
                        border.width: 0
                        color: Theme.alpha(Theme.accentAlt, 0.55)
                    }
                }

                Text {
                    id: modelValue
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    width: 52
                    text: root.tokenText(modelRow.modelData.tokens)
                    color: Theme.fgDim
                    horizontalAlignment: Text.AlignRight
                    font.family: Theme.fontFamily
                    font.pixelSize: Math.max(9, Theme.fontSizeSmall - 1)
                    font.features: Theme.tabularFigures
                }
            }
        }

        // ── Sessions, when that is all there is ─────────────────────────────

        Text {
            width: parent.width
            visible: root.dayPeak <= 0 && root.models.length === 0 && root.record !== null
            text: `Sessions today: ${root.record?.todaySessions ?? 0}`
            color: Theme.fgDim
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
        }

        Text {
            width: parent.width
            visible: root.record === null
            text: "No collector has anything to report yet."
            color: Theme.fgDim
            wrapMode: Text.WordWrap
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
        }
    }
}