<?php

/**
 * Developer Console — System Health Diagnostics (DX003)
 *
 * Environment diagnostic suite:
 *   - Database Connection
 *   - Supabase Connection
 *   - Storage Permission
 *   - Log Directory
 *   - Cache Directory
 *   - PHP Extensions
 *   - PHP Memory Limit
 *   - Upload Limit
 *   - Execution Time
 *
 * Displays status badges (Healthy, Warning, Error) and recommendations.
 *
 * Variables:
 *   $health_data — array from SystemHealthService::inspectHealth()
 *
 * @package Inveetaire
 * @ref     DX003
 */

/** @var array $health_data */
$health_data   = $health_data ?? [];
$overallStatus = $health_data['overall_status'] ?? 'healthy';
$overallLabel  = $health_data['overall_label']  ?? 'All Systems Healthy';
$summary       = $health_data['summary']        ?? [];
$checks        = $health_data['checks']         ?? [];
$environment   = $health_data['environment']    ?? [];

$statusBadgeClass = [
    'healthy' => 'badge-ok',
    'warning' => 'badge-warn',
    'error'   => 'badge-err',
];

?>

<!-- Page Header -->
<div style="margin-bottom: 2rem;">
    <div style="font-family: var(--mono); font-size: 0.6875rem; color: var(--dev-text-muted); margin-bottom: 0.5rem;">
        <a href="<?= url('/app/developer') ?>" style="color:var(--dev-accent); text-decoration:none;">developer</a>
        <span style="color:#444c56;"> / </span>
        <span style="color:var(--dev-rose);">health</span>
    </div>
    <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;">
        <div>
            <h1 style="font-size: 1.5rem; font-weight: 800; color: var(--dev-text); margin-bottom: 0.25rem;">
                System Health Diagnostics
            </h1>
            <p style="font-size: 0.8125rem; color: var(--dev-text-muted);">
                Real-time environment, file system, database, and PHP runtime health metrics.
            </p>
        </div>
        <div>
            <button onclick="window.location.reload()"
                    style="display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; background:rgba(88,166,255,0.1); border:1px solid rgba(88,166,255,0.3); border-radius:6px; font-family:var(--mono); font-size:0.75rem; color:var(--dev-accent); cursor:pointer;">
                <i class="fa-solid fa-arrows-rotate"></i> Re-run Diagnostics
            </button>
        </div>
    </div>
</div>

<!-- Health Banner -->
<div class="dev-card" style="margin-bottom: 2rem; border-color: <?= $overallStatus === 'healthy' ? 'rgba(63,185,80,0.3)' : ($overallStatus === 'warning' ? 'rgba(210,153,34,0.3)' : 'rgba(248,81,73,0.3)') ?>;">
    <div class="dev-card-body" style="display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;">
        <div style="font-size:2.5rem; color:<?= $overallStatus === 'healthy' ? 'var(--dev-accent2)' : ($overallStatus === 'warning' ? 'var(--dev-warn)' : 'var(--dev-danger)') ?>;">
            <i class="fa-solid fa-<?= $overallStatus === 'healthy' ? 'heart-pulse' : ($overallStatus === 'warning' ? 'triangle-exclamation' : 'circle-xmark') ?>"></i>
        </div>
        <div>
            <div style="font-weight:800; font-size:1.125rem; color:var(--dev-text); margin-bottom:0.25rem;">
                <?= escape_html($overallLabel) ?>
            </div>
            <div style="font-size:0.8125rem; color:var(--dev-text-muted);">
                <?= (int)($summary['healthy_count'] ?? 0) ?> Healthy ·
                <span style="color:var(--dev-warn);"><?= (int)($summary['warning_count'] ?? 0) ?> Warnings</span> ·
                <span style="color:var(--dev-danger);"><?= (int)($summary['error_count'] ?? 0) ?> Errors</span>
                (<?= (int)($summary['total_checks'] ?? 0) ?> checks evaluated)
            </div>
        </div>
        <div style="margin-left:auto; display:flex; gap:0.75rem; align-items:center;">
            <span class="<?= $statusBadgeClass[$overallStatus] ?? 'badge-warn' ?>" style="font-size:0.75rem; padding:0.35rem 0.75rem;">
                ● Overall: <?= strtoupper($overallStatus) ?>
            </span>
        </div>
    </div>
