@extends('layouts.error')

@section('title', 'Server Error')

@section('content')
<div class="error-card">
    <div class="error-code text-danger">500</div>
    <h1 class="error-title">Internal Server Error</h1>
    <p class="error-description">
        We're experiencing some technical difficulties on our end. 
        Our team has been notified and is working to fix the issue.
    </p>
    
    <div class="error-actions">
        @auth
        <a class="btn btn-primary" href="{{ url('/dashboard') }}">
            <i class="fas fa-home"></i>
            Go to Dashboard
        </a>
        <button type="button" class="btn btn-falcon-default" onclick="window.location.reload()">
            <i class="fas fa-sync-alt"></i>
            Try Again
        </button>
        <button type="button" class="btn btn-info" id="showErrorDetailsBtn">
            <i class="fas fa-bug"></i>
            View Error Details
        </button>
        @else
        <a class="btn btn-primary" href="{{ route('login') }}">
            <i class="fas fa-sign-in-alt"></i>
            Sign In
        </a>
        <a class="btn btn-falcon-default" href="{{ url('/') }}">
            <i class="fas fa-home"></i>
            Go to Home
        </a>
        @endauth
    </div>
    
    @auth
    <!-- Error Details Section (Initially Hidden) -->
    <div id="errorDetailsSection" style="display: none;" class="mt-4">
        <div class="error-details">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Error Details</h5>
                <div>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="copyErrorBtn">
                        <i class="fas fa-copy"></i>
                        Copy
                    </button>
                    <button type="button" class="btn btn-sm btn-success" id="emailErrorBtn">
                        <i class="fas fa-envelope"></i>
                        Email Admin
                    </button>
                </div>
            </div>
            <div id="errorDetailsContent" class="error-details-content">
                <div class="text-center py-3">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2 mb-0 small">Loading error details...</p>
                </div>
            </div>
        </div>
    </div>
    @endauth
    
    <div class="error-tip">
        <i class="fas fa-exclamation-triangle text-danger"></i>
        If this problem persists, please contact support with details about what you were doing when the error occurred.
    </div>
</div>
@endsection

@auth
@push('scripts')
<script>
let errorData = null;

// Show error details
document.getElementById('showErrorDetailsBtn')?.addEventListener('click', function() {
    const section = document.getElementById('errorDetailsSection');
    const btn = this;
    
    if (section.style.display === 'none') {
        section.style.display = 'block';
        btn.innerHTML = '<i class="fas fa-eye-slash"></i> Hide Error Details';
        
        // Load error details if not already loaded
        if (errorData === null) {
            loadErrorDetails();
        }
    } else {
        section.style.display = 'none';
        btn.innerHTML = '<i class="fas fa-bug"></i> View Error Details';
    }
});

// Load error details from Laravel log
async function loadErrorDetails() {
    const contentDiv = document.getElementById('errorDetailsContent');
    
    try {
        const response = await fetch('{{ route('error.log.latest') }}', {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });
        
        const data = await response.json();
        
        if (data.success && data.error) {
            errorData = data.error;
            
            let errorText = `Error Message:\n${errorData.message}\n\n`;
            errorText += `Timestamp: ${errorData.timestamp}\n`;
            errorText += `Level: ${errorData.level}\n\n`;
            
            if (errorData.details) {
                errorText += `Details:\n${errorData.details}\n\n`;
            }
            
            if (errorData.trace && errorData.trace.length > 0) {
                errorText += `Stack Trace:\n${errorData.trace.join('\n')}`;
            }
            
            contentDiv.textContent = errorText;
        } else {
            contentDiv.textContent = 'No error details available in the log file.';
        }
    } catch (error) {
        contentDiv.textContent = 'Failed to load error details: ' + error.message;
    }
}

// Copy error to clipboard
document.getElementById('copyErrorBtn')?.addEventListener('click', async function() {
    const content = document.getElementById('errorDetailsContent').textContent;
    
    try {
        await navigator.clipboard.writeText(content);
        
        Swal.fire({
            icon: 'success',
            title: 'Copied!',
            text: 'Error details copied to clipboard',
            timer: 2000,
            showConfirmButton: false
        });
    } catch (error) {
        // Fallback for older browsers
        const textarea = document.createElement('textarea');
        textarea.value = content;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        
        Swal.fire({
            icon: 'success',
            title: 'Copied!',
            text: 'Error details copied to clipboard',
            timer: 2000,
            showConfirmButton: false
        });
    }
});

// Email error to admin with password confirmation
document.getElementById('emailErrorBtn')?.addEventListener('click', async function() {
    if (!errorData) {
        Swal.fire({
            icon: 'warning',
            title: 'No Error Data',
            text: 'Please wait for error details to load first'
        });
        return;
    }
    
    // Ask for password confirmation
    const { value: password } = await Swal.fire({
        title: 'Confirm Your Password',
        html: '<p class="text-muted mb-3">For security, please confirm your password before sending the error report to the administrator.</p>',
        input: 'password',
        inputLabel: 'Password',
        inputPlaceholder: 'Enter your password',
        inputAttributes: {
            autocapitalize: 'off',
            autocorrect: 'off'
        },
        showCancelButton: true,
        confirmButtonText: 'Send Report',
        cancelButtonText: 'Cancel',
        inputValidator: (value) => {
            if (!value) {
                return 'Password is required';
            }
        }
    });
    
    if (!password) {
        return; // User cancelled
    }
    
    // Show loading
    Swal.fire({
        title: 'Sending Error Report...',
        html: 'Please wait while we send the error details to the administrator.',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    try {
        // Prepare error details
        let errorDetails = '';
        if (errorData.details) {
            errorDetails += errorData.details + '\n\n';
        }
        if (errorData.trace && errorData.trace.length > 0) {
            errorDetails += errorData.trace.join('\n');
        }
        
        const response = await fetch('{{ route('error.log.email') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                password: password,
                error_message: errorData.message,
                error_details: errorDetails,
                url: window.location.href,
                user_agent: navigator.userAgent
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'Report Sent!',
                text: data.message || 'The error report has been sent to the system administrator.',
                confirmButtonText: 'OK'
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Failed to Send',
                text: data.message || 'Failed to send error report. Please try again.',
                confirmButtonText: 'OK'
            });
        }
    } catch (error) {
        Swal.fire({
            icon: 'error',
            title: 'Network Error',
            text: 'Failed to send error report: ' + error.message,
            confirmButtonText: 'OK'
        });
    }
});
</script>
@endpush
@endauth