<?php
/**
 * Hide My Login - Access Log Admin Page Template
 * Modern design matching Switchboard design system
 *
 * @package Switchboard
 * @since 1.0.0
 */

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

// Get settings for display
$settings = get_option('switchboard_hide-my-login_settings', []);
$custom_slug = isset($settings['custom_slug']) ? $settings['custom_slug'] : '';
?>

<div class="wrap sb-module-wrap">
    <!-- Header -->
    <div class="sb-module-header">
        <div class="sb-module-header-left">
            <svg class="sb-module-title-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
            </svg>
            <div>
                <h1 class="sb-module-title">
                    <?php esc_html_e('Hide My Login - Access Log', 'wpswitchboard'); ?>
                    <span class="switchboard-badge">SWITCHBOARD</span>
                </h1>
                <p class="sb-module-subtitle">
                    <?php if (!empty($custom_slug)): ?>
                        <?php printf(esc_html__('Custom login URL: %s', 'wpswitchboard'), '<code>' . esc_html(home_url($custom_slug . '/')) . '</code>'); ?>
                    <?php else: ?>
                        <?php esc_html_e('Monitor access attempts to your login page', 'wpswitchboard'); ?>
                    <?php endif; ?>
                </p>
            </div>
        </div>
        <div class="sb-module-header-right">
            <a href="<?php echo esc_url(admin_url('admin.php?page=switchboard&search=hide+my+login')); ?>" class="sb-module-button sb-module-button-secondary">
                <span class="dashicons dashicons-admin-generic"></span>
                <?php esc_html_e('Module Settings', 'wpswitchboard'); ?>
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="sb-module-stats">
        <div class="sb-module-stat-card">
            <div class="sb-module-stat-label"><?php esc_html_e('Total Attempts', 'wpswitchboard'); ?></div>
            <div class="sb-module-stat-content">
                <div class="sb-module-stat-value" id="stat-total">-</div>
            </div>
        </div>

        <div class="sb-module-stat-card">
            <div class="sb-module-stat-label"><?php esc_html_e('Blocked', 'wpswitchboard'); ?></div>
            <div class="sb-module-stat-content">
                <div class="sb-module-stat-value sb-stat-danger" id="stat-blocked">-</div>
            </div>
        </div>

        <div class="sb-module-stat-card">
            <div class="sb-module-stat-label"><?php esc_html_e('Allowed', 'wpswitchboard'); ?></div>
            <div class="sb-module-stat-content">
                <div class="sb-module-stat-value sb-stat-success" id="stat-allowed">-</div>
            </div>
        </div>

        <div class="sb-module-stat-card">
            <div class="sb-module-stat-label"><?php esc_html_e('Today', 'wpswitchboard'); ?></div>
            <div class="sb-module-stat-content">
                <div class="sb-module-stat-value" id="stat-today">-</div>
            </div>
        </div>
    </div>

    <!-- Main Layout: Sidebar + Content -->
    <div class="sb-module-layout">
        <!-- Sidebar: Filters -->
        <div class="sb-module-sidebar">
            <div class="sb-module-card">
                <div class="sb-module-card-header">
                    <div class="sb-module-card-header-left">
                        <h2 class="sb-module-card-title"><?php esc_html_e('Filters', 'wpswitchboard'); ?></h2>
                        <span id="active-filters-count" class="hml-filter-badge" style="display: none;">0</span>
                    </div>
                </div>
                <div class="sb-module-card-body">
                    <form id="hml-log-filters" class="hml-filters-form">
                        <!-- Search -->
                        <div class="sb-module-field">
                            <label><?php esc_html_e('Search', 'wpswitchboard'); ?></label>
                            <input type="text" id="filter-search" name="search" class="sb-module-search-input" placeholder="<?php esc_attr_e('IP, User Agent, URI...', 'wpswitchboard'); ?>">
                        </div>

                        <!-- Date Range -->
                        <div class="sb-module-field">
                            <label><?php esc_html_e('Date Range', 'wpswitchboard'); ?></label>
                            <select id="filter-date-preset" class="hml-select">
                                <option value="today"><?php esc_html_e('Today', 'wpswitchboard'); ?></option>
                                <option value="yesterday"><?php esc_html_e('Yesterday', 'wpswitchboard'); ?></option>
                                <option value="7days" selected><?php esc_html_e('Last 7 Days', 'wpswitchboard'); ?></option>
                                <option value="30days"><?php esc_html_e('Last 30 Days', 'wpswitchboard'); ?></option>
                                <option value="all"><?php esc_html_e('All Time', 'wpswitchboard'); ?></option>
                                <option value="custom"><?php esc_html_e('Custom Range', 'wpswitchboard'); ?></option>
                            </select>
                        </div>

                        <!-- Custom Date Range (hidden by default) -->
                        <div id="custom-date-range" class="hml-custom-dates" style="display: none;">
                            <div class="sb-module-field">
                                <label><?php esc_html_e('From', 'wpswitchboard'); ?></label>
                                <input type="date" id="filter-date-from" name="date_from" class="hml-input">
                            </div>
                            <div class="sb-module-field">
                                <label><?php esc_html_e('To', 'wpswitchboard'); ?></label>
                                <input type="date" id="filter-date-to" name="date_to" class="hml-input">
                            </div>
                        </div>

                        <!-- Type Filter -->
                        <div class="sb-module-field">
                            <label><?php esc_html_e('Status', 'wpswitchboard'); ?></label>
                            <select id="filter-type" name="type" class="hml-select">
                                <option value=""><?php esc_html_e('All', 'wpswitchboard'); ?></option>
                                <option value="blocked"><?php esc_html_e('Blocked Only', 'wpswitchboard'); ?></option>
                                <option value="allowed"><?php esc_html_e('Allowed Only', 'wpswitchboard'); ?></option>
                            </select>
                        </div>

                        <!-- IP Address Filter -->
                        <div class="sb-module-field">
                            <label><?php esc_html_e('IP Address', 'wpswitchboard'); ?></label>
                            <input type="text" id="filter-ip" name="ip" class="hml-input" placeholder="<?php esc_attr_e('e.g. 192.168.1.1', 'wpswitchboard'); ?>">
                        </div>

                        <!-- Filter Actions -->
                        <div class="sb-module-field" style="margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gray-200);">
                            <div class="sb-module-button-group" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                                <button type="button" id="apply-filters" class="sb-module-button sb-module-button-primary">
                                    <?php esc_html_e('Apply', 'wpswitchboard'); ?>
                                </button>
                                <button type="button" id="clear-filters" class="sb-module-button">
                                    <?php esc_html_e('Clear', 'wpswitchboard'); ?>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Actions Card -->
            <div class="sb-module-card" style="margin-top: 20px;">
                <div class="sb-module-card-header">
                    <div class="sb-module-card-header-left">
                        <h2 class="sb-module-card-title"><?php esc_html_e('Actions', 'wpswitchboard'); ?></h2>
                    </div>
                </div>
                <div class="sb-module-card-body">
                    <div style="display: flex; flex-direction: column; gap: 10px;">
                        <button type="button" id="export-csv" class="hml-action-btn hml-action-btn-primary">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                            <span><?php esc_html_e('Export to CSV', 'wpswitchboard'); ?></span>
                        </button>
                        <button type="button" id="refresh-logs" class="hml-action-btn">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
                            <span><?php esc_html_e('Refresh Data', 'wpswitchboard'); ?></span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Top Blocked IPs Card -->
            <div class="sb-module-card" style="margin-top: 20px;">
                <div class="sb-module-card-header">
                    <div class="sb-module-card-header-left">
                        <h2 class="sb-module-card-title"><?php esc_html_e('Top Blocked IPs', 'wpswitchboard'); ?></h2>
                    </div>
                </div>
                <div class="sb-module-card-body" id="top-ips-container">
                    <p class="hml-loading"><?php esc_html_e('Loading...', 'wpswitchboard'); ?></p>
                </div>
            </div>

            <!-- Danger Zone Card -->
            <div class="sb-module-card hml-danger-card" style="margin-top: 20px;">
                <div class="sb-module-card-header" style="background: #fef2f2; border-bottom-color: #fecaca;">
                    <div class="sb-module-card-header-left">
                        <h2 class="sb-module-card-title" style="color: #dc2626;"><?php esc_html_e('Danger Zone', 'wpswitchboard'); ?></h2>
                    </div>
                </div>
                <div class="sb-module-card-body">
                    <p style="font-size: 13px; color: var(--gray-500); margin: 0 0 12px 0;">
                        <?php esc_html_e('Permanently delete all access logs. This cannot be undone.', 'wpswitchboard'); ?>
                    </p>
                    <button type="button" id="delete-all-logs" class="hml-action-btn hml-action-btn-danger">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                        <span><?php esc_html_e('Delete All Logs', 'wpswitchboard'); ?></span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Main Content: Results Table -->
        <div class="sb-module-main">
            <div class="sb-module-card">
                <div class="sb-module-card-header">
                    <div class="sb-module-card-header-left">
                        <h2 class="sb-module-card-title"><?php esc_html_e('Access Log', 'wpswitchboard'); ?></h2>
                        <p class="sb-module-card-desc" id="results-summary"><?php esc_html_e('Loading...', 'wpswitchboard'); ?></p>
                    </div>
                    <div class="sb-module-card-header-right">
                        <div class="hml-bulk-actions" id="bulk-actions" style="display: none;">
                            <span class="hml-selected-count">
                                <span id="selected-count">0</span> <?php esc_html_e('selected', 'wpswitchboard'); ?>
                            </span>
                            <button type="button" id="delete-selected" class="sb-module-button sb-module-button-danger sb-module-button-sm">
                                <span class="dashicons dashicons-trash"></span>
                                <?php esc_html_e('Delete', 'wpswitchboard'); ?>
                            </button>
                        </div>
                        <div class="hml-per-page">
                            <label for="per-page"><?php esc_html_e('Show:', 'wpswitchboard'); ?></label>
                            <select id="per-page" class="hml-select hml-select-sm">
                                <option value="25">25</option>
                                <option value="50" selected>50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="sb-module-card-body" style="padding: 0;">
                    <div class="sb-module-table-wrapper">
                        <table class="sb-module-table hml-table" id="hml-log-table">
                            <thead>
                                <tr>
                                    <th style="width: 40px;">
                                        <input type="checkbox" id="select-all" class="hml-checkbox">
                                    </th>
                                    <th style="width: 160px;"><?php esc_html_e('Date & Time', 'wpswitchboard'); ?></th>
                                    <th style="width: 130px;"><?php esc_html_e('IP Address', 'wpswitchboard'); ?></th>
                                    <th style="width: 100px;"><?php esc_html_e('Type', 'wpswitchboard'); ?></th>
                                    <th style="width: 90px;"><?php esc_html_e('Status', 'wpswitchboard'); ?></th>
                                    <th><?php esc_html_e('Details', 'wpswitchboard'); ?></th>
                                    <th style="width: 60px;"></th>
                                </tr>
                            </thead>
                            <tbody id="hml-log-tbody">
                                <tr>
                                    <td colspan="7" class="sb-module-empty" style="padding: 60px 20px;">
                                        <div class="sb-module-empty-icon dashicons dashicons-update" style="font-size: 48px; width: 48px; height: 48px; animation: spin 1s linear infinite;"></div>
                                        <p class="sb-module-empty-desc"><?php esc_html_e('Loading access logs...', 'wpswitchboard'); ?></p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="sb-module-card-footer">
                    <span id="page-info" style="color: var(--gray-500); font-size: 14px; font-weight: 500;">-</span>
                    <div style="display: flex; gap: 8px; align-items: center;">
                        <button type="button" id="page-first" class="sb-module-button sb-module-button-secondary sb-module-button-sm" disabled title="<?php esc_attr_e('First Page', 'wpswitchboard'); ?>">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>
                        </button>
                        <button type="button" id="page-prev" class="sb-module-button sb-module-button-secondary sb-module-button-sm" disabled>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
                            <?php esc_html_e('Previous', 'wpswitchboard'); ?>
                        </button>
                        <button type="button" id="page-next" class="sb-module-button sb-module-button-secondary sb-module-button-sm">
                            <?php esc_html_e('Next', 'wpswitchboard'); ?>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
                        </button>
                        <button type="button" id="page-last" class="sb-module-button sb-module-button-secondary sb-module-button-sm" title="<?php esc_attr_e('Last Page', 'wpswitchboard'); ?>">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- User Agent Modal -->
