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

{% block title %}Widget Script | ChatLab{% endblock %}
{% block admin_widget_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Website Embed Script</h2>
        <p class="page-subtitle">Configure widget position, size, and copy the embed code for your website.</p>
    </div>
    <a href="{% url 'admin_widget_preview' %}" target="_blank" class="btn btn-primary" style="gap: 0.4rem;">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
        Open Test Page
    </a>
</div>

<div style="display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start; margin-top: 1rem;">

    <!-- Left column: Settings + Embed -->
    <div style="display: flex; flex-direction: column; gap: 2rem;">

        <!-- Widget appearance settings -->
        <div class="glass-card" style="padding: 2rem; border-radius: 0;">
            <h3 style="margin-bottom: 0.5rem; font-family: var(--font-heading); font-size: 1.25rem;">Widget Appearance</h3>
            <p style="color: var(--text-secondary); font-size: 0.88rem; margin-bottom: 1.5rem; line-height: 1.5;">
                Adjust position and pixel sizes. Values are applied on save — use the <strong>Test Page</strong> button to preview on PC and mobile.
            </p>

            <form method="post" id="widget-settings-form">
                {% csrf_token %}
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;">
                    <input type="hidden" name="widget_position" value="{{ company.widget_position }}">
                    <div class="form-group" style="margin: 0;">
                        <label class="form-label">Notification Sound</label>
                        <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); cursor: pointer; padding-top: 0.5rem;">
                            <input type="checkbox" name="widget_sound_enabled" {% if company.widget_sound_enabled %}checked{% endif %} style="accent-color: var(--primary); width: 16px; height: 16px;">
                            Water-drop sound on new messages
                        </label>
                    </div>
                </div>

                <div style="margin-top: 1rem;">
                    <label class="form-label">Enabled Positions</label>
                    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem;">
                        <label style="display:inline-flex; align-items:center; gap:0.5rem;"><input type="checkbox" name="pos_bottom_right" value="bottom-right" {% if 'bottom-right' in enabled_positions %}checked{% endif %}/> Bottom Right</label>
                        <label style="display:inline-flex; align-items:center; gap:0.5rem;"><input type="checkbox" name="pos_bottom_left" value="bottom-left" {% if 'bottom-left' in enabled_positions %}checked{% endif %}/> Bottom Left</label>
                        <label style="display:inline-flex; align-items:center; gap:0.5rem;"><input type="checkbox" name="pos_left_center" value="left-center" {% if 'left-center' in enabled_positions %}checked{% endif %}/> Left Center (side)</label>
                        <label style="display:inline-flex; align-items:center; gap:0.5rem;"><input type="checkbox" name="pos_right_center" value="right-center" {% if 'right-center' in enabled_positions %}checked{% endif %}/> Right Center (side)</label>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.25rem;">
                    <div class="form-group" style="margin: 0;">
                        <label class="form-label">Bottom Offset (px)</label>
                        <input type="range" name="widget_bottom_offset" min="0" max="120" value="{{ company.widget_bottom_offset }}" class="widget-slider" data-display="bottom-val" style="width:100%;accent-color:var(--primary);">
                        <span id="bottom-val" style="font-size:0.78rem;color:var(--text-muted);">{{ company.widget_bottom_offset }}px — vertical offset</span>
                    </div>
                    <div class="form-group" style="margin: 0;">
                        <label class="form-label">Side Offset (px)</label>
                        <input type="range" name="widget_side_offset" min="0" max="120" value="{{ company.widget_side_offset }}" class="widget-slider" data-display="side-val" style="width:100%;accent-color:var(--primary);">
                        <span id="side-val" style="font-size:0.78rem;color:var(--text-muted);">{{ company.widget_side_offset }}px — horizontal offset</span>
                    </div>
                    <div class="form-group" style="margin: 0;">
                        <label class="form-label">Button Size (px)</label>
                        <input type="range" name="widget_button_size" min="40" max="80" value="{{ company.widget_button_size }}" class="widget-slider" data-display="btn-val" style="width:100%;accent-color:var(--primary);">
                        <span id="btn-val" style="font-size:0.78rem;color:var(--text-muted);">{{ company.widget_button_size }}px</span>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem;">
                    <div class="form-group" style="margin: 0;">
                        <label class="form-label">Panel Width (px)</label>
                        <input type="range" name="widget_panel_width" min="280" max="500" value="{{ company.widget_panel_width }}" class="widget-slider" data-display="width-val" style="width:100%;accent-color:var(--primary);">
                        <span id="width-val" style="font-size:0.78rem;color:var(--text-muted);">{{ company.widget_panel_width }}px</span>
                    </div>
                    <div class="form-group" style="margin: 0;">
                        <label class="form-label">Panel Height (px)</label>
                        <input type="range" name="widget_panel_height" min="300" max="700" value="{{ company.widget_panel_height }}" class="widget-slider" data-display="height-val" style="width:100%;accent-color:var(--primary);">
                        <span id="height-val" style="font-size:0.78rem;color:var(--text-muted);">{{ company.widget_panel_height }}px</span>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" style="margin-top: 1.5rem;">Save Widget Settings</button>
            </form>
        </div>

        <!-- Embed code -->
        <div class="glass-card" style="padding: 2rem; border-radius: 0;">
            <h3 style="margin-bottom: 1rem; font-family: var(--font-heading); font-size: 1.25rem;">Embed Code</h3>
            <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.25rem; line-height: 1.5;">
                Place this <code style="background: rgba(255,255,255,0.05); padding: 0.1rem 0.35rem; border: 1px solid var(--border-color); font-size: 0.85rem;">&lt;script&gt;</code> tag just before the closing <code style="background: rgba(255,255,255,0.05); padding: 0.1rem 0.35rem; border: 1px solid var(--border-color); font-size: 0.85rem;">&lt;/body&gt;</code> tag.
            </p>

            <div style="position: relative; margin-bottom: 1.5rem;">
                                <pre id="widget-code-box" style="background: rgba(0,0,0,0.5); padding: 1.25rem; padding-right: 6rem; border: 1px solid var(--border-color); color: #a5f3fc; font-family: 'Courier New', monospace; font-size: 0.78rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; min-height: 100px; border-radius: 0; line-height: 1.6;">&lt;script
                    src="{{ base_url }}{% url 'chatbot_widget_js' %}"
                    id="chatlab-widget-loader"
                {% for key, val in widget_attrs.items %}    {{ key }}="{{ val }}"
                {% endfor %}&gt;&lt;/script&gt;</pre>
                <button onclick="copyWidgetCode(this)" id="copy-btn" class="btn btn-primary" style="position: absolute; top: 0.6rem; right: 0.6rem; padding: 0.4rem 0.85rem; font-size: 0.78rem; border-radius: 0;">
                    Copy Code
                </button>
            </div>

            <div class="glass-card" style="padding: 1rem; border-radius: 0; background: rgba(99, 102, 241, 0.05); border-color: var(--border-glow);">
                <p style="font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; margin: 0;">
                    <strong style="color: var(--primary);">Authorized Domain:</strong>
                    {% if company.allowed_domain %}
                        <code style="background: rgba(255,255,255,0.05); padding: 0.1rem 0.4rem; border: 1px solid var(--border-color); color: var(--success);">{{ company.allowed_domain }}</code>
                    {% else %}
                        <span style="color: var(--warning);">Not configured</span> — contact platform admin.
                    {% endif %}
                </p>
            </div>
        </div>
    </div>

    <!-- Right: Live preview info -->
    <div class="glass-card" style="padding: 2rem; border-radius: 0; position: sticky; top: 1rem;">
        <h3 style="margin-bottom: 1rem; font-family: var(--font-heading); font-size: 1.25rem;">Live Preview</h3>
        <p style="color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; margin-bottom: 1.25rem;">
            Widget for <strong style="color: var(--text-primary);">{{ company.chatbot_name }}</strong> is active on this page.
        </p>
        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
            <div style="display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text-secondary);">
                <span style="width: 8px; height: 8px; background: var(--success); display: inline-block;"></span>
                Position: {% if company.widget_position == 'left' %}Bottom Left{% else %}Bottom Right{% endif %}
            </div>
            <div style="display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text-secondary);">
                <span style="width: 8px; height: 8px; background: var(--primary); display: inline-block;"></span>
                Size: {{ company.widget_panel_width }}×{{ company.widget_panel_height }}px
            </div>
            <div style="display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text-secondary);">
                <span style="width: 8px; height: 8px; background: var(--accent); display: inline-block;"></span>
                {% if company.widget_sound_enabled %}Sound enabled{% else %}Sound disabled{% endif %}
            </div>
        </div>
        <div style="margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem;">
            <a href="{% url 'admin_widget_preview' %}" target="_blank" class="btn btn-primary" style="width: 100%; justify-content: center; font-size: 0.85rem;">
                Open Full Test Page ↗
            </a>
            <a href="{% url 'admin_faq_list' %}" class="btn btn-secondary" style="width: 100%; justify-content: center; font-size: 0.85rem;">
                Configure FAQs
            </a>
        </div>
    </div>
