<?php
declare(strict_types=1);

if (!function_exists('exec_ui_kpi_card')) {
    function exec_ui_kpi_card(array $card): void
    {
        $tone = (string)($card['tone'] ?? 'neutral');
        $icon = (string)($card['icon'] ?? '◆');
        $label = (string)($card['label'] ?? '');
        $value = (string)($card['value'] ?? '—');
        $comparison = (string)($card['comparison'] ?? '');
        $metric = (string)($card['metric'] ?? '');
        ?>
        <article class="exec-kpi-card exec-tone-<?= e($tone) ?>">
            <span class="exec-kpi-icon" aria-hidden="true"><?= e($icon) ?></span>
            <div class="exec-kpi-copy">
                <span class="exec-kpi-label"><?= e($label) ?></span>
                <strong class="exec-kpi-value"><?= e($value) ?></strong>
                <small class="exec-kpi-comparison"><?= e($comparison) ?></small>
            </div>
            <?php if ($metric !== ''): ?><span class="exec-kpi-metric"><?= e($metric) ?></span><?php endif; ?>
        </article>
        <?php
    }
}

if (!function_exists('exec_ui_section_heading')) {
    function exec_ui_section_heading(string $eyebrow, string $title, string $description = ''): void
    {
        ?>
        <div class="exec-section-heading">
            <div>
                <span><?= e($eyebrow) ?></span>
                <h2><?= e($title) ?></h2>
                <?php if ($description !== ''): ?><p><?= e($description) ?></p><?php endif; ?>
            </div>
        </div>
        <?php
    }
}

if (!function_exists('exec_ui_chart_card')) {
    function exec_ui_chart_card(array $chart): void
    {
        $key = (string)$chart['key'];
        ?>
        <article class="exec-surface exec-chart-card" data-exec-chart-card="<?= e($key) ?>" data-chart-state="pending">
            <header>
                <div>
                    <span class="exec-overline"><?= e((string)$chart['eyebrow']) ?></span>
                    <h3><?= e((string)$chart['title']) ?></h3>
                    <small><?= e((string)$chart['subtitle']) ?></small>
                </div>
                <span class="exec-chart-unit"><?= e((string)$chart['unit']) ?></span>
            </header>
            <div class="exec-chart-stage">
                <canvas id="exec_chart_<?= e($key) ?>" width="760" height="440"></canvas>
                <div class="exec-chart-state exec-chart-empty"><?= e((string)$chart['empty']) ?></div>
                <div class="exec-chart-state exec-chart-error"><?= e((string)$chart['error']) ?></div>
            </div>
            <footer>
                <span><?= e((string)$chart['total_label']) ?></span>
                <strong><?= e((string)$chart['total_value']) ?></strong>
            </footer>
        </article>
        <?php
    }
}
