{% extends 'admin/base_admin.html' %}

{% block title %}Voice Replies | ChatLab{% endblock %}
{% block admin_voice_reply_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Voice Replies</h2>
        <p class="page-subtitle">Configure keywords and voice/audio file replies. When a visitor's question matches a keyword, the bot will instantly reply with the voice message, bypassing AI response generation.</p>
    </div>
    <a href="{% url 'admin_voice_reply_create' %}" class="btn btn-primary">
        Add Voice Reply
    </a>
</div>

<div class="glass-card" style="padding: 2rem;">
    <h3 style="margin-bottom: 1.25rem; font-family: var(--font-heading); font-size: 1.25rem;">Voice Reply Entries</h3>
    <div style="display:flex; gap:0.5rem; align-items:center; margin-bottom:1rem;">
        <input id="reply-search" type="search" placeholder="Search keywords..." class="form-input" style="flex:1; padding:0.5rem 0.75rem;" />
        <div id="reply-suggestions" style="position:relative;">
            <div id="reply-suggestions-list" style="display:none; position:absolute; right:0; top:36px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:8px; z-index:50; max-width:360px; width:320px; box-shadow:0 6px 18px rgba(2,6,23,0.5);"></div>
        </div>
    </div>
    {% if replies %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th style="width: 30%;">Keyword</th>
                        <th style="width: 40%;">Voice Reply (Audio)</th>
                        <th style="width: 15%;">Created</th>
                        <th style="text-align: right; width: 15%;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for reply in replies %}
                        <tr>
                            <td style="font-weight: 600; color: var(--primary);">{{ reply.keyword }}</td>
                            <td>
                                {% if reply.audio_file %}
                                    <audio controls style="height: 32px; border-radius: 16px; max-width: 220px;">
                                        <source src="{{ reply.audio_file.url }}" type="audio/mpeg">
                                        Your browser does not support the audio element.
                                    </audio>
                                {% else %}
                                    <span style="color: var(--text-muted); font-size: 0.85rem;">No audio file</span>
                                {% endif %}
                            </td>
                            <td style="font-size: 0.85rem; color: var(--text-muted);">{{ reply.created_at|date:"M d, Y" }}</td>
                            <td style="text-align: right;">
                                <div style="display: inline-flex; gap: 0.5rem; justify-content: flex-end;">
                                    <a href="{% url 'admin_voice_reply_edit' reply.pk %}" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem;">
                                        Edit
                                    </a>
                                    <form action="{% url 'admin_voice_reply_delete' reply.pk %}" method="post" onsubmit="return confirm('Are you sure you want to delete this voice reply?');" style="display: inline;">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; color: var(--danger-red); border-color: rgba(250, 56, 62, 0.2);">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div style="text-align: center; padding: 4rem 2rem; color: var(--text-secondary);">
            <div style="font-size: 3rem; margin-bottom: 1.5rem;">🎙️</div>
            <h4 style="margin-bottom: 0.5rem;">No Voice Replies Defined</h4>
            <p style="font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--text-muted);">Create voice replies mapped to keywords that automatically trigger audio responses.</p>
            <a href="{% url 'admin_voice_reply_create' %}" class="btn btn-primary">Add Voice Reply</a>
        </div>
    {% endif %}
</div>
<script>
    (function(){
        const replies = [
            {% for r in replies %}
                {keyword: "{{ r.keyword|escapejs }}" }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];
        const input = document.getElementById('reply-search');
        const suggestionsList = document.getElementById('reply-suggestions-list');
        const table = document.querySelector('.custom-table tbody');

        function showSuggestions(q){
            suggestionsList.innerHTML = '';
            if (!q) { suggestionsList.style.display = 'none'; return; }
            const ql = q.toLowerCase();
            const matches = replies.filter(r => r.keyword.toLowerCase().includes(ql)).slice(0,8);
            if (!matches.length) { suggestionsList.style.display = 'none'; return; }
            matches.forEach(m => {
                const el = document.createElement('div');
                el.style.padding = '0.5rem 0.75rem';
                el.style.cursor = 'pointer';
                el.style.borderBottom = '1px solid rgba(0,0,0,0.03)';
                el.textContent = m.keyword;
                el.addEventListener('click', function(){
                    input.value = m.keyword;
                    filterTable(m.keyword);
                    suggestionsList.style.display = 'none';
                });
                suggestionsList.appendChild(el);
            });
            suggestionsList.style.display = 'block';
        }

        function filterTable(q){
            const ql = (q || '').toLowerCase().trim();
            const rows = table.querySelectorAll('tr');
            let visible = 0;
            rows.forEach(r => {
                const kw = r.children[0].textContent.toLowerCase();
                if (!ql || kw.includes(ql)) { r.style.display = ''; visible++; }
                else { r.style.display = 'none'; }
            });
            if (!visible) {
                let no = table.querySelector('.no-results-row');
                if (!no) {
                    no = document.createElement('tr'); no.className = 'no-results-row';
                    no.innerHTML = '<td colspan="4" style="text-align:center; color:var(--text-muted); padding:1.25rem;">No voice replies match your search.</td>';
                    table.appendChild(no);
                }
            } else {
                const no = table.querySelector('.no-results-row'); if (no) no.remove();
            }
        }

        if (input && table) {
            input.addEventListener('input', function(e){ showSuggestions(this.value); filterTable(this.value); });
            input.addEventListener('keydown', function(e){ if (e.key === 'Enter') { e.preventDefault(); suggestionsList.style.display='none'; filterTable(this.value); } if (e.key === 'Escape') { this.value=''; filterTable(''); suggestionsList.style.display='none'; } });
            document.addEventListener('click', function(ev){ if (!ev.target.closest('#reply-suggestions') && !ev.target.closest('#reply-search')) suggestionsList.style.display='none'; });
        }
    })();
</script>
{% endblock %}