{% extends 'superuser/base_superuser.html' %}

{% block title %}Superuser Console | ChatLab{% endblock %}
{% block dashboard_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Platform Dashboard</h2>
        <p class="page-subtitle">ChatLab metrics, tenant companies, and chatbot profiles.</p>
    </div>
    <a href="{% url 'superuser_company_create' %}" class="btn btn-primary">
        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        New Company
    </a>
</div>

<!-- Stats Grid -->
<div class="stats-grid">
    <div class="glass-card stat-card">
        <div class="stat-label">Total Companies</div>
        <div class="stat-value" style="color: var(--primary);">{{ companies|length }}</div>
        <div style="font-size: 0.75rem; color: var(--text-muted);">Registered Tenants</div>
    </div>
    <div class="glass-card stat-card">
        <div class="stat-label">Google Gemini Bots</div>
        <div class="stat-value" style="color: var(--success);">{{ gemini_count }}</div>
        <div style="font-size: 0.75rem; color: var(--text-muted);">Active Providers</div>
    </div>
    <div class="glass-card stat-card">
        <div class="stat-label">OpenAI Bots</div>
        <div class="stat-value" style="color: var(--accent);">{{ openai_count }}</div>
        <div style="font-size: 0.75rem; color: var(--text-muted);">Active Providers</div>
    </div>
</div>

<!-- Available Models by Provider -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 2rem;">
    <!-- Google Gemini Models -->
    <div class="glass-card" style="padding: 1.75rem;">
        <h3 style="margin-bottom: 1.25rem; font-family: var(--font-heading); font-size: 1.1rem; color: var(--success);">
            <span style="margin-right: 0.5rem;">🔷</span>Google Gemini Models
        </h3>
        {% if gemini_models %}
            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                {% for model in gemini_models %}
                    <div style="padding: 0.75rem; background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 4px; font-size: 0.9rem;">
                        <div style="font-weight: 600; color: var(--primary);">{{ model.display_name }}</div>
                        <div style="font-size: 0.8rem; color: var(--text-muted); font-family: monospace; margin-top: 0.3rem;">{{ model.model_name }}</div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div style="text-align: center; padding: 1.5rem; color: var(--text-muted); font-size: 0.9rem;">
                No Google Gemini models configured yet.
            </div>
        {% endif %}
    </div>

    <!-- OpenAI Models -->
    <div class="glass-card" style="padding: 1.75rem;">
        <h3 style="margin-bottom: 1.25rem; font-family: var(--font-heading); font-size: 1.1rem; color: var(--accent);">
            <span style="margin-right: 0.5rem;">⚫</span>OpenAI Models
        </h3>
        {% if openai_models %}
            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                {% for model in openai_models %}
                    <div style="padding: 0.75rem; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: 4px; font-size: 0.9rem;">
                        <div style="font-weight: 600; color: var(--accent);">{{ model.display_name }}</div>
                        <div style="font-size: 0.8rem; color: var(--text-muted); font-family: monospace; margin-top: 0.3rem;">{{ model.model_name }}</div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div style="text-align: center; padding: 1.5rem; color: var(--text-muted); font-size: 0.9rem;">
                No OpenAI models configured yet.
            </div>
        {% endif %}
    </div>
</div>

<!-- Companies List -->
<div class="glass-card" style="padding: 1.75rem;">
    <h3 style="margin-bottom: 1.25rem; font-family: var(--font-heading); font-size: 1.25rem;">Tenant Chatbots</h3>
    
    {% if companies %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Company Name</th>
                        <th>Chatbot Name</th>
                        <th>AI Provider</th>
                        <th>Model Name</th>
                        <th>API Key Status</th>
                        <th>Admin Account</th>
                        <th>Created Date</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for company in companies %}
                        <tr>
                            <td style="font-weight: 600; color: var(--text-primary);">{{ company.name }}</td>
                            <td>{{ company.chatbot_name }}</td>
                            <td>
                                {% if company.ai_provider == 'gemini' %}
                                    <span class="badge badge-gemini">Google Gemini</span>
                                {% else %}
                                    <span class="badge badge-openai">OpenAI</span>
                                {% endif %}
                            </td>
                            <td style="font-family: monospace; font-size: 0.85rem;">{{ company.model_name }}</td>
                            <td>
                                {% if company.api_key %}
                                    <span style="color: var(--success); display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.85rem;">
                                        <svg width="14" height="14" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2.166 4.9L10 9.554 17.834 4.9A2 2 0 0016 4H4a2 2 0 00-1.834.9zM18 6.641l-6.834 4.053a2 2 0 01-2.332 0L2 6.641V14a2 2 0 002 2h12a2 2 0 002-2V6.641z" clip-rule="evenodd"></path></svg>
                                        Configured
                                    </span>
                                {% else %}
                                    <span style="color: var(--warning); display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.85rem;">
                                        ⚠️ Unconfigured
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                {% if company.users.count %}
                                    <span style="color: var(--success); font-size: 0.85rem;">
                                        {{ company.users.count }} user(s)
                                    </span>
                                {% else %}
                                    <span style="color: var(--warning); font-size: 0.85rem;">⚠️ No admin</span>
                                {% endif %}
                            </td>
                            <td style="font-size: 0.85rem; color: var(--text-muted);">{{ company.created_at|date:"M d, Y" }}</td>
                            <td style="text-align: right;">
                                <div style="display: inline-flex; gap: 0.5rem; align-items: center;">
                                    <a href="{% url 'superuser_company_test' company.pk %}" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; gap: 0.25rem; border-color: rgba(99, 102, 241, 0.3); color: var(--primary);">
                                        Test
                                    </a>
                                    <a href="{% url 'superuser_company_edit' company.pk %}" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; gap: 0.25rem;">
                                        Edit
                                    </a>
                                    <button type="button" onclick="copyWidgetScript({{ company.id }}, this, '{{ company.widget_position }}'{% if company.icon %}, '{{ base_url }}{{ company.icon.url }}'{% else %}, null{% endif %}, {bottomOffset:{{ company.widget_bottom_offset }},sideOffset:{{ company.widget_side_offset }},buttonSize:{{ company.widget_button_size }},panelWidth:{{ company.widget_panel_width }},panelHeight:{{ company.widget_panel_height }}})" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; gap: 0.25rem; border-color: rgba(16, 185, 129, 0.3); color: var(--success);">
                                        Copy Script
                                    </button>
                                    <form action="{% url 'superuser_company_delete' company.pk %}" method="post" onsubmit="return confirm('Are you sure you want to delete this company? All data will be lost.');" style="display: inline;">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; gap: 0.25rem; color: var(--danger); border-color: rgba(239, 68, 68, 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 Tenant Companies Found</h4>
            <p style="font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--text-muted);">Get started by creating your first chatbot client.</p>
            <a href="{% url 'superuser_company_create' %}" class="btn btn-primary">Create Company</a>
        </div>
    {% endif %}
</div>

<!-- Lead Captures List -->
<div class="glass-card" style="padding: 1.75rem; margin-top: 2rem;">
    <h3 style="margin-bottom: 1.25rem; font-family: var(--font-heading); font-size: 1.25rem; display: flex; justify-content: space-between; align-items: center;">
        <span>Captured Leads</span>
        <span style="font-size: 0.85rem; font-weight: normal; color: var(--text-muted);">Total: {{ leads|length }}</span>
    </h3>
    
    {% if leads %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Phone Number</th>
                        <th>Page URL</th>
                        <th>Submission Date</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for lead in leads %}
                        <tr>
                            <td style="font-weight: 600; color: var(--text-primary);">{{ lead.name }}</td>
                            <td>{{ lead.phone }}</td>
                            <td>
                                {% if lead.page_url %}
                                    <a href="{{ lead.page_url }}" target="_blank" style="color: var(--primary); text-decoration: underline;">{{ lead.page_url }}</a>
                                {% else %}
                                    <span style="color: var(--text-muted); font-style: italic;">Not provided</span>
                                {% endif %}
                            </td>
                            <td style="font-size: 0.85rem; color: var(--text-muted);">{{ lead.created_at|date:"M d, Y H:i" }}</td>
                            <td style="text-align: right;">
                                <form action="{% url 'superuser_delete_lead' lead.pk %}" method="post" onsubmit="return confirm('Are you sure you want to delete this lead?');" 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);">
                                        Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div style="text-align: center; padding: 3rem 2rem; color: var(--text-secondary);">
            <div style="font-size: 2.5rem; margin-bottom: 1rem;">📋</div>
            <h4 style="margin-bottom: 0.5rem;">No Leads Captured Yet</h4>
            <p style="font-size: 0.9rem; color: var(--text-muted);">When visitors submit the lead form on the home page, they will appear here.</p>
        </div>
    {% endif %}
</div>

<script>
    const WIDGET_BASE_URL = "{{ base_url }}";
    const WIDGET_JS_PATH = "{% url 'chatbot_widget_js' %}";

    function getWidgetScript(companyId, position, iconUrl, config) {
        config = config || {};
        let code = `<script 
  src="${WIDGET_BASE_URL}${WIDGET_JS_PATH}" 
  id="chatlab-widget-loader"
  data-company-id="${companyId}" 
  data-position="${position || 'right'}"
  data-bottom-offset="${config.bottomOffset || 24}"
  data-side-offset="${config.sideOffset || 24}"
  data-button-size="${config.buttonSize || 60}"
  data-panel-width="${config.panelWidth || 360}"
  data-panel-height="${config.panelHeight || 480}"`;
        if (iconUrl) {
            code += ` 
  data-icon-url="${iconUrl}"`;
        }
        code += `><\/script>`;
        return code;
    }

    function copyWidgetScript(companyId, btn, position, iconUrl, config) {
        const code = getWidgetScript(companyId, position, iconUrl, config);
        const originalText = btn.textContent;

        function onSuccess() {
            btn.textContent = 'Copied!';
            btn.style.color = 'var(--success)';
            setTimeout(() => {
                btn.textContent = originalText;
                btn.style.color = 'var(--success)';
            }, 2000);
        }

        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(code).then(onSuccess).catch(() => fallbackCopy(code, onSuccess));
        } else {
            fallbackCopy(code, onSuccess);
        }
    }

    function fallbackCopy(text, onSuccess) {
        const ta = document.createElement('textarea');
        ta.value = text;
        ta.style.position = 'fixed';
        ta.style.opacity = '0';
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        onSuccess();
    }
</script>
{% endblock %}