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

{% block title %}Admin Dashboard | {{ user.company.name }} | ChatLab{% endblock %}
{% block admin_dash_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Console Dashboard</h2>
        <p class="page-subtitle">Manage FAQs, widget embed codes, and team agents for <strong>{{ user.company.name }}</strong>.</p>
    </div>
</div>

<!-- Stats -->
<div class="admin-grid-3col" style="margin-bottom: 2rem;">
    <div class="glass-card" style="padding: 1.5rem; text-align: center;">
        <div style="font-size: 0.85rem; color: var(--text-muted); font-weight: 500; margin-bottom: 0.5rem;">Configured FAQs</div>
        <div style="font-size: 2rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--success-green);">{{ faq_count }}</div>
        <div style="font-size: 0.75rem; color: var(--text-muted);">Quick responses set</div>
    </div>

    <div class="glass-card" style="padding: 1.5rem; text-align: center;">
        <div style="font-size: 0.85rem; color: var(--text-muted); font-weight: 500; margin-bottom: 0.5rem;">Quick Type Messages</div>
        <div style="font-size: 2rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--web-indigo);">{{ quicktype_count }}</div>
        <div style="font-size: 0.75rem; color: var(--text-muted);">Preset replies</div>
    </div>

    <div class="glass-card" style="padding: 1.5rem; text-align: center;">
        <div style="font-size: 0.85rem; color: var(--text-muted); font-weight: 500; margin-bottom: 0.5rem;">Topics Enforced</div>
        <div style="font-size: 2rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--primary-blue);">{{ topic_count }}</div>
        <div style="font-size: 0.75rem; color: var(--text-muted);">Scope restrictions</div>
    </div>
</div>

<!-- Quick configuration guides -->
<div class="admin-grid-2col" style="margin-top: 1rem;">
    <div class="glass-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between;">
        <div>
            <h3 style="margin-bottom: 0.75rem; font-size: 1.15rem; font-weight: 600; color: var(--text-primary);">FAQ Quick Responses</h3>
            <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.25rem; line-height: 1.5;">
                Set pre-configured quick reply questions for visitors.
            </p>
        </div>
        <div>
            <a href="{% url 'admin_faq_list' %}" class="btn btn-primary">
                Manage FAQs
            </a>
        </div>
    </div>

    <div class="glass-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between;">
        <div>
            <h3 style="margin-bottom: 0.75rem; font-size: 1.15rem; font-weight: 600; color: var(--text-primary);">Quick Type Messages</h3>
            <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.25rem; line-height: 1.5;">
                Create preset reply buttons that visitors can click for instant responses.
            </p>
        </div>
        <div>
            <a href="{% url 'admin_quicktype_list' %}" class="btn btn-primary">
                Manage Quick Types
            </a>
        </div>
    </div>

    <div class="glass-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between;">
        <div>
            <h3 style="margin-bottom: 0.75rem; font-size: 1.15rem; font-weight: 600; color: var(--text-primary);">Widget Embed Script</h3>
            <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.25rem; line-height: 1.5;">
                Copy the embed code to add the chatbot widget to your website.
            </p>
        </div>
        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
            <a href="{% url 'admin_widget_view' %}" class="btn btn-primary">
                Get Embed Code
            </a>
            <a href="{% url 'admin_widget_preview' %}" target="_blank" class="btn btn-secondary">
                Test Widget ↗
            </a>
        </div>
    </div>
</div>

<div class="glass-card" style="padding: 1.5rem; margin-top: 1.5rem;">
    <h3 style="margin-bottom: 0.75rem; font-size: 1.15rem; font-weight: 600; color: var(--text-primary);">Team & Agents</h3>
    <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.25rem; line-height: 1.5;">
        Create and manage agent accounts for your team. Agents can be assigned to handle customer conversations.
    </p>
    <a href="{% url 'admin_agent_list' %}" class="btn btn-primary">
        Manage Agents
    </a>
</div>
{% endblock %}