{% extends "admin/base_site.html" %}
{% load i18n %}

{% block content %}
{% if stats %}
<style>
.ft-dashboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.ft-stat { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ft-stat .num { font-size: 36px; font-weight: 700; color: #1a3a5f; line-height: 1; }
.ft-stat .lbl { font-size: 12px; color: #666; margin-top: 6px; text-transform: uppercase; letter-spacing: .5px; }
.ft-stat.green .num { color: #2e7d32; }
.ft-stat.orange .num { color: #e65100; }
.ft-stat.red .num { color: #c62828; }
.ft-stat.gold .num { color: #c8960c; }
.ft-section { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #1a3a5f; border-bottom: 2px solid #1a3a5f; padding-bottom: 6px; margin: 28px 0 14px; }
.ft-alert { background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; }
</style>

{% if stats.tickets_new %}
<div class="ft-alert">
    ⚠️ You have <strong>{{ stats.tickets_new }} new ticket{{ stats.tickets_new|pluralize }}</strong> waiting for a response.
    <a href="/admin/tickets/ticket/?status__exact=new" style="margin-left:8px;font-weight:600">View now →</a>
</div>
{% endif %}
{% if stats.leads_new %}
<div class="ft-alert" style="background:#e3f2fd;border-color:#1a73e8">
    💼 <strong>{{ stats.leads_new }} new sales lead{{ stats.leads_new|pluralize }}</strong> waiting to be contacted.
    <a href="/admin/sales/saleslead/?status__exact=new" style="margin-left:8px;font-weight:600">View now →</a>
</div>
{% endif %}
{% if stats.domains_new %}
<div class="ft-alert" style="background:#e8f5e9;border-color:#2e7d32">
    🌐 <strong>{{ stats.domains_new }} new domain inquiry</strong> needs checking.
    <a href="/admin/sales/domaininquiry/?status__exact=new" style="margin-left:8px;font-weight:600">View now →</a>
</div>
{% endif %}

<p class="ft-section">📋 Tickets</p>
<div class="ft-dashboard">
    <div class="ft-stat red">
        <div class="num">{{ stats.tickets_new }}</div>
        <div class="lbl">New Tickets</div>
    </div>
    <div class="ft-stat orange">
        <div class="num">{{ stats.tickets_open }}</div>
        <div class="lbl">Open / In Progress</div>
    </div>
    <div class="ft-stat">
        <div class="num">{{ stats.tickets_today }}</div>
        <div class="lbl">Received Today</div>
    </div>
    <div class="ft-stat">
        <div class="num">{{ stats.tickets_month }}</div>
        <div class="lbl">This Month</div>
    </div>
</div>

<p class="ft-section">💼 Sales Pipeline</p>
<div class="ft-dashboard">
    <div class="ft-stat red">
        <div class="num">{{ stats.leads_new }}</div>
        <div class="lbl">New Leads</div>
    </div>
    <div class="ft-stat orange">
        <div class="num">{{ stats.leads_pipeline }}</div>
        <div class="lbl">In Pipeline</div>
    </div>
    <div class="ft-stat green">
        <div class="num">{{ stats.leads_won_month }}</div>
        <div class="lbl">Won This Month</div>
    </div>
    <div class="ft-stat gold">
        <div class="num">£{{ stats.leads_value|floatformat:0 }}</div>
        <div class="lbl">Revenue This Month</div>
    </div>
</div>

<p class="ft-section">🌐 Domain Inquiries</p>
<div class="ft-dashboard">
    <div class="ft-stat red">
        <div class="num">{{ stats.domains_new }}</div>
        <div class="lbl">New Requests</div>
    </div>
    <div class="ft-stat">
        <div class="num">{{ stats.domains_month }}</div>
        <div class="lbl">This Month</div>
    </div>
    <div class="ft-stat green">
        <div class="num">£{{ stats.domains_margin|floatformat:0 }}</div>
        <div class="lbl">Margin This Month</div>
    </div>
</div>

<p class="ft-section">📧 Contact Enquiries</p>
<div class="ft-dashboard">
    <div class="ft-stat orange">
        <div class="num">{{ stats.enquiries_unread }}</div>
        <div class="lbl">No Ticket Yet</div>
    </div>
    <div class="ft-stat">
        <div class="num">{{ stats.enquiries_month }}</div>
        <div class="lbl">This Month</div>
    </div>
</div>

<p class="ft-section">Quick Links</p>
<p>
    <a href="/admin/tickets/ticket/add/" style="margin-right:16px">➕ New Ticket</a>
    <a href="/admin/sales/saleslead/add/" style="margin-right:16px">➕ New Sales Lead</a>
    <a href="/admin/sales/domaininquiry/add/" style="margin-right:16px">➕ New Domain Inquiry</a>
    <a href="/admin/tickets/ticket/?status__exact=new" style="margin-right:16px">🎫 Open Tickets</a>
    <a href="/admin/sales/saleslead/?status__exact=new">💼 New Leads</a>
</p>
<br>
{% endif %}

{% include "admin/app_index.html" %}
{% endblock %}