<?php
include "classes/app.class.php";
?>
<div class="app-content-wrapper">
    <style>
        #email_content_container {
            all: revert;
            /* Helps prevent main site CSS from leaking into email HTML */
            line-height: 1.6;
            color: #333;
        }

        #email_content_container img {
            max-width: 100%;
            /* Prevents large email images from breaking the layout */
            height: auto;
        }

        /* Older "Read" rows - Dimmed */
        .row-read {
            background-color: #fafafa !important;
            opacity: 0.75;
        }

        .row-read td {
            color: #8e8e93 !important;
        }

        .row-read strong {
            color: #8e8e93 !important;
            font-weight: 500;
        }

        /* Recent "Unread" rows - High contrast */
        .row-unread {
            background-color: #ffffff !important;
        }

        .row-unread td {
            color: #000000 !important;
        }

        /* Small badge for recent items */
        .badge-new {
            background: #007AFF;
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        #email_content_container {
            all: revert;
            line-height: 1.6;
            color: #333;
        }

        #email_content_container img {
            max-width: 100%;
            height: auto;
        }
    </style>
    <div class="page-header">
        <h2 class="main-title">Settings</h2>
    </div>
    <div class="table-container">
        <div id="tanks-settings" class="tab-content active">
            <div class="table-actions">
                <h3>Last 50 Notifications</h3>
            </div>
            <table class="apple-table">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Date</th>
                        <th>Tanks</th>
                        <th>Users</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    // Fetch notifications for the logged-in user
                    $event_res = $db->query("event_handler", "SELECT * FROM event_handler WHERE FIND_IN_SET('{$_SESSION['user_id']}', user_ids) > 0 ORDER BY record_id DESC LIMIT 50");

                    $now = time();

                    while ($event = $event_res->fetch_assoc()) {
                        $event_time = strtotime($event['date_time']);
                        $seconds_ago = $event_time -  $now;

                        // Logic: Between now and 1 hour ago (3600 seconds)
                        if ($seconds_ago >= -10000 && $seconds_ago <= 10000) {
                            $status_class = "row-unread";
                            $is_new = true;
                        } else {
                            $status_class = "row-read";
                            $is_new = false;
                        }
                        ?>
                        <tr class="<?php echo $status_class; ?>">
                            <td data-label="subject">
                                <strong><?php echo $event['subject']; ?></strong>
                            </td>
                            <td data-label="date"><strong><?php echo $event['date_time']; ?></strong></td>
                            <td data-label="tanks"><?php echo $functions->getNamesFromIds('tanks', $event['tank_ids']); ?>
                            </td>
                            <td data-label="users"><?php echo $functions->getNamesFromIds('users', $event['user_ids']); ?>
                            </td>
                            <td data-label="Actions" style="text-align: right;">
                                <button class="btn-edit"
                                    style="background-color: <?php echo $is_new ? 'var(--accent)' : '#c7c7cc'; ?>; color: white; border:none;"
                                    onclick="viewNotification(<?php echo htmlspecialchars(json_encode($event)); ?>)">
                                    View
                                </button>
                            </td>
                        </tr>
                    <?php } ?>
                </tbody>
            </table>

            <div id="viewNotifModal" class="modal-overlay">
                <div class="modal-card" style="max-width: 800px; width: 95%;">
                    <div class="modal-header">
                        <div>
                            <h3 id="view_subject">Notification Detail</h3>
                            <small id="view_date" style="color: #86868B;"></small>
                        </div>
                        <button class="close-btn" onclick="closeViewModal()">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div id="email_content_container"
                            style="background: white; border: 1px solid var(--border); border-radius: 8px; padding: 20px; min-height: 300px; overflow-y: auto;">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn-secondary" onclick="closeViewModal()">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function viewNotification(data) {
        // Set Header Info
        document.getElementById('view_subject').innerText = data.subject;
        document.getElementById('view_date').innerText = "Sent on: " + data.date_time;

        // Inject the HTML body
        const container = document.getElementById('email_content_container');

        // We use innerHTML because you mentioned it's full HTML. 
        // If the HTML includes <html> or <body> tags, an iframe is safer.
        container.innerHTML = data.body;

        // Show Modal
        document.getElementById('viewNotifModal').style.display = 'flex';
        document.body.style.overflow = 'hidden'; // Prevent background scroll
    }

    function closeViewModal() {
        document.getElementById('viewNotifModal').style.display = 'none';
        document.body.style.overflow = 'auto';
        // Clear content for next use
        document.getElementById('email_content_container').innerHTML = '';
    }
</script>