@extends('business::layouts.app')

@section('title', 'Conversations — ' . $phoneNumber . ' — BizWap')

@push('styles')
<style>
    html, body { overflow: hidden; }

    .chat-header {
        background: var(--bw-surface);
        border-bottom: 1px solid var(--bw-border);
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .chat-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--bw-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .chat-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 1.25rem;
        background: var(--bw-bg);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .message-row {
        display: flex;
        align-items: flex-end;
        gap: 0.5rem;
    }

    .message-row.outbound { justify-content: flex-end; }
    .message-row.inbound  { justify-content: flex-start; }

    .bubble {
        max-width: 68%;
        padding: 0.5rem 0.75rem 0.35rem;
        border-radius: 12px;
        font-size: 0.875rem;
        line-height: 1.45;
        position: relative;
        word-break: break-word;
    }

    .bubble.outbound {
        background: #dcf8c6;
        color: #111;
        border-radius: 12px 12px 2px 12px;
    }

    .bubble.inbound {
        background: #fff;
        color: #111;
        border-radius: 12px 12px 12px 2px;
        box-shadow: 0 1px 2px rgba(0,0,0,.08);
    }

    [data-bs-theme="dark"] .bubble.outbound {
        background: #1a4731;
        color: #e8f5e9;
    }

    [data-bs-theme="dark"] .bubble.inbound {
        background: var(--bw-surface);
        color: var(--bw-text);
    }

    .bubble-meta {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.25rem;
        margin-top: 0.2rem;
        font-size: 0.7rem;
        opacity: 0.65;
    }

    .bubble-meta.inbound { justify-content: flex-start; }

    .status-icon { font-size: 0.75rem; }
    .status-icon.delivered { color: #8e8e8e; }
    .status-icon.read      { color: #53bdeb; opacity: 1; }
    .status-icon.failed    { color: #e53935; opacity: 1; }

    .template-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.8rem;
        background: rgba(0,0,0,.06);
        border-radius: 6px;
        padding: 0.2rem 0.5rem;
    }

    [data-bs-theme="dark"] .template-pill { background: rgba(255,255,255,.08); }

    .day-divider {
        text-align: center;
        margin: 0.75rem 0;
    }

    .day-divider span {
        background: var(--bw-surface);
        border: 1px solid var(--bw-border);
        border-radius: 20px;
        padding: 0.2rem 0.85rem;
        font-size: 0.72rem;
        color: var(--bw-text-muted);
    }

    .session-divider {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 1.25rem 0 0.5rem;
    }

    .session-divider-line {
        flex: 1;
        height: 1px;
        background: var(--bw-border);
    }

    .session-divider-label {
        font-size: 0.7rem;
        color: var(--bw-text-muted);
        background: var(--bw-surface);
        border: 1px solid var(--bw-border);
        border-radius: 20px;
        padding: 0.25rem 0.9rem;
        white-space: nowrap;
    }

    .chat-empty {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--bw-text-muted);
        gap: 0.5rem;
    }

    .chat-footer {
        border-top: 1px solid var(--bw-border);
        padding: 0.75rem 1rem;
        background: var(--bw-surface);
    }

    .chat-footer textarea {
        resize: none;
        overflow: hidden;
        min-height: 38px;
        max-height: 120px;
        line-height: 1.5;
    }

    .window-expired-banner {
        border-top: 1px solid var(--bw-border);
        padding: 0.65rem 1rem;
        background: var(--bw-surface);
        font-size: 0.825rem;
        color: var(--bw-text-muted);
        text-align: center;
    }
</style>
@endpush

@section('content')

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show small py-2 mb-3" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show small py-2 mb-3" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert"></button>
    </div>
@endif

{{-- Start Conversation Modal --}}
<div class="modal fade" id="startConvModal" tabindex="-1" aria-labelledby="startConvModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold" id="startConvModalLabel">Start Conversation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-3">
                <div id="conv-alert" class="alert alert-danger d-none small py-2 mb-3"></div>

                <div class="mb-3">
                    <label class="form-label small fw-medium">Phone Number</label>
                    <input type="text" id="conv-phone" class="form-control form-control-sm"
                           value="{{ $phoneNumber }}" readonly>
                </div>

                <div class="mb-3">
                    <label class="form-label small fw-medium">Template</label>
                    <select id="conv-template" class="form-select form-select-sm">
                        <option value="">— Select a template —</option>
                        @foreach ($approvedTemplates as $tpl)
                            <option value="{{ $tpl->name }}"
                                    data-body="{{ $tpl->body }}"
                                    data-body-examples="{{ json_encode($tpl->body_examples ?? []) }}"
                                    data-header-text="{{ $tpl->header_text }}"
                                    data-header-examples="{{ json_encode($tpl->header_examples ?? []) }}">
                                {{ $tpl->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div id="conv-variables" class="d-none">
                    <hr class="my-3">
                    <p class="small text-muted mb-2">Fill in the template variables:</p>
                    <div id="conv-header-vars"></div>
                    <div id="conv-body-vars"></div>
                </div>

                <div id="conv-preview" class="d-none">
                    <hr class="my-3">
                    <p class="small text-muted mb-2">Preview:</p>
                    <div class="p-3 rounded small" style="background: var(--bs-tertiary-bg, #f8f9fa); line-height: 1.65; white-space: pre-wrap; word-break: break-word;">
                        <div id="conv-preview-header" class="fw-semibold mb-1 d-none"></div>
                        <div id="conv-preview-body"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="conv-send-btn" class="btn btn-sm btn-success" disabled>
                    <span id="conv-send-spinner" class="spinner-border spinner-border-sm me-1 d-none"></span>
                    Send
                </button>
            </div>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm overflow-hidden d-flex flex-column" id="conversation-card">
    {{-- Header --}}
    <div class="chat-header">
        <a href="{{ route('business.conversations.index') }}" class="text-decoration-none text-muted small">
            <i class="bi bi-arrow-left me-1"></i>
        </a>
        <div class="chat-avatar">
            <i class="bi bi-person-fill"></i>
        </div>
        <div class="flex-grow-1">
            <div class="fw-semibold">{{ $phoneNumber }}</div>
            <div class="small text-muted">
                {{ $sessions->count() }} {{ Str::plural('session', $sessions->count()) }}
                &nbsp;·&nbsp;
                {{ $sessions->sum('messages_count') }} messages
            </div>
        </div>
        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#startConvModal">
            <i class="bi bi-plus-lg me-1"></i>New Conversation
        </button>
    </div>

    {{-- Messages --}}
    <div class="chat-body" id="chat-body">
        @if ($hasMore)
            <div id="load-earlier-wrap" class="text-center py-2">
                <button id="load-earlier-btn" class="btn btn-sm btn-outline-secondary rounded-pill px-3"
                        data-cursor="{{ $cursor }}">
                    <span id="load-earlier-spinner" class="spinner-border spinner-border-sm me-1 d-none"></span>
                    Load earlier messages
                </button>
            </div>
        @endif

        @if ($messages->isEmpty())
            <div class="chat-empty">
                <i class="bi bi-chat-dots" style="font-size:2.5rem;opacity:.25;"></i>
                <span>No messages yet</span>
            </div>
        @else
            @include('business::conversations._messages_chunk', ['messages' => $messages])
        @endif
    </div>

    {{-- Reply input / expired banner --}}
    @if($activeSession)
        <div class="chat-footer">
            <form method="POST" action="{{ route('business.conversations.reply', $activeSession->uuid) }}" id="reply-form">
                @csrf
                <div class="d-flex gap-2 align-items-end">
                    <textarea
                        name="message"
                        id="reply-message"
                        class="form-control form-control-sm"
                        placeholder="Type a message…"
                        rows="1"
                        maxlength="4096"
                        required
                    ></textarea>
                    <button type="submit" class="btn btn-success btn-sm px-3" style="white-space: nowrap;">
                        <i class="bi bi-send-fill me-1"></i>Send
                    </button>
                </div>
            </form>
        </div>
    @else
        <div class="window-expired-banner">
            <i class="bi bi-clock-history me-1"></i>
            24-hour messaging window has expired.
            <button class="btn btn-link btn-sm p-0 ms-1" data-bs-toggle="modal" data-bs-target="#startConvModal">
                Start a new conversation
            </button>
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
(function () {
    'use strict';

    const chatBody = document.getElementById('chat-body');

    // ── Load earlier messages ─────────────────────────────────────────────────

    const EARLIER_URL = @json(route('business.conversations.earlier-messages', $phoneNumber));

    const loadBtn = document.getElementById('load-earlier-btn');
    if (loadBtn) {
        loadBtn.addEventListener('click', function () {
            const cursor  = this.dataset.cursor;
            const spinner = document.getElementById('load-earlier-spinner');

            loadBtn.disabled = true;
            spinner.classList.remove('d-none');

            $.get(EARLIER_URL, { before: cursor }, function (res) {
                if (!res.html) return;

                const wrap         = document.getElementById('load-earlier-wrap');
                const prevScrollH  = chatBody.scrollHeight;

                // Detect the session of the first currently-displayed message
                // so we can drop a duplicate session divider at the join point.
                const firstMsgEl      = chatBody.querySelector('[data-msg-id]');
                const firstSessionId  = firstMsgEl ? firstMsgEl.dataset.sessionId : null;

                // Parse the incoming HTML fragment
                const tmp = document.createElement('div');
                tmp.innerHTML = res.html;

                // If the last message in the new chunk belongs to the same session
                // as the first existing message, remove the duplicate divider that
                // the partial would have emitted for that session at the top of the
                // existing messages.
                const lastNewMsg = tmp.querySelector('[data-msg-id]:last-of-type');
                if (lastNewMsg && firstSessionId && lastNewMsg.dataset.sessionId === firstSessionId) {
                    const existingDivider = chatBody.querySelector(
                        `.session-divider[data-session-divider="${firstSessionId}"]`
                    );
                    if (existingDivider) existingDivider.remove();
                }

                // Prepend chunk after the button wrapper
                wrap.after(...tmp.childNodes);

                // Keep scroll position stable (don't jump to top)
                chatBody.scrollTop = chatBody.scrollHeight - prevScrollH;

                // Update or remove the button
                if (res.hasMore && res.cursor) {
                    loadBtn.dataset.cursor = res.cursor;
                    loadBtn.disabled       = false;
                    spinner.classList.add('d-none');
                } else {
                    wrap.remove();
                }
            }).fail(function () {
                loadBtn.disabled = false;
                spinner.classList.add('d-none');
            });
        });
    }

    const card       = document.getElementById('conversation-card');
    const mainFooter = document.getElementById('main-footer');
    function fitCard() {
        const top     = card.getBoundingClientRect().top;
        const footerH = mainFooter ? mainFooter.offsetHeight : 0;
        card.style.height = (window.innerHeight - top - footerH - 8) + 'px';
    }
    fitCard();
    window.addEventListener('resize', fitCard);

    if (chatBody) {
        chatBody.scrollTop = chatBody.scrollHeight;
    }

    const replyMsg = document.getElementById('reply-message');
    if (replyMsg) {
        replyMsg.addEventListener('input', function () {
            this.style.height = 'auto';
            this.style.height = Math.min(this.scrollHeight, 120) + 'px';
        });

        replyMsg.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                if (this.value.trim()) {
                    document.getElementById('reply-form').submit();
                }
            }
        });
    }

    // ── Start Conversation modal ──────────────────────────────────────────────

    const START_URL = @json(route('business.conversations.start'));
    const CSRF      = @json(csrf_token());

    function buildVarFields(containerId, label, count, namespace) {
        const container = document.getElementById(containerId);
        container.innerHTML = '';
        for (let i = 1; i <= count; i++) {
            const div = document.createElement('div');
            div.className = 'mb-2';
            div.innerHTML = `
                <label class="form-label small fw-medium">${label} Variable ${i}</label>
                <input type="text" class="form-control form-control-sm conv-var-input"
                       data-ns="${namespace}" data-index="${i - 1}" placeholder="Value ${i}">
            `;
            container.appendChild(div);
        }
    }

    function interpolate(text, values) {
        return text.replace(/\{\{(\d+)\}\}/g, function (match, n) {
            const val = (values[parseInt(n, 10) - 1] || '').trim();
            return val
                ? `<strong>${val}</strong>`
                : `<span class="text-muted fst-italic">[Variable ${n}]</span>`;
        });
    }

    function updatePreview() {
        const sel = document.getElementById('conv-template');
        const opt = sel.options[sel.selectedIndex];
        if (!sel.value) { $('#conv-preview').addClass('d-none'); return; }

        const bodyText   = opt.dataset.body      || '';
        const headerText = opt.dataset.headerText || '';

        const bodyInputs   = [...document.querySelectorAll('.conv-var-input[data-ns="body"]')].map(el => el.value);
        const headerInputs = [...document.querySelectorAll('.conv-var-input[data-ns="header"]')].map(el => el.value);

        const headerEl = document.getElementById('conv-preview-header');
        if (headerText) {
            headerEl.innerHTML = interpolate(headerText, headerInputs);
            headerEl.classList.remove('d-none');
        } else {
            headerEl.classList.add('d-none');
        }

        document.getElementById('conv-preview-body').innerHTML = interpolate(bodyText, bodyInputs);
        $('#conv-preview').removeClass('d-none');
    }

    $('#conv-template').on('change', function () {
        const opt            = this.options[this.selectedIndex];
        const bodyExamples   = JSON.parse(opt.dataset.bodyExamples  || '[]');
        const headerExamples = JSON.parse(opt.dataset.headerExamples || '[]');

        const bodyCount   = bodyExamples.filter(v => v !== null).length;
        const headerCount = headerExamples.filter(v => v !== null).length;

        const hasVars = bodyCount > 0 || headerCount > 0;
        $('#conv-variables').toggleClass('d-none', !hasVars);

        buildVarFields('conv-header-vars', 'Header', headerCount, 'header');
        buildVarFields('conv-body-vars',   'Body',   bodyCount,   'body');

        $('#conv-send-btn').prop('disabled', !this.value);
        $('#conv-alert').addClass('d-none');
        updatePreview();
    });

    $('#conv-variables').on('input', '.conv-var-input', updatePreview);

    function resetModal() {
        $('#conv-template').val('');
        $('#conv-variables').addClass('d-none');
        $('#conv-preview').addClass('d-none');
        $('#conv-header-vars, #conv-body-vars').html('');
        $('#conv-alert').addClass('d-none');
        $('#conv-send-btn').prop('disabled', true);
        $('#conv-send-spinner').addClass('d-none');
    }

    $('#startConvModal').on('hidden.bs.modal', resetModal);

    $('#conv-send-btn').on('click', function () {
        const phone    = $('#conv-phone').val().trim();
        const template = $('#conv-template').val();

        if (!phone || !template) {
            $('#conv-alert').removeClass('d-none').text('Phone number and template are required.');
            return;
        }

        const variables = { body: [], header: [] };
        document.querySelectorAll('.conv-var-input').forEach(function (input) {
            variables[input.dataset.ns][input.dataset.index] = input.value;
        });

        $('#conv-send-btn').prop('disabled', true);
        $('#conv-send-spinner').removeClass('d-none');
        $('#conv-alert').addClass('d-none');

        $.ajax({
            url: START_URL,
            method: 'POST',
            contentType: 'application/json',
            headers: { 'X-CSRF-TOKEN': CSRF },
            data: JSON.stringify({ phone_number: phone, template_name: template, variables }),
            success: function () {
                bootstrap.Modal.getInstance(document.getElementById('startConvModal')).hide();
                window.location.reload();
            },
            error: function (xhr) {
                const errors = xhr.responseJSON?.errors;
                let msg = xhr.responseJSON?.message || 'Something went wrong. Please try again.';
                if (errors) {
                    msg = Object.values(errors).flat().join(' ');
                }
                $('#conv-alert').removeClass('d-none').text(msg);
                $('#conv-send-btn').prop('disabled', false);
                $('#conv-send-spinner').addClass('d-none');
            },
        });
    });
}());
</script>
@endpush