{% extends "allianceauth/base-bs5.html" %}
{% load i18n %}
{% load static %}
{% load humanize %}

{% block page_title %}{% trans "My Copy Requests" %}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'indy_hub/css/page_headers.css' %}">
<link rel="stylesheet" href="{% static 'indy_hub/css/blueprints.css' %}">
{% endblock %}

{% block content %}
<main class="bp-request-surface bg-body">
    <div class="container-fluid my-4">
        <section class="page-header bp-request-hero mb-4 position-relative overflow-hidden">
            <i class="fas fa-clipboard-list header-bg"></i>
            <div class="bp-request-hero__content position-relative">
                <div class="row g-4 align-items-center">
                    <div class="col-lg-8">
                        <div class="d-flex align-items-start gap-3">
                            <span class="bp-request-hero__icon flex-shrink-0">
                                <i class="fas fa-clipboard-list"></i>
                            </span>
                            <div>
                                <span class="bp-request-hero__eyebrow text-uppercase fw-semibold text-white-50">{% trans "Buyer cockpit" %}</span>
                                <h1 class="bp-request-hero__title display-6 fw-bold text-white mb-2">
                                    {% trans "My copy requests" %}
                                </h1>
                                <p class="bp-request-hero__subtitle text-white-50 mb-0">
                                    {% trans "Monitor each request, respond to offers, and follow delivery progress." %}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="bp-request-hero__metrics">
                            <div class="bp-request-hero__metric">
                                <span class="bp-request-hero__metric-label">{% trans "Open requests" %}</span>
                                <span class="bp-request-hero__metric-value">{{ metrics.open|default:0 }}</span>
                            </div>
                            <div class="bp-request-hero__metric">
                                <span class="bp-request-hero__metric-label">{% trans "Action needed" %}</span>
                                <span class="bp-request-hero__metric-value">{{ metrics.action_required|default:0 }}</span>
                            </div>
                            <a href="{% url 'indy_hub:index' %}" class="btn btn-outline-light btn-sm mt-3">
                                <i class="fas fa-arrow-left me-1"></i>{% trans "Back to dashboard" %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    <section class="row g-3 mb-4 bp-metrics-row">
            <div class="col-md-3">
                <div class="glass-panel h-100 p-3">
                    <div class="d-flex align-items-center gap-3">
                        <span class="badge rounded-pill bg-warning-subtle text-warning px-3 py-2 fw-semibold">
                            <i class="fas fa-hourglass-half me-2"></i>{{ metrics.open|default:0 }}
                        </span>
                        <div class="small text-muted">
                            <strong>{% trans "Waiting for builders" %}</strong><br>
                            {% trans "Requests with no accepted offers yet." %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="glass-panel h-100 p-3">
                    <div class="d-flex align-items-center gap-3">
                        <span class="badge rounded-pill bg-info-subtle text-info px-3 py-2 fw-semibold">
                            <i class="fas fa-exclamation-circle me-2"></i>{{ metrics.action_required|default:0 }}
                        </span>
                        <div class="small text-muted">
                            <strong>{% trans "Your action" %}</strong><br>
                            {% trans "Review conditional offers waiting for approval." %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="glass-panel h-100 p-3">
                    <div class="d-flex align-items-center gap-3">
                        <span class="badge rounded-pill bg-success-subtle text-success px-3 py-2 fw-semibold">
                            <i class="fas fa-shipping-fast me-2"></i>{{ metrics.awaiting_delivery|default:0 }}
                        </span>
                        <div class="small text-muted">
                            <strong>{% trans "In delivery" %}</strong><br>
                            {% trans "A builder accepted—awaiting handover." %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="glass-panel h-100 p-3">
                    <div class="d-flex align-items-center gap-3">
                        <span class="badge rounded-pill bg-secondary-subtle text-secondary px-3 py-2 fw-semibold">
                            <i class="fas fa-check-double me-2"></i>{{ metrics.delivered|default:0 }}
                        </span>
                        <div class="small text-muted">
                            <strong>{% trans "Completed" %}</strong><br>
                            {% trans "Deliveries marked as finished." %}
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {% if my_requests %}
        <section class="row row-cols-1 row-cols-lg-2 g-3">
            {% for req in my_requests %}
            <div class="col">
                <article class="card h-100 shadow-sm request-card">
                    <div class="card-body d-flex flex-column gap-3">
                        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-start gap-3">
                            <div class="d-flex align-items-center gap-3">
                                <span class="bp-request-card__avatar">
                                    <img
                                        src="{{ req.icon_url }}"
                                        alt="{{ req.type_name }}"
                                        loading="lazy"
                                        onerror="this.onerror=null;this.src='https://images.evetech.net/types/{{ req.type_id }}/icon?size=64'"
                                    >
                                </span>
                                <div>
                                    <h2 class="h5 mb-1">{{ req.type_name }}</h2>
                                    <p class="text-muted small mb-0">
                                        <i class="fas fa-clock me-1"></i>{{ req.created_at|naturaltime }}
                                    </p>
                                </div>
                            </div>
                            <span class="badge {{ req.status_class }} fw-semibold text-uppercase px-3 py-2">
                                {{ req.status_label }}
                            </span>
                        </div>

                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge rounded-pill bg-primary-subtle text-primary fw-semibold">ME {{ req.material_efficiency }}</span>
                            <span class="badge rounded-pill bg-success-subtle text-success fw-semibold">TE {{ req.time_efficiency }}</span>
                        </div>

                        <div class="row g-2">
                            <div class="col-6">
                                <div class="border rounded-3 text-center py-3">
                                    <span class="d-block text-uppercase small text-muted">{% trans "Copies" %}</span>
                                    <span class="fs-4 fw-bold text-primary">{{ req.copies_requested }}</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="border rounded-3 text-center py-3">
                                    <span class="d-block text-uppercase small text-muted">{% trans "Runs" %}</span>
                                    <span class="fs-4 fw-bold text-warning">{{ req.runs_requested }}</span>
                                </div>
                            </div>
                        </div>

                        <p class="text-muted small mb-0">{{ req.status_hint }}</p>

                        {% if req.accepted_offer %}
                        <div class="alert alert-success mb-0">
                            <i class="fas fa-handshake me-2"></i>
                            {% blocktrans with builder=req.accepted_offer.owner_username %}Accepted by {{ builder }}{% endblocktrans %}
                            {% if req.accepted_offer.message %}
                            <p class="mb-0 small text-success mt-2">“{{ req.accepted_offer.message }}”</p>
                            {% endif %}
                        </div>
                        {% elif req.cond_accepted %}
                        <div class="alert alert-info mb-0">
                            <i class="fas fa-file-signature me-2"></i>
                            {% blocktrans with builder=req.cond_accepted.owner_username %}Conditional offer accepted from {{ builder }}{% endblocktrans %}
                            {% if req.cond_accepted.message %}
                            <p class="mb-0 small text-info mt-2">“{{ req.cond_accepted.message }}”</p>
                            {% endif %}
                        </div>
                        {% endif %}

                        {% if req.cond_offers %}
                        <div class="d-flex flex-column gap-2">
                            {% for offer in req.cond_offers %}
                            <div class="alert bg-warning-subtle border-warning-subtle text-dark mb-0">
                                <div class="d-flex flex-column flex-md-row justify-content-between gap-2">
                                    <div>
                                        <strong>{% blocktrans with builder=offer.owner_username %}Offer from {{ builder }}{% endblocktrans %}</strong>
                                        {% if offer.message %}
                                        <p class="mb-0 small text-dark">“{{ offer.message }}”</p>
                                        {% endif %}
                                    </div>
                                    <form method="post" action="{% url 'indy_hub:bp_buyer_accept_offer' offer.id %}" class="d-grid">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-primary btn-sm">
                                            <i class="fas fa-thumbs-up me-1"></i>{% trans "Accept this offer" %}
                                        </button>
                                    </form>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}

                        {% if req.delivered %}
                        <div class="alert alert-secondary mb-0">
                            <i class="fas fa-check-double me-1"></i>{% trans "Delivery confirmed. Blueprints are in your hands." %}
                        </div>
                        {% endif %}

                        <div class="mt-auto d-flex justify-content-center gap-2">
                            {% if req.can_cancel %}
                            <form action="{% url 'indy_hub:bp_cancel_copy_request' req.id %}" method="post">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-outline-danger btn-sm">
                                    <i class="fas fa-times me-1"></i>{% trans "Cancel request" %}
                                </button>
                            </form>
                            {% endif %}
                        </div>
                    </div>
                </article>
            </div>
            {% endfor %}
        </section>
        {% else %}
        <section class="bp-request-empty card border-0 shadow-sm">
            <div class="card-body text-center py-5">
                <span class="bp-request-empty__icon"><i class="fas fa-clipboard-check"></i></span>
                <h2 class="h4 mt-3">{% trans "No copy requests yet" %}</h2>
                <p class="text-muted small mb-4">{% trans "Submit your first request to see progress updates here." %}</p>
                <a href="{% url 'indy_hub:bp_copy_request_page' %}" class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-copy me-1"></i>{% trans "Browse available blueprints" %}
                </a>
            </div>
        </section>
        {% endif %}
    </div>
</main>
{% endblock %}