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

{% block title %}
    {% if object %}Edit Voice Reply{% else %}Add Voice Reply{% endif %} | ChatLab
{% endblock %}
{% block admin_voice_reply_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">{% if object %}Edit Voice Reply{% else %}Add Voice Reply{% endif %}</h2>
        <p class="page-subtitle">Add keywords and the matching voice reply file.</p>
    </div>
    <a href="{% url 'admin_voice_reply_list' %}" class="btn btn-secondary">
        &larr; Back to Voice Replies
    </a>
</div>

<div class="glass-card form-container" style="padding: 2.5rem; margin-top: 1rem;">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        
        <div class="form-group" style="margin-bottom: 1.5rem;">
            <label for="id_keyword" class="form-label" style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Keyword / Search Term</label>
            <input type="text" name="keyword" id="id_keyword" class="form-input" placeholder="e.g. 'hello', 'audio message', 'send voice'" required value="{% if object %}{{ object.keyword }}{% endif %}">
            <span style="display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;">
                When a visitor asks a question containing this keyword, the voice reply will trigger. Separate multiple keywords with commas.
            </span>
        </div>
        
        <div class="form-group" style="margin-bottom: 1.5rem;">
            <label class="form-label" style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Voice Audio</label>
            
            <div id="record-ui" style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
                <button type="button" id="start-record-btn" class="btn btn-secondary" style="display: flex; align-items: center; gap: 5px;">
                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z"/><path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/></svg> Record Voice
                </button>
                <button type="button" id="stop-record-btn" class="btn btn-danger" style="display: none; align-items: center; gap: 5px;">
                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5A1.5 1.5 0 0 1 5 3.5z"/></svg> Stop
                </button>
                <span id="record-status" style="color: var(--danger-red); font-weight: bold; display: none;">Recording...</span>
            </div>

            <div id="audio-preview-container" style="display: none; margin-bottom: 10px;">
                <audio id="audio-preview" controls style="height: 36px;"></audio>
            </div>

            <input type="file" name="audio_file" id="id_audio_file" class="form-input" style="display: none;" accept="audio/*">
            <span style="display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;">
                Click Record to create a voice reply (requires microphone).
            </span>

            {% if object and object.audio_file %}
                <div style="margin-top: 1rem; padding: 10px; background: var(--hover-bg); border-radius: 8px; display: inline-flex; align-items: center; gap: 10px;">
                    <span style="font-size: 0.85rem; font-weight: 600;">Current Audio:</span>
                    <audio controls style="height: 28px;">
                        <source src="{{ object.audio_file.url }}" type="audio/mpeg">
                        Your browser does not support the audio element.
                    </audio>
                </div>
            {% endif %}
        </div>
        
        <div class="form-actions" style="margin-top: 2rem; display: flex; gap: 1rem;">
            <button type="submit" class="btn btn-primary">
                Save Voice Reply
            </button>
            <a href="{% url 'admin_voice_reply_list' %}" class="btn btn-secondary">
                Cancel
            </a>
        </div>
    </form>
</div>

<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<style>
.tagify {
    --tags-border-color: var(--border-color);
    --tags-hover-border-color: var(--primary-blue);
    --tags-focus-border-color: var(--primary-blue);
    --tag-bg: rgba(0, 132, 255, 0.1);
    --tag-text-color: var(--text-primary);
    border-radius: 8px;
    padding: 0;
}
.tagify__input {
    color: var(--text-primary);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var input = document.querySelector('#id_keyword');
    if (input) {
        new Tagify(input, {
            delimiters: ",", 
            originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
        });
    }

    const startBtn = document.getElementById('start-record-btn');
    const stopBtn = document.getElementById('stop-record-btn');
    const recordStatus = document.getElementById('record-status');
    const audioPreviewContainer = document.getElementById('audio-preview-container');
    const audioPreview = document.getElementById('audio-preview');
    const fileInput = document.getElementById('id_audio_file');
    
    let mediaRecorder;
    let audioChunks = [];

    startBtn.addEventListener('click', async () => {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            mediaRecorder = new MediaRecorder(stream);
            
            mediaRecorder.ondataavailable = event => {
                audioChunks.push(event.data);
            };

            mediaRecorder.onstop = () => {
                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                const audioUrl = URL.createObjectURL(audioBlob);
                audioPreview.src = audioUrl;
                audioPreviewContainer.style.display = 'block';

                // Add to hidden file input
                const file = new File([audioBlob], "recorded_voice.wav", {type: "audio/wav", lastModified: new Date().getTime()});
                const container = new DataTransfer();
                container.items.add(file);
                fileInput.files = container.files;
            };

            audioChunks = [];
            mediaRecorder.start();
            startBtn.style.display = 'none';
            stopBtn.style.display = 'flex';
            recordStatus.style.display = 'inline';
        } catch (err) {
            alert('Microphone access denied. Please enable microphone permissions.');
        }
    });

    stopBtn.addEventListener('click', () => {
        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
            mediaRecorder.stop();
            mediaRecorder.stream.getTracks().forEach(track => track.stop());
        }
        startBtn.style.display = 'flex';
        stopBtn.style.display = 'none';
        recordStatus.style.display = 'none';
    });
});
</script>
{% endblock %}