@extends('crm.layouts.master')
@section('title', 'Email — ' . $folderSlug)

@section('page-css')
<style>
    .mce-notification, .mce-notification-inner { display: none; }
    .email-html-body img { max-width: 100%; height: auto; }
    .email-inline-attachments { margin-top: 1rem; }
    .email-inline-attachment { display: block; max-width: 100%; height: auto; margin: .75rem 0 0; }
    .email-inline-image-missing {
        display: inline-block;
        padding: 6px 9px;
        border: 1px dashed #cbd5e1;
        border-radius: 4px;
        color: #64748b;
        font-size: .8rem;
        background: #f8fafc;
    }
    .email-attachments { border-top: 1px solid #e5e7eb; margin-top: 1.25rem; padding-top: 1rem; }
    .email-attachment-list { display: flex; flex-wrap: wrap; gap: .65rem; }
    .email-attachment {
        display: flex; align-items: center; gap: .65rem; min-width: 220px; max-width: 100%;
        padding: .65rem .8rem; border: 1px solid #dbe3ec; border-radius: 8px;
        background: #f8fafc; color: #1f2937; text-decoration: none;
    }
    .email-attachment:hover { border-color: #6366f1; background: #eef2ff; color: #3730a3; text-decoration: none; }
    .email-attachment-icon { font-size: 1.25rem; color: #6366f1; flex-shrink: 0; }
    .email-attachment-meta { min-width: 0; }
    .email-attachment-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
    .email-attachment-size { display: block; color: #6b7280; font-size: .75rem; }

    /* ── Mail layout ── */
    .mail-wrap {
        display: flex;
        gap: 0;
        background: #fff;
        border: 1px solid #e0e6ed;
        border-radius: 8px;
        overflow: hidden;
        min-height: 70vh;
    }

    /* ── Folder sidebar ── */
    .mail-sidebar {
        width: 220px;
        flex-shrink: 0;
        background: #f8fafc;
        border-right: 1px solid #e0e6ed;
        display: flex;
        flex-direction: column;
    }

    .mail-sidebar-header {
        padding: 18px 16px 12px;
        border-bottom: 1px solid #e0e6ed;
    }

    .mail-sidebar-header .btn {
        width: 100%;
        font-weight: 600;
        letter-spacing: .02em;
    }

    .folder-list {
        list-style: none;
        margin: 10px 0 0;
        padding: 6px 0;
        flex: 1;
    }

    .folder-list li a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 18px;
        color: #374151;
        font-size: .875rem;
        font-weight: 500;
        text-decoration: none;
        border-left: 3px solid transparent;
        transition: background .15s, color .15s;
    }

    .folder-list li a:hover {
        background: #eef2ff;
        color: #4f46e5;
    }

    .folder-list li a.active {
        background: #eef2ff;
        color: #4f46e5;
        border-left-color: #4f46e5;
        font-weight: 600;
    }

    .folder-list li a .folder-icon {
        width: 17px;
        text-align: center;
        opacity: .75;
    }

    .folder-list li a .badge-count {
        margin-left: auto;
        background: #e0e7ff;
        color: #4f46e5;
        font-size: .7rem;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 10px;
        display: none; /* shown via JS after folder counts load */
    }

    .folder-divider {
        height: 1px;
        background: #e0e6ed;
        margin: 6px 12px;
    }

    /* ── Mail content area ── */
    .mail-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .mail-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 18px;
        border-bottom: 1px solid #e0e6ed;
        background: #fff;
        gap: 12px;
    }

    .mail-toolbar h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
    }

    /* ── Email table ── */
    #email_table tbody tr { cursor: pointer; }
    #email_table tbody tr:hover { background: #f5f7ff !important; }
    #email_table tbody tr.unread td { font-weight: 700; }

    .sender-avatar {
        width: 36px; height: 36px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 15px; font-weight: 600;
        background: #4f46e5; color: #fff; flex-shrink: 0;
        margin-right: 8px; vertical-align: middle;
    }

    /* ── Profile initial in modal ── */
    .profile-initial {
        width: 42px; height: 42px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 18px; font-weight: 600;
        background: #4f46e5; color: #fff; flex-shrink: 0;
    }

    /* Dynamic avatar colours */
    .avatar-a { background: #4f46e5; }
    .avatar-b { background: #0891b2; }
    .avatar-c { background: #059669; }
    .avatar-d { background: #d97706; }
    .avatar-e { background: #dc2626; }

    @media (max-width: 768px) {
        .mail-sidebar { width: 56px; }
        .folder-list li a span:not(.folder-icon) { display: none; }
        .folder-list li a { padding: 10px; justify-content: center; }
    }
</style>
<link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
@endsection

@section('main-content')
<div class="breadcrumb">
    <h3><i class="fas fa-envelope me-2"></i> Email</h3>
</div>
<div class="separator-breadcrumb border-top"></div>

@if(!empty($mailboxError))
<div class="alert alert-warning d-flex align-items-center gap-2" role="alert">
    <i class="fas fa-triangle-exclamation"></i>
    <div><strong>Email unavailable.</strong> {{ $mailboxError }}</div>
</div>
@endif

<div class="mail-wrap">

    {{-- ═══════════ SIDEBAR ═══════════ --}}
    <aside class="mail-sidebar">
        <div class="mail-sidebar-header">
            <button type="button" class="btn btn-primary btn-sm"
                    data-toggle="modal" data-target="#send_email_modal" @disabled(!empty($mailboxError))>
                <i class="fa fa-plus me-1"></i> Compose
            </button>
        </div>

        @php
            $folders = [
                ['slug' => 'INBOX',  'label' => 'Inbox',   'icon' => 'fa-inbox'],
                ['slug' => 'Sent',   'label' => 'Sent',    'icon' => 'fa-paper-plane'],
                ['slug' => 'Drafts', 'label' => 'Drafts',  'icon' => 'fa-file-alt'],
                ['slug' => 'Spam',   'label' => 'Spam',    'icon' => 'fa-ban'],
                ['slug' => 'Trash',  'label' => 'Trash',   'icon' => 'fa-trash'],
            ];
        @endphp

        <ul class="folder-list">
            @foreach($folders as $f)
            <li>
                <a href="{{ route('inbox') }}?folder={{ $f['slug'] }}"
                   class="{{ $folderSlug === $f['slug'] ? 'active' : '' }}">
                    <span class="folder-icon"><i class="fas {{ $f['icon'] }}"></i></span>
                    <span>{{ $f['label'] }}</span>
                    <span class="badge-count" id="cnt_{{ $f['slug'] }}"></span>
                </a>
            </li>
            @endforeach

            <div class="folder-divider"></div>
            {{-- Additional server folders loaded by JS --}}
            <div id="extra_folders"></div>
        </ul>
    </aside>

    {{-- ═══════════ MAIN CONTENT ═══════════ --}}
    <div class="mail-content">
        <div class="mail-toolbar">
            <h5>
                @switch($folderSlug)
                    @case('INBOX')  <i class="fas fa-inbox me-1"></i> Inbox   @break
                    @case('Sent')   <i class="fas fa-paper-plane me-1"></i> Sent    @break
                    @case('Drafts') <i class="fas fa-file-alt me-1"></i> Drafts  @break
                    @case('Spam')   <i class="fas fa-ban me-1"></i> Spam    @break
                    @case('Trash')  <i class="fas fa-trash me-1"></i> Trash   @break
                    @default        <i class="fas fa-folder me-1"></i> {{ $folderSlug }}
                @endswitch
                <small class="text-muted fw-normal ms-2">{{ count($emails) }} messages</small>
            </h5>
            <button class="btn btn-sm btn-outline-secondary" onclick="location.reload()">
                <i class="fas fa-sync-alt"></i> Refresh
            </button>
        </div>

        <div class="p-3">
            <div class="table-responsive">
                <table class="display table table-hover" id="email_table" style="width:100%">
                    <thead>
                        <tr>
                            <th>{{ $folderSlug === 'Sent' ? 'To' : 'From' }}</th>
                            <th>Subject</th>
                            <th>Preview</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                    @forelse($emails as $email)
                        @php
                            $initial  = strtoupper(substr($email['sender'] ?: $email['sender_email'], 0, 1));
                            $colors   = ['a','b','c','d','e'];
                            $colorIdx = ord(strtolower($initial ?: 'a')) % 5;
                            $avatarCls= 'avatar-' . $colors[$colorIdx];
                            $unread   = !($email['is_seen'] ?? true);
                        @endphp
                        <tr onclick="openEmail({{ $email['id'] }}, '{{ $folderSlug }}')"
                            class="{{ $unread ? 'unread' : '' }}">
                            <td style="white-space:nowrap;">
                                <span class="sender-avatar {{ $avatarCls }}">{{ $initial ?: '?' }}</span>
                                {{ $email['sender'] ?: $email['sender_email'] }}
                                @if($email['sender'] && $email['sender_email'])
                                    <small class="text-muted d-none d-md-inline">&lt;{{ $email['sender_email'] }}&gt;</small>
                                @endif
                            </td>
                            <td>{{ $email['subject'] }}</td>
                            <td class="text-muted" style="max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                {{ Str::limit(strip_tags($email['message']), 90) }}
                            </td>
                            <td style="white-space:nowrap;">
                                @if($email['date']->isToday())
                                    {{ $email['date']->format('g:i A') }}
                                @elseif($email['date']->isCurrentYear())
                                    {{ $email['date']->format('M d') }}
                                @else
                                    {{ $email['date']->format('d/m/Y') }}
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-5">
                                <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                                No messages in this folder.
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════ VIEW EMAIL MODAL ═══════════ --}}
<div class="modal fade" id="view_email_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="view_email_subject"></h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" style="min-height:250px;">
                <div id="email_loading" class="text-center py-5">
                    <i class="fa fa-spinner fa-spin fa-2x text-primary"></i>
                    <p class="mt-2 text-muted">Loading email…</p>
                </div>
                <div id="email_content" style="display:none;">
                    <div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
                        <div class="d-flex align-items-center">
                            <div class="profile-initial" id="email_avatar"></div>
                            <div class="mx-2">
                                <h5 class="mb-0" id="email_sender_name"></h5>
                                <p class="mb-0 text-muted small">
                                    <i class="fa fa-envelope me-1"></i>
                                    <span id="email_sender_email"></span>
                                </p>
                                <p class="mb-0 text-muted small" id="email_to_row" style="display:none;">
                                    <i class="fa fa-arrow-right me-1"></i>
                                    <span id="email_to_email"></span>
                                </p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <span class="text-muted small" id="email_date"></span>
                            <button type="button" class="btn btn-sm btn-outline-primary"
                                    onclick="replyToEmail()" id="btn_reply" title="Reply">
                                <i class="fa fa-reply"></i> Reply
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger"
                                    id="email_delete_btn" onclick="deleteOpenedEmail()" title="Delete">
                                <i class="fa fa-trash"></i> Delete
                            </button>
                        </div>
                    </div>
                    <hr>
                    <div class="email-html-body" id="email_body_content"></div>
                    <div class="email-attachments" id="email_attachments_section" hidden>
                        <h6 class="mb-2"><i class="fa fa-paperclip me-1"></i> Attachments (<span id="email_attachment_count">0</span>)</h6>
                        <div class="email-attachment-list" id="email_attachment_list"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════ REPLY MODAL ═══════════ --}}
<div class="modal fade" id="reply_email_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reply</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="reply_email">
                    <input type="hidden" id="email_id">
                    <input type="hidden" id="reply_folder" value="{{ $folderSlug }}">
                    <div class="form-group">
                        <label class="form-label">Body</label>
                        <textarea id="reply_body" class="form-control"></textarea>
                    </div>
                    <div class="text-center mt-3">
                        <button class="btn btn-primary" id="reply_email_btn" type="submit">
                            <i class="fa fa-paper-plane me-1"></i> Send Reply
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════ COMPOSE MODAL ═══════════ --}}
<div class="modal fade" id="send_email_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-pen me-1"></i> Compose Email</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="send_email">
                    <div class="form-group">
                        <label class="form-label">To:</label>
                        <input type="email" id="to" required class="form-control" placeholder="recipient@example.com">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Subject:</label>
                        <input type="text" id="subject" required class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Body</label>
                        <textarea id="email_body" class="form-control"></textarea>
                    </div>
                    <div class="text-center mt-3">
                        <button class="btn btn-primary" id="send_email_btn" type="submit">
                            <i class="fa fa-paper-plane me-1"></i> Send
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-js')
<script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
<script src="{{ asset('js/tinymce.min.js') }}"></script>
<script>
var currentEmailId   = null;
var currentFolder    = '{{ $folderSlug }}';

