{% extends 'base.html' %}
{% block title %}Price Trends — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 1100px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Regional Price Trends</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>
        <p style="color: var(--muted); margin-bottom: 24px;">
            Record a new farm/market price for a product in a region. The percentage change and up/down/tied
            direction shown everywhere in the app are always calculated automatically from the previous entry
            — never typed in manually.
        </p>

        <div class="contact-form-wrap" style="max-width: 500px; margin-bottom: 40px;">
            <form method="post" class="contact-form">
                {% csrf_token %}
                {% for field in form %}
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                    {% if field.errors %}<div class="field-error">{{ field.errors }}</div>{% endif %}
                {% endfor %}
                <button type="submit" class="btn-cta">Record Price</button>
            </form>
        </div>

        {% for product in products %}
        <div class="admin-stat-card" style="margin-bottom: 20px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                <strong>{{ product.name }}</strong>
                {% if product.price_badge %}
                <span class="surface-badge {% if product.price_badge.direction == 'up' %}ok{% elif product.price_badge.direction == 'down' %}warn{% endif %}">
                    {% if product.price_badge.direction == 'up' %}&#9650;{% elif product.price_badge.direction == 'down' %}&#9660;{% else %}&#8212;{% endif %}
                    {% if product.price_badge.change_pct != None %}{{ product.price_badge.change_pct }}%{% else %}new{% endif %}
                </span>
                {% endif %}
            </div>
            {% if product.regional_trends %}
            <table class="admin-table">
                <thead><tr><th>Region</th><th>Farm Price</th><th>Market Price</th><th>Trend</th><th>Last updated</th></tr></thead>
                <tbody>
                    {% for t in product.regional_trends %}
                    <tr>
                        <td>{{ t.region }}</td>
                        <td>TSh {{ t.farm_price|floatformat:0 }}</td>
                        <td>TSh {{ t.market_price|floatformat:0 }}</td>
                        <td>
                            {% if t.change_pct != None %}
                                <span class="surface-badge {% if t.direction == 'up' %}ok{% elif t.direction == 'down' %}warn{% endif %}">
                                    {% if t.direction == 'up' %}&#9650;{% elif t.direction == 'down' %}&#9660;{% else %}&#8212;{% endif %} {{ t.change_pct }}%
                                </span>
                            {% else %}
                                <span style="color: var(--muted); font-size: 0.85rem;">first entry</span>
                            {% endif %}
                        </td>
                        <td style="color: var(--muted); font-size: 0.85rem;">{{ t.recorded_at_display|date:"d M Y, H:i" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

            {% if product.price_history %}
            <details class="price-history-details">
                <summary>View full price history ({{ product.price_history|length }} update{{ product.price_history|length|pluralize }}) &mdash; see how this product has fluctuated over time</summary>
                <table class="admin-table" style="margin-top: 10px;">
                    <thead><tr><th>Date &amp; time</th><th>Region</th><th>Farm Price</th><th>Market Price</th><th>Change</th></tr></thead>
                    <tbody>
                        {% for h in product.price_history %}
                        <tr>
                            <td>{{ h.recorded_at_display|date:"d M Y, H:i" }}</td>
                            <td>{{ h.region }}</td>
                            <td>TSh {{ h.farm_price|floatformat:0 }}</td>
                            <td>TSh {{ h.market_price|floatformat:0 }}</td>
                            <td>
                                {% if h.change_pct != None %}
                                    <span class="surface-badge {% if h.direction == 'up' %}ok{% elif h.direction == 'down' %}warn{% endif %}">
                                        {% if h.direction == 'up' %}&#9650;{% elif h.direction == 'down' %}&#9660;{% else %}&#8212;{% endif %} {{ h.change_pct }}%
                                    </span>
                                {% else %}
                                    <span style="color: var(--muted); font-size: 0.85rem;">first entry</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </details>
            {% endif %}
            {% else %}
            <p style="color: var(--muted); font-size: 0.9rem;">No price history recorded yet for this product.</p>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</section>
{% endblock %}