{% 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="stats-grid">
    <div class="glass-card stat-card" style="border-radius: 0;">
        <div class="stat-label">Configured FAQs</div>
        <div class="stat-value" style="color: var(--success);">{{ faq_count }}</div>
        <div style="font-size: 0.75rem; color: var(--text-muted);">Quick responses set</div>
    </div>

    <div class="glass-card stat-card" style="border-radius: 0;">
        <div class="stat-label">Quick Type Messages</div>
        <div class="stat-value" style="color: #8b5cf6;">{{ quicktype_count }}</div>
        <div style="font-size: 0.75rem; color: var(--text-muted);">Preset replies</div>
    </div>

    <div class="glass-card stat-card" style="border-radius: 0;">
        <div class="stat-label">Topics Enforced</div>
        <div class="stat-value" style="color: var(--accent);">{{ topic_count }}</div>
        <div style="font-size: 0.75rem; color: var(--text-muted);">Scope restrictions</div>
    </div>
</div>

<!-- Quick configuration guides -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 1rem;">
    <div class="glass-card" style="padding: 2rem; border-radius: 0;">
        <h3 style="margin-bottom: 1rem; font-family: var(--font-heading); font-size: 1.25rem;">FAQ Quick Responses</h3>
        <p style="color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.5rem;">
            Set pre-configured quick reply questions for visitors.
        </p>
        <a href="{% url 'admin_faq_list' %}" class="btn btn-primary">
            Manage FAQs
        </a>
    </div>

    <div class="glass-card" style="padding: 2rem; border-radius: 0;">
        <h3 style="margin-bottom: 1rem; font-family: var(--font-heading); font-size: 1.25rem;">Quick Type Messages</h3>
        <p style="color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.5rem;">
            Create preset reply buttons that visitors can click for instant responses.
        </p>
        <a href="{% url 'admin_quicktype_list' %}" class="btn btn-primary">
            Manage Quick Types
        </a>
    </div>

    <div class="glass-card" style="padding: 2rem; border-radius: 0;">
        <h3 style="margin-bottom: 1rem; font-family: var(--font-heading); font-size: 1.25rem;">Widget Embed Script</h3>
        <p style="color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.5rem;">
            Copy the embed code to add the chatbot widget to your website.
        </p>
        <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" style="margin-left: 0.5rem;">
            Test Widget ↗
        </a>
    </div>
</div>

<div class="glass-card" style="padding: 2rem; border-radius: 0; margin-top: 2rem;">
    <h3 style="margin-bottom: 1rem; font-family: var(--font-heading); font-size: 1.25rem;">Team & Agents</h3>
    <p style="color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.5rem;">
        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 %}