@extends('layouts.app')

@section('title', 'Secure Webmail - ' . $account->email)

@section('styles')
<style>
    .email-container {
        height: calc(100vh - 250px);
        min-height: 500px;
    }
    .email-sidebar {
        border-right: 1px solid #dee2e6;
        height: 100%;
        overflow-y: auto;
    }
    .email-content {
        height: 100%;
        overflow-y: auto;
    }
    .email-item {
        border-left: 3px solid transparent;
        transition: all 0.2s;
        cursor: pointer;
    }
    .email-item:hover {
        background-color: #f8f9fa;
        border-left-color: #3490dc;
    }
    .email-item.active {
        background-color: #e9ecef;
        border-left-color: #3490dc;
    }
    .email-item.unread {
        font-weight: bold;
    }
    .security-badge {
        font-size: 0.7rem;
    }
    .compose-btn {
        width: 100%;
        margin-bottom: 15px;
    }
    .security-info {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 10px;
        background-color: #f8f9fa;
        border-top: 1px solid #dee2e6;
        font-size: 0.8rem;
    }
    .security-stat {
        display: inline-block;
        margin-right: 15px;
    }
    .email-view-header {
        padding: 15px;
        border-bottom: 1px solid #dee2e6;
    }
    .email-view-body {
        padding: 20px;
    }
    .email-view-attachments {
        padding: 10px 20px;
        background-color: #f8f9fa;
        border-top: 1px solid #dee2e6;
    }
    .attachment-item {
        display: inline-block;
        padding: 5px 10px;
        margin: 5px;
        background-color: #e9ecef;
        border-radius: 3px;
    }
    .compose-form {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .compose-body {
        flex-grow: 1;
    }
    .compose-actions {
        padding: 10px 0;
        border-top: 1px solid #dee2e6;
    }
</style>
@endsection

@section('content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-lock mr-2"></i> Secure Webmail - {{ $account->email }}
                    </h4>
                    <div>
                        <span class="badge badge-light mr-2">
                            <i class="fas fa-shield-alt"></i> End-to-End Encrypted
                        </span>
                        <form action="{{ route('email.webmail.end-session') }}" method="POST" class="d-inline">
                            @csrf
                            <input type="hidden" name="token" value="{{ $token }}">
                            <button type="submit" class="btn btn-sm btn-light">
                                <i class="fas fa-sign-out-alt"></i> End Session
                            </button>
                        </form>
                    </div>
                </div>

                <div class="card-body p-0">
                    <div class="email-container">
                        <div class="row h-100 m-0">
                            <!-- Email Sidebar -->
                            <div class="col-md-3 p-0 email-sidebar">
                                <div class="p-3">
                                    <button id="compose-btn" class="btn btn-primary compose-btn">
                                        <i class="fas fa-pen"></i> Compose New Email
                                    </button>
                                    
                                    <div class="list-group">
                                        <a href="#" class="list-group-item list-group-item-action active">
                                            <i class="fas fa-inbox"></i> Inbox
                                        </a>
                                        <a href="#" class="list-group-item list-group-item-action">
                                            <i class="fas fa-paper-plane"></i> Sent
                                        </a>
                                        <a href="#" class="list-group-item list-group-item-action">
                                            <i class="fas fa-file-alt"></i> Drafts
                                        </a>
                                        <a href="#" class="list-group-item list-group-item-action">
                                            <i class="fas fa-trash"></i> Trash
                                        </a>
                                    </div>
                                </div>
                                
                                <div class="p-3">
                                    <h6>Emails</h6>
                                    <div id="email-list">
                                        <!-- Sample emails for demonstration -->
                                        <div class="email-item p-2 mb-2 unread">
                                            <div class="d-flex justify-content-between">
                                                <strong>John Smith</strong>
                                                <small>10:45 AM</small>
                                            </div>
                                            <div class="text-truncate">Meeting tomorrow at 9 AM</div>
                                            <div>
                                                <span class="badge badge-success security-badge">
                                                    <i class="fas fa-shield-alt"></i> Secure
                                                </span>
                                            </div>
                                        </div>
                                        
                                        <div class="email-item p-2 mb-2">
                                            <div class="d-flex justify-content-between">
                                                <strong>Sarah Johnson</strong>
                                                <small>Yesterday</small>
                                            </div>
                                            <div class="text-truncate">Project update: Phase 1 complete</div>
                                            <div>
                                                <span class="badge badge-success security-badge">
                                                    <i class="fas fa-shield-alt"></i> Secure
                                                </span>
                                            </div>
                                        </div>
                                        
                                        <div class="email-item p-2 mb-2">
                                            <div class="d-flex justify-content-between">
                                                <strong>Tech Support</strong>
                                                <small>Jul 15</small>
                                            </div>
                                            <div class="text-truncate">Your support ticket #45678 has been resolved</div>
                                            <div>
                                                <span class="badge badge-success security-badge">
                                                    <i class="fas fa-shield-alt"></i> Secure
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="security-info">
                                    <div class="security-stat">
                                        <i class="fas fa-shield-alt text-success"></i> 
                                        <span id="phishing-count">{{ $security['phishing_detected'] }}</span> phishing attempts blocked
                                    </div>
                                    <div class="security-stat">
                                        <i class="fas fa-virus-slash text-success"></i> 
                                        <span id="malware-count">{{ $security['malware_blocked'] }}</span> malware blocked
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Email Content -->
                            <div class="col-md-9 p-0 email-content">
                                <!-- Default view - empty state -->
                                <div id="empty-state" class="h-100 d-flex flex-column justify-content-center align-items-center">
                                    <i class="fas fa-envelope fa-4x text-muted mb-3"></i>
                                    <h4>Select an email to view</h4>
                                    <p class="text-muted">Or click compose to create a new email</p>
                                </div>
                                
                                <!-- Email view -->
                                <div id="email-view" class="h-100" style="display: none;">
                                    <div class="email-view-header">
                                        <h5 id="email-subject">Meeting tomorrow at 9 AM</h5>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                From: <strong id="email-from">John Smith &lt;john@example.com&gt;</strong>
                                            </div>
                                            <div>
                                                <span id="email-date">July 20, 2023 10:45 AM</span>
                                            </div>
                                        </div>
                                        <div>
                                            To: <span id="email-to">{{ $account->email }}</span>
                                        </div>
                                    </div>
                                    
                                    <div class="email-view-body" id="email-body">
                                        <p>Hello,</p>
                                        <p>I'd like to schedule a meeting tomorrow at 9 AM to discuss the project progress.</p>
                                        <p>Please let me know if this works for you.</p>
                                        <p>Best regards,<br>John</p>
                                    </div>
                                    
                                    <div class="email-view-attachments" id="email-attachments">
                                        <h6><i class="fas fa-paperclip"></i> Attachments</h6>
                                        <div>
                                            <div class="attachment-item">
                                                <i class="fas fa-file-pdf"></i> 
                                                <a href="#">Project_Brief.pdf</a> 
                                                <span class="text-success">
                                                    <i class="fas fa-check-circle"></i> Scanned
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Compose email -->
                                <div id="compose-email" class="h-100 p-3" style="display: none;">
                                    <form class="compose-form" id="compose-form">
                                        <div class="form-group">
                                            <label for="email-to-input">To:</label>
                                            <input type="email" class="form-control" id="email-to-input" required>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="email-subject-input">Subject:</label>
                                            <input type="text" class="form-control" id="email-subject-input" required>
                                        </div>
                                        
                                        <div class="form-group compose-body">
                                            <label for="email-body-input">Message:</label>
                                            <textarea class="form-control h-100" id="email-body-input" required></textarea>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="email-attachments-input">Attachments:</label>
                                            <input type="file" class="form-control-file" id="email-attachments-input" multiple>
                                            <small class="form-text text-muted">
                                                All attachments are automatically scanned for malware.
                                            </small>
                                        </div>
                                        
                                        <div class="compose-actions text-right">
                                            <button type="button" class="btn btn-secondary mr-2" id="cancel-compose">
                                                Cancel
                                            </button>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fas fa-paper-plane"></i> Send Securely
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Elements
        const emptyState = document.getElementById('empty-state');
        const emailView = document.getElementById('email-view');
        const composeEmail = document.getElementById('compose-email');
        const composeBtn = document.getElementById('compose-btn');
        const cancelComposeBtn = document.getElementById('cancel-compose');
        const emailItems = document.querySelectorAll('.email-item');
        const composeForm = document.getElementById('compose-form');
        
        // Show compose email form
        composeBtn.addEventListener('click', function() {
            emptyState.style.display = 'none';
            emailView.style.display = 'none';
            composeEmail.style.display = 'block';
        });
        
        // Cancel compose
        cancelComposeBtn.addEventListener('click', function() {
            composeEmail.style.display = 'none';
            emptyState.style.display = 'flex';
            composeForm.reset();
        });
        
        // Show email when clicked
        emailItems.forEach(item => {
            item.addEventListener('click', function() {
                // Remove active class from all items
                emailItems.forEach(i => i.classList.remove('active'));
                
                // Add active class to clicked item
                this.classList.add('active');
                this.classList.remove('unread');
                
                // Show email view
                emptyState.style.display = 'none';
                composeEmail.style.display = 'none';
                emailView.style.display = 'block';
            });
        });
        
        // Handle form submission
        composeForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Show loading indicator
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalBtnText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
            submitBtn.disabled = true;
            
            // Get form data
            const to = document.getElementById('email-to-input').value;
            const subject = document.getElementById('email-subject-input').value;
            const message = document.getElementById('email-body-input').value;
            
            // Create FormData object for file uploads
            const formData = new FormData();
            formData.append('to', to);
            formData.append('subject', subject);
            formData.append('message', message);
            formData.append('token', '{{ $token }}');
            
            // Add attachments if any
            const attachmentInput = document.getElementById('email-attachments-input');
            if (attachmentInput && attachmentInput.files.length > 0) {
                for (let i = 0; i < attachmentInput.files.length; i++) {
                    formData.append('attachments[]', attachmentInput.files[i]);
                }
            }
            
            // Send the email securely
            fetch('{{ route("email.webmail.send", $account->id) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                // Reset button
                submitBtn.innerHTML = originalBtnText;
                submitBtn.disabled = false;
                
                if (data.success) {
                    // Show success message
                    showNotification('Email sent successfully!');
                    
                    // Reset form and go back to empty state
                    composeForm.reset();
                    composeEmail.style.display = 'none';
                    emptyState.style.display = 'flex';
                } else {
                    // Show error message
                    showNotification(data.message || 'Failed to send email', 'error');
                }
            })
            .catch(error => {
                console.error('Error sending email:', error);
                submitBtn.innerHTML = originalBtnText;
                submitBtn.disabled = false;
                showNotification('An error occurred while sending the email', 'error');
            });
        });
        
        // Function to show notifications
        function showNotification(message, type = 'success') {
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type === 'error' ? 'danger' : 'success'} alert-dismissible fade show`;
            alertDiv.innerHTML = `
                ${message}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            `;
            
            // Add to the top of the email content area
            const emailContent = document.querySelector('.email-content');
            emailContent.insertBefore(alertDiv, emailContent.firstChild);
            
            // Auto remove after 5 seconds
            setTimeout(() => {
                alertDiv.remove();
            }, 5000);
        }
        
        // Security features - update counters periodically
        setInterval(() => {
            // Simulate security monitoring (in a real app, this would fetch real-time data)
            if (Math.random() < 0.1) { // 10% chance of detecting a threat
                const phishingCount = document.getElementById('phishing-count');
                if (phishingCount) {
                    const currentCount = parseInt(phishingCount.textContent);
                    phishingCount.textContent = currentCount + 1;
                    showNotification('Phishing attempt blocked', 'success');
                }
            }
        }, 60000); // Check every minute form data for