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

{% block page_title %}{% trans "Fulfill 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' %}">
<link rel="stylesheet" href="{% static 'indy_hub/css/chat.css' %}">
{% endblock %}

{% block content %}
<main class="bp-request-surface bg-body" data-auto-open-chat="{{ auto_open_chat_id|default_if_none:'' }}">
    <div class="container-fluid my-4">
        <section class="page-header bp-request-hero mb-4 position-relative overflow-hidden">
            <i class="fas fa-handshake 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-handshake"></i>
                            </span>
                            <div>
                                <span class="bp-request-hero__eyebrow text-uppercase fw-semibold text-white-50">{% trans "Builder operations" %}</span>
                                <h1 class="bp-request-hero__title display-6 fw-bold text-white mb-2">
                                    {% trans "Fulfill copy requests" %}
                                </h1>
                                <p class="bp-request-hero__subtitle text-white-50 mb-0">
                                    {% trans "Review outstanding asks, respond with offers, and close the loop once the copies are delivered." %}
                                </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 "Active requests" %}</span>
                                <span class="bp-request-hero__metric-value">{{ metrics.total|default:0 }}</span>
                            </div>
                            <div class="bp-request-hero__metric">
                                <span class="bp-request-hero__metric-label">{% trans "Awaiting your action" %}</span>
                                <span class="bp-request-hero__metric-value">{{ metrics.awaiting_response|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="glass-panel mb-4 p-4">
            <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-between gap-3 mb-3">
                <div>
                    <h2 class="h5 mb-1 d-flex align-items-center gap-2">
                        <i class="fas fa-route text-primary"></i>{% trans "Fulfilment playbook" %}
                    </h2>
                    <p class="text-muted small mb-0">{% trans "Stay on top of requests, respond clearly, and close the loop with delivery confirmations." %}</p>
                </div>
            </div>
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-0">
                        <div class="card-body">
                            <div class="d-flex align-items-center gap-3 mb-2">
                                <span class="badge bg-primary text-white rounded-circle px-2 py-1">1</span>
                                <h3 class="h6 mb-0">{% trans "Review matching asks" %}</h3>
                            </div>
                            <p class="text-muted small mb-0">{% trans "Check availability hints and your queue metrics to prioritise the requests you can accept." %}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-0">
                        <div class="card-body">
                            <div class="d-flex align-items-center gap-3 mb-2">
                                <span class="badge bg-primary text-white rounded-circle px-2 py-1">2</span>
                                <h3 class="h6 mb-0">{% trans "Respond with clarity" %}</h3>
                            </div>
                            <p class="text-muted small mb-0">{% trans "Accept, reject, or share conditions so the requester knows exactly what to expect." %}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-0">
                        <div class="card-body">
                            <div class="d-flex align-items-center gap-3 mb-2">
                                <span class="badge bg-primary text-white rounded-circle px-2 py-1">3</span>
                                <h3 class="h6 mb-0">{% trans "Deliver and update" %}</h3>
                            </div>
                            <p class="text-muted small mb-0">{% trans "Finish the contract in game, then mark it delivered here so the request closes automatically." %}</p>
                        </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-primary-subtle text-primary px-3 py-2 fw-semibold">{{ metrics.total|default:0 }}</span>
                        <div class="small text-muted">
                            <strong class="d-block">{% trans "Active requests" %}</strong>
                            {% trans "Total matching your shared originals." %}
                        </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-warning-subtle text-warning px-3 py-2 fw-semibold">{{ metrics.awaiting_response|default:0 }}</span>
                        <div class="small text-muted">
                            <strong class="d-block">{% trans "Needs response" %}</strong>
                            {% trans "Accept, reject, or counter with conditions." %}
                        </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">{{ metrics.waiting_on_buyer|default:0 }}</span>
                        <div class="small text-muted">
                            <strong class="d-block">{% trans "Waiting on buyer" %}</strong>
                            {% trans "Your conditional offer is pending their decision." %}
                        </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">{{ metrics.ready_to_deliver|default:0 }}</span>
                        <div class="small text-muted">
                            <strong class="d-block">{% trans "Ready to deliver" %}</strong>
                            {% trans "Buyer accepted—hand over the copies." %}
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {% if requests %}
    <section class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3">
            {% for req in 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-user me-1"></i>{% trans "Requested by" %} {{ req.requester }}
                                    </p>
                                    <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.all_copies_busy %}
                        <div class="alert bg-danger border-danger text-white py-2 px-3 small mb-0">
                            <i class="fas fa-stopwatch me-1"></i>
                            {% if req.busy_until %}
                                {% if req.busy_overdue %}
                                    {% blocktrans trimmed with busy=req.busy_until|naturaltime %}
                                    The latest copy job finished {{ busy }}, but it's still marked active in game. Deliver it to free this original.
                                    {% endblocktrans %}
                                {% else %}
                                    {% blocktrans trimmed with busy=req.busy_until|naturaltime %}
                                    All matching originals are busy. Next copy slot frees {{ busy }}.
                                    {% endblocktrans %}
                                {% endif %}
                                <span class="d-block text-muted fw-semibold mt-1">{{ req.busy_until|date:"Y-m-d H:i" }} {% trans "EVE time" %}</span>
                            {% else %}
                                {% trans "All matching originals are currently running copy jobs." %}
                            {% endif %}
                        </div>
                        {% endif %}

                        {% if req.is_self_request %}
                        <div class="alert bg-info border-info text-white py-2 px-3 small mb-0">
                            <i class="fas fa-info-circle me-1"></i>
                            {% trans "This request is yours. You can follow its progress here, but responses are disabled." %}
                        </div>
                        {% endif %}

                        {% if req.my_offer_status and req.status_key != 'waiting_on_buyer' %}
                        <div class="alert alert-light border d-flex flex-column gap-1 mb-0">
                            <span class="small text-uppercase text-secondary fw-semibold">{% trans "Your latest offer" %}</span>
                            <div class="d-flex align-items-center gap-2">
                                <span class="badge bg-secondary text-white">{{ req.my_offer_status_label }}</span>
                                {% if req.my_offer_accepted_by_buyer %}
                                <span class="badge bg-success text-white">{% trans "Buyer accepted" %}</span>
                                {% endif %}
                                {% if req.my_offer_accepted_by_seller and not req.my_offer_accepted_by_buyer %}
                                <span class="badge bg-warning text-dark">{% trans "Waiting on buyer" %}</span>
                                {% endif %}
                            </div>
                            {% if req.my_offer_message %}
                            <p class="mb-0 small text-muted">“{{ req.my_offer_message }}”</p>
                            {% endif %}
                        </div>
                        {% endif %}

                        {% if req.handshake %}
                            {% if req.handshake.state == 'waiting_on_you' %}
                            <div class="alert alert-warning mb-0">
                                <i class="fas fa-hourglass-half me-1"></i>{% trans "The buyer accepted your terms. Confirm in chat to finalise the agreement." %}
                            </div>
                            {% elif req.handshake.state == 'waiting_on_buyer' and req.show_offer_actions %}
                            <div class="alert alert-info mb-0 d-flex flex-wrap align-items-center gap-2">
                                <span>
                                    <i class="fas fa-user-clock me-1"></i>{% trans "Waiting for the buyer to accept your conditions." %}
                                </span>
                                {% if req.chat %}
                                <button
                                    type="button"
                                    class="bp-btn bp-chat-pill btn-sm bp-chat-trigger"
                                    data-chat-fetch-url="{{ req.chat.fetch_url }}"
                                    data-chat-send-url="{{ req.chat.send_url }}"
                                    data-chat-role="seller"
                                    data-chat-type-name="{{ req.type_name }}"
                                    data-chat-type-id="{{ req.type_id }}"
                                    data-chat-has-unread="{{ req.chat.has_unread|yesno:'true,false' }}"
                                    data-chat-id="{{ req.chat.id }}"
                                    aria-haspopup="dialog"
                                >
                                    <i class="fas fa-comments"></i>
                                    <span>{% trans "Open chat" %}</span>
                                    {% if req.chat.has_unread %}
                                    <span class="bp-chat-trigger__badge" aria-hidden="true">
                                        <i class="fas fa-circle-dot"></i>
                                    </span>
                                    {% endif %}
                                </button>
                                {% endif %}
                            </div>
                            {% elif req.handshake.state == 'ready_to_deliver' %}
                            <div class="alert alert-success mb-0">
                                <i class="fas fa-check-circle me-1"></i>{% trans "Both sides confirmed. Proceed with delivery." %}
                            </div>
                            {% endif %}
                        {% endif %}

                        <div class="mt-auto">
                            {% if req.status_key == 'waiting_on_buyer' and not req.show_offer_actions %}
                                <div class="alert alert-info w-100 mb-3 d-flex flex-wrap align-items-center gap-2">
                                    <span>
                                        <i class="fas fa-info-circle me-1"></i>
                                        {% trans "Waiting for the requester to respond to your conditions." %}
                                    </span>
                                    {% if req.chat %}
                                    <button
                                        type="button"
                                        class="bp-btn bp-chat-pill btn-sm bp-chat-trigger"
                                        data-chat-fetch-url="{{ req.chat.fetch_url }}"
                                        data-chat-send-url="{{ req.chat.send_url }}"
                                        data-chat-role="seller"
                                        data-chat-type-name="{{ req.type_name }}"
                                        data-chat-type-id="{{ req.type_id }}"
                                        data-chat-has-unread="{{ req.chat.has_unread|yesno:'true,false' }}"
                                        data-chat-id="{{ req.chat.id }}"
                                        aria-haspopup="dialog"
                                    >
                                        <i class="fas fa-comments"></i>
                                        <span>{% trans "Open chat" %}</span>
                                        {% if req.chat.has_unread %}
                                        <span class="bp-chat-trigger__badge" aria-hidden="true">
                                            <i class="fas fa-circle-dot"></i>
                                        </span>
                                        {% endif %}
                                    </button>
                                    {% endif %}
                                </div>
                                {% include "indy_hub/includes/chat_preview.html" with preview=req.chat_preview %}
                            {% else %}
                                <div class="bp-card-toolbar">
                                    {% if req.show_offer_actions %}
                                    <div class="bp-card-toolbar__group" role="group" aria-label="{% trans 'Primary decision actions' %}">
                                        <form method="post" action="{% url 'indy_hub:bp_offer_copy_request' req.id %}" class="bp-card-toolbar__form">
                                            {% csrf_token %}
                                            <input type="hidden" name="action" value="accept">
                                            <button type="submit" class="bp-btn bp-btn-soft-success btn-sm">
                                                <i class="fas fa-hand-holding-heart"></i>
                                                <span>{% trans "Accept for free" %}</span>
                                            </button>
                                        </form>
                                        <form method="post" action="{% url 'indy_hub:bp_offer_copy_request' req.id %}" class="bp-card-toolbar__form">
                                            {% csrf_token %}
                                            <input type="hidden" name="action" value="reject">
                                            <button
                                                type="submit"
                                                class="bp-btn bp-btn-soft-danger btn-sm"
                                                onclick="return confirm('{% trans "Decline this request?" %}')"
                                            >
                                                <i class="fas fa-ban"></i>
                                                <span>{% trans "Decline" %}</span>
                                            </button>
                                        </form>
                                    </div>
                                    <div class="bp-card-toolbar__group" role="group" aria-label="{% trans 'Conditional decision actions' %}">
                                        <form method="post" action="{% url 'indy_hub:bp_offer_copy_request' req.id %}" class="bp-card-toolbar__form">
                                            {% csrf_token %}
                                            <input type="hidden" name="action" value="conditional">
                                            <button
                                                type="submit"
                                                class="bp-btn bp-btn-soft-info btn-sm"
                                            >
                                                <i class="fas fa-comment-dots"></i>
                                                <span>{% trans "Send conditions" %}</span>
                                            </button>
                                        </form>
                                    </div>
                                    {% endif %}

                                    {% if req.can_mark_delivered %}
                                    <div class="bp-card-toolbar__group">
                                        <form method="post" action="{% url 'indy_hub:bp_mark_copy_delivered' req.id %}" class="bp-card-toolbar__form">
                                            {% csrf_token %}
                                            <button type="submit" class="bp-btn bp-btn-soft-primary btn-sm">
                                                <i class="fas fa-box-check"></i>
                                                <span>{% trans "Mark as delivered" %}</span>
                                            </button>
                                        </form>
                                    </div>
                                    {% endif %}

                                    {% if req.chat %}
                                    <div class="bp-card-toolbar__group bp-card-toolbar__group--stacked bp-card-toolbar__group--push">
                                        <button
                                            type="button"
                                            class="bp-btn bp-chat-pill btn-sm bp-chat-trigger"
                                            data-chat-fetch-url="{{ req.chat.fetch_url }}"
                                            data-chat-send-url="{{ req.chat.send_url }}"
                                            data-chat-role="seller"
                                            data-chat-type-name="{{ req.type_name }}"
                                            data-chat-type-id="{{ req.type_id }}"
                                            data-chat-has-unread="{{ req.chat.has_unread|yesno:'true,false' }}"
                                            data-chat-id="{{ req.chat.id }}"
                                            aria-haspopup="dialog"
                                        >
                                            <i class="fas fa-comments"></i>
                                            <span>{% trans "Open chat" %}</span>
                                            {% if req.chat.has_unread %}
                                            <span class="bp-chat-trigger__badge" aria-hidden="true">
                                                <i class="fas fa-circle-dot"></i>
                                            </span>
                                            {% endif %}
                                        </button>
                                        {% if req.chat.last_message_display %}
                                        <span class="bp-card-toolbar__timestamp">
                                            {% blocktrans with timestamp=req.chat.last_message_display %}Last message {{ timestamp }}{% endblocktrans %}
                                        </span>
                                        {% endif %}
                                    </div>
                                    {% endif %}
                                </div>

                                {% include "indy_hub/includes/chat_preview.html" with preview=req.chat_preview %}
                            {% 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-smile"></i></span>
                <h2 class="h4 mt-3">{% trans "You're all caught up" %}</h2>
                <p class="text-muted small mb-4">{% trans "There are no copy requests matching your shared originals right now." %}</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 community requests" %}
                </a>
            </div>
        </section>
        {% endif %}
    </div>
</main>
{% block indy_hub_global_modals %}
    {{ block.super }}
    {% include "indy_hub/includes/bp_chat_modal.html" %}
{% endblock %}
{% endblock %}

{% block extra_javascript %}
{{ block.super }}
<script>
    window.indyChatDefaults = Object.assign({}, window.indyChatDefaults || {}, {
        viewerRole: 'seller',
        labels: {
            buyer: '{% trans "Buyer" %}',
            seller: '{% trans "Builder" %}',
            system: '{% trans "System" %}',
            you: '{% trans "You" %}'
        }
    });
</script>
<script src="{% static 'indy_hub/js/bp_copy_chat.js' %}?v=20251021"></script>
{% endblock %}
