<?php
/**
 * View — Indicateurs de performance Oracle (ratios + advisors mémoire).
 *
 * @var string|null $fetchError
 * @var array       $ratios       ['buffer_hit' => float|null, …]
 * @var array       $indicators   ['buffer_hit' => ['label'=>…, 'goal'=>…, 'thr'=>[…]], …]
 * @var array       $advisors     ['db_cache' => [{sz, metric, size_factor}, …], …]
 * @var array       $help         ['buffer_hit' => ['def'=>…, 'goal'=>…, 'levers'=>[…]], …]
 * @var array       $advisorHelp  ['db_cache' => ['title'=>…, 'def'=>…, …], …]
 * @var object      $settings
 */
?>

<div class="page-header" style="display:flex;align-items:center;flex-wrap:wrap;gap:.5rem">
    <h1 style="margin:0;font-size:1.05rem">📊 <?= t('demo_oracle.indicators_title') ?></h1>
</div>

<?php if ($fetchError): ?>
<div class="alert alert-error"><?= htmlspecialchars($fetchError) ?></div>
<?php endif; ?>

<!-- ══ Section 1 — Ratios classiques ════════════════════════════════════ -->
<h2 style="font-size:.95rem;margin:.75rem 0 .4rem"><?= t('demo_oracle.indicators_ratios') ?></h2>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6rem">
<?php
foreach ($indicators as $key => $info):
    $val    = $ratios[$key];
    $status = demo_indicator_status($val, $info['thr'], $info['goal']);
    $color  = $status === 'good' ? 'var(--color-success)'
            : ($status === 'warn' ? 'var(--color-warning)' : 'var(--color-danger)');
?>
    <div class="card" style="padding:.55rem .7rem;display:flex;flex-direction:column;gap:.25rem">
        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:.4rem">
            <span style="font-size:.78rem;color:var(--color-text-muted);line-height:1.2"><?= htmlspecialchars($info['label']) ?></span>
            <button type="button" class="ind-help-btn" data-key="<?= $key ?>"
                    title="<?= t('demo_oracle.indicators_help') ?>"
                    style="background:transparent;border:0;color:var(--color-text-muted);
                           cursor:pointer;padding:0;font-size:.95rem;line-height:1">ⓘ</button>
        </div>
        <div style="font-size:1.45rem;font-weight:700;color:<?= $color ?>;line-height:1">
            <?= $val === null ? '—' : number_format($val, 2, '.', ' ') . ' %' ?>
        </div>
    </div>
<?php endforeach; ?>
</div>

<!-- ══ Section 2 — Advisors mémoire ═════════════════════════════════════ -->
<h2 style="font-size:.95rem;margin:1.25rem 0 .4rem"><?= t('demo_oracle.indicators_advisors') ?></h2>

<?php
$advisorOrder = ['db_cache', 'shared_pool', 'pga', 'sga', 'memory'];
$visibleAdvisors = array_filter($advisorOrder, function ($k) use ($advisors) {
    return !empty($advisors[$k]);
});
?>

<?php if (empty($visibleAdvisors)): ?>
<div class="card"><p style="margin:0;color:var(--color-text-muted)"><?= t('demo_oracle.indicators_no_advisor') ?></p></div>
<?php else: ?>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:.75rem">
<?php foreach ($visibleAdvisors as $key):
    $h = $advisorHelp[$key];
?>
    <div class="card" style="padding:.55rem .7rem">
        <div style="display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin-bottom:.25rem">
            <strong style="font-size:.85rem"><?= htmlspecialchars($h['title']) ?></strong>
            <button type="button" class="ind-adv-help-btn" data-key="<?= $key ?>"
                    title="<?= t('demo_oracle.indicators_help') ?>"
                    style="background:transparent;border:0;color:var(--color-text-muted);
                           cursor:pointer;padding:0;font-size:.95rem;line-height:1">ⓘ</button>
        </div>
        <canvas id="adv-<?= $key ?>" style="width:100%;max-height:220px"></canvas>
    </div>
<?php endforeach; ?>
</div>
<?php endif; ?>

<!-- ══ Modale d'aide ════════════════════════════════════════════════════ -->
<div id="ind-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
     z-index:9100;align-items:center;justify-content:center" onclick="indHideModal(event)">
    <div style="background:var(--color-surface,#fff);color:var(--color-text);
         max-width:640px;width:90%;max-height:80vh;overflow-y:auto;
         border-radius:6px;padding:1.1rem 1.3rem;box-shadow:0 6px 24px rgba(0,0,0,.3)"
         onclick="event.stopPropagation()">
        <h3 id="ind-modal-title" style="margin:0 0 .5rem;font-size:1.05rem"></h3>
        <p id="ind-modal-def" style="margin:.25rem 0 .75rem;font-size:.88rem;line-height:1.45"></p>
        <p style="margin:.5rem 0 .15rem;font-size:.82rem;color:var(--color-text-muted)">
            <strong><?= t('demo_oracle.indicators_goal') ?> :</strong>
            <span id="ind-modal-goal"></span>
        </p>
        <p style="margin:.5rem 0 .15rem;font-size:.82rem;color:var(--color-text-muted)">
            <strong><?= t('demo_oracle.indicators_levers') ?> :</strong>
        </p>
        <ul id="ind-modal-levers" style="margin:.15rem 0 .75rem 1rem;font-size:.85rem;line-height:1.45"></ul>
        <div style="text-align:right">
            <button class="btn btn-secondary" onclick="indHideModal()"><?= t('user.cancel') ?></button>
        </div>
    </div>
</div>

<!-- ══ CDN + data bridge + external JS ═════════════════════════════════ -->
<script src="<?= htmlspecialchars($settings->get('cdn_chartjs_js', '')) ?>"></script>
<script>
window.DemoOracleReport = window.DemoOracleReport || {};
window.DemoOracleReport.indicators = {
    helpRatio:    <?= json_encode($help, JSON_UNESCAPED_UNICODE) ?>,
    helpRatioLbl: <?= json_encode(array_combine(
        array_keys($indicators),
        array_column($indicators, 'label')
    ), JSON_UNESCAPED_UNICODE) ?>,
    helpAdvisor:  <?= json_encode($advisorHelp, JSON_UNESCAPED_UNICODE) ?>,
    advisors:     <?= json_encode($advisors, JSON_UNESCAPED_UNICODE) ?>
};
</script>
<script src="/modules/demo_oracle/assets/js/report-indicators.js?v=<?= filemtime(__DIR__ . '/../../assets/js/report-indicators.js') ?>"></script>
