{% extends "base.html" %}

{% block extra_head %}
{% if similarity_enabled %}<link rel="stylesheet" href="{{ static_asset('experiments/image-similarity.css') }}">{% endif %}
<style>
  .image-viewer {
    max-height: calc(100vh - 160px);
    object-fit: contain;
    cursor: zoom-in;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
  }
  
  .image-stage {
    min-height: min(calc(100vh - 140px), 860px);
    overflow: hidden;
    touch-action: none;
    user-select: none;
  }

  .image-stage.is-zoomed .image-viewer {
    cursor: grab;
  }

  .image-stage.is-dragging .image-viewer {
    cursor: grabbing;
  }

  #fullscreen-stage {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    touch-action: none;
  }

  #fullscreen-stage .image-viewer {
    max-height: 92vh;
    max-width: 92vw;
  }
  
  .info-card {
    backdrop-filter: blur(10px);
  }
  
  .stat-item {
    transition: all 0.2s ease;
  }
  
  .stat-item:hover {
    transform: translateY(-2px);
  }

  #caption-primary-btn.is-loading::after {
    content: '';
    position: absolute;
    right: 8px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1.5px solid rgba(251, 191, 36, 0.9);
    border-top-color: transparent;
    animation: caption-spin 0.9s linear infinite;
  }
  #caption-primary-btn.is-loading {
    cursor: default;
  }
  #embedded-prompt {
    max-height: 7.5rem;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  #embedded-prompt.is-expanded {
    max-height: none;
  }
  .detail-disclosure summary {
    cursor: pointer;
    list-style: none;
  }
  .detail-disclosure summary::-webkit-details-marker {
    display: none;
  }
  .material-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(55 65 81);
    transition: background-color 0.16s ease, color 0.16s ease;
  }
  .material-icon-btn:hover {
    background: rgba(229, 231, 235, 0.86);
    color: rgb(17 24 39);
  }
  [data-theme="dark"] .material-icon-btn {
    color: rgb(209 213 219);
  }
  [data-theme="dark"] .material-icon-btn:hover {
    background: rgba(55, 65, 81, 0.78);
    color: white;
  }
  .detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "image title"
      "image info"
      "similar similar";
    column-gap: 24px;
    row-gap: 12px;
    align-items: start;
  }
  .image-area {
    grid-area: image;
  }
  .title-area {
    grid-area: title;
  }
  .info-area {
    grid-area: info;
  }
  .similar-area {
    grid-area: similar;
  }
  .title-empty-cta {
    width: 100%;
    min-height: 56px;
    border: 1px solid rgb(209 213 219);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgb(75 85 99);
    font-weight: 600;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  }
  .title-empty-cta.hidden,
  .title-empty-cta[hidden] {
    display: none !important;
  }
  .title-empty-cta:hover {
    background: rgb(249 250 251);
    border-color: rgb(156 163 175);
    color: rgb(17 24 39);
  }
  [data-theme="dark"] .title-empty-cta {
    border-color: rgb(75 85 99);
    color: rgb(209 213 219);
  }
  [data-theme="dark"] .title-empty-cta:hover {
    background: rgb(17 24 39);
    border-color: rgb(107 114 128);
    color: white;
  }
  @media (max-width: 1023px) {
    .detail-grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "image"
        "title"
        "similar"
        "info";
      gap: 20px;
    }
  }
  @keyframes caption-spin {
    to { transform: rotate(360deg); }
  }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-neutral-50 py-3 dark:bg-neutral-950">
  <div class="container mx-auto px-3 max-w-7xl">
    <header class="mb-3 flex h-12 items-center justify-between">
      <button onclick="history.back()" class="material-icon-btn" aria-label="Back" type="button">
        <i data-feather="arrow-left" class="w-5 h-5"></i>
      </button>
      <div class="relative flex items-center gap-1">
        <button
          id="caption-primary-btn"
          class="inline-flex h-10 items-center justify-center gap-2 rounded-full bg-amber-100 px-4 text-sm font-medium text-amber-700 hover:bg-amber-200 dark:bg-amber-500/20 dark:text-amber-300 dark:hover:bg-amber-500/30 transition-colors"
          type="button"
        >
          <i data-feather="zap" class="w-4 h-4"></i>
          <span id="caption-primary-label">Generate Title</span>
        </button>
        <button id="fullscreen-btn" class="material-icon-btn" aria-label="View fullscreen" type="button">
          <i data-feather="maximize" class="w-5 h-5"></i>
        </button>
        <button id="more-menu-btn" class="material-icon-btn" aria-label="More actions" type="button" aria-haspopup="menu" aria-controls="detail-action-menu" aria-expanded="false">
          <i data-feather="more-vertical" class="w-5 h-5"></i>
        </button>
        <div id="detail-action-menu" class="detail-action-menu" role="menu" aria-label="Image actions" hidden>
          <button id="caption-advanced-btn" class="detail-action-item" type="button" role="menuitem">
            <i data-feather="sliders" class="w-4 h-4"></i>
            <span>Advanced Generation</span>
          </button>
          <button id="copy-link-btn" class="detail-action-item" type="button" role="menuitem">
            <i data-feather="link" class="w-4 h-4"></i>
            <span>Copy Link</span>
          </button>
          {% if source_meta and source_meta.url %}
          <a href="{{ source_meta.url }}" target="_blank" rel="noopener noreferrer" class="detail-action-item" role="menuitem">
            <i data-feather="external-link" class="w-4 h-4"></i>
            <span>View Source</span>
          </a>
          {% endif %}
          <div class="detail-action-divider" role="separator"></div>
          <button onclick="confirmDelete()" class="detail-action-item is-danger" type="button" role="menuitem">
            <i data-feather="trash-2" class="w-4 h-4"></i>
            <span>Delete Image</span>
          </button>
        </div>
      </div>
    </header>

    <div class="detail-grid">
      <!-- Image display -->
      <div class="image-area">
        <div>
          <!-- Image container -->
          <div class="image-stage relative bg-neutral-100 dark:bg-black flex items-center justify-center rounded-xl p-3 sm:p-4" id="image-container">
            <img 
              src="/media?uri={{ uri_query_encoded }}" 
              alt="{{image.name}}"
              class="image-viewer max-w-full"
              id="main-image"
              loading="lazy"
            />
            
            <!-- Image controls -->
            <div class="absolute top-4 right-4 flex flex-wrap justify-end gap-2">
              <button 
                id="zoom-out-btn" 
                class="w-10 h-10 bg-black/50 backdrop-blur-sm text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-all duration-200"
                aria-label="Zoom out"
              >
                <i data-feather="zoom-out" class="w-5 h-5"></i>
              </button>
              <button 
                id="zoom-in-btn" 
                class="w-10 h-10 bg-black/50 backdrop-blur-sm text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-all duration-200"
                aria-label="Zoom in"
              >
                <i data-feather="zoom-in" class="w-5 h-5"></i>
              </button>
              <button
                id="zoom-reset-btn"
                class="px-3 h-10 bg-black/50 backdrop-blur-sm text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-all duration-200 text-xs font-semibold"
                aria-label="Reset zoom"
              >
                <span id="zoom-label">100%</span>
              </button>
            </div>
          </div>
        </div>

      </div>

      <section class="title-area" id="caption-card">
        <div id="caption-content" class="hidden min-w-0">
          <h1 id="caption-title" class="detail-wrap-anywhere text-xl font-semibold leading-snug text-gray-950 dark:text-white"></h1>
          <div id="caption-tags" class="mt-3 flex flex-wrap gap-2"></div>
        </div>
        <button id="caption-empty-cta" class="title-empty-cta hidden" type="button" hidden aria-hidden="true">
          <i data-feather="zap" class="w-5 h-5"></i>
          Generate Title
        </button>
      </section>

      {% if similarity_enabled %}{% include 'experiments/image-similarity.html' %}{% endif %}

      <!-- Sidebar information -->
      <aside class="info-area min-w-0 space-y-6 lg:border-l lg:border-gray-200 lg:pl-6 dark:lg:border-gray-800">
        {% if source_meta and source_meta.url %}
        <section>
          <div class="mb-1 text-xs text-gray-500 dark:text-gray-400">Source</div>
          <a
            href="{{ source_meta.url }}"
            target="_blank"
            rel="noopener noreferrer"
            class="detail-source-link inline-flex items-center gap-2 text-sm font-medium text-gray-800 hover:text-gray-950 dark:text-gray-200 dark:hover:text-white"
          >
            <i data-feather="external-link" class="w-4 h-4"></i>
            <span>{{ source_meta.source_domain or 'View Source' }}</span>
          </a>
        </section>
        {% endif %}

        <section>
          <div class="mb-2 text-xs text-gray-500 dark:text-gray-400">File</div>
          <div class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
            <div class="break-all font-medium text-gray-900 dark:text-white">{{image.name}}</div>
            <div>{{ stat.st_size | filesizeformat }}</div>
            <div>{{ stat.st_mtime | timestamp_to_date }}</div>
          </div>
        </section>

        <details class="detail-disclosure hidden" id="embedded-generation-card">
          <summary class="flex items-center justify-between gap-3 text-sm font-semibold text-gray-900 dark:text-white">
            <span>Generation Details</span>
            <i data-feather="chevron-down" class="w-4 h-4 text-gray-400"></i>
          </summary>
          <div class="mt-4 space-y-4">
            <div>
              <div class="text-xs text-gray-500 dark:text-gray-400">Model</div>
              <div id="embedded-model" class="mt-1 text-sm font-medium text-gray-900 dark:text-white break-all"></div>
            </div>
            <div>
              <div class="mb-2 flex items-center justify-between gap-3">
                <div class="text-xs text-gray-500 dark:text-gray-400">Prompt</div>
                <button
                  id="embedded-prompt-toggle"
                  class="text-xs font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-200"
                  type="button"
                >
                  Show All
                </button>
              </div>
              <div id="embedded-prompt" class="text-xs leading-relaxed text-gray-700 dark:text-gray-200"></div>
            </div>
          </div>
        </details>
      </aside>
    </div>
  </div>

  <!-- Fullscreen modal -->
  <div id="fullscreen-modal" class="fixed inset-0 z-50 bg-black bg-opacity-95 backdrop-blur-sm hidden">
    <div class="absolute top-4 right-4 z-10 flex flex-wrap justify-end gap-2">
      <button
        id="fullscreen-zoom-out"
        class="w-11 h-11 bg-black/50 backdrop-blur-sm text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-all duration-200"
        aria-label="Zoom out"
      >
        <i data-feather="zoom-out" class="w-5 h-5"></i>
      </button>
      <button
        id="fullscreen-zoom-in"
        class="w-11 h-11 bg-black/50 backdrop-blur-sm text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-all duration-200"
        aria-label="Zoom in"
      >
        <i data-feather="zoom-in" class="w-5 h-5"></i>
      </button>
      <button
        id="fullscreen-reset"
        class="px-3 h-11 bg-black/50 backdrop-blur-sm text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-all duration-200 text-xs font-semibold"
        aria-label="Reset zoom"
      >
        <span id="fullscreen-zoom-label">100%</span>
      </button>
      <button 
        id="close-fullscreen" 
        class="w-11 h-11 bg-black/50 backdrop-blur-sm text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-all duration-200"
        aria-label="Close fullscreen"
      >
        <i data-feather="x" class="w-6 h-6"></i>
      </button>
    </div>
    <div class="image-stage flex items-center justify-center p-4" id="fullscreen-stage">
      <img
        id="fullscreen-viewer-image"
        src="/media?uri={{ uri_query_encoded }}"
        alt="{{image.name}}"
        class="image-viewer max-w-full object-contain"
      />
    </div>
  </div>

  <!-- Prompt override modal -->
  <div id="caption-prompt-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm p-4">
    <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-2xl shadow-xl">
      <div class="p-5 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white">Generation Override</h3>
        <button id="caption-prompt-close" class="w-8 h-8 inline-flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
          <i data-feather="x" class="w-4 h-4 text-gray-500"></i>
        </button>
      </div>
      <div class="p-5 space-y-4 max-h-screen overflow-y-auto">
        <div>
          <label for="caption-override-system" class="block text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">System Prompt</label>
          <textarea id="caption-override-system" rows="4" class="w-full rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
        </div>
        <div>
          <label for="caption-override-user" class="block text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">User Prompt</label>
          <textarea id="caption-override-user" rows="6" class="w-full rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Use <code>{tags_limit}</code> or <code>{% raw %}{{tags_limit}}{% endraw %}</code> as a placeholder.</p>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label for="caption-override-temperature" class="block text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">temperature (0-2)</label>
            <input id="caption-override-temperature" type="number" min="0" max="2" step="0.1" class="w-full rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>
          <div>
            <label for="caption-override-tags" class="block text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">tags_limit (1-20)</label>
            <input id="caption-override-tags" type="number" min="1" max="20" step="1" class="w-full rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>
        </div>
      </div>
      <div class="px-5 py-4 bg-gray-50 dark:bg-gray-800/50 rounded-b-2xl flex flex-wrap justify-end gap-3">
        <button id="caption-override-cancel" class="px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">Cancel</button>
        <button id="caption-override-generate" class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold">Generate with Override</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_body %}
{% if similarity_enabled %}<script defer src="{{ static_asset('experiments/image-similarity.js') }}"></script>{% endif %}
<script src="{{ static_asset('image_viewer_controller.js') }}"></script>
<script src="{{ static_asset('flow_actions_shared.js') }}"></script>
<script src="{{ static_asset('flow_media_actions_controller.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const mainImage = document.getElementById('main-image');
  const imageContainer = document.getElementById('image-container');
  const zoomInBtn = document.getElementById('zoom-in-btn');
  const zoomOutBtn = document.getElementById('zoom-out-btn');
  const zoomResetBtn = document.getElementById('zoom-reset-btn');
  const zoomLabel = document.getElementById('zoom-label');
  const fullscreenBtn = document.getElementById('fullscreen-btn');
  const fullscreenModal = document.getElementById('fullscreen-modal');
  const fullscreenStage = document.getElementById('fullscreen-stage');
  const fullscreenViewerImage = document.getElementById('fullscreen-viewer-image');
  const fullscreenZoomIn = document.getElementById('fullscreen-zoom-in');
  const fullscreenZoomOut = document.getElementById('fullscreen-zoom-out');
  const fullscreenReset = document.getElementById('fullscreen-reset');
  const fullscreenZoomLabel = document.getElementById('fullscreen-zoom-label');
  const closeFullscreen = document.getElementById('close-fullscreen');
  const copyLinkBtn = document.getElementById('copy-link-btn');
  const moreMenuBtn = document.getElementById('more-menu-btn');
  const moreMenu = document.getElementById('detail-action-menu');
  const captionBtn = document.getElementById('caption-primary-btn');
  const captionPrimaryLabel = document.getElementById('caption-primary-label');
  const captionEmptyCta = document.getElementById('caption-empty-cta');
  const captionAdvancedBtn = document.getElementById('caption-advanced-btn');
  const captionContent = document.getElementById('caption-content');
  const captionTitle = document.getElementById('caption-title');
  const captionTags = document.getElementById('caption-tags');
  const embeddedGenerationCard = document.getElementById('embedded-generation-card');
  const embeddedModel = document.getElementById('embedded-model');
  const embeddedPrompt = document.getElementById('embedded-prompt');
  const embeddedPromptToggle = document.getElementById('embedded-prompt-toggle');
  const promptModal = document.getElementById('caption-prompt-modal');
  const promptCloseBtn = document.getElementById('caption-prompt-close');
  const promptCancelBtn = document.getElementById('caption-override-cancel');
  const promptGenerateBtn = document.getElementById('caption-override-generate');
  const promptSystemInput = document.getElementById('caption-override-system');
  const promptUserInput = document.getElementById('caption-override-user');
  const promptTemperatureInput = document.getElementById('caption-override-temperature');
  const promptTagsInput = document.getElementById('caption-override-tags');
  const imageUri = {{ uri|tojson }};
  const imageUriEncoded = {{ uri_query_encoded|tojson }};
  let promptConfigCache = null;
  const mainViewer = window.createImageViewerController({
    stage: imageContainer,
    image: mainImage,
    zoomInButton: zoomInBtn,
    zoomOutButton: zoomOutBtn,
    resetButton: zoomResetBtn,
    zoomLabel
  });
  const fullscreenViewer = window.createImageViewerController({
    stage: fullscreenStage,
    image: fullscreenViewerImage,
    zoomInButton: fullscreenZoomIn,
    zoomOutButton: fullscreenZoomOut,
    resetButton: fullscreenReset,
    zoomLabel: fullscreenZoomLabel
  });

  const closeMoreMenu = () => {
    if (!moreMenu || !moreMenuBtn) return;
    moreMenu.hidden = true;
    moreMenuBtn.setAttribute('aria-expanded', 'false');
  };

  const toggleMoreMenu = () => {
    if (!moreMenu || !moreMenuBtn) return;
    const nextOpen = moreMenu.hidden;
    moreMenu.hidden = !nextOpen;
    moreMenuBtn.setAttribute('aria-expanded', nextOpen ? 'true' : 'false');
  };

  moreMenuBtn?.addEventListener('click', (event) => {
    event.preventDefault();
    event.stopPropagation();
    toggleMoreMenu();
  });

  document.addEventListener('click', (event) => {
    if (!moreMenu || moreMenu.hidden) return;
    const target = event.target;
    if (moreMenu.contains(target) || moreMenuBtn?.contains(target)) return;
    closeMoreMenu();
  });
  
  // Fullscreen.
  fullscreenBtn?.addEventListener('click', () => {
    fullscreenModal.classList.remove('hidden');
    fullscreenModal.classList.add('flex');
    requestAnimationFrame(() => fullscreenViewer.reset());
  });
  
  closeFullscreen?.addEventListener('click', () => {
    fullscreenModal.classList.add('hidden');
    fullscreenModal.classList.remove('flex');
  });
  
  // Close when the modal backdrop is clicked.
  fullscreenModal?.addEventListener('click', (e) => {
    if (e.target === fullscreenModal) {
      fullscreenModal.classList.add('hidden');
      fullscreenModal.classList.remove('flex');
    }
  });
  
  // Escape closes fullscreen.
  document.addEventListener('keydown', (e) => {
    if (e.key !== 'Escape') return;
    if (moreMenu && !moreMenu.hidden) {
      closeMoreMenu();
      moreMenuBtn?.focus();
      return;
    }
    if (promptModal && !promptModal.classList.contains('hidden')) {
      closePromptModal();
      return;
    }
    if (!fullscreenModal.classList.contains('hidden')) {
      fullscreenModal.classList.add('hidden');
      fullscreenModal.classList.remove('flex');
    }
  });
  
  // Copy link.
  copyLinkBtn?.addEventListener('click', async () => {
    closeMoreMenu();
    try {
      const url = window.location.origin + '/media?uri=' + imageUriEncoded;
      await navigator.clipboard.writeText(url);
      showNotification('Link copied to clipboard', 'success');
    } catch (err) {
      showNotification('Copy failed. Please copy the link manually.', 'error');
    }
  });

  const setCaptionEmptyVisible = (visible) => {
    if (!captionEmptyCta) return;
    captionEmptyCta.hidden = !visible;
    captionEmptyCta.setAttribute('aria-hidden', visible ? 'false' : 'true');
    captionEmptyCta.classList.toggle('hidden', !visible);
  };

  const renderCaption = (data) => {
    const title = data?.title || '';
    const tags = Array.isArray(data?.tags) ? data.tags : [];
    if (!title && tags.length === 0) {
      captionTitle.textContent = '';
      captionTags.innerHTML = '';
      captionTitle.classList.add('hidden');
      captionContent.classList.add('hidden');
      setCaptionEmptyVisible(true);
      if (captionPrimaryLabel) captionPrimaryLabel.textContent = 'Generate Title';
      return;
    }
    captionContent.classList.remove('hidden');
    setCaptionEmptyVisible(false);
    if (captionPrimaryLabel) captionPrimaryLabel.textContent = 'Refresh';
    captionTitle.textContent = title;
    captionTitle.classList.toggle('hidden', !title);
    captionTags.innerHTML = '';
    tags.forEach(tag => {
      const chip = document.createElement('span');
      chip.className = 'detail-tag inline-flex items-center px-2.5 py-1 rounded-full bg-gray-100 dark:bg-gray-700 text-xs font-medium text-gray-600 dark:text-gray-200';
      chip.textContent = tag;
      captionTags.appendChild(chip);
    });
  };

  const mediaActions = window.createFlowMediaActionsController({
    onCaptionRender: renderCaption,
    onCaptionLoading: (loading) => {
      captionBtn.disabled = loading;
      captionBtn.classList.toggle('is-loading', loading);
    },
    onError: (kind, error) => {
      if (kind === 'caption_load') setCaptionEmptyVisible(false);
      showNotification(error.message || 'Title request failed', 'error');
    },
    confirmCaptionReplace: () => window.confirm('A title already exists. Replace it?'),
  });

  const renderEmbeddedGeneration = (data) => {
    const embedded = data && data.embedded_generation ? data.embedded_generation : null;
    if (!embedded || (!embedded.prompt && !embedded.model)) {
      embeddedGenerationCard?.classList.add('hidden');
      return;
    }
    embeddedGenerationCard?.classList.remove('hidden');
    embeddedModel.textContent = embedded.model || 'Unknown';
    embeddedPrompt.textContent = embedded.prompt || '';
    embeddedPromptToggle.hidden = !embedded.prompt;
    if (typeof feather !== 'undefined') feather.replace();
  };

  const loadEmbeddedGeneration = async () => {
    try {
      const res = await fetch(`/api/image/embedded-metadata?uri=${encodeURIComponent(imageUri)}`);
      const data = await res.json();
      if (data.success) {
        renderEmbeddedGeneration(data.data);
      }
    } catch (err) {
      embeddedGenerationCard?.classList.add('hidden');
    }
  };

  embeddedPromptToggle?.addEventListener('click', () => {
    const expanded = embeddedPrompt.classList.toggle('is-expanded');
    embeddedPromptToggle.textContent = expanded ? 'Collapse' : 'Show All';
  });

  const openPromptModal = () => {
    if (!promptModal) return;
    promptModal.classList.remove('hidden');
    promptModal.classList.add('flex');
  };

  const closePromptModal = () => {
    if (!promptModal) return;
    promptModal.classList.add('hidden');
    promptModal.classList.remove('flex');
  };

  const loadPromptConfig = async () => {
    if (promptConfigCache) return promptConfigCache;
    const res = await fetch('/api/ai/vision-config');
    const data = await res.json();
    if (!data.success) {
      throw new Error(data.error || 'Failed to load prompt configuration');
    }
    promptConfigCache = data.data;
    return promptConfigCache;
  };

  const fillPromptModal = async () => {
    try {
      const configData = await loadPromptConfig();
      const source = configData.effective || configData.config || configData.default;
      if (!source) return;
      promptSystemInput.value = source.system_prompt || '';
      promptUserInput.value = source.user_prompt || '';
      promptTemperatureInput.value = Number(source.temperature ?? 0.6).toFixed(1);
      promptTagsInput.value = Number(source.tags_limit ?? 5);
      openPromptModal();
    } catch (err) {
      showNotification(err.message || 'Failed to load prompt configuration', 'error');
    }
  };

  const collectPromptOverride = () => {
    const systemPrompt = (promptSystemInput?.value || '').trim();
    const userPrompt = (promptUserInput?.value || '').trim();
    const temperature = Number(promptTemperatureInput?.value || 0.6);
    const tagsLimit = Number(promptTagsInput?.value || 5);
    if (!systemPrompt || !userPrompt) {
      throw new Error('System Prompt and User Prompt cannot be empty');
    }
    if (temperature < 0 || temperature > 2) {
      throw new Error('temperature must be between 0 and 2');
    }
    if (!Number.isInteger(tagsLimit) || tagsLimit < 1 || tagsLimit > 20) {
      throw new Error('tags_limit must be between 1 and 20');
    }
    return {
      system_prompt: systemPrompt,
      user_prompt: userPrompt,
      temperature,
      tags_limit: tagsLimit
    };
  };

  const generateCaption = async (force = false, promptOverride = null) => {
    const result = await mediaActions.generateCaption(imageUri, {
      confirmExisting: !force, force, promptOverride,
    });
    if (result?.success) showNotification('Title updated', 'success');
  };

  captionBtn?.addEventListener('click', () => generateCaption());
  captionEmptyCta?.addEventListener('click', () => generateCaption());
  captionAdvancedBtn?.addEventListener('click', () => {
    closeMoreMenu();
    fillPromptModal();
  });
  promptCloseBtn?.addEventListener('click', closePromptModal);
  promptCancelBtn?.addEventListener('click', closePromptModal);
  promptModal?.addEventListener('click', (e) => {
    if (e.target === promptModal) {
      closePromptModal();
    }
  });
  promptGenerateBtn?.addEventListener('click', async () => {
    try {
      const override = collectPromptOverride();
      closePromptModal();
      await generateCaption(false, override);
    } catch (err) {
      showNotification(err.message || 'Invalid override configuration', 'error');
    }
  });
  mediaActions.loadCaption(imageUri);
  loadEmbeddedGeneration();
  
  // Keyboard navigation.
  document.addEventListener('keydown', (e) => {
    if (fullscreenModal.classList.contains('hidden')) {
      switch(e.key) {
        case ' ':
        case 'Enter':
          e.preventDefault();
          mainViewer.zoomIn();
          break;
        case 'f':
        case 'F':
          e.preventDefault();
          fullscreenBtn.click();
          break;
      }
    }
  });
});

