import { totalStats } from "./totalStats.js";
import { loadSprite } from "./loadSprite.js";

export class StatsUi {
    constructor() {
        this.dynamicTextColor = "#3F2517";
        this.valueTextColor = "#C0C0C0";
        this.layout = {
            offsetX: 0,
            offsetY: 0,
            width: 740,
            height: 470,
            overlapWidth: 290,
            overlapHeight: 106,
            titleX: 314,
            titleY: 24,
            subtitleY: 50,
            infoY: 72,
            contentX: 22,
            contentY: 124,
            contentWidth: 696,
            rowHeight: 28,
            labelWidth: 64,
            labelHeight: 18,
            valueStartX: 108,
            tableHeaderY: 24,
            tableRowOffsetY: 54,
            columnXs: [0, 74, 154, 234, 330, 438],
            footerX: 22,
            footerY: 340,
            footerWidth: 696,
            generalColumnXs: [0, 238, 476],
            generalValueOffset: 176,
            bestColumnXs: [0, 178, 360, 536],
            bestValueOffset: 108
        };
        this.panelSprite = loadSprite("assets/ui/statsUi.png");
        this.isOpen = false;
        this.x = 0;
        this.y = 0;
    }

    toggleOpen() {
        this.isOpen = !this.isOpen;
    }

    reposition(anchorRect) {
        this.x = anchorRect.x + this.layout.offsetX;
        this.y = anchorRect.y + this.layout.offsetY;
    }

    getPanelRect() {
        return {
            x: this.x,
            y: this.y,
            width: this.layout.width,
            height: this.layout.height
        };
    }

    isPointInRect(x, y, rect) {
        return x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height;
    }

    isPointInside(x, y) {
        return this.isOpen && this.isPointInRect(x, y, this.getPanelRect());
    }

    handleLeftClick(x, y) {
        if (!this.isPointInside(x, y)) {
            return false;
        }

        return true;
    }

    getColorRows() {
        return totalStats.getColorRows();
    }

    drawValueBadge(ctx, x, y, fill, value) {
        const horizontalPadding = 14;
        const textOffsetX = 10;
        const textOffsetY = -1;
        const width = Math.max(88, Math.ceil(ctx.measureText(value).width) + horizontalPadding * 2);
        const badgeX = x - 30;
        const badgeY = y - this.layout.labelHeight / 2 + 4;

        ctx.fillStyle = fill;
        ctx.fillRect(badgeX, badgeY, width, this.layout.labelHeight);

        ctx.strokeStyle = "#4C311F";
        ctx.lineWidth = 2;
        ctx.strokeRect(badgeX + 1, badgeY + 1, width - 2, this.layout.labelHeight - 2);

        ctx.fillStyle = "#C0C0C0";
        ctx.textAlign = "right";
        ctx.fillText(value, badgeX + width - horizontalPadding + textOffsetX, y + 1 + textOffsetY);
    }

    drawPanel(ctx) {
        if (!this.panelSprite || !this.panelSprite.complete) {
            return;
        }

        ctx.drawImage(this.panelSprite, this.x, this.y, this.layout.width, this.layout.height);
    }

    drawHeader(ctx) {
        return;
    }

    drawTable(ctx) {
        const rows = this.getColorRows();
        const startX = this.x + this.layout.contentX;
        const startY = this.y + this.layout.contentY + 3;
        const valueStartX = startX + this.layout.valueStartX;
        const labelTextX = startX + 10;

        ctx.save();
        ctx.textBaseline = "middle";

        rows.forEach((row, index) => {
            const rowY = startY + this.layout.tableRowOffsetY + index * this.layout.rowHeight;

            ctx.fillStyle = row.fill;
            ctx.fillRect(startX, rowY - this.layout.labelHeight / 2, this.layout.labelWidth, this.layout.labelHeight);

            ctx.strokeStyle = "#4C311F";
            ctx.lineWidth = 2;
            ctx.strokeRect(
                startX + 1,
                rowY - this.layout.labelHeight / 2 + 1,
                this.layout.labelWidth - 2,
                this.layout.labelHeight - 2
            );

            ctx.fillStyle = "#C0C0C0";
            ctx.font = "bold 11px monospace";
            ctx.textAlign = "left";
            ctx.fillText(row.label, labelTextX, rowY + 1);

            ctx.fillStyle = this.valueTextColor;
            ctx.font = "bold 13px monospace";
            ctx.textAlign = "left";
            row.values.forEach((value, valueIndex) => {
                ctx.fillText(value, valueStartX + this.layout.columnXs[valueIndex], rowY + 1);
            });
        });

        ctx.restore();
    }

    drawFooter(ctx) {
        const x = this.x + this.layout.footerX;
        const y = this.y + this.layout.footerY;
        const lineHeight = 18;
        const generalLabelXs = this.layout.generalColumnXs.map(offset => x + offset);
        const generalValueXs = generalLabelXs.map(valueX => valueX + this.layout.generalValueOffset);
        const bestValueXs = this.layout.bestColumnXs.map(offset => x + offset + this.layout.bestValueOffset);
        const generalStats = totalStats.getFormattedGeneralStats();
        const bestStats = totalStats.getBestStats();

        ctx.save();
        ctx.textBaseline = "top";
        ctx.textAlign = "left";

        ctx.fillStyle = this.valueTextColor;
        ctx.font = "bold 13px monospace";
        ctx.fillText(generalStats.totalFoodLooted, generalValueXs[0], y + lineHeight);
        ctx.fillText(generalStats.totalAntsEverSpawned, generalValueXs[1], y + lineHeight);
        ctx.fillText(generalStats.totalReturnTrips, generalValueXs[2], y + lineHeight);
        ctx.fillText(generalStats.totalEmptyReturns, generalValueXs[0], y + lineHeight * 2);
        ctx.fillText(generalStats.totalAntsOutsideNow, generalValueXs[1], y + lineHeight * 2);
        ctx.fillText(generalStats.totalProducedThisMinute, generalValueXs[2], y + lineHeight * 2);

        ctx.font = "bold 11px monospace";
        this.drawValueBadge(ctx, bestValueXs[0], y + lineHeight * 5, bestStats.bestFoodPerMinute.fill, bestStats.bestFoodPerMinute.value);
        this.drawValueBadge(ctx, bestValueXs[1], y + lineHeight * 5, bestStats.farthestFromHill.fill, bestStats.farthestFromHill.value);
        this.drawValueBadge(ctx, bestValueXs[2], y + lineHeight * 5, bestStats.longestTrip.fill, bestStats.longestTrip.value);
        this.drawValueBadge(ctx, bestValueXs[3], y + lineHeight * 5, bestStats.biggestHaul.fill, bestStats.biggestHaul.value);
        ctx.restore();
    }

    draw(ctx) {
        if (!this.isOpen) {
            return;
        }

        this.drawPanel(ctx);
        this.drawHeader(ctx);
        this.drawTable(ctx);
        this.drawFooter(ctx);
    }
}

export const statsUi = new StatsUi();