<?php

if (!defined('ABSPATH')) {
    exit;
}

/**
 * Price Log Page Menu
 */
function pmrcgold_PriceLogPageMenu($hook)
{
    $logs = get_option('pmrcgold_price_logs', []);
    ?>
    <div class="wrap preciousuite-wrap preciousuite-dashboard preciousuite-gold-price">
        <div class="preciousuite-dashboard-shell">
            <?php pmrcgold_render_dashboard_nav('gold-price-logs'); ?>
            <main class="preciousuite-dashboard-main preciousuite-setting-page" id="metal-rate-chart-plugin-log">
                <section class="preciousuite-dashboard-hero">
                    <h1><?php esc_html_e('Price Log', 'preciousuite-metal-rate-charts'); ?></h1>
                    <p><?php esc_html_e('View the history of metal rate API responses to monitor your connection and data.', 'preciousuite-metal-rate-charts'); ?>
                    </p>
                </section>

                <div id="preciousuite-container">
                    <!-- Daily Price Logs -->
                    <div class="preciousuite-log-section">
                        <h2><?php esc_html_e('Daily Price Logs', 'preciousuite-metal-rate-charts'); ?></h2>
                        <div class="preciousuite-log-table-wrapper">
                            <table class="wp-list-table widefat fixed striped">
                                <thead>
                                    <tr>
                                        <th width="10%"><?php esc_html_e('Index', 'preciousuite-metal-rate-charts'); ?></th>
                                        <th width="20%">
                                            <?php esc_html_e('Response Date', 'preciousuite-metal-rate-charts'); ?>
                                        </th>
                                        <th><?php esc_html_e('Full Response', 'preciousuite-metal-rate-charts'); ?></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php if (!empty($logs)): ?>

                                        <?php
                                        $reversed_logs = array_values(array_reverse($logs, false));
                                        usort($reversed_logs, function ($a, $b) {
                                            return strtotime($b['date']) - strtotime($a['date']);
                                        });
                                        foreach ($reversed_logs as $index => $log): ?>
                                            <tr>
                                                <td><?php echo esc_html($index + 1); ?></td>
                                                <td><?php echo esc_html($log['date']); ?></td>
                                                <td><code
                                                        style="display: block; max-height: 150px; overflow-y: auto;"><?php echo esc_html(wp_json_encode($log['response'], JSON_PRETTY_PRINT)); ?></code>
                                                </td>
                                            </tr>
                                        <?php endforeach; ?>
                                    <?php else: ?>
                                        <tr>
                                            <td colspan="3">
                                                <?php esc_html_e('No daily logs found.', 'preciousuite-metal-rate-charts'); ?>
                                            </td>
                                        </tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
            </main>
            <?php pmrcgold_render_dashboard_sidebar(); ?>
        </div>
    </div>
    <style>
        .preciousuite-log-table-wrapper {
            margin-top: 20px;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
    <?php
}