/* ── DataTable ── */
$(document).ready(function () {
    $('#email_table').DataTable({
        order: [[3, 'desc']],
        columnDefs: [{ orderable: false, targets: [2] }],
        pageLength: 25,
        language: { search: '', searchPlaceholder: 'Search emails…' }
    });

    /* Load extra server folders into sidebar */
    $.get('/email-folders', function(data) {
        if (data.status !== 'true') return;
        var known = ['INBOX', 'Sent', 'Drafts', 'Spam', 'Trash',
                     'Sent Items', 'Deleted Items', 'Junk',
                     'INBOX.Sent','INBOX.Trash','INBOX.Spam','INBOX.Drafts','INBOX.Junk'];
        var extra = data.folders.filter(function(f) {
            return known.indexOf(f) === -1;
        });
        if (!extra.length) return;
        var html = extra.map(function(f) {
            return '<li><a href="/inbox?folder=' + encodeURIComponent(f) + '" class="' +
                   (currentFolder === f ? 'active' : '') + '">' +
                   '<span class="folder-icon"><i class="fas fa-folder"></i></span>' +
                   '<span>' + f + '</span></a></li>';
        }).join('');
        $('#extra_folders').html(html);
    });
});

/* ── TinyMCE helper ── */
function initTiny(selector) {
    var id = selector.replace('#', '');
    if (tinymce.get(id)) tinymce.get(id).remove();
    tinymce.init({
        selector: selector,
        plugins: 'preview searchreplace autolink directionality code visualblocks fullscreen table charmap pagebreak nonbreaking insertdatetime advlist lists wordcount help emoticons',
        menubar: 'file edit view insert format tools table help',
        toolbar: 'undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | emoticons | fullscreen preview',
        height: 280,
        toolbar_sticky: true,
    });
}

