{% extends "indy_hub/base.html" %}
{% load i18n %}
{% load static %}
{% load humanize %}

{% block page_title %}{% trans "Transaction History" %}{% endblock page_title %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'indy_hub/css/page_headers.css' %}">
<link rel="stylesheet" href="{% static 'indy_hub/css/blueprints.css' %}">
<link rel="stylesheet" href="{% static 'indy_hub/css/material_exchange.css' %}?v=20260418-1030">
{% endblock extra_css %}

{% block content %}
<div class="container-fluid py-4">
    <div class="page-header mb-4">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div>
                <h2 class="h3 mb-1">
                    <i class="fas fa-file-invoice-dollar me-2"></i>
                    {% trans "Transaction History" %}
                </h2>
                <p class="description">{% trans "Complete transaction log and financial reports" %}</p>
            </div>
            <div class="d-flex gap-2">
                {% url 'indy_hub:material_exchange_stats_history' as stats_history_url %}
                {% if stats_history_url %}
                <a href="{{ stats_history_url }}" class="btn btn-primary">
                    <i class="fas fa-chart-line me-1"></i>{% trans "Stats History" %}
                </a>
                {% endif %}
                <a href="{% url 'indy_hub:material_exchange_index' %}" class="btn btn-outline-light">
                    <i class="fas fa-arrow-left me-1"></i>{% trans "Back to Hub" %}
                </a>
            </div>
        </div>
        <i class="fas fa-file-invoice-dollar header-bg"></i>
    </div>

    <div class="me-quick-stats mb-4">
        <div class="me-stat-card" data-accent="primary">
            <div class="me-stat-icon" aria-hidden="true">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="me-stat-content">
                <span class="me-stat-label">{% trans "Bought This Month" %}</span>
                <span class="me-stat-value">{{ month_stats.total_buy_volume|floatformat:0|intcomma }}</span>
                <small class="text-muted">ISK</small>
            </div>
            <span class="me-stat-glow" aria-hidden="true"></span>
        </div>
        <div class="me-stat-card" data-accent="success">
            <div class="me-stat-icon" aria-hidden="true">
                <i class="fas fa-hand-holding-usd"></i>
            </div>
            <div class="me-stat-content">
                <span class="me-stat-label">{% trans "Sold This Month" %}</span>
                <span class="me-stat-value">{{ month_stats.total_sell_volume|floatformat:0|intcomma }}</span>
                <small class="text-muted">ISK</small>
            </div>
            <span class="me-stat-glow" aria-hidden="true"></span>
        </div>
        <div class="me-stat-card" data-accent="primary">
            <div class="me-stat-icon" aria-hidden="true">
                <i class="fas fa-list"></i>
            </div>
            <div class="me-stat-content">
                <span class="me-stat-label">{% trans "Transactions" %}</span>
                <span class="me-stat-value">{{ month_stats.sell_count|add:month_stats.buy_count|intcomma }}</span>
                <small class="text-muted">{% trans "This month" %}</small>
            </div>
            <span class="me-stat-glow" aria-hidden="true"></span>
        </div>
    </div>

    <div class="glass-panel p-4">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
            <h5 class="mb-0">{% trans "All Transactions" %}</h5>
            <span class="badge rounded-pill text-bg-secondary">
                {{ page_obj.paginator.count|intcomma }} {% trans "records" %}
            </span>
        </div>

        <form method="get" class="card border-0 shadow-sm me-transactions-filter mb-4">
            <div class="card-body">
                <div class="row g-2 align-items-end">
                    <div class="col-lg-4 col-md-6">
                        <label for="txType" class="form-label mb-1">{% trans "Type" %}</label>
                        <select id="txType" name="type" class="form-select">
                            <option value="">{% trans "All types" %}</option>
                            <option value="sell" {% if transaction_type == 'sell' %}selected{% endif %}>{% trans "Sell Order" %}</option>
                            <option value="buy" {% if transaction_type == 'buy' %}selected{% endif %}>{% trans "Buy Order" %}</option>
                        </select>
                    </div>
                    <div class="col-lg-5 col-md-6">
                        <label for="txUser" class="form-label mb-1">{% trans "User" %}</label>
                        <input
                            id="txUser"
                            name="user"
                            type="text"
                            class="form-control"
                            value="{{ user_filter }}"
                            placeholder="{% trans 'Search by username' %}"
                        >
                    </div>
                    <div class="col-lg-3 col-md-12 d-flex gap-2">
                        <button type="submit" class="btn btn-primary flex-fill">
                            <i class="fas fa-filter me-1"></i>{% trans "Apply" %}
                        </button>
                        <a href="{% url 'indy_hub:material_exchange_transactions' %}" class="btn btn-outline-secondary flex-fill">
                            {% trans "Reset" %}
                        </a>
                    </div>
                </div>
            </div>
        </form>

        {% if transactions %}
        <div class="table-responsive">
            <table class="table table-hover align-middle me-transactions-table mb-0">
                <thead>
                    <tr>
                        <th>{% trans "Reference" %}</th>
                        <th>{% trans "Executed" %}</th>
                        <th>{% trans "Flow" %}</th>
                        <th>{% trans "User" %}</th>
                        <th>{% trans "Order Detail" %}</th>
                        <th class="text-end">{% trans "Financial Summary" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tx in transactions %}
                    <tr class="me-order-row">
                        <td data-label="{% trans 'Reference' %}">
                            <div class="me-tx-primary">
                                <div class="me-tx-title-row">
                                    {% if tx.has_linked_order %}
                                    <span class="me-tx-ref">{{ tx.order_reference }}</span>
                                    {% else %}
                                    <span class="badge rounded-pill text-bg-secondary">{% trans "No linked order" %}</span>
                                    {% endif %}
                                    <span class="me-tx-inline-chip">TX #{{ tx.id }}</span>
                                </div>
                                <div class="me-tx-subtext">
                                    {% blocktrans count count=tx.order_item_count %}1 line item{% plural %}{{ count }} line items{% endblocktrans %}
                                </div>
                            </div>
                        </td>
                        <td data-label="{% trans 'Executed' %}">
                            <div class="me-tx-date">
                                <strong>{{ tx.completed_at|date:"Y-m-d" }}</strong>
                                <span>{{ tx.completed_at|date:"H:i" }}</span>
                            </div>
                        </td>
                        <td data-label="{% trans 'Flow' %}">
                            <div class="me-tx-flow">
                                {% if tx.transaction_type == "sell" %}
                                <span class="me-tx-pill me-tx-pill--sell">
                                    <i class="fas fa-arrow-up-right-from-square"></i>
                                    {% trans "Sell Order" %}
                                </span>
                                <span class="me-tx-subtext">{% trans "Outgoing stock" %}</span>
                                {% else %}
                                <span class="me-tx-pill me-tx-pill--buy">
                                    <i class="fas fa-arrow-down"></i>
                                    {% trans "Buy Order" %}
                                </span>
                                <span class="me-tx-subtext">{% trans "Incoming stock" %}</span>
                                {% endif %}
                            </div>
                        </td>
                        <td data-label="{% trans 'User' %}">
                            <div class="me-tx-user">
                                <strong>{{ tx.user.username }}</strong>
                                <span class="me-tx-subtext">
                                    {% if tx.transaction_type == "sell" %}
                                    {% trans "Seller" %}
                                    {% else %}
                                    {% trans "Buyer" %}
                                    {% endif %}
                                </span>
                            </div>
                        </td>
                        <td data-label="{% trans 'Order Detail' %}">
                            <div class="me-tx-detail">
                                <div class="me-tx-summary-line">
                                    <strong>{{ tx.type_name }}</strong>
                                    <span>{{ tx.quantity|intcomma }} {% trans "units" %}</span>
                                </div>
                                <ul class="me-tx-breakdown mb-0">
                                    {% for item in tx.order_items %}
                                    <li>
                                        <span class="me-tx-breakdown__name">{{ item.type_name }}</span>
                                        <span class="me-tx-breakdown__meta">{{ item.quantity|intcomma }} × {{ item.unit_price|floatformat:2|intcomma }} ISK</span>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </td>
                        <td data-label="{% trans 'Financial Summary' %}" class="text-end">
                            <div class="me-tx-financial">
                                <div class="me-tx-kpi">
                                    <span class="me-tx-kpi__label">{% trans "Order total" %}</span>
                                    <strong>{{ tx.order_total_price|floatformat:0|intcomma }} ISK</strong>
                                </div>
                                <div class="me-tx-kpi-grid">
                                    <div class="me-tx-kpi me-tx-kpi--compact">
                                        <span class="me-tx-kpi__label">{% trans "Quantity" %}</span>
                                        <strong>{{ tx.quantity|intcomma }}</strong>
                                    </div>
                                    <div class="me-tx-kpi me-tx-kpi--compact">
                                        <span class="me-tx-kpi__label">{% if tx.order_item_count > 1 %}{% trans "Avg unit" %}{% else %}{% trans "Unit price" %}{% endif %}</span>
                                        <strong>{{ tx.unit_price|floatformat:2|intcomma }} ISK</strong>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if is_paginated %}
        <nav class="mt-4">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1{% if transaction_type %}&type={{ transaction_type }}{% endif %}{% if user_filter %}&user={{ user_filter|urlencode }}{% endif %}">{% trans "First" %}</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if transaction_type %}&type={{ transaction_type }}{% endif %}{% if user_filter %}&user={{ user_filter|urlencode }}{% endif %}">{% trans "Previous" %}</a>
                </li>
                {% endif %}

                <li class="page-item active">
                    <span class="page-link">
                        {% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}
                    </span>
                </li>

                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if transaction_type %}&type={{ transaction_type }}{% endif %}{% if user_filter %}&user={{ user_filter|urlencode }}{% endif %}">{% trans "Next" %}</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if transaction_type %}&type={{ transaction_type }}{% endif %}{% if user_filter %}&user={{ user_filter|urlencode }}{% endif %}">{% trans "Last" %}</a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
        {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i>
            {% trans "No transactions yet." %}
        </div>
        {% endif %}
    </div>
</div>
        </div>
</div>
{% endblock content %}