{% extends "base.html" %}
{% load static %}

{% block title %}Edit - {{ asset.original_filename }}{% endblock %}

{% block extra_head %}
{% if asset.file_type == 'image' or asset.file_type == 'gif' %}
<link rel="stylesheet" href="{% static 'js/vendor/cropper.min.css' %}">
{% endif %}
<style>
  .ml-edit-canvas {
    background: var(--surface-1, var(--color-stone-50));
    border: 1px solid var(--border, var(--color-stone-200));
    border-radius: var(--radius-xl, 0.75rem);
    overflow: hidden;
  }
  .ml-edit-toolbar {
    background: var(--surface-0, #FFF);
    border: 1px solid var(--border, var(--color-stone-200));
    border-radius: var(--radius-xl, 0.75rem);
    box-shadow: var(--shadow-sm);
  }
  .ml-tool-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 14px;
    border-radius: var(--radius-lg, 0.5rem);
    font-size: 10px; font-weight: 600;
    color: var(--text-secondary, var(--color-stone-600));
    cursor: pointer;
    transition: all var(--dur-fast, 150ms) ease;
  }
  .ml-tool-btn:hover { background: var(--surface-1, var(--color-stone-50)); color: var(--text-primary, var(--color-stone-900)); }
  .ml-tool-btn.active { background: var(--primary-soft, #FFF7ED); color: var(--brand-700, #C2410C); }
  .ml-trim-track {
    height: 48px;
    background: var(--surface-2, var(--color-stone-100));
    border-radius: var(--radius-lg, 0.5rem);
    position: relative;
    overflow: hidden;
  }
  .ml-trim-selection {
    position: absolute; top: 0; bottom: 0;
    background: rgba(249, 115, 22, 0.15);
    border-left: 3px solid var(--primary, #F97316);
    border-right: 3px solid var(--primary, #F97316);
  }
</style>
{% endblock %}

{% block page_header %}
<div class="flex items-center gap-3">
  <a href="{% if is_shared_library %}{% url 'media_library_org:shared_asset_detail' asset_id=asset.id %}{% else %}{% url 'media_library:index' workspace_id=workspace.id %}{% endif %}"
     class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors btn-surface-2"
     style="color: var(--text-tertiary, var(--color-stone-500));">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
  </a>
  <h1 class="text-lg font-semibold" style="color: var(--text-primary, var(--color-stone-900));">Edit - {{ asset.original_filename }}</h1>
  {% if is_shared_library %}
  <span class="text-xs font-bold px-2.5 py-0.5 rounded-full uppercase tracking-wider"
        style="background: rgba(20,184,166,0.15); color: #0F766E;">Shared</span>
  {% endif %}
</div>
{% endblock %}

{% block content %}
{% if asset.file_type == 'image' or asset.file_type == 'gif' %}
<!-- ═══════ IMAGE EDITOR ═══════ -->
<div x-data="imageCropper()" class="space-y-4">
  <!-- Canvas -->
  <div class="ml-edit-canvas">
    <div class="max-h-[500px] overflow-hidden">
      <img x-ref="image" src="{{ asset.file.url }}" alt="{{ asset.original_filename }}"
           class="max-w-full" style="display: block;">
    </div>
  </div>

  <!-- Toolbar -->
  <div class="ml-edit-toolbar p-2">
    <div class="flex items-center gap-1">
      <button @click="setMode('crop')" :class="mode === 'crop' ? 'active' : ''" class="ml-tool-btn">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 7h4m0 0V3m0 4v14h14m-4-4h4m0 0v4m0-4H7"/></svg>
        Crop
      </button>
      <button @click="rotate(-90)" class="ml-tool-btn">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 10h1l1-2 2-2h4V2l5 5-5 5V8H7l-1 1-1 2H3v-1z"/></svg>
        Rotate Left
      </button>
      <button @click="rotate(90)" class="ml-tool-btn">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="transform: scaleX(-1)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 10h1l1-2 2-2h4V2l5 5-5 5V8H7l-1 1-1 2H3v-1z"/></svg>
        Rotate Right
      </button>
      <button @click="flip('horizontal')" class="ml-tool-btn">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
        Flip H
      </button>
      <button @click="flip('vertical')" class="ml-tool-btn">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="transform: rotate(90deg)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
        Flip V
      </button>

      <div class="flex-1"></div>

      <a href="{% if is_shared_library %}{% url 'media_library_org:shared_asset_detail' asset_id=asset.id %}{% else %}{% url 'media_library:asset_detail' workspace_id=workspace.id asset_id=asset.id %}{% endif %}"
         class="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold rounded-full border transition-colors btn-surface-1"
         style="border-color: var(--border); color: var(--text-secondary);">
        Cancel
      </a>
      <button @click="save()" class="inline-flex items-center gap-1.5 px-5 py-2 text-xs font-semibold text-white rounded-full transition-all btn-primary-hover"
              style="background: var(--primary, #F97316); box-shadow: var(--shadow-primary);">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
        Save as new version
      </button>
    </div>
  </div>

  <!-- Hidden form -->
  <form x-ref="editForm" method="POST" action="{% if is_shared_library %}{% url 'media_library_org:shared_asset_edit' asset_id=asset.id %}{% else %}{% url 'media_library:asset_edit' workspace_id=workspace.id asset_id=asset.id %}{% endif %}">
    {% csrf_token %}
    <input type="hidden" name="crop_x" x-model="cropData.x">
    <input type="hidden" name="crop_y" x-model="cropData.y">
    <input type="hidden" name="crop_width" x-model="cropData.width">
    <input type="hidden" name="crop_height" x-model="cropData.height">
    <input type="hidden" name="rotate" x-model="rotationDeg">
    <input type="hidden" name="flip" x-model="flipDir">
  </form>
</div>

{% elif asset.file_type == 'video' %}
<!-- ═══════ VIDEO TRIMMER ═══════ -->
<div x-data="videoTrimmer()" class="space-y-4">
  <!-- Video player -->
  <div class="ml-edit-canvas">
    <video x-ref="video" controls class="w-full max-h-[500px]" preload="metadata"
           @loadedmetadata="duration = $refs.video.duration"
           @timeupdate="currentTime = $refs.video.currentTime">
      <source src="{{ asset.file.url }}" type="{{ asset.mime_type }}">
    </video>
  </div>

  <!-- Trim controls -->
  <div class="ml-edit-toolbar p-4">
    <div class="flex items-center gap-6 mb-3">
      <div class="flex items-center gap-2">
        <label class="text-xs font-semibold" style="color: var(--text-tertiary);">Start</label>
        <input type="number" x-model.number="trimStart" step="0.1" min="0" :max="trimEnd"
               class="input-focus w-24 text-xs px-2.5 py-1.5 border rounded-lg text-center outline-none"
               style="font-variant-numeric: tabular-nums;">
        <span class="text-xs" style="color: var(--text-ghost);">sec</span>
      </div>
      <div class="flex items-center gap-2">
        <label class="text-xs font-semibold" style="color: var(--text-tertiary);">End</label>
        <input type="number" x-model.number="trimEnd" step="0.1" :min="trimStart" :max="duration"
               class="input-focus w-24 text-xs px-2.5 py-1.5 border rounded-lg text-center outline-none"
               style="font-variant-numeric: tabular-nums;">
        <span class="text-xs" style="color: var(--text-ghost);">sec</span>
      </div>
      <span class="text-xs font-semibold px-2.5 py-1 rounded-full"
            style="background: var(--primary-soft); color: var(--brand-700);"
            x-text="'Duration: ' + (trimEnd - trimStart).toFixed(1) + 's'"></span>
    </div>

    <!-- Visual timeline -->
    <div class="ml-trim-track">
      <div class="ml-trim-selection"
           :style="'left: ' + (trimStart / duration * 100) + '%; right: ' + (100 - trimEnd / duration * 100) + '%'">
      </div>
      <div class="absolute top-0 bottom-0 w-0.5" style="background: var(--error-500);"
           :style="'left: ' + (currentTime / duration * 100) + '%'"></div>
    </div>

    <div class="flex items-center justify-between mt-3">
      <button @click="preview()" class="ml-tool-btn flex-row gap-1.5">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/></svg>
        Preview trim
      </button>

      <div class="flex items-center gap-2">
        <a href="{% if is_shared_library %}{% url 'media_library_org:shared_asset_detail' asset_id=asset.id %}{% else %}{% url 'media_library:asset_detail' workspace_id=workspace.id asset_id=asset.id %}{% endif %}"
           class="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold rounded-full border transition-colors"
           style="border-color: var(--border); color: var(--text-secondary);">
          Cancel
        </a>
        <form method="POST" action="{% if is_shared_library %}{% url 'media_library_org:shared_asset_edit' asset_id=asset.id %}{% else %}{% url 'media_library:asset_edit' workspace_id=workspace.id asset_id=asset.id %}{% endif %}">
          {% csrf_token %}
          <input type="hidden" name="trim_start" :value="trimStart">
          <input type="hidden" name="trim_end" :value="trimEnd">
          <button type="submit"
                  class="inline-flex items-center gap-1.5 px-5 py-2 text-xs font-semibold text-white rounded-full transition-all"
                  style="background: var(--primary); box-shadow: var(--shadow-primary);">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
            Trim &amp; save
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

{% else %}
<div class="text-center py-20">
  <p class="text-sm" style="color: var(--text-secondary);">Editing is not available for this file type.</p>
  <a href="{% if is_shared_library %}{% url 'media_library_org:shared_index' %}{% else %}{% url 'media_library:index' workspace_id=workspace.id %}{% endif %}"
     class="inline-flex items-center gap-1.5 mt-4 px-4 py-2 text-sm font-semibold rounded-full border"
     style="border-color: var(--border); color: var(--text-secondary);">
    Back to library
  </a>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
{% if asset.file_type == 'image' or asset.file_type == 'gif' %}
<script src="{% static 'js/vendor/cropper.min.js' %}"></script>
<script nonce="{{ request.csp_nonce }}">
function imageCropper() {
  return {
    cropper: null,
    mode: 'crop',
    cropData: { x: '', y: '', width: '', height: '' },
    rotationDeg: '',
    flipDir: '',
    totalRotation: 0,

    init() {
      this.$nextTick(() => {
        this.cropper = new Cropper(this.$refs.image, {
          viewMode: 1,
          autoCrop: false,
          responsive: true,
          background: false,
        });
      });
    },

    setMode(m) {
      this.mode = m;
      if (m === 'crop' && this.cropper) {
        this.cropper.crop();
      }
    },

    rotate(deg) {
      if (this.cropper) {
        this.cropper.rotate(deg);
        this.totalRotation = (this.totalRotation + deg) % 360;
        this.rotationDeg = this.totalRotation;
      }
    },

    flip(dir) {
      if (this.cropper) {
        if (dir === 'horizontal') {
          const data = this.cropper.getData();
          this.cropper.scaleX(data.scaleX === -1 ? 1 : -1);
        } else {
          const data = this.cropper.getData();
          this.cropper.scaleY(data.scaleY === -1 ? 1 : -1);
        }
        this.flipDir = dir;
      }
    },

    save() {
      if (this.cropper) {
        const data = this.cropper.getData(true);
        if (data.width > 0 && data.height > 0) {
          this.cropData = {
            x: Math.round(data.x),
            y: Math.round(data.y),
            width: Math.round(data.width),
            height: Math.round(data.height),
          };
        }
      }
      this.$nextTick(() => this.$refs.editForm.submit());
    }
  }
}
</script>
{% elif asset.file_type == 'video' %}
<script nonce="{{ request.csp_nonce }}">
function videoTrimmer() {
  return {
    duration: {{ asset.duration_seconds|default:"0" }},
    trimStart: 0,
    trimEnd: {{ asset.duration_seconds|default:"0" }},
    currentTime: 0,

    preview() {
      const video = this.$refs.video;
      video.currentTime = this.trimStart;
      video.play();

      const checkEnd = () => {
        if (video.currentTime >= this.trimEnd) {
          video.pause();
          video.removeEventListener('timeupdate', checkEnd);
        }
      };
      video.addEventListener('timeupdate', checkEnd);
    }
  }
}
</script>
{% endif %}
{% endblock %}