{% extends 'aapayout/base.html' %}
{% load i18n %}
{% load humanize %}
{% load aapayout_filters %}

{% block details %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-8">
            <h2>{{ loot_pool.name }}</h2>
            <p class="text-muted">
                {% translate "Fleet" %}: <a href="{% url 'aapayout:fleet_detail' loot_pool.fleet.pk %}">{{ loot_pool.fleet.name }}</a>
            </p>
        </div>
        <div class="col-md-4 text-end">
            {% if can_approve %}
                {% if loot_pool.status == 'valued' %}
                    <a href="{% url 'aapayout:loot_approve' loot_pool.pk %}" class="btn btn-success">
                        <i class="fas fa-check"></i> {% translate "Approve for Payout" %}
                    </a>
                {% endif %}
            {% endif %}
        </div>
    </div>

    <!-- Loot Pool Summary -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Status" %}</h5>
                </div>
                <div class="card-body">
                    {% if loot_pool.status == 'draft' %}
                        <span class="badge bg-secondary fs-5">{{ loot_pool.get_status_display }}</span>
                    {% elif loot_pool.status == 'valuing' %}
                        <span class="badge bg-warning fs-5">{{ loot_pool.get_status_display }}</span>
                        <p class="mt-2 small text-muted">{% translate "Fetching prices from Janice API..." %}</p>
                        {% if can_approve %}
                            <a href="{% url 'aapayout:loot_reappraise' loot_pool.pk %}" class="btn btn-sm btn-outline-warning mt-2">
                                <i class="fas fa-redo"></i> {% translate "Retry Valuation" %}
                            </a>
                        {% endif %}
                    {% elif loot_pool.status == 'valued' %}
                        <span class="badge bg-info fs-5">{{ loot_pool.get_status_display }}</span>
                        <p class="mt-2 small text-muted">{% translate "Ready for approval" %}</p>
                    {% elif loot_pool.status == 'approved' %}
                        <span class="badge bg-success fs-5">{{ loot_pool.get_status_display }}</span>
                        <p class="mt-2 small text-muted">{% translate "Payouts generated" %}</p>
                    {% elif loot_pool.status == 'paid' %}
                        <span class="badge bg-primary fs-5">{{ loot_pool.get_status_display }}</span>
                        <p class="mt-2 small text-muted">{% translate "All payouts completed" %}</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Total Value" %}</h5>
                </div>
                <div class="card-body">
                    <h3 class="text-primary">{{ loot_pool.total_value|isk_format_full }}</h3>
                    <small class="text-muted">
                        {% translate "Based on" %} {{ loot_pool.get_pricing_method_display }}
                    </small>
                    {% if loot_pool.valued_at %}
                        <p class="small text-muted mt-2">
                            {% translate "Valued at" %}: {{ loot_pool.valued_at|date:"Y-m-d H:i" }}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Distribution" %}</h5>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-6">{% translate "Corp Share" %} ({{ loot_pool.corp_share_percentage }}%):</dt>
                        <dd class="col-sm-6 text-end">{{ loot_pool.corp_share_amount|isk_format_full }}</dd>

                        <dt class="col-sm-6">{% translate "Participants" %}:</dt>
                        <dd class="col-sm-6 text-end">{{ loot_pool.participant_share_amount|isk_format_full }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- Loot Items Table -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5>{% translate "Loot Items" %} ({{ items.count }})</h5>
                    {% if loot_pool.janice_appraisal_code %}
                        <a href="https://janice.e-351.com/a/{{ loot_pool.janice_appraisal_code }}"
                           target="_blank" class="btn btn-sm btn-info">
                            <i class="fas fa-external-link-alt"></i> {% translate "View on Janice" %}
                        </a>
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if items %}
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>{% translate "Item Name" %}</th>
                                    <th class="text-end">{% translate "Quantity" %}</th>
                                    <th class="text-end">{% translate "Unit Price" %}</th>
                                    <th class="text-end">{% translate "Total Value" %}</th>
                                    <th>{% translate "Price Source" %}</th>
                                    <th>{% translate "Manual Override" %}</th>
                                    {% if can_edit %}
                                        <th>{% translate "Actions" %}</th>
                                    {% endif %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in items %}
                                <tr>
                                    <td>{{ item.name }}</td>
                                    <td class="text-end">{{ item.quantity|intcomma }}</td>
                                    <td class="text-end">{{ item.unit_price|isk_format_full }}</td>
                                    <td class="text-end"><strong>{{ item.total_value|isk_format_full }}</strong></td>
                                    <td>
                                        <span class="badge bg-secondary">{{ item.get_price_source_display }}</span>
                                    </td>
                                    <td>
                                        {% if item.manual_override %}
                                            <span class="badge bg-warning text-dark">
                                                <i class="fas fa-exclamation-triangle"></i> {% translate "Manual" %}
                                            </span>
                                        {% else %}
                                            —
                                        {% endif %}
                                    </td>
                                    {% if can_edit %}
                                    <td>
                                        <a href="{% url 'aapayout:loot_edit_item' loot_pool.pk item.pk %}"
                                           class="btn btn-sm btn-warning" title="{% translate 'Edit Price' %}">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                    </td>
                                    {% endif %}
                                </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                                <tr class="table-active">
                                    <th colspan="3" class="text-end">{% translate "Grand Total" %}:</th>
                                    <th class="text-end">{{ loot_pool.total_value|isk_format_full }}</th>
                                    <th colspan="{% if can_edit %}3{% else %}2{% endif %}"></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted">{% translate "No items in this loot pool yet" %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Payouts (if approved) -->
    {% if loot_pool.status == 'approved' or loot_pool.status == 'paid' %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5>{% translate "Payouts" %}</h5>
                    <a href="{% url 'aapayout:payout_list' loot_pool.pk %}" class="btn btn-sm btn-primary">
                        <i class="fas fa-list"></i> {% translate "Manage Payouts" %}
                    </a>
                </div>
                <div class="card-body">
                    <p class="small text-muted">
                        {% translate "This loot pool has been approved and payouts have been generated." %}
                        <a href="{% url 'aapayout:payout_list' loot_pool.pk %}">{% translate "View payout details" %}</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Raw Loot Text (collapsible) -->
    {% if loot_pool.raw_loot_text %}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <a class="text-decoration-none" data-bs-toggle="collapse" href="#rawLootCollapse" role="button" aria-expanded="false">
                        <h5>
                            <i class="fas fa-chevron-down"></i> {% translate "Raw Loot Text" %}
                        </h5>
                    </a>
                </div>
                <div class="collapse" id="rawLootCollapse">
                    <div class="card-body">
                        <pre class="bg-dark text-light p-3 rounded" style="max-height: 400px; overflow-y: auto;">{{ loot_pool.raw_loot_text }}</pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}