/* ── Open email ── */
function openEmail(id, folder) {
    currentEmailId = id;
    currentFolder  = folder || '{{ $folderSlug }}';
    $('#email_loading').show();
    $('#email_content').hide();
    $('#email_body_content').empty();
    $('#email_attachment_list').empty();
    $('#email_attachments_section').prop('hidden', true);
    $('#view_email_modal').modal('show');

    $.ajax({
        url: '/emails/' + id + '?folder=' + encodeURIComponent(currentFolder),
        type: 'GET',
        success: function (data) {
            if (data.status === 'true' || data.status === true) {
                var e = data.email;
                $('#view_email_subject').text(e.subject);
                $('#email_sender_name').text(e.sender || e.sender_email);
                $('#email_sender_email').text(e.sender_email);
                $('#email_avatar').text(e.sender
                    ? e.sender.charAt(0).toUpperCase()
                    : (e.sender_email ? e.sender_email.charAt(0).toUpperCase() : '?'));
                $('#email_date').text(e.date + ' (' + e.date_human + ')');
                $('#email_body_content').html(
                    e.html_body || ('<pre style="white-space:pre-wrap;">' + $('<span>').text(e.body).html() + '</pre>')
                );
                renderEmailAttachments(e.attachments || []);
                /* Show To: field for Sent folder */
                if (e.to_email) {
                    $('#email_to_email').text(e.to_email);
                    $('#email_to_row').show();
                } else {
                    $('#email_to_row').hide();
                }
                /* Hide Reply for Drafts/Trash/Sent */
                var noReply = ['Drafts','Trash','Spam'];
                $('#btn_reply').toggle(noReply.indexOf(currentFolder) === -1);
                $('#email_loading').hide();
                $('#email_content').show();
            } else {
                $('#email_loading').html(
                    '<p class="text-danger"><i class="fa fa-exclamation-circle"></i> ' +
                    (data.message || 'Failed to load email') + '</p>'
                );
            }
        },
        error: function () {
            $('#email_loading').html('<p class="text-danger"><i class="fa fa-exclamation-circle"></i> Network error.</p>');
        }
    });
}

