{% extends "superadmin/base.html" %}
{% load humanize %}

{% block superadmin_content %}
<!-- Business Header Card -->
<div class="card mb-8">
    <div class="flex justify-between items-start" style="flex-wrap:wrap;gap:16px;">
        <div class="flex items-center gap-4">
            {% if business.logo %}
            <img src="{{ business.logo.url }}" alt="" style="width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--color-border-light);">
            {% else %}
            <div style="width:64px;height:64px;border-radius:50%;background:var(--color-primary-50);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:var(--color-primary);">
                {{ business.name|first }}
            </div>
            {% endif %}
            <div>
                <h1 style="font-size: var(--font-size-xl); font-weight: 800; color: var(--color-text);">{{ business.name }}</h1>
                <p class="text-sm text-secondary mt-1">Owner: <strong>{{ business.user.username }}</strong> &bull; Phone: {{ business.phone }} &bull; Email: {{ business.email }}</p>
                <span class="text-xs text-muted block mt-1">Registered on {{ business.created_at|date:"F d, Y H:i" }}</span>
            </div>
        </div>

        <div class="flex flex-col items-end gap-2">
            <div class="flex gap-2">
                <form method="post" action="{% url 'superadmin:business_toggle_verify' business.id %}">
                    {% csrf_token %}
                    {% if business.is_verified %}
                    <button type="submit" class="badge badge--live" style="border:none;cursor:pointer;padding:6px 12px;font-size:13px;">Trusted Business (Verified)</button>
                    {% else %}
                    <button type="submit" class="badge badge--ended" style="border:none;cursor:pointer;padding:6px 12px;font-size:13px;">Unverified (Click to Verify)</button>
                    {% endif %}
                </form>
                <form method="post" action="{% url 'superadmin:business_reset_password' business.id %}" onsubmit="return confirm('Generate a temporary password for this seller?');">
                    {% csrf_token %}
                    <button type="submit" class="btn btn--secondary btn--sm" style="font-size:12px;">Reset Seller Password</button>
                </form>
            </div>
            <span class="text-xs text-muted">Super admin support controls</span>
        </div>
    </div>

    <!-- Quick Stats Bar -->
    <div class="grid grid--3 gap-6 mt-6 pt-6" style="border-top:1px solid var(--color-border-light);">
        <div>
            <span class="text-xs text-muted block uppercase tracking-wider font-semibold">Total Gross Sales</span>
            <span style="font-size:var(--font-size-xl);font-weight:800;color:var(--color-text);">GHS {{ total_revenue|floatformat:2|intcomma }}</span>
        </div>
        <div style="background:var(--color-primary-50);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-primary-200);">
            <span class="text-xs text-muted block uppercase tracking-wider font-semibold" style="color:var(--color-primary-dark);">Platform Net Earnings From Business</span>
            <span style="font-size:var(--font-size-xl);font-weight:800;color:var(--color-primary-dark);">GHS {{ platform_earnings|floatformat:2|intcomma }}</span>
            <div class="flex justify-between text-xs text-secondary mt-1">
                <span>Booking: GHS {{ booking_fee_earnings|floatformat:2 }}</span>
                <span>5% Comm: GHS {{ commission_earnings|floatformat:2 }}</span>
            </div>
        </div>
        <div>
            <span class="text-xs text-muted block uppercase tracking-wider font-semibold">Sales & Catalog</span>
            <span style="font-size:var(--font-size-lg);font-weight:700;color:var(--color-text);">{{ sales.count }} Sales &bull; {{ products.count }} Products</span>
        </div>
    </div>
</div>

<!-- Sales History -->
<div class="dash-card mb-8">
    <div class="dash-card__header"><h3 class="dash-card__title">Sales Run by {{ business.name }}</h3></div>
    <div class="dash-card__body">
        {% if sales %}
        <div class="grid grid--2 gap-6">
            {% for sale in sales %}
            <div class="card card--flat">
                <div class="flex justify-between items-center mb-2">
                    <h4 class="font-bold text-base">{{ sale.title }}</h4>
                    <span class="badge badge--{{ sale.status }}">{{ sale.get_status_display }}</span>
                </div>
                <p class="text-xs text-muted mb-3">{{ sale.start_at|date:"M d, Y H:i" }} &rarr; {{ sale.end_at|date:"M d, Y H:i" }}</p>
                <div class="flex justify-between text-xs text-secondary pt-2" style="border-top:1px solid var(--color-border-light);">
                    <span>{{ sale.view_count }} Views &bull; {{ sale.order_count }} Paid Orders</span>
                    <strong style="color:var(--color-primary);">GHS {{ sale.revenue|default:0|floatformat:2|intcomma }}</strong>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-muted">No sales created yet.</p>
        {% endif %}
    </div>
</div>

<!-- Catalog Products -->
<div class="dash-card mb-8">
    <div class="dash-card__header"><h3 class="dash-card__title">Product Catalog</h3></div>
    <div class="dash-card__body">
        {% if products %}
        <div class="grid grid--3 gap-4">
            {% for prod in products %}
            <div class="card card--flat flex items-center gap-3">
                {% if prod.primary_image %}
                <img src="{{ prod.primary_image.image.url }}" alt="" style="width:48px;height:48px;border-radius:var(--radius-sm);object-fit:cover;">
                {% else %}
                <div style="width:48px;height:48px;border-radius:var(--radius-sm);background:var(--color-border-light);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:11px;">No img</div>
                {% endif %}
                <div>
                    <h4 class="font-semibold text-sm mb-1">{{ prod.name }}</h4>
                    <span class="text-xs text-muted block">Base Price: GHS {{ prod.base_price|floatformat:2 }}</span>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-muted">No products added yet.</p>
        {% endif %}
    </div>
</div>

<!-- Recent Orders -->
<div class="dash-card">
    <div class="dash-card__header"><h3 class="dash-card__title">Recent Customer Orders</h3></div>
    <div class="dash-card__body">
        {% if orders %}
        <div class="grid grid--2 gap-6">
            {% for order in orders %}
            <div class="card card--flat">
                <div class="flex justify-between items-center mb-2">
                    <span class="font-bold text-sm">Order #{{ order.order_number }}</span>
                    <span class="badge badge--{{ order.status }}">{{ order.get_status_display }}</span>
                </div>
                <p class="text-xs text-muted mb-1">Buyer: <strong>{{ order.buyer_name }}</strong> ({{ order.buyer_phone }})</p>
                {% if order.delivery_option %}
                <p class="text-xs text-muted mb-1">Delivery: {{ order.delivery_option.name }} (+GHS {{ order.delivery_fee|floatformat:2 }})</p>
                {% endif %}
                <div class="flex justify-between text-xs pt-2 mt-2" style="border-top:1px solid var(--color-border-light);">
                    <span class="text-muted">{{ order.created_at|date:"M d, H:i" }}</span>
                    <strong style="color:var(--color-primary);">GHS {{ order.total_amount|floatformat:2 }}</strong>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-muted">No orders placed yet.</p>
        {% endif %}
    </div>
</div>
{% endblock %}
