@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | Message')
@section('page-title', 'Message')

@section('content')
<div class="mb-3 d-flex flex-wrap" style="gap:.35rem;">
    <a href="{{ route('messages.inbox') }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left mr-1"></i> Inbox</a>
    <a href="{{ route('messages.compose', ['reply_to' => $message->id]) }}" class="btn btn-sm btn-primary"><i class="fas fa-reply mr-1"></i> Reply</a>
</div>

<div class="card card-outline card-primary shadow-sm">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-envelope-open-text mr-1"></i> {{ $message->subject ?: '(No subject)' }}</h3>
        <div class="card-tools"><small class="text-muted">{{ $message->created_at->format('d M Y H:i') }}</small></div>
    </div>
    <div class="card-body" id="thread-body">
        @foreach ($thread as $m)
            @php $mine = $m->sender_id === auth()->id(); @endphp
            <div class="d-flex mb-3 {{ $mine ? 'justify-content-end' : 'justify-content-start' }}" data-msg-id="{{ $m->id }}">
                <div style="max-width:min(640px,100%);background:{{ $mine ? '#1a56db' : '#f1f5f9' }};color:{{ $mine ? '#fff' : '#0f2043' }};border-radius:1rem;padding:.7rem 1rem;box-shadow:0 2px 8px rgba(16,24,40,.08);">
                    <div class="small mb-1" style="opacity:.8;"><strong>{{ $m->sender->name ?? 'User' }}</strong> · {{ $m->created_at->format('d M Y H:i') }}</div>
                    <div style="white-space:pre-line;">{{ $m->body }}</div>
                    @if($m->has_attachment)
                        <div class="mt-2">
                            @if($m->is_image)
                                <a href="{{ $m->attachmentUrl() }}" target="_blank"><img src="{{ $m->attachmentUrl() }}" alt="attachment" style="max-width:220px;border-radius:.5rem;"></a>
                            @else
                                <a href="{{ $m->attachmentUrl() }}" target="_blank" class="btn btn-sm {{ $mine ? 'btn-light' : 'btn-outline-primary' }}"><i class="fas {{ $m->is_pdf ? 'fa-file-pdf' : 'fa-paperclip' }} mr-1"></i>{{ \Illuminate\Support\Str::limit($m->attachment_name ?? 'Attachment', 28) }}</a>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
    <div class="card-footer">
        <form action="{{ route('messages.store') }}" method="POST" enctype="multipart/form-data" id="reply-form">
            @csrf
            <input type="hidden" name="parent_id" value="{{ $message->id }}">
            <input type="hidden" name="recipient_id" value="{{ $message->sender_id === auth()->id() ? $message->recipient_id : $message->sender_id }}">
            <div class="form-group mb-2">
                <label class="fld-label">Reply</label>
                <textarea name="body" rows="3" class="form-control form-control-sm @error('body') is-invalid @enderror" placeholder="Write a reply…" required>{{ old('body') }}</textarea>
                @error('body')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
            </div>
            <div class="progress mb-2 d-none" id="reply-progress" style="height:8px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" id="reply-bar" role="progressbar" style="width:0%;background-color:#f97316;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-8 mb-2">
                    <div class="custom-file">
                        <input type="file" name="attachment" id="reply-attachment" class="custom-file-input">
                        <label class="custom-file-label col-form-label-sm" for="reply-attachment">Attach file… (optional)</label>
                    </div>
                </div>
                <div class="form-group col-md-4 mb-2 text-right">
                    <button type="submit" class="btn btn-sm btn-primary" id="reply-btn"><i class="fas fa-reply mr-1"></i> <span id="reply-label">Send Reply</span></button>
                </div>
            </div>
        </form>
        <form action="{{ route('messages.destroy', $message) }}" method="POST" onsubmit="return confirm('Delete this thread?')">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-sm btn-outline-danger"><i class="fas fa-trash mr-1"></i> Delete thread</button>
        </form>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var replyForm = document.getElementById('reply-form');
    if (replyForm) {
        var replyFile = document.getElementById('reply-attachment');
        var replyBar = document.getElementById('reply-bar');
        var replyWrap = document.getElementById('reply-progress');
        var replyBtn = document.getElementById('reply-btn');
        var replyLabel = document.getElementById('reply-label');
        replyForm.addEventListener('submit', function (e) {
            if (!replyFile || !replyFile.files.length) return;
            e.preventDefault();
            replyBtn.disabled = true;
            replyWrap.classList.remove('d-none');
            var xhr = new XMLHttpRequest();
            xhr.open('POST', replyForm.action, true);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.upload.addEventListener('progress', function (ev) {
                if (!ev.lengthComputable) return;
                var pct = Math.round(ev.loaded / ev.total * 100);
                replyBar.style.width = pct + '%';
                replyBar.setAttribute('aria-valuenow', pct);
                if (replyLabel) replyLabel.textContent = 'Uploading ' + pct + '%…';
            });
            xhr.addEventListener('load', function () { window.location.reload(); });
            xhr.addEventListener('error', function () {
                replyBtn.disabled = false;
                if (replyLabel) replyLabel.textContent = 'Send Reply';
                alert('Upload failed — please try again.');
            });
            xhr.send(new FormData(replyForm));
        });
        if (replyFile) {
            replyFile.addEventListener('change', function () {
                var lbl = replyFile.nextElementSibling;
                if (lbl && replyFile.files.length) lbl.textContent = replyFile.files[0].name;
            });
        }
    }
    var body = document.getElementById('thread-body');
    if (!body) return;
    var nodes = body.querySelectorAll('[data-msg-id]');
    var lastId = nodes.length ? parseInt(nodes[nodes.length - 1].getAttribute('data-msg-id'), 10) : 0;
    var audioCtx = null;
    function chime() {
        try {
            audioCtx = audioCtx || new (window.AudioContext || window.webkitAudioContext)();
            var now = audioCtx.currentTime;
            [523.25, 783.99].forEach(function (freq, i) {
                var osc = audioCtx.createOscillator();
                var gain = audioCtx.createGain();
                osc.type = 'sine';
                osc.frequency.value = freq;
                gain.gain.setValueAtTime(0.0001, now + i * 0.12);
                gain.gain.exponentialRampToValueAtTime(0.25, now + i * 0.12 + 0.02);
                gain.gain.exponentialRampToValueAtTime(0.0001, now + i * 0.12 + 0.35);
                osc.connect(gain).connect(audioCtx.destination);
                osc.start(now + i * 0.12);
                osc.stop(now + i * 0.12 + 0.4);
            });
        } catch (e) {}
    }
    function esc(s) {
        return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
        });
    }
    function bubble(m) {
        var wrap = document.createElement('div');
        wrap.className = 'd-flex mb-3 ' + (m.mine ? 'justify-content-end' : 'justify-content-start');
        wrap.setAttribute('data-msg-id', m.id);
        var bg = m.mine ? '#1a56db' : '#f1f5f9';
        var fg = m.mine ? '#fff' : '#0f2043';
        var html = '<div style="max-width:min(640px,100%);background:' + bg + ';color:' + fg + ';border-radius:1rem;padding:.7rem 1rem;box-shadow:0 2px 8px rgba(16,24,40,.08);">'
            + '<div class="small mb-1" style="opacity:.8;"><strong>' + esc(m.sender_name) + '</strong> · ' + esc(m.time) + '</div>'
            + '<div style="white-space:pre-line;">' + esc(m.body) + '</div>';
        if (m.has_attachment && m.attachment_url) {
            html += '<div class="mt-2">';
            if (m.is_image) {
                html += '<a href="' + esc(m.attachment_url) + '" target="_blank"><img src="' + esc(m.attachment_url) + '" alt="attachment" style="max-width:220px;border-radius:.5rem;"></a>';
            } else {
                html += '<a href="' + esc(m.attachment_url) + '" target="_blank" class="btn btn-sm ' + (m.mine ? 'btn-light' : 'btn-outline-primary') + '"><i class="fas fa-paperclip mr-1"></i>' + esc((m.attachment_name || 'Attachment').substring(0, 28)) + '</a>';
            }
            html += '</div>';
        }
        html += '</div>';
        wrap.innerHTML = html;
        return wrap;
    }
    setInterval(function () {
        fetch("{{ route('messages.updates', $message) }}?after_id=" + lastId, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (data) {
                if (!data || !Array.isArray(data.replies) || !data.replies.length) return;
                var foundOther = false;
                data.replies.forEach(function (m) {
                    body.appendChild(bubble(m));
                    if (m.id > lastId) lastId = m.id;
                    if (!m.mine) foundOther = true;
                });
                body.lastElementChild.scrollIntoView({ behavior: 'smooth', block: 'end' });
                if (foundOther) chime();
            })
            .catch(function () {});
    }, 10000);
})();
</script>
@endpush
@endsection