// Delete confirmation.
function confirmDelete() {
  showModal(
    'Delete this image?',
    'This action cannot be undone. The image will be permanently deleted.',
    async () => {
      try {
        const response = await fetch('/delete/{{ uri_path_encoded }}', { method: 'POST' });
        if (response.ok || response.redirected) {
          window.location.href = '/library';
          return;
        }
        showNotification('Delete failed. Please try again.', 'error');
      } catch (error) {
        showNotification('Delete failed. Please try again.', 'error');
      }
    }
  );
}

// Notification helper shared with Settings.
function showNotification(message, type = 'info') {
  const iconMap = {
    success: 'check-circle',
    info: 'info',
    error: 'alert-circle'
  };
  const colorMap = {
    success: 'bg-green-500',
    info: 'bg-blue-500',
    error: 'bg-red-500'
  };

  const notification = document.createElement('div');
  notification.className = `fixed bottom-20 right-5 flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg text-white ${colorMap[type]} transform translate-y-20 opacity-0 transition-all duration-300 ease-out z-50`;
  notification.innerHTML = `
    <i data-feather="${iconMap[type]}" class="w-6 h-6"></i>
    <span class="font-medium">${message}</span>
  `;
  
  document.body.appendChild(notification);
  feather.replace();
  
  setTimeout(() => {
    notification.classList.remove('translate-y-20', 'opacity-0');
  }, 10);

  setTimeout(() => {
    notification.classList.add('opacity-0');
    setTimeout(() => {
      notification.remove();
    }, 300);
  }, 3000);
}

