{% extends "base.html" %}

{% block title %}{{ artwork.title }} — ArtNode{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <a href="{{ url_for('artworks.index') }}" style="font-size:0.75rem;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;">&larr; Artworks</a>
    <div class="page-title" style="margin-top:4px;">{{ artwork.title }}</div>
    <div class="page-subtitle">
      {% if artwork.contact_artist %}{{ artwork.contact_artist.first_name }} {{ artwork.contact_artist.last_name }}{% elif artwork.artist %}{{ artwork.artist.first_name }} {{ artwork.artist.last_name }}{% endif %}
      {% if artwork.year_from %} &middot; {{ artwork.year_from }}{% if artwork.year_to and artwork.year_to != artwork.year_from %}&ndash;{{ artwork.year_to }}{% endif %}{% endif %}
    </div>
  </div>
  <div class="page-actions">
    <span class="badge badge-{{ artwork.status }}">{{ artwork.status|replace("_", " ") }}</span>
    <a href="{{ url_for('artworks.edit', id=artwork.id) }}" class="btn btn-secondary" style="margin-left:8px;">Edit</a>
    {% if artwork.status == "available" %}
    <a href="{{ url_for('sales.create', artwork_id=artwork.id) }}" class="btn btn-primary" style="margin-left:8px;">Record Sale</a>
    {% endif %}
    {% if artwork.status == "sold" and artwork.sale_lines %}
    <a href="{{ url_for('sales.detail', id=artwork.sale_lines[-1].sale_id) }}" class="btn btn-secondary" style="margin-left:8px;">View Sale</a>
    {% endif %}
  </div>
</div>

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

    <!-- Image -->
    <div>
      {% set img = artwork.images[0] if artwork.images else none %}
      {% if img and img.iiif_url %}
        <img src="{{ img.iiif_url }}" alt="{{ artwork.title }}"
             style="width:100%;max-height:70vh;object-fit:contain;background:var(--border-light);display:block;">
      {% else %}
        <div style="width:100%;height:400px;background:var(--border-light);display:flex;align-items:center;justify-content:center;">
          <span style="font-size:0.75rem;color:var(--text-muted);letter-spacing:0.08em;text-transform:uppercase;">No image</span>
        </div>
      {% endif %}

      <!-- Image management -->
      <div style="margin-top:var(--space-lg);background:var(--surface);border:1px solid var(--border);padding:var(--space-lg);">
        <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-md);">Images ({{ artwork.images|length }})</div>

        <!-- Existing images -->
        {% if artwork.images %}
        <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-md);">
          {% for img in artwork.images|sort(attribute="sort_order") %}
          <div style="position:relative;width:80px;height:80px;">
            <img src="{{ img.iiif_url }}" style="width:80px;height:80px;object-fit:cover;display:block;background:var(--border-light);">
            {% if loop.first %}
            <span style="position:absolute;top:2px;left:2px;font-size:0.55rem;background:var(--text);color:#fff;padding:1px 4px;letter-spacing:0.04em;">MAIN</span>
            {% endif %}
            <form method="POST" action="{{ url_for('artworks.delete_image', id=artwork.id, image_id=img.id) }}"
                  onsubmit="return confirm('Delete this image?')" style="position:absolute;top:2px;right:2px;">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" style="background:rgba(0,0,0,0.6);border:none;color:#fff;width:18px;height:18px;font-size:10px;cursor:pointer;padding:0;line-height:18px;">×</button>
            </form>
          </div>
          {% endfor %}
        </div>
        {% endif %}

        <!-- Upload new image -->
        <form method="POST" action="{{ url_for('artworks.upload_image', id=artwork.id) }}" enctype="multipart/form-data">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div style="display:flex;align-items:center;gap:var(--space-md);">
            <input type="file" name="image" accept=".jpg,.jpeg,.png" class="form-control" style="max-width:260px;font-size:0.82rem;">
            <button type="submit" class="btn btn-secondary" style="font-size:0.75rem;">Upload</button>
          </div>
          <p style="font-size:0.72rem;color:var(--text-muted);margin-top:4px;">JPG or PNG · Max 10MB · First image = main image</p>
        </form>
      </div>
    </div>

    <!-- Metadata -->
    <div>
      <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 Details</div>

        {% macro meta_row(label, value) %}
          {% if value %}
          <div style="display:flex;justify-content:space-between;padding:10px 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;color:var(--text-primary);text-align:right;max-width:220px;">{{ value }}</span>
          </div>
          {% endif %}
        {% endmacro %}

        {{ meta_row("Artist", (artwork.contact_artist.first_name ~ " " ~ artwork.contact_artist.last_name) if artwork.contact_artist else ((artwork.artist.first_name ~ " " ~ artwork.artist.last_name) if artwork.artist else none)) }}
        {{ meta_row("Date", artwork.year_from|string if artwork.year_from else none) }}
        {{ meta_row("Medium", artwork.medium) }}
        {{ meta_row("Dimensions", artwork.dimensions) }}
        {{ meta_row("Object Type", artwork.object_type) }}
        {{ meta_row("Inventory No.", artwork.inventory_number) }}
        {{ meta_row("Rights", artwork.rights) }}
        {% if artwork.price %}
        {{ meta_row("Price", artwork.price|ch_currency(artwork.currency)) }}
        {% endif %}
      </div>

      <!-- Provenance -->
      <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);">Provenance</div>
        {% if artwork.provenance %}
          {% for entry in artwork.provenance|sort(attribute="recorded_at", reverse=true) %}
          <div style="padding:10px 0;border-bottom:1px solid var(--border-light);">
            <div style="display:flex;justify-content:space-between;margin-bottom:4px;">
              <span style="font-size:0.75rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);">{{ entry.event_type }}</span>
              <span style="font-size:0.72rem;color:var(--text-muted);">{{ entry.recorded_at|ch_date }}</span>
            </div>
            {% if entry.description %}
            <p style="font-size:0.85rem;color:var(--text-secondary);">{{ entry.description }}</p>
            {% endif %}
            {% if entry.attached_files %}
            <div style="margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;">
              {% for f in entry.attached_files %}
              {% set fname = f.split('|')[1] if '|' in f else f.split('/')[-1] %}
              {% set file_idx = loop.index0 %}
              <a href="{{ url_for('artworks.download_provenance_file', artwork_id=artwork.id, prov_id=entry.id, file_idx=file_idx) }}"
                 style="font-size:0.72rem;padding:2px 8px;background:var(--border-light);text-decoration:none;color:var(--text-secondary);">
                📎 {{ fname }}
              </a>
              {% endfor %}
            </div>
            {% endif %}
            <div style="display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;">
              <a href="{{ url_for('artworks.download_provenance_pdf', artwork_id=artwork.id, prov_id=entry.id) }}"
                 class="btn btn-secondary" style="font-size:0.7rem;padding:3px 8px;">⬇ PDF</a>
              {% if not entry.document_hash %}
              <form method="POST" action="{{ url_for('artworks.anchor_provenance', artwork_id=artwork.id, prov_id=entry.id) }}" style="margin:0;">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-secondary" style="font-size:0.7rem;padding:3px 8px;"
                        onclick="return confirm('Anchor this record to the Bitcoin blockchain via OpenTimestamps?')">
                  ⚓ Anchor OTS
                </button>
              </form>
              {% else %}
              <span title="SHA-256: {{ entry.document_hash }}" style="font-size:0.7rem;padding:3px 8px;background:#e8f5e9;color:#2e7d32;">
                ✓ {{ entry.ots_status or 'anchored' }}
              </span>
              {% if entry.document_hash %}
              <span style="font-size:0.65rem;color:var(--text-muted);font-family:monospace;">{{ entry.document_hash[:16] }}…</span>
              {% endif %}
              {% endif %}
            </div>
          </div>
          {% endfor %}
        {% else %}
          <p style="font-size:0.85rem;color:var(--text-muted);">No provenance records yet.</p>
          <a href="{{ url_for('artworks.provenance_add', id=artwork.id) }}" class="btn btn-secondary" style="margin-top:var(--space-md);">+ Add Record</a>
        {% endif %}
      </div>

      {% if artwork.source_url %}
      <div style="margin-top:var(--space-md);">
        <a href="{{ artwork.source_url }}" target="_blank" style="font-size:0.75rem;color:var(--text-muted);letter-spacing:0.04em;">View source record &rarr;</a>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}