@extends('layouts.app')

@section('content')
    <!-- Bootstrap Links -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- SweetAlert2 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        :root {
            --primary-color: #4839F5;
            --secondary-color: #6247FF;
            --accent-color: #FF6B5B;
            --text-color: #2D2D3F;
            --light-bg: #f8f9ff;
            --card-bg: #ffffff;
            --border-radius: 12px;
            --shadow: 0 4px 20px rgba(72, 57, 245, 0.1);
        }

        body {
            background-color: var(--light-bg);
            color: var(--text-color);
            font-family: 'Poppins', sans-serif;
        }

        .email-health-container {
            padding: 2rem 0;
        }

        .custom-card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 2rem;
            border: none;
        }

        .page-title {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        .record-card {
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .record-card:hover {
            transform: translateY(-5px);
        }

        .record-header {
            padding: 1rem;
            color: white;
            font-weight: 600;
        }

        .record-body pre {
            background: #f8f9ff;
            padding: 1rem;
            border-radius: 0.5rem;
            white-space: pre-wrap;
            word-wrap: break-word;
            margin: 0;
            font-size: 0.9rem;
        }

        .status-badge {
            font-size: 0.9rem;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-weight: 500;
        }

        .filter-card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        .form-control,
        .form-select {
            border-radius: var(--border-radius);
            padding: 0.75rem 1.25rem;
            border: 2px solid #e0e0ff;
            transition: all 0.3s ease;
            background-color: #f8f9ff;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(72, 57, 245, 0.25);
        }

        .form-label {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .table {
            border-collapse: separate;
            border-spacing: 0;
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .table-header {
            background-color: var(--primary-color);
            color: white;
        }

        .table thead th {
            border-bottom: none;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
        }

        .table tbody tr:hover {
            background-color: rgba(72, 57, 245, 0.05);
        }

        .pagination .page-link {
            color: var(--primary-color);
            border: 1px solid rgba(72, 57, 245, 0.1);
            margin: 0 4px;
            border-radius: var(--border-radius);
            transition: all 0.3s ease;
        }

        .pagination .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
            box-shadow: var(--shadow);
        }

        .pagination .page-item.disabled .page-link {
            opacity: 0.6;
            pointer-events: none;
        }

        .pagination .page-link:hover {
            background-color: var(--light-bg);
            border-color: var(--primary-color);
        }

        .empty-state {
            text-align: center;
            padding: 3rem 0;
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>

    <div class="email-health-container">
        <div class="container">
            <!-- Header Section -->
            <div class="row mb-4">
                <div class="col-12 d-flex justify-content-between align-items-center">
                    <h2 class="page-title"><i class="fas fa-envelope-open-text me-2"></i>Email Health Report</h2>
                    <a href="{{ route('monitors.index') }}" class="btn btn-primary">
                        <i class="fas fa-arrow-left me-2"></i>Back to Monitors
                    </a>
                </div>
            </div>

            <!-- Main Card -->
            <div class="custom-card">
                <h3 class="mb-4">Domain: {{ $monitor->domain_to_monitor }}</h3>
                <div class="alert {{ $monitor->email_health_status ? 'alert-success' : 'alert-danger' }} mb-5">
                    <h5 class="alert-heading">
                        <i class="fas {{ $monitor->email_health_status ? 'fa-check-circle' : 'fa-exclamation-circle' }} me-2"></i>
                        Overall Status: {{ $monitor->email_health_status ? 'Healthy' : 'Needs Attention' }}
                    </h5>
                </div>

                <!-- Records Section -->
                <div class="row mb-5">
                    <div class="col-md-4">
                        <div class="record-card">
                            <div class="record-header" style="background-color: #0dcaf0;">SPF Record</div>
                            <div class="record-body">
                                <pre>{{ $monitor->spf_record ?? 'Not Found' }}</pre>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="record-card">
                            <div class="record-header" style="background-color: #ffc107;">DKIM Record</div>
                            <div class="record-body">
                                <pre>{{ $monitor->dkim_record ?? 'Not Found' }}</pre>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="record-card">
                            <div class="record-header" style="background-color: #20c997;">DMARC Record</div>
                            <div class="record-body">
                                <pre>{{ $monitor->dmarc_record ?? 'Not Found' }}</pre>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Filter Section -->
                <div class="filter-card mb-4">
                    <div class="row align-items-end">
                        <div class="col-md-4">
                            <label for="statusFilter" class="form-label">
                                <i class="fas fa-filter me-2"></i>Filter by Status
                            </label>
                            <select id="statusFilter" class="form-select">
                                <option value="all">All Statuses</option>
                                <option value="healthy">Healthy</option>
                                <option value="issues">Issues</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="searchDate" class="form-label">
                                <i class="fas fa-search me-2"></i>Search by Date
                            </label>
                            <input type="text" id="searchDate" class="form-control" placeholder="e.g., Jan 01, 2023">
                        </div>
                    </div>
                </div>

                <!-- Configuration History Table -->
                <h4 class="mb-3">Configuration History</h4>
                <div class="table-responsive">
                    <table class="table table-hover" id="historyTable">
                        <thead class="table-header">
                            <tr>
                                <th class="text-center">#</th>
                                <th>Check Date</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">SPF</th>
                                <th class="text-center">DKIM</th>
                                <th class="text-center">DMARC</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($monitor->emailHealthHistories as $history)
                                <tr class="history-row" data-status="{{ $history->status ? 'healthy' : 'issues' }}">
                                    <td class="text-center"><span class="row-number"></span></td>
                                    <td>{{ $history->created_at->format('M d, Y H:i') }}</td>
                                    <td class="text-center">
                                        <span class="status-badge {{ $history->status ? 'bg-success' : 'bg-danger' }}">
                                            {{ $history->status ? 'Healthy' : 'Issues' }}
                                        </span>
                                    </td>
                                    <td class="text-center">{{ $history->spf_record ? '✅' : '❌' }}</td>
                                    <td class="text-center">{{ $history->dkim_record ? '✅' : '❌' }}</td>
                                    <td class="text-center">{{ $history->dmarc_record ? '✅' : '❌' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6">
                                        <div class="empty-state">
                                            <i class="fas fa-history fa-4x mb-3 text-muted pulse"></i>
                                            <h4>No history available yet</h4>
                                            <p class="text-muted">History will appear as checks are performed</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-center mt-4">
                    <ul class="pagination" id="pagination"></ul>
                </div>
            </div>
        </div>
    </div>

    <script>
(function(window, document, $) {
    var $j = jQuery.noConflict();

    document.addEventListener('DOMContentLoaded', function () {
        try {
            if (window.historyManagementInitialized) return;
            window.historyManagementInitialized = true;

            if (
                !$j('#searchDate').length ||
                !$j('.history-row').length ||
                !$j('#pagination').length ||
                !$j('#statusFilter').length
            ) {
                console.error("Missing required DOM elements for history management.");
                return;
            }

            let currentPage = 1;
            const rowsPerPage = 10;

            initializeTooltips();
            safeApplyFiltersAndPagination();

            function initializeTooltips() {
                try {
                    let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.map(function (tooltipTriggerEl) {
                        return new bootstrap.Tooltip(tooltipTriggerEl);
                    });
                } catch (e) {
                    console.error("Error initializing tooltips:", e);
                }
            }

            function safeApplyFiltersAndPagination() {
                try {
                    const statusFilter = $j('#statusFilter').val();
                    const searchDate = $j('#searchDate').val().toLowerCase();

                    let visibleRows = $j('.history-row').filter(function () {
                        const status = $j(this).data('status');
                        const date = $j(this).find('td:nth-child(2)').text().toLowerCase();

                        const matchesStatus = statusFilter === 'all' || status === statusFilter;
                        const matchesDate = searchDate === '' || date.includes(searchDate);

                        return matchesStatus && matchesDate;
                    });

                    let totalPages = Math.ceil(visibleRows.length / rowsPerPage);
                    let start = (currentPage - 1) * rowsPerPage;
                    let end = start + rowsPerPage;

                    $j('.history-row').hide();
                    visibleRows.slice(start, end).each(function(index) {
                        $j(this).show();
                        $j(this).find('.row-number').text(start + index + 1);
                    });

                    safeUpdatePagination(totalPages);
                    safeHandleEmptyState(visibleRows.length);
                } catch (e) {
                    console.error("Error applying history filters and pagination:", e);
                }
            }

            function safeUpdatePagination(totalPages) {
                try {
                    let pagination = $j('#pagination');
                    pagination.empty();

                    if (totalPages === 0) return;

                    pagination.append(`
                        <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                            <a class="page-link" href="#" data-page="${currentPage - 1}">Previous</a>
                        </li>
                    `);

                    // Calculate page range (current, previous, next)
                    let startPage = Math.max(1, currentPage - 1);
                    let endPage = Math.min(totalPages, currentPage + 1);

                    // Adjust if at the start or end
                    if (currentPage === 1 && totalPages >= 3) {
                        endPage = 3;
                    } else if (currentPage === totalPages && totalPages >= 3) {
                        startPage = totalPages - 2;
                    }

                    // Page numbers (limited to 3)
                    for (let i = startPage; i <= endPage; i++) {
                        pagination.append(`
                            <li class="page-item ${i === currentPage ? 'active' : ''}">
                                <a class="page-link" href="#" data-page="${i}">${i}</a>
                            </li>
                        `);
                    }

                    pagination.append(`
                        <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                            <a class="page-link" href="#" data-page="${currentPage + 1}">Next</a>
                        </li>
                    `);
                } catch (e) {
                    console.error("Error updating history pagination:", e);
                }
            }

            function safeHandleEmptyState(visibleCount) {
                try {
                    if (visibleCount === 0 && !$j('#no-results-row').length) {
                        $j('#historyTable tbody').append(`
                            <tr id="no-results-row">
                                <td colspan="6" class="text-center py-4">
                                    <i class="fas fa-search fa-2x mb-3 text-muted"></i>
                                    <p>No history matches your filter criteria</p>
                                </td>
                            </tr>
                        `);
                    } else if (visibleCount > 0) {
                        $j('#no-results-row').remove();
                    }
                } catch (e) {
                    console.error("Error handling empty state:", e);
                }
            }

            // Event Listeners
            $j('#statusFilter').on('change', function () {
                try {
                    currentPage = 1;
                    safeApplyFiltersAndPagination();
                } catch (e) {
                    console.error("Error handling status filter change:", e);
                }
            });

            $j('#searchDate').on('keyup', function () {
                try {
                    currentPage = 1;
                    safeApplyFiltersAndPagination();
                } catch (e) {
                    console.error("Error handling search date keyup:", e);
                }
            });

            $j(document).on('click', '.page-link', function (e) {
                try {
                    e.preventDefault();
                    let page = parseInt($j(this).data('page'));
                    if (!isNaN(page)) {
                        currentPage = page;
                        safeApplyFiltersAndPagination();
                    }
                } catch (e) {
                    console.error("Error handling page link click:", e);
                }
            });

            $j('.history-row').hover(
                function () {
                    try {
                        $j(this).addClass('bg-light');
                    } catch (e) {
                        console.error("Error handling row hover (in):", e);
                    }
                },
                function () {
                    try {
                        $j(this).removeClass('bg-light');
                    } catch (e) {
                        console.error("Error handling row hover (out):", e);
                    }
                }
            );

            // Initial load with fallback retry
            setTimeout(function () {
                try {
                    if ($j('.history-row').length > 0) {
                        safeApplyFiltersAndPagination();
                    } else {
                        console.warn("No .history-row elements found yet, retrying...");
                        setTimeout(() => safeApplyFiltersAndPagination(), 500);
                    }
                } catch (e) {
                    console.error("Error during initial load:", e);
                }
            }, 100);

        } catch (e) {
            console.error("Top-level history script error:", e);
        }
    });

})(window, document, jQuery);
    </script>
@endsection