<?php
/**
 * Track 404s Admin Dashboard Template
 * Modern design matching Switchboard design system
 *
 * @package Switchboard
 * @since 1.0.0
 */

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

<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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
            </svg>
            <div>
                <h1 class="sb-module-title">
                    <?php esc_html_e('Track 404s', 'wpswitchboard'); ?>
                    <span class="switchboard-badge">SWITCHBOARD</span>
                </h1>
                <p class="sb-module-subtitle"><?php esc_html_e('Monitor broken links and identify SEO issues by tracking 404 errors', 'wpswitchboard'); ?></p>
            </div>
        </div>
        <div class="sb-module-header-right" style="flex-wrap: nowrap;">
            <a href="https://docs.wpswitchboard.com/modules/utilities/track-404s" target="_blank" class="sb-module-help-link">
                <span class="sb-module-help-link-icon dashicons dashicons-editor-help"></span>
                Help
            </a>
            <div class="track-404s-filter-group">
                <button type="button" class="track-404s-filter-btn active" data-filter="pages_only">
                    <?php esc_html_e('Page 404s', 'wpswitchboard'); ?>
                </button>
                <button type="button" class="track-404s-filter-btn" data-filter="all">
                    <?php esc_html_e('All 404s', 'wpswitchboard'); ?>
                </button>
            </div>
            <input type="search" id="track-404s-search" class="sb-module-search-input" placeholder="<?php esc_attr_e('Search URLs or referrers...', 'wpswitchboard'); ?>" style="min-width: 250px;">
            <button type="button" id="track-404s-export" class="sb-module-button sb-module-button-secondary" style="white-space: nowrap;">
                <?php esc_html_e('Export CSV', 'wpswitchboard'); ?>
            </button>
            <button type="button" id="track-404s-delete-all" class="sb-module-button sb-module-button-danger" style="white-space: nowrap;">
                <?php esc_html_e('Clear All', 'wpswitchboard'); ?>
            </button>
        </div>
    </div>

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

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

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

            <div class="sb-module-stat-card">
                <div class="sb-module-stat-label"><?php esc_html_e('Top 404 Hits', 'wpswitchboard'); ?></div>
                <div class="sb-module-stat-content">
                    <div class="sb-module-stat-value" id="stat-top-hit-count">-</div>
                </div>
            </div>
        </div>

        <!-- Two Column Layout -->
        <div class="sb-module-layout-2col">
            <!-- Top 404s -->
            <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('Top 404 URLs', 'wpswitchboard'); ?></h2>
                        <p class="sb-module-card-desc"><?php esc_html_e('Most frequently accessed broken URLs', 'wpswitchboard'); ?></p>
                    </div>
                </div>
                <div class="sb-module-card-body" style="padding: 0;">
                    <div class="sb-module-table-wrapper">
                        <div id="top-404s-container">
                            <div class="sb-module-empty">
                                <div class="sb-module-empty-icon"></div>
                                <p class="sb-module-empty-desc"><?php esc_html_e('Loading top 404s...', 'wpswitchboard'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent 404s -->
            <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('Recent 404 Errors', 'wpswitchboard'); ?></h2>
                        <p class="sb-module-card-desc"><?php esc_html_e('Latest broken links detected', 'wpswitchboard'); ?></p>
                    </div>
                </div>
                <div class="sb-module-card-body" style="padding: 0;">
                    <div class="sb-module-table-wrapper">
                        <div id="recent-404s-container">
                            <div class="sb-module-empty">
                                <div class="sb-module-empty-icon"></div>
                                <p class="sb-module-empty-desc"><?php esc_html_e('Loading recent 404s...', 'wpswitchboard'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Full Data Table -->
        <div class="sb-module-card" style="margin-top: 24px;">
            <div class="sb-module-card-header">
                <div class="sb-module-card-header-left">
                    <h2 class="sb-module-card-title"><?php esc_html_e('All 404 Errors', 'wpswitchboard'); ?></h2>
                    <p class="sb-module-card-desc"><?php esc_html_e('Complete log of tracked 404 errors with search and sorting', 'wpswitchboard'); ?></p>
                </div>
            </div>
            <div class="sb-module-card-body" style="padding: 0;">
                <div class="sb-module-table-wrapper">
                    <table class="sb-module-table" id="track-404s-table">
                        <thead>
                            <tr>
                                <th class="sortable" data-column="url" style="width: 40%;">
                                    <?php esc_html_e('URL', 'wpswitchboard'); ?> <span class="sort-indicator"></span>
                                </th>
                                <th class="sortable" data-column="hit_count" style="width: 10%;">
                                    <?php esc_html_e('Hits', 'wpswitchboard'); ?> <span class="sort-indicator"></span>
                                </th>
                                <th class="sortable" data-column="first_seen" style="width: 15%;">
                                    <?php esc_html_e('First Seen', 'wpswitchboard'); ?> <span class="sort-indicator"></span>
                                </th>
                                <th class="sortable" data-column="last_seen" style="width: 15%;">
                                    <?php esc_html_e('Last Seen', 'wpswitchboard'); ?> <span class="sort-indicator"></span>
                                </th>
                                <th style="width: 15%;"><?php esc_html_e('Referrer', 'wpswitchboard'); ?></th>
                                <th style="width: 5%;"><?php esc_html_e('Actions', 'wpswitchboard'); ?></th>
                            </tr>
                        </thead>
                        <tbody id="track-404s-tbody">
                            <tr>
                                <td colspan="6" class="sb-module-empty">
                                    <div class="sb-module-empty-icon"></div>
                                    <p class="sb-module-empty-desc"><?php esc_html_e('Loading 404 logs...', 'wpswitchboard'); ?></p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="sb-module-card-footer">
                <span id="track-404s-page-info" style="color: #64748b; font-size: 14px; font-weight: 500; display: flex; align-items: center;">-</span>
                <div style="display: flex; gap: 8px; align-items: center;">
                    <button type="button" id="track-404s-prev" class="sb-module-button sb-module-button-secondary sb-module-button-sm" disabled>
                        <?php esc_html_e('Previous', 'wpswitchboard'); ?>
                    </button>
                    <button type="button" id="track-404s-next" class="sb-module-button sb-module-button-secondary sb-module-button-sm">
                        <?php esc_html_e('Next', 'wpswitchboard'); ?>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.track-404s-filter-group {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}
.track-404s-filter-btn {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    color: #64748b;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.2;
}
.track-404s-filter-btn:hover:not(.active) {
    background: #e2e8f0;
    color: #334155;
}
.track-404s-filter-btn.active {
    background: var(--primary-500) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
</style>