// Modal helper shared with Settings.
function showModal(title, text, onConfirm, options = {}) {
  const existingModal = document.getElementById('confirmation-modal');
  if (existingModal) existingModal.remove();
  const confirmLabel = options.confirmLabel || 'Delete';
  const confirmTone = options.confirmTone || 'red';
  const toneClass = confirmTone === 'blue'
    ? 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500'
    : 'bg-red-600 hover:bg-red-700 focus:ring-red-500';
  const iconToneClass = confirmTone === 'blue'
    ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400'
    : 'bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400';
  const iconName = options.icon || (confirmTone === 'blue' ? 'cpu' : 'alert-triangle');

  const modalHTML = `
    <div id="confirmation-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm" aria-labelledby="modal-title" role="dialog" aria-modal="true">
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-md m-4 transform transition-all" role="document">
        <div class="p-6">
          <div class="flex items-start gap-4">
            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full ${iconToneClass} sm:mx-0 sm:h-10 sm:w-10">
              <i data-feather="${iconName}" class="h-6 w-6"></i>
            </div>
            <div class="mt-0 text-center sm:text-left">
              <h3 class="text-lg leading-6 font-bold text-gray-900 dark:text-white" id="modal-title">${title}</h3>
              <div class="mt-2">
                <p class="text-sm text-gray-500 dark:text-gray-400">${text}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-800/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-2xl">
          <button type="button" id="confirm-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ${toneClass} text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">
            ${confirmLabel}
          </button>
          <button type="button" id="cancel-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:mt-0 sm:w-auto sm:text-sm">
            Cancel
          </button>
        </div>
      </div>
    </div>
  `;
  
  document.body.insertAdjacentHTML('beforeend', modalHTML);
  feather.replace();

  const modal = document.getElementById('confirmation-modal');
  const confirmBtn = document.getElementById('confirm-btn');
  const cancelBtn = document.getElementById('cancel-btn');

  function closeModal() {
    modal.remove();
  }

  confirmBtn.onclick = () => {
    onConfirm();
    closeModal();
  };
  cancelBtn.onclick = closeModal;
  modal.onclick = (e) => {
    if (e.target === modal) {
      closeModal();
    }
  }
}
</script>
{% endblock %}