#!/usr/bin/env python3
"""Optional Chromium regression: shared button sizing and Dashboard density.

Uses the production HTML button markup and stylesheet without a running API.
Run: python3 tools/checks/appearance_density_buttons_0327_browser.py
"""
from pathlib import Path
import re
import shutil
from playwright.sync_api import sync_playwright

ROOT = Path(__file__).resolve().parents[2]
index = (ROOT / 'src/admin/web/index.html').read_text()
css = (ROOT / 'src/admin/web/style.css').read_text()


def button(button_id):
    match = re.search(r'<button\b(?=[^>]*\bid="' + re.escape(button_id) + r'")[\s\S]*?</button>', index)
    assert match, button_id
    return match.group(0).replace(' hidden', '')


html = f'''<!doctype html><html data-theme="dark"><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>{css}</style></head>
<body><main style="max-width:100%;padding:10px;box-sizing:border-box">
<div class="page-intro-title-row"><h1>Overview</h1>
{button('overview-refresh')}{button('overview-layout-open')}{button('overview-layout-unlock')}</div>
<div class="appearance-settings-grid dashboard-appearance-grid"><div class="dashboard-widget-settings"><div class="dashboard-widget-settings-controls">
{button('overview-layout-open-settings')}{button('dashboard-widget-expand')}
</div></div></div>
<div>{'<button class="quiet" id="reference-quiet">Reference</button><button class="outline" id="reference-outline">Reference</button>'}</div>
<section id="panel-overview"><div class="stats-grid dashboard-overview-grid is-aligned">
<article class="stat stat-chart" data-dashboard-widget="http_protocol"><span>Requests</span><strong>100</strong><small>Rate</small><svg viewBox="0 0 100 25"></svg></article>
<article class="card" data-dashboard-widget="diagnostics"><div class="card-heading"><h2>Diagnostics</h2></div><p>Metrics</p></article>
</div></section></main></body></html>'''

with sync_playwright() as p:
    browser = p.chromium.launch(executable_path=shutil.which('chromium') or shutil.which('chromium-browser'), args=['--no-sandbox'])
    for width in [320, 393, 1280]:
        page = browser.new_page(viewport={'width': width, 'height': 900})
        page.set_content(html)
        for style in ['normal', 'compact']:
            page.evaluate('(value) => document.documentElement.dataset.buttonStyle = value', style)
            computed = page.evaluate('''() => {
                const values = id => {
                    const s = getComputedStyle(document.getElementById(id));
                    return [s.fontSize, s.minHeight, s.paddingTop, s.paddingRight, s.paddingBottom, s.paddingLeft];
                };
                return Object.fromEntries(['overview-refresh', 'overview-layout-open', 'overview-layout-unlock',
                    'overview-layout-open-settings', 'dashboard-widget-expand', 'reference-quiet', 'reference-outline']
                    .map(id => [id, values(id)]));
            }''')
            for target, reference in [
                ('overview-refresh', 'reference-quiet'),
                ('overview-layout-open', 'reference-quiet'),
                ('overview-layout-unlock', 'reference-outline'),
                ('overview-layout-open-settings', 'reference-outline'),
                ('dashboard-widget-expand', 'reference-quiet'),
            ]:
                assert computed[target] == computed[reference], (width, style, target, computed[target], computed[reference])
            print('PASS buttons', width, style, computed['overview-refresh'])
        measures = {}
        for density in ['normal', 'compact', 'ultra']:
            page.evaluate('(value) => document.documentElement.dataset.dashboardDensity = value', density)
            measures[density] = page.evaluate('''() => {
                const stat = document.querySelector('#panel-overview .stat');
                const value = stat.querySelector('strong');
                const svg = stat.querySelector('svg');
                const card = document.querySelector('#panel-overview .card');
                const title = card.querySelector('h2');
                return {statPadding: parseFloat(getComputedStyle(stat).paddingTop),
                    valueSize: parseFloat(getComputedStyle(value).fontSize),
                    chartHeight: parseFloat(getComputedStyle(svg).height),
                    cardPadding: parseFloat(getComputedStyle(card).paddingTop),
                    titleSize: parseFloat(getComputedStyle(title).fontSize),
                    overflow: document.documentElement.scrollWidth > window.innerWidth};
            }''')
            assert not measures[density]['overflow'], (width, density)
        for key in ['statPadding', 'valueSize', 'chartHeight', 'cardPadding', 'titleSize']:
            values = [measures[d][key] for d in ['normal', 'compact', 'ultra']]
            assert values[0] > values[1] > values[2], (width, key, values)
        print('PASS densities', width, measures)
        page.close()
    browser.close()