function formatAttachmentSize(bytes) {
    bytes = Number(bytes) || 0;
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / 1048576).toFixed(1) + ' MB';
}

function attachmentIcon(mime) {
    mime = String(mime || '').toLowerCase();
    if (mime.indexOf('image/') === 0) return 'fa-file-image';
    if (mime === 'application/pdf') return 'fa-file-pdf';
    if (mime.indexOf('audio/') === 0) return 'fa-file-audio';
    if (mime.indexOf('video/') === 0) return 'fa-file-video';
    if (mime.indexOf('text/') === 0) return 'fa-file-lines';
    return 'fa-file';
}

function renderEmailAttachments(attachments) {
    var list = $('#email_attachment_list').empty();
    attachments.forEach(function (attachment) {
        var link = $('<a>', {
            class: 'email-attachment',
            href: attachment.download_url,
            title: 'Download ' + String(attachment.name || 'attachment')
        });
        $('<i>', { class: 'fa ' + attachmentIcon(attachment.mime) + ' email-attachment-icon', 'aria-hidden': 'true' }).appendTo(link);
        var meta = $('<span>', { class: 'email-attachment-meta' }).appendTo(link);
        $('<span>', { class: 'email-attachment-name', text: attachment.name || 'Attachment' }).appendTo(meta);
        $('<span>', { class: 'email-attachment-size', text: formatAttachmentSize(attachment.size) }).appendTo(meta);
        list.append(link);
    });
    $('#email_attachment_count').text(attachments.length);
    $('#email_attachments_section').prop('hidden', attachments.length === 0);
}

