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

@section('title', 'Conversations — BizWap')

@push('styles')
<style>
    #conv-table_wrapper .dt-layout-row:first-child {
        display: none;
    }

    #conv-table_wrapper .dt-layout-row:last-child {
        margin-top: 0.75rem;
        padding: 0 1rem 0.75rem;
    }

    #conv-table thead th {
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--bw-text-muted);
        border-bottom: 1px solid var(--bw-border);
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }

    #conv-table tbody td {
        padding: 0.85rem 1rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--bw-border);
        font-size: 0.875rem;
    }

    #conv-table tbody tr:last-child td {
        border-bottom: none;
    }

    #conv-table tbody tr {
        cursor: pointer;
    }

    #conv-table tbody tr:hover {
        background: var(--bw-primary-light);
    }

    .filter-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .filter-bar .form-select,
    .filter-bar .form-control {
        min-width: 0;
        font-size: 0.875rem;
    }

    [data-bs-theme="dark"] #conv-table thead th {
        background: var(--bw-surface);
    }
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0">Conversations</h4>
        <p class="text-muted small mb-0">All WhatsApp conversations with your customers</p>
    </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>Start Conversation
    </button>
</div>

{{-- 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"
                           placeholder="e.g. 918723934273" maxlength="15" inputmode="numeric">
                    <div class="form-text">Include country code, digits only.</div>
                </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">
    <div class="card-body border-bottom pb-3">
        <div class="filter-bar">
            <div class="flex-grow-1" style="max-width: 280px;">
                <input type="text" id="search-input" class="form-control form-control-sm"
                       placeholder="Search phone number…">
            </div>
            <button id="clear-filters" class="btn btn-sm btn-outline-secondary d-none">
                <i class="bi bi-x-lg me-1"></i>Clear
            </button>
        </div>
    </div>

    <div class="card-body p-0">
        <div class="table-responsive">
            <table id="conv-table" class="table table-hover align-middle mb-0 w-100">
                <thead>
                    <tr>
                        <th>Phone Number</th>
                        <th>Sessions</th>
                        <th>Messages</th>
                        <th>Last Active</th>
                        <th>Active Window</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

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

    const DATATABLE_URL = @json(route('business.conversations.datatable'));
    const CONTACT_URL_BASE = @json(url('business/conversations/contact'));

    const table = new DataTable('#conv-table', {
        processing: true,
        serverSide: true,
        ajax: {
            url: DATATABLE_URL,
            data: function (d) {
                d.search = $('#search-input').val();
            },
        },
        columns: [
            {
                data: 'phone_number',
                orderable: false,
                render: (val) => `<span class="fw-medium">${val}</span>`,
            },
            {
                data: 'session_count',
                orderable: false,
                render: (val) => `<span class="text-muted">${val}</span>`,
            },
            {
                data: 'message_count',
                orderable: false,
                render: (val) => `<span class="text-muted">${val}</span>`,
            },
            {
                data: 'last_activity',
                orderable: false,
                render: (val) => `<span class="text-muted">${val}</span>`,
            },
            {
                data: 'has_active',
                orderable: false,
                render: (val) => val
                    ? '<span class="badge bg-success-subtle text-success-emphasis text-uppercase">Active</span>'
                    : '<span class="text-muted">—</span>',
            },
        ],
        pageLength: 15,
        lengthMenu: [10, 15, 25, 50],
        language: {
            processing:  '<div class="text-muted small py-2">Loading…</div>',
            zeroRecords: '<div class="text-center text-muted py-4"><i class="bi bi-chat-dots" style="font-size:2rem;opacity:.3;"></i><p class="mt-2 mb-0">No conversations yet.</p></div>',
            emptyTable:  '<div class="text-center text-muted py-4"><i class="bi bi-chat-dots" style="font-size:2rem;opacity:.3;"></i><p class="mt-2 mb-0">No conversations yet.</p></div>',
            paginate: { previous: '&lsaquo;', next: '&rsaquo;' },
        },
        dom: 'rtip',
    });

    // ── 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-phone').val('');
        $('#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();
                table.draw();
            },
            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');
            },
        });
    });

    // ─────────────────────────────────────────────────────────────────────────

    // Row click → open contact thread
    $('#conv-table tbody').on('click', 'tr', function () {
        const data = table.row(this).data();
        if (data) {
            window.location.href = `${CONTACT_URL_BASE}/${data.phone_number}`;
        }
    });

    let searchTimer;
    $('#search-input').on('input', function () {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(() => { table.draw(); syncClearBtn(); }, 350);
    });

    $('#clear-filters').on('click', function () {
        $('#search-input').val('');
        table.draw();
        $(this).addClass('d-none');
    });

    function syncClearBtn() {
        const active = $('#search-input').val();
        $('#clear-filters').toggleClass('d-none', !active);
    }
}());
</script>
@endpush