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

{% block title %}Custom Parameters | ChatLab{% endblock %}
{% block admin_param_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Custom Parameters</h2>
        <p class="page-subtitle">Configure custom keywords and predefined responses. When a visitor question matches a keyword, the configured response will be used.</p>
    </div>
    <a href="{% url 'admin_custom_parameter_create' %}" class="btn btn-primary">
        Add Custom Parameter
    </a>
</div>

<div class="glass-card" style="padding: 2rem; border-radius: 0;">
    <h3 style="margin-bottom: 1.25rem; font-family: var(--font-heading); font-size: 1.25rem;">Configured Parameters</h3>
    <div style="display:flex; gap:0.5rem; align-items:center; margin-bottom:1rem;">
        <input id="param-search" type="search" placeholder="Search keywords or responses..." class="form-input" style="flex:1; border-radius:0; padding:0.5rem 0.75rem;" />
        <div id="param-suggestions" style="position:relative;">
            <div id="param-suggestions-list" style="display:none; position:absolute; right:0; top:36px; background:var(--bg); border:1px solid var(--border-color); z-index:50; max-width:360px; width:320px; box-shadow:0 6px 18px rgba(2,6,23,0.5);"></div>
        </div>
    </div>
    {% if parameters %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th style="width: 25%;">Keyword</th>
                        <th style="width: 50%;">Response</th>
                        <th style="width: 15%;">Created</th>
                        <th style="text-align: right; width: 10%;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for param in parameters %}
                        <tr>
                            <td style="font-weight: 600; color: var(--primary);">{{ param.keyword }}</td>
                            <td style="font-size: 0.9rem; line-height: 1.45;">{{ param.response|truncatechars:80 }}</td>
                            <td style="font-size: 0.85rem; color: var(--text-muted);">{{ param.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_custom_parameter_edit' param.pk %}" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; border-radius: 0;">
                                        Edit
                                    </a>
                                    <form action="{% url 'admin_custom_parameter_delete' param.pk %}" method="post" onsubmit="return confirm('Are you sure you want to delete this parameter?');" 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); border-color: rgba(239, 68, 68, 0.2); border-radius: 0;">
                                            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 Custom Parameters Defined</h4>
            <p style="font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--text-muted);">Add custom parameters tailored to your company's needs.</p>
            <a href="{% url 'admin_custom_parameter_create' %}" class="btn btn-primary">Add Custom Parameter</a>
        </div>
    {% endif %}
</div>
<script>
    (function(){
        const params = [
            {% for p in parameters %}
                {keyword: "{{ p.keyword|escapejs }}", response: "{{ p.response|escapejs }}" }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];
        const input = document.getElementById('param-search');
        const suggestionsList = document.getElementById('param-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 = params.filter(p => p.keyword.toLowerCase().includes(ql) || p.response.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(255,255,255,0.03)';
                el.textContent = m.keyword + ' — ' + (m.response.length > 80 ? m.response.slice(0,77) + '...' : m.response);
                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();
                const resp = r.children[1].textContent.toLowerCase();
                if (!ql || kw.includes(ql) || resp.includes(ql)) { r.style.display = ''; visible++; }
                else { r.style.display = 'none'; }
            });
            if (!visible) {
                // show a friendly no-results row
                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 parameters match your search.</td>';
                    table.appendChild(no);
                }
            } else {
                const no = table.querySelector('.no-results-row'); if (no) no.remove();
            }
        }

        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('#param-suggestions') && !ev.target.closest('#param-search')) suggestionsList.style.display='none'; });
    })();
</script>
{% endblock %}