/* ── Reply ── */
function replyToEmail() {
    if (!currentEmailId) return;
    $('#email_id').val(currentEmailId);
    $('#reply_folder').val(currentFolder);
    $('#view_email_modal').modal('hide');
    setTimeout(function() {
        $('#reply_email_modal').modal('show');
        initTiny('#reply_body');
    }, 400);
}

/* ── Delete ── */
function deleteOpenedEmail() {
    if (!currentEmailId) return;
    Swal.fire({
        title: 'Delete this email?',
        text: 'This cannot be undone.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes, delete it!'
    }).then(function (result) {
        if (!result.isConfirmed) return;
        var fd = new FormData();
        fd.append('id', currentEmailId);
        fd.append('folder', currentFolder);
        $.ajax({
            url: '/delete_email',
            type: 'POST',
            processData: false,
            contentType: false,
            data: fd,
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function (data) {
                $('#view_email_modal').modal('hide');
                if (data.status === 'true' || data.status === true) {
                    Swal.fire({ icon: 'success', title: 'Deleted', text: data.message })
                        .then(function() { location.reload(); });
                } else {
                    Swal.fire({ icon: 'error', title: 'Error', text: data.message });
                }
            }
        });
    });
}

/* ── Reply form submit ── */
$('#reply_email').on('submit', function(e) {
    e.preventDefault();
    var body = tinymce.get('reply_body') ? tinymce.get('reply_body').getContent() : $('#reply_body').val();
    var fd   = new FormData();
    fd.append('email_id', $('#email_id').val());
    fd.append('folder',   $('#reply_folder').val());
    fd.append('body',     body);
    $('#reply_email_btn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-1"></i> Sending…');
    $.ajax({
        url: '/reply_email',
        type: 'POST',
        processData: false,
        contentType: false,
        data: fd,
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        success: function(data) {
            $('#reply_email_btn').prop('disabled', false).html('<i class="fa fa-paper-plane me-1"></i> Send Reply');
            $('#reply_email_modal').modal('hide');
            Swal.fire({ icon: data.status === 'true' ? 'success' : 'error', title: data.status === 'true' ? 'Sent!' : 'Error', text: data.message });
        }
    });
});

/* ── Send form submit ── */
$('#send_email').on('submit', function(e) {
    e.preventDefault();
    var body = tinymce.get('email_body') ? tinymce.get('email_body').getContent() : $('#email_body').val();
    var fd   = new FormData();
    fd.append('to',      $('#to').val());
    fd.append('subject', $('#subject').val());
    fd.append('body',    body);
    $('#send_email_btn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-1"></i> Sending…');
    $.ajax({
        url: '/send_email',
        type: 'POST',
        processData: false,
        contentType: false,
        data: fd,
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        success: function(data) {
            $('#send_email_btn').prop('disabled', false).html('<i class="fa fa-paper-plane me-1"></i> Send');
            $('#send_email_modal').modal('hide');
            Swal.fire({ icon: data.status === 'true' ? 'success' : 'error', title: data.status === 'true' ? 'Sent!' : 'Error', text: data.message });
        }
    });
});

/* ── Init compose TinyMCE when modal opens ── */
$('#send_email_modal').on('shown.bs.modal', function () {
    initTiny('#email_body');
});
</script>
@endsection