<div id="user-agent-modal" class="hml-modal" style="display: none;">
    <div class="hml-modal-overlay"></div>
    <div class="hml-modal-content">
        <div class="hml-modal-header">
            <h3><?php esc_html_e('Request Details', 'wpswitchboard'); ?></h3>
            <button type="button" class="hml-modal-close">&times;</button>
        </div>
        <div class="hml-modal-body">
            <div class="hml-detail-row">
                <label><?php esc_html_e('Request URI:', 'wpswitchboard'); ?></label>
                <code id="modal-request-uri"></code>
            </div>
            <div class="hml-detail-row">
                <label><?php esc_html_e('User Agent:', 'wpswitchboard'); ?></label>
                <pre id="modal-user-agent" class="hml-user-agent-text"></pre>
            </div>
            <div class="hml-detail-row" id="modal-reason-row" style="display: none;">
                <label><?php esc_html_e('Block Reason:', 'wpswitchboard'); ?></label>
                <span id="modal-block-reason" class="hml-badge hml-badge-danger"></span>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="delete-modal" class="hml-modal" style="display: none;">
    <div class="hml-modal-overlay"></div>
    <div class="hml-modal-content">
        <div class="hml-modal-header">
            <h3><?php esc_html_e('Confirm Delete', 'wpswitchboard'); ?></h3>
            <button type="button" class="hml-modal-close">&times;</button>
        </div>
        <div class="hml-modal-body">
            <p id="delete-message"><?php esc_html_e('Are you sure you want to delete the selected entries? This action cannot be undone.', 'wpswitchboard'); ?></p>
        </div>
        <div class="hml-modal-footer">
            <button type="button" class="sb-module-button hml-modal-cancel"><?php esc_html_e('Cancel', 'wpswitchboard'); ?></button>
            <button type="button" id="confirm-delete" class="sb-module-button sb-module-button-danger"><?php esc_html_e('Delete', 'wpswitchboard'); ?></button>
        </div>
    </div>
</div>

<style>
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
</style>
