{% extends "base.html" %}

{% block title %}Sale #{{ sale.id }} — ArtNode{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <a href="{{ url_for('sales.index') }}"
       style="font-size:0.75rem;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;">&larr; Sales</a>
    <div class="page-title" style="margin-top:4px;">Sale #{{ sale.id }}</div>
    <div class="page-subtitle">{{ sale.created_at.strftime("%d %B %Y") }}</div>
  </div>
  <div class="page-actions">
    <span class="badge badge-{{ sale.status }}">{{ sale.status|replace("_", " ") }}</span>

    {% if sale.status in ["confirmed", "on_hold", "paid"] %}
    <a href="{{ url_for('sales.invoice', id=sale.id) }}" class="btn btn-secondary" style="margin-left:8px;">
      Download Invoice
    </a>
    {% if sale.vat_scheme == "margin" %}
    <a href="{{ url_for('sales.margin_report', id=sale.id) }}" class="btn btn-secondary" style="margin-left:8px;">
      Margin Report (ESTV)
    </a>
    {% endif %}
    {% if sale.invoice_pdf_path %}
    <span class="badge badge-available" style="margin-left:8px;font-size:0.65rem;" title="Invoice archived to Garage ({{ '30-year' if sale.vat_scheme == 'margin' else '10-year' }} retention)">PDF Archived ✓</span>
    {% endif %}
    {% endif %}

    {% if sale.status == "confirmed" %}
      {% if sale.payment_link_url %}
      <a href="{{ sale.payment_link_url }}" target="_blank" class="btn btn-primary" style="margin-left:8px;">
        Open Payment Link
      </a>
      {% else %}
      <form method="POST" action="{{ url_for('sales.payment_link', id=sale.id) }}" style="display:inline;">
        <button type="submit" class="btn btn-primary" style="margin-left:8px;">Generate Payment Link</button>
      </form>
      {% endif %}
      <form method="POST" action="{{ url_for('sales.cancel', id=sale.id) }}"
            onsubmit="return confirm('Cancel this sale?')" style="display:inline;">
        <button type="submit" class="btn btn-secondary" style="margin-left:8px;">Cancel Sale</button>
      </form>
    {% endif %}

    {% if sale.status == "on_hold" %}
      <a href="{{ sale.payment_link_url }}" target="_blank" class="btn btn-primary" style="margin-left:8px;">
        Open Payment Link
      </a>
      <form method="POST" action="{{ url_for('sales.mark_paid', id=sale.id) }}" style="display:inline;">
        <button type="submit" class="btn btn-secondary" style="margin-left:8px;">Mark as Paid</button>
      </form>
      <form method="POST" action="{{ url_for('sales.cancel', id=sale.id) }}"
            onsubmit="return confirm('Cancel sale and deactivate payment link?')" style="display:inline;">
        <button type="submit" class="btn btn-secondary" style="margin-left:8px;">Cancel &amp; Deactivate</button>
      </form>
    {% endif %}

  </div>
</div>

<div class="page-body">
  <div style="display:grid;grid-template-columns:1fr 380px;gap:var(--space-2xl);align-items:start;">

    <div>
      {% for line in sale.line_items %}
      <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
        <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Artwork</div>
        <div style="display:flex;gap:var(--space-lg);align-items:start;">
          {% set img = line.artwork.images[0] if line.artwork.images else none %}
          {% if img and img.iiif_url %}
            <img src="{{ img.iiif_url }}" style="width:100px;height:100px;object-fit:cover;background:var(--border-light);">
          {% endif %}
          <div style="flex:1;">
            <a href="{{ url_for('artworks.detail', id=line.artwork.id) }}" style="font-size:1rem;font-weight:400;">{{ line.artwork.title }}</a>
            <div style="font-size:0.85rem;font-style:italic;color:var(--text-secondary);font-family:var(--font-display);">
              {% if line.artwork.artist %}{{ (line.artwork.contact_artist.first_name if line.artwork.contact_artist else (line.artwork.artist.first_name if line.artwork.artist else "")) }} {{ (line.artwork.contact_artist.last_name if line.artwork.contact_artist else (line.artwork.artist.last_name if line.artwork.artist else "")) }}{% endif %}
            </div>
          </div>
        </div>
        <div style="margin-top:var(--space-lg);border-top:1px solid var(--border-light);padding-top:var(--space-lg);">
          {% macro row(label, value) %}
          <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border-light);">
            <span style="font-size:0.75rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);">{{ label }}</span>
            <span style="font-size:0.85rem;">{{ value }}</span>
          </div>
          {% endmacro %}
          {% if line.buyer %}
            {{ row("Buyer", line.buyer.last_name ~ " " ~ (line.buyer.first_name or "") if line.buyer.contact_type == "individual" else line.buyer.organisation) }}
          {% endif %}
          {{ row("Sale Price", line.price|ch_currency(line.currency)) }}
          {% if line.vat_rate %}
            {{ row("VAT (" ~ line.vat_rate ~ "%)", line.vat_amount|ch_currency(line.currency)) }}
          {% endif %}
          {% if line.consignor_net %}
            {{ row("Gallery Net", line.gallery_net|ch_currency(line.currency)) }}
            {{ row("Consignor Net", line.consignor_net|ch_currency(line.currency)) }}
          {% endif %}
          <div style="display:flex;justify-content:space-between;padding:12px 0;">
            <span style="font-size:0.85rem;font-weight:500;">Total</span>
            <span style="font-size:0.85rem;font-weight:500;">{{ (line.price + (line.vat_amount or 0))|ch_currency(line.currency) }}</span>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);">
      <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Summary</div>
      <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-light);">
        <span style="font-size:0.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;">Status</span>
        <span class="badge badge-{{ sale.status }}">{{ sale.status|replace("_", " ") }}</span>
      </div>
      <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-light);">
        <span style="font-size:0.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;">Invoice No.</span>
        <span style="font-size:0.85rem;">{{ sale.invoice_number or "—" }}</span>
      </div>
      <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-light);">
        <span style="font-size:0.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;">Date</span>
        <span style="font-size:0.85rem;">{{ sale.created_at|ch_date }}</span>
      </div>
      {% if sale.payment_link_url %}
      <div style="padding:10px 0;border-bottom:1px solid var(--border-light);">
        <div style="font-size:0.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;">Payment Link</div>
        <a href="{{ sale.payment_link_url }}" target="_blank" style="font-size:0.78rem;color:var(--text-secondary);word-break:break-all;">{{ sale.payment_link_url }}</a>
      </div>
      {% endif %}
      {% if sale.notes %}
      <div style="padding:10px 0;">
        <div style="font-size:0.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;">Notes</div>
        <p style="font-size:0.85rem;color:var(--text-secondary);">{{ sale.notes }}</p>
      </div>
      {% endif %}
    </div>

  </div>
</div>
{% endblock %}