</div>

<!-- Diagnostics Grid -->
<div class="dev-section-title" style="margin-bottom: 1rem;">Core Environment Checks</div>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">

    <?php foreach ($checks as $check): ?>
    <?php
        $st = $check['status'] ?? 'healthy';
        $borderColor = $st === 'healthy' ? 'rgba(63,185,80,0.15)' : ($st === 'warning' ? 'rgba(210,153,34,0.3)' : 'rgba(248,81,73,0.3)');
    ?>
    <div class="dev-card" style="border-color: <?= $borderColor ?>;">
        <div class="dev-card-header">
            <span class="dev-card-title">
                <i class="fa-solid fa-<?= $st === 'healthy' ? 'check' : ($st === 'warning' ? 'exclamation' : 'xmark') ?>" style="margin-right:0.375rem; color:<?= $st === 'healthy' ? 'var(--dev-accent2)' : ($st === 'warning' ? 'var(--dev-warn)' : 'var(--dev-danger)') ?>;"></i>
                <?= escape_html($check['title']) ?>
            </span>
            <span class="<?= $statusBadgeClass[$st] ?? 'badge-warn' ?>">
                <?= strtoupper($st) ?>
            </span>
        </div>
        <div class="dev-card-body">
            <div style="font-family:var(--mono); font-size:0.8125rem; color:var(--dev-text); margin-bottom:0.5rem; word-break:break-all;">
                <?= escape_html($check['value']) ?>
            </div>
            <div style="font-family:var(--mono); font-size:0.625rem; color:var(--dev-text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.75rem;">
                Category: <?= escape_html($check['category']) ?>
            </div>

            <?php if (!empty($check['recommendation'])): ?>
            <div style="padding:0.75rem; background:rgba(210,153,34,0.06); border:1px solid rgba(210,153,34,0.2); border-radius:6px; font-size:0.75rem; color:var(--dev-text-muted); line-height:1.5;">
                <strong style="color:var(--dev-warn); display:block; margin-bottom:0.25rem;">
                    <i class="fa-solid fa-lightbulb"></i> Recommendation:
                </strong>
                <?= escape_html($check['recommendation']) ?>
            </div>
            <?php endif; ?>
        </div>
    </div>
    <?php endforeach; ?>

</div>

<!-- PHP Environment Info -->
<div class="dev-section-title" style="margin-bottom: 1rem;">Runtime Environment Summary</div>
<div class="dev-card">
    <div class="dev-card-body">
        <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:1.25rem;">
            <div>
                <div class="dev-stat-label">PHP Version</div>
                <div class="dev-stat-value" style="font-size:1.125rem; color:var(--dev-accent);"><?= escape_html($environment['php_version'] ?? PHP_VERSION) ?></div>
            </div>
            <div>
                <div class="dev-stat-label">PHP SAPI</div>
                <div class="dev-stat-value" style="font-size:1.125rem;"><?= escape_html($environment['sapi'] ?? PHP_SAPI) ?></div>
            </div>
            <div>
                <div class="dev-stat-label">OS Family</div>
                <div class="dev-stat-value" style="font-size:1.125rem;"><?= escape_html($environment['os'] ?? PHP_OS_FAMILY) ?></div>
            </div>
            <div>
                <div class="dev-stat-label">App Environment</div>
                <div class="dev-stat-value" style="font-size:1.125rem; color:var(--dev-purple);"><?= escape_html($environment['app_env'] ?? 'local') ?></div>
            </div>
            <div>
                <div class="dev-stat-label">Developer Mode</div>
                <div class="dev-stat-value" style="font-size:1.125rem; color:var(--dev-accent2);"><?= escape_html($environment['dev_mode'] ?? 'Enabled') ?></div>
            </div>
        </div>
    </div>
</div>
