{% extends "base.html" %}
{% import "macros/user_cell.html" as user_cell %}

{% block content %}
<main class="mx-auto w-full max-w-screen-xl px-4 py-6 text-foreground sm:py-8" data-plugin="delivery-agent">
    {% if agent %}
    <header class="mb-6 flex flex-col gap-4 border-b border-divider pb-5 sm:flex-row sm:items-center sm:justify-between">
        <div class="min-w-0">
            <h1 class="text-2xl font-bold sm:text-3xl">Delivery workspace</h1>
            <p class="mt-1 text-sm text-muted">Agent: <strong class="text-foreground">{{ agent.name }}</strong></p>
        </div>
        <div class="flex items-center gap-3 rounded-xl border border-divider bg-surface px-4 py-3">
            <input class="size-5 accent-brand" type="checkbox" id="availabilitySwitch"
                   {% if agent.is_available == 1 %}checked{% endif %}
                   aria-describedby="availability-help">
            <div class="flex flex-col">
                <label class="cursor-pointer text-sm font-semibold" for="availabilitySwitch" id="availabilityLabel">
                    {% if agent.is_available == 1 %}Available for jobs{% else %}Currently offline{% endif %}
                </label>
                <span class="text-xs text-muted" id="availability-help">Choose when you can receive a delivery offer.</span>
            </div>
        </div>
    </header>
    <p id="delivery-agent-feedback" class="mb-4 text-sm text-muted" role="status" aria-live="polite"></p>

    <section class="mb-5 overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm" aria-labelledby="offers-title">
        <div class="flex flex-wrap items-center gap-3 border-b border-divider px-4 py-4 sm:px-5">
            <span class="text-warning" aria-hidden="true"><i class="fas fa-bell"></i></span>
            <div>
                <h2 id="offers-title" class="text-lg font-semibold">Pending job offers</h2>
                <p class="mt-0.5 text-sm text-muted">Offers expire at the time shown. Accept a job to add it to your active deliveries.</p>
            </div>
        </div>
        <div class="blocks-responsive-table">
            <table>
                <thead><tr><th>Order #</th><th>Customer</th><th>Address</th><th>Amount</th><th>Expires</th><th>Action</th></tr></thead>
                <tbody>
                    {% for job in offered_jobs %}
                    <tr>
                        <td data-label="Order #"><strong>#{{ job.order_number }}</strong></td>
                        <td data-label="Customer">
                            {% if job.customer_name or job.customer_email %}
                            {{ user_cell::render(name=job.customer_name, email=job.customer_email, avatar=job.customer_avatar | default(value="")) }}
                            {% else %}<span class="text-muted">Guest</span>{% endif %}
                        </td>
                        <td data-label="Address"><div class="max-w-64 truncate" title="{{ job.shipping_address }}">{{ job.shipping_address }}</div></td>
                        <td data-label="Amount" class="font-semibold text-brand">{{ job.total | price }}</td>
                        <td data-label="Expires" class="font-semibold text-warning">{{ job.expires_at | date_in_tz(timezone=settings.timezone, format='%H:%M') }}</td>
                        <td data-label="Action">
                            <button class="blocks-button blocks-button-primary blocks-button-sm accept-job-btn" type="button" data-assignment-id="{{ job.assignment_id }}">
                                <i class="fas fa-check" aria-hidden="true"></i><span>Accept job</span>
                            </button>
                        </td>
                    </tr>
                    {% else %}
                    <tr class="no-data"><td colspan="6" class="py-8 text-center text-sm text-muted"><i class="fas fa-satellite-dish mb-2 text-xl" aria-hidden="true"></i><p>There are no job offers right now. New offers appear here when they are assigned.</p></td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>

    <section class="mb-5 overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm" aria-labelledby="active-title">
        <div class="flex flex-wrap items-center gap-3 border-b border-divider px-4 py-4 sm:px-5">
            <span class="text-success" aria-hidden="true"><i class="fas fa-truck"></i></span>
            <div>
                <h2 id="active-title" class="text-lg font-semibold">My active deliveries</h2>
                <p class="mt-0.5 text-sm text-muted">Your accepted jobs and the customer delivery details.</p>
            </div>
        </div>
        <div class="blocks-responsive-table">
            <table>
                <thead><tr><th>Order #</th><th>Customer</th><th>Address</th><th>Amount</th><th>Status</th><th>Details</th></tr></thead>
                <tbody>
                    {% for job in bucket_jobs %}
                    <tr>
                        <td data-label="Order #"><strong>#{{ job.order_number }}</strong></td>
                        <td data-label="Customer">
                            {% if job.customer_name or job.customer_email %}
                            {{ user_cell::render(name=job.customer_name, email=job.customer_email, avatar=job.customer_avatar | default(value="")) }}
                            {% else %}<span class="text-muted">Guest</span>{% endif %}
                        </td>
                        <td data-label="Address"><div class="max-w-64 truncate" title="{{ job.shipping_address }}">{{ job.shipping_address }}</div></td>
                        <td data-label="Amount" class="font-semibold text-brand">{{ job.total | price }}</td>
                        <td data-label="Status"><span class="blocks-status-pill is-neutral">{{ job.order_status }}</span></td>
                        <td data-label="Details"><a href="/plugins/orders/detail/{{ job.order_id }}" class="blocks-button blocks-button-secondary blocks-button-sm"><i class="fas fa-external-link-alt" aria-hidden="true"></i><span>View order</span></a></td>
                    </tr>
                    {% else %}
                    <tr class="no-data"><td colspan="6" class="py-8 text-center text-sm text-muted"><i class="fas fa-box-open mb-2 text-xl" aria-hidden="true"></i><p>No active deliveries. Accept an offer above to get started.</p></td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
    {% else %}
    <section class="mx-auto max-w-xl rounded-2xl border border-divider bg-surface p-6 text-center shadow-sm sm:p-8" role="status">
        <span class="mb-4 inline-flex size-14 items-center justify-center rounded-full bg-danger/10 text-xl text-danger" aria-hidden="true"><i class="fas fa-user-lock"></i></span>
        <h1 class="text-xl font-bold">Delivery access unavailable</h1>
        <p class="mt-2 text-sm text-muted">{{ error | default(value="Your account is not registered as a delivery agent.") }}</p>
        <a href="/" class="blocks-button blocks-button-primary mt-5">Back to store</a>
    </section>
    {% endif %}
</main>
{% endblock %}

{% block scripts %}
<script src="/static/js/location-utils.js?v={{ asset_version | default(value='1') }}"></script>
<script src="/plugins/delivery-agent/assets/js/agent.js"></script>
{% endblock %}