<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microsoft Graph Traditional Sync Results</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header {
            border-bottom: 2px solid #0066cc;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        .header h1 {
            color: #0066cc;
            margin: 0;
            font-size: 28px;
        }
        .timestamp {
            color: #666;
            font-size: 14px;
            margin-top: 5px;
        }
        .status-card {
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 5px solid;
        }
        .status-success {
            background-color: #d4edda;
            border-left-color: #28a745;
            color: #155724;
        }
        .status-error {
            background-color: #f8d7da;
            border-left-color: #dc3545;
            color: #721c24;
        }
        .status-warning {
            background-color: #fff3cd;
            border-left-color: #ffc107;
            color: #856404;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .stat-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            border: 1px solid #dee2e6;
        }
        .stat-title {
            font-size: 12px;
            color: #6c757d;
            text-transform: uppercase;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #495057;
        }
        .section {
            margin-bottom: 30px;
        }
        .section h2 {
            color: #495057;
            font-size: 20px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dee2e6;
        }
        .results-box {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .results-box pre {
            margin: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .logs-container {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            background-color: #f8f9fa;
        }
        .log-entry {
            padding: 8px 15px;
            border-bottom: 1px solid #e9ecef;
            font-family: 'Courier New', monospace;
            font-size: 13px;
        }
        .log-entry:last-child {
            border-bottom: none;
        }
        .log-level-info {
            background-color: #e3f2fd;
            color: #1565c0;
        }
        .log-level-warning {
            background-color: #fff8e1;
            color: #ef6c00;
        }
        .log-level-error {
            background-color: #ffebee;
            color: #c62828;
        }
        .log-level-debug {
            background-color: #f3e5f5;
            color: #7b1fa2;
        }
        .actions {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #dee2e6;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s;
            text-decoration: none;
            display: inline-block;
        }
        .btn-primary {
            background-color: #0066cc;
            color: white;
        }
        .btn-primary:hover {
            background-color: #0052a3;
        }
        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }
        .btn-secondary:hover {
            background-color: #545b62;
        }
        .btn-success {
            background-color: #28a745;
            color: white;
        }
        .btn-success:hover {
            background-color: #218838;
        }
        .error-details {
            background-color: #fff5f5;
            border: 1px solid #f5c6cb;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .error-message {
            font-weight: bold;
            color: #721c24;
            margin-bottom: 10px;
        }
        .error-location {
            font-size: 12px;
            color: #856404;
            margin-bottom: 10px;
        }
        .error-trace {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            font-family: 'Courier New', monospace;
            font-size: 11px;
            overflow-x: auto;
            white-space: pre;
        }
        .dry-run-badge {
            background-color: #17a2b8;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            margin-left: 10px;
        }
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .table th,
        .table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #dee2e6;
        }
        .table th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #495057;
        }
        .table tbody tr:hover {
            background-color: #f5f5f5;
        }
        .badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .badge-success {
            background-color: #d4edda;
            color: #155724;
        }
        .badge-warning {
            background-color: #fff3cd;
            color: #856404;
        }
        .badge-danger {
            background-color: #f8d7da;
            color: #721c24;
        }
        .collapsible {
            cursor: pointer;
            padding: 10px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            margin-bottom: 10px;
            transition: background-color 0.2s;
        }
        .collapsible:hover {
            background-color: #e9ecef;
        }
        .collapsible-content {
            display: none;
            padding: 15px;
            border: 1px solid #dee2e6;
            border-top: none;
            border-radius: 0 0 6px 6px;
            background-color: #ffffff;
        }
        .collapsible.active + .collapsible-content {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Microsoft Graph Traditional Sync Results</h1>
            <div class="timestamp">
                Executed at: {{ $timestamp }}
                @if(isset($results['dry_run']) && $results['dry_run'])
                    <span class="dry-run-badge">DRY RUN MODE</span>
                @endif
            </div>
        </div>

        <!-- Overall Status -->
        <div class="status-card {{ $results['success'] ? 'status-success' : 'status-error' }}">
            <h3>
                @if($results['success'])
                    ✅ Sync Completed Successfully
                @else
                    ❌ Sync Failed
                @endif
            </h3>
            <p><strong>Operation:</strong> {{ ucfirst(str_replace('_', ' ', $results['operation'] ?? 'unknown')) }}</p>
            <p><strong>Duration:</strong> {{ $results['duration'] ?? 'unknown' }} seconds</p>
            <p><strong>Triggered by:</strong> {{ $results['triggered_by'] ?? 'Unknown' }}</p>
            @if(isset($results['extra_options']) && !empty($results['extra_options']))
                <p><strong>Extra Options:</strong> {{ implode(', ', $results['extra_options']) }}</p>
            @endif
        </div>

        @if(!$results['success'] && isset($results['error']))
            <!-- Error Information -->
            <div class="section">
                <h2>❌ Error Details</h2>
                <div class="error-details">
                    <div class="error-message">{{ $results['error'] }}</div>
                </div>
            </div>
        @endif

        @if(isset($errors) && !empty($errors))
            <!-- Detailed Error Information -->
            <div class="section">
                <h2>🔍 Detailed Error Information</h2>
                @foreach($errors as $error)
                    <div class="error-details">
                        <div class="error-message">{{ $error['message'] }}</div>
                        @if(isset($error['file']) && isset($error['line']))
                            <div class="error-location">
                                <strong>Location:</strong> {{ basename($error['file']) }}:{{ $error['line'] }}
                            </div>
                        @endif
                        @if(isset($error['trace']))
                            <div class="collapsible" onclick="toggleCollapsible(this)">
                                🔧 Show Stack Trace
                            </div>
                            <div class="collapsible-content">
                                <div class="error-trace">{{ $error['trace'] }}</div>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif

        @if(isset($results['sync_results']) && $results['success'])
            <!-- Sync Results -->
            <div class="section">
                <h2>📊 Sync Results</h2>
                <div class="results-box">
                    <pre>{{ json_encode($results['sync_results'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                </div>

                @if(is_array($results['sync_results']))
                    <!-- Summary Statistics -->
                    @php
                        $syncData = $results['sync_results'];
                        $stats = [];

                        // Extract common statistics from sync results
                        if (isset($syncData['folders_processed'])) {
                            $stats['Folders Processed'] = $syncData['folders_processed'];
                        }
                        if (isset($syncData['contacts_processed'])) {
                            $stats['Contacts Processed'] = $syncData['contacts_processed'];
                        }
                        if (isset($syncData['folders_created'])) {
                            $stats['Folders Created'] = $syncData['folders_created'];
                        }
                        if (isset($syncData['contacts_created'])) {
                            $stats['Contacts Created'] = $syncData['contacts_created'];
                        }
                        if (isset($syncData['folders_updated'])) {
                            $stats['Folders Updated'] = $syncData['folders_updated'];
                        }
                        if (isset($syncData['contacts_updated'])) {
                            $stats['Contacts Updated'] = $syncData['contacts_updated'];
                        }
                        if (isset($syncData['folders_deleted'])) {
                            $stats['Folders Deleted'] = $syncData['folders_deleted'];
                        }
                        if (isset($syncData['contacts_deleted'])) {
                            $stats['Contacts Deleted'] = $syncData['contacts_deleted'];
                        }
                        if (isset($syncData['api_calls'])) {
                            $stats['API Calls Made'] = $syncData['api_calls'];
                        }
                        if (isset($syncData['errors'])) {
                            $stats['Errors Encountered'] = is_array($syncData['errors']) ? count($syncData['errors']) : $syncData['errors'];
                        }
                    @endphp

                    @if(!empty($stats))
                        <div class="stats-grid">
                            @foreach($stats as $label => $value)
                                <div class="stat-card">
                                    <div class="stat-title">{{ $label }}</div>
                                    <div class="stat-value">{{ $value }}</div>
                                </div>
                            @endforeach
                        </div>
                    @endif

                    <!-- Special handling for folder listings -->
                    @if(isset($syncData['folders']) && is_array($syncData['folders']))
                        <div class="section">
                            <h3>📁 Contact Folders</h3>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>ID</th>
                                        @if(isset($syncData['folders'][0]['contact_count']))
                                            <th>Contact Count</th>
                                        @endif
                                        @if(isset($syncData['folders'][0]['parent_folder_id']))
                                            <th>Parent Folder</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($syncData['folders'] as $folder)
                                        <tr>
                                            <td>{{ $folder['display_name'] ?? $folder['name'] ?? 'Unknown' }}</td>
                                            <td><code>{{ $folder['id'] ?? 'Unknown' }}</code></td>
                                            @if(isset($folder['contact_count']))
                                                <td>{{ $folder['contact_count'] }}</td>
                                            @endif
                                            @if(isset($folder['parent_folder_id']))
                                                <td><code>{{ $folder['parent_folder_id'] ?? 'Root' }}</code></td>
                                            @endif
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif

                    <!-- Special handling for contact listings -->
                    @if(isset($syncData['contacts']) && is_array($syncData['contacts']))
                        <div class="section">
                            <h3>👥 Contacts</h3>
                            <div class="collapsible" onclick="toggleCollapsible(this)">
                                📋 Show Contact Details ({{ count($syncData['contacts']) }} contacts)
                            </div>
                            <div class="collapsible-content">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Display Name</th>
                                            <th>Email</th>
                                            <th>ID</th>
                                            @if(isset($syncData['contacts'][0]['folder_name']))
                                                <th>Folder</th>
                                            @endif
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($syncData['contacts'] as $contact)
                                            <tr>
                                                <td>{{ $contact['display_name'] ?? $contact['displayName'] ?? 'Unknown' }}</td>
                                                <td>{{ $contact['email'] ?? $contact['emailAddresses'][0]['address'] ?? 'No email' }}</td>
                                                <td><code>{{ $contact['id'] ?? 'Unknown' }}</code></td>
                                                @if(isset($contact['folder_name']))
                                                    <td>{{ $contact['folder_name'] }}</td>
                                                @endif
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endif

                    <!-- Test folder creation results -->
                    @if(isset($syncData['folder_id']) && $results['operation'] === 'test_contact_folder')
                        <div class="section">
                            <h3>🧪 Test Folder Results</h3>
                            <table class="table">
                                <tr>
                                    <th>Created Folder ID</th>
                                    <td><code>{{ $syncData['folder_id'] }}</code></td>
                                </tr>
                                @if(isset($syncData['folder_name']))
                                    <tr>
                                        <th>Folder Name</th>
                                        <td>{{ $syncData['folder_name'] }}</td>
                                    </tr>
                                @endif
                                @if(isset($syncData['auto_deleted']))
                                    <tr>
                                        <th>Auto-Deletion</th>
                                        <td>
                                            @if($syncData['auto_deleted'])
                                                <span class="badge badge-success">✅ Success</span>
                                            @else
                                                <span class="badge badge-danger">❌ Failed</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endif
                                @if(isset($syncData['delete_message']))
                                    <tr>
                                        <th>Delete Message</th>
                                        <td>{{ $syncData['delete_message'] }}</td>
                                    </tr>
                                @endif
                            </table>
                        </div>
                    @endif
                @endif
            </div>
        @endif

        @if(isset($logs) && !empty($logs))
            <!-- Log Entries -->
            <div class="section">
                <h2>📋 Recent Log Entries</h2>
                <div class="logs-container">
                    @foreach($logs as $log)
                        <div class="log-entry log-level-{{ strtolower($log['level'] ?? 'info') }}">
                            <strong>[{{ $log['timestamp'] ?? 'Unknown' }}]</strong>
                            <strong>{{ strtoupper($log['level'] ?? 'INFO') }}:</strong>
                            {{ $log['message'] ?? 'No message' }}
                            @if(isset($log['context']) && !empty($log['context']))
                                <br><small>Context: {{ json_encode($log['context']) }}</small>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- Actions -->
        <div class="actions">
            <a href="{{ route('admin.msgraph-sync.trigger') }}" class="btn btn-primary">
                🔄 Run Another Sync
            </a>
            <a href="{{ route('admin.smart-sync.trigger') }}" class="btn btn-secondary">
                ⚡ Smart Sync Interface
            </a>
            <a href="{{ route('admin.smart-sync.status') }}" class="btn btn-success">
                📊 Smart Sync Status
            </a>
            <button onclick="window.location.reload()" class="btn btn-secondary">
                🔄 Refresh Results
            </button>
        </div>
    </div>

    <script>
        function toggleCollapsible(element) {
            element.classList.toggle('active');
        }

        // Auto-scroll to bottom of logs on page load
        document.addEventListener('DOMContentLoaded', function() {
            const logsContainer = document.querySelector('.logs-container');
            if (logsContainer) {
                logsContainer.scrollTop = logsContainer.scrollHeight;
            }
        });
    </script>
</body>
</html>
