@extends('layouts.app')

@section('title', 'Email Summary')

@section('content')
    @php
        $mailboxParam = $employee->id ?? null;
        $dataUrl = route('thread.summary.data', ['messageId' => $message->id, 'userId' => $mailboxParam]);
        $refreshUrl = route('thread.summary.refresh', ['messageId' => $message->id, 'userId' => $mailboxParam]);
        $messageCount = $thread['message_count'] ?? 0;
        $subject = $thread['subject'] ?? ($message->clean_subject ?: $message->subject);
    @endphp

    <div class="emi-page-head d-flex flex-wrap align-items-start justify-content-between gap-3">
        <div>
            <h1 class="emi-card__title mb-1">Email Summary</h1>
            <p class="text-muted mb-0" style="font-size:.8125rem;">
                {{ $subject }}
                <span class="text-muted">· {{ $messageCount }}
                    {{ $messageCount === 1 ? 'message' : 'messages' }}</span>
            </p>
        </div>
        <div class="d-flex align-items-center gap-2">
            <button type="button" class="btn btn-sm btn-outline-secondary" id="threadSummaryRefresh">
                <i class="bi bi-arrow-repeat me-1"></i>Regenerate
            </button>
            <a class="btn btn-sm btn-outline-secondary"
                href="{{ route('mails.show', ['emial_id' => $message->email_id, 'is_sent' => '0', 'user_id' => $mailboxParam]) }}">
                <i class="bi bi-envelope-open me-1"></i>Open the mail
            </a>
            <a class="btn btn-sm btn-primary"
                href="{{ route('mails.reply', ['id' => $message->email_id, 'user_id' => $mailboxParam]) }}">
                <i class="bi bi-reply-fill me-1"></i>Reply
            </a>
        </div>
    </div>

    <div class="emi-panel">
        <div class="emi-panel__body" id="threadSummaryBody"
            data-url="{{ $dataUrl }}"
            data-refresh-url="{{ $refreshUrl }}"
            data-autoload="{{ $summary && !$stale ? '0' : '1' }}">

            @if ($summary)
                @include('mail._thread_summary_card', [
                    'summary' => $summary,
                    'thread' => $thread,
                    'stale' => $stale,
                ])
            @else
                <div class="emi-summary-state">
                    <div class="spinner-border text-primary" role="status" style="width:1.75rem;height:1.75rem;">
                        <span class="visually-hidden">Loading</span>
                    </div>
                    <p class="mt-3 mb-1">Reading the conversation…</p>
                    <small>{{ $messageCount }} {{ $messageCount === 1 ? 'message' : 'messages' }} to go through. This
                        takes a few seconds.</small>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // The summary page and the mail-list modal both talk to the same
        // endpoint; this is the page's half. Generating is deliberately not done
        // during the page request — a long thread can take most of a minute and
        // the user should see the screen before that starts.
        (function() {
            var body = document.getElementById('threadSummaryBody');
            var refreshBtn = document.getElementById('threadSummaryRefresh');
            if (!body) return;

            var busy = false;

            function state(icon, title, detail, tone) {
                body.innerHTML =
                    '<div class="emi-summary-state">' +
                    '<i class="bi ' + icon + ' ' + (tone || '') + '"></i>' +
                    '<p>' + title + '</p>' +
                    (detail ? '<small>' + detail + '</small>' : '') +
                    '</div>';
            }

            function loading() {
                body.innerHTML =
                    '<div class="emi-summary-state">' +
                    '<div class="spinner-border text-primary" role="status" style="width:1.75rem;height:1.75rem;">' +
                    '<span class="visually-hidden">Loading</span></div>' +
                    '<p class="mt-3 mb-1">Reading the conversation…</p>' +
                    '<small>This takes a few seconds.</small>' +
                    '</div>';
            }

            function load(refresh) {
                if (busy) return;
                busy = true;
                loading();
                if (refreshBtn) refreshBtn.disabled = true;

                $.ajax({
                    url: refresh ? body.dataset.refreshUrl : body.dataset.url,
                    method: refresh ? 'POST' : 'GET',
                    headers: refresh ? {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    } : {},
                    success: function(response) {
                        if (response && response.status) {
                            body.innerHTML = response.html;
                            if (response.notice) {
                                emiToast(response.notice, {
                                    type: 'warn',
                                    title: 'Showing the previous summary'
                                });
                            }
                        } else {
                            state('bi-exclamation-triangle', (response && response.message) ||
                                'The summary could not be generated.',
                                'Press Regenerate to try again.', 'text-warning');
                        }
                    },
                    error: function(xhr) {
                        console.error('thread summary failed:', xhr.responseText);
                        state('bi-wifi-off', 'Could not reach the summary service.',
                            'Press Regenerate to try again.', 'text-danger');
                    },
                    complete: function() {
                        busy = false;
                        if (refreshBtn) refreshBtn.disabled = false;
                    }
                });
            }

            if (body.dataset.autoload === '1') {
                load(false);
            }

            if (refreshBtn) {
                refreshBtn.addEventListener('click', function() {
                    load(true);
                });
            }
        })();
    </script>
@endpush