"""
ui.grid_layout — Posición de la rejilla de botones sobre el tablero pintado.

Una "caja" por rival (en % del .stage): left/top/width/height. Las celdas NxN
rellenan la caja (flex), así el encaje depende solo de estos 4 números.

Calíbralos con `tools/grid_calibrator.html` (abre el PNG, mueve/redimensiona la
rejilla por encima y pega aquí los valores). `gap` en px.
"""

from __future__ import annotations

GRID_LAYOUT: dict[str, dict[str, float]] = {
    # Lesky / TABLERO1 (3x3) — calibrado con tools/grid_calibrator.html
    "lesky":    {"left": 38.2, "top": 29.3, "width": 20.6, "height": 35.9, "gap": 6},
    # Monstruo / TABLERO2 (4x4) — calibrado con tools/grid_calibrator.html
    "monstruo": {"left": 37.2, "top": 26.6, "width": 25.0, "height": 43.5, "gap": 6},
}


def layout_for(key: str) -> dict[str, float]:
    return GRID_LAYOUT.get(key, GRID_LAYOUT["lesky"])


def grid_style_css(key: str) -> str:
    """`<style>` con la geometría de la rejilla para `board-<key>` (se inyecta en
    la pantalla board; pisa los defaults de style.css)."""
    g = layout_for(key)
    # .stage.board-<key> sube especificidad sobre `.stage .grid3` del CSS base, y
    # !important asegura que gana pase lo que pase con el orden de cascada de Gradio.
    # OJO: NO se impone `height`: las celdas son cuadradas (aspect-ratio:1) y el alto
    # de la rejilla = suma de celdas. Imponer height las dejaba rectangulares/chatas.
    return (
        "<style>"
        f".stage.board-{key} .grid3{{"
        f"left:{g['left']}%!important;top:{g['top']}%!important;"
        f"width:{g['width']}%!important;height:auto!important;"
        f"gap:{g['gap']}px!important}}"
        f".stage.board-{key} .grid3 .grid-row{{gap:{g['gap']}px!important}}"
        "</style>"
    )