</div>

<script
    src="{% url 'chatbot_widget_js' %}"
    id="chatlab-widget-loader"
    {% for key, val in widget_attrs.items %}{{ key }}="{{ val }}" {% endfor %}
></script>

<script>
    document.querySelectorAll('.widget-slider').forEach(function(slider) {
        var displayId = slider.getAttribute('data-display');
        var display = document.getElementById(displayId);
        var suffix = displayId === 'bottom-val' ? 'px — vertical offset' :
                 displayId === 'side-val' ? 'px — horizontal offset' : 'px';
        slider.addEventListener('input', function() {
            display.textContent = this.value + suffix;
        });
    });

    function copyWidgetCode(btn) {
        const pre = document.getElementById('widget-code-box');
        const tempEl = document.createElement('textarea');
        tempEl.innerHTML = pre.innerHTML;
        const codeText = tempEl.value;

        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(codeText).then(function() {
                btn.textContent = 'Copied!';
                btn.style.background = 'var(--success)';
                setTimeout(function() { btn.textContent = 'Copy Code'; btn.style.background = ''; }, 2000);
            }).catch(function() { fallbackCopy(codeText, btn); });
        } else {
            fallbackCopy(codeText, btn);
        }
    }

    function fallbackCopy(text, btn) {
        const ta = document.createElement('textarea');
        ta.value = text;
        ta.style.position = 'fixed';
        ta.style.opacity = '0';
        document.body.appendChild(ta);
        ta.select();
        try {
            document.execCommand('copy');
            btn.textContent = 'Copied!';
            setTimeout(function() { btn.textContent = 'Copy Code'; }, 2000);
        } catch(e) {
            alert('Please select the code manually and press Ctrl+C.');
        }
        document.body.removeChild(ta);
    }
</script>
{% endblock %}