{% extends "base.html" %}
{% block title %}{{ recipe.code }} — {{ _('Storico Versioni') }} — TieMeasureFlow{% endblock %}

{% block extra_head %}
<style>
  /* Timeline vertical connector */
  .timeline-connector {
    position: absolute;
    left: 1.25rem;
    top: 2.5rem;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
  }
  .timeline-connector::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
  }

  /* Timeline dot */
  .timeline-dot {
    position: absolute;
    left: 0.5rem;
    top: 0.875rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    z-index: 1;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 0 0 2px var(--border-color);
  }
  .timeline-dot.current {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 0 2px var(--color-primary), 0 0 8px rgba(37, 99, 235, 0.3);
  }
  .timeline-dot.past {
    background: var(--bg-secondary);
    color: var(--text-muted);
  }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-4xl"
     x-data="versionHistory()"
     x-init="loadMeasurementCounts()"
     x-cloak>

  {# ================================================================
     BREADCRUMB
     ================================================================ #}
  <nav class="mb-6" aria-label="Breadcrumb">
    <ol class="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
      <li>
        <a href="{{ url_for('maker.recipe_list') }}"
           class="hover:text-primary transition-colors inline-flex items-center gap-1">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
          </svg>
          {{ _('Ricette') }}
        </a>
      </li>
      <li>
        <svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
        </svg>
      </li>
      <li>
        <a href="{{ url_for('maker.recipe_edit', recipe_id=recipe.id) }}"
           class="hover:text-primary transition-colors">
          {{ recipe.code }}
        </a>
      </li>
      <li>
        <svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
        </svg>
      </li>
      <li class="font-medium text-[var(--text-primary)]">
        {{ _('Storico Versioni') }}
      </li>
    </ol>
  </nav>

  {# ================================================================
     HEADER
     ================================================================ #}
  <div class="mb-8">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-3">
      <div>
        <h1 class="text-3xl font-bold text-[var(--text-primary)] mb-1">
          <span class="font-mono text-primary">{{ recipe.code }}</span>
          <span class="text-[var(--text-muted)] text-lg font-normal ml-2">
            &mdash; {{ recipe.name }}
          </span>
        </h1>
        <div class="flex items-center gap-3 mt-1.5">
          <p class="text-sm text-[var(--text-secondary)]">
            {{ _('Storico Versioni') }}
          </p>
          {% if recipe.current_version %}
          <span class="badge badge-pass font-mono text-xs">
            {{ _('Corrente:') }} v{{ recipe.current_version.version_number }}
          </span>
          {% endif %}
        </div>
      </div>

      <a href="{{ url_for('maker.recipe_edit', recipe_id=recipe.id) }}"
         class="btn btn-secondary gap-1.5 shrink-0">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        {{ _('Torna a Ricetta') }}
      </a>
    </div>
  </div>

  {# ================================================================
     VERSION TIMELINE
     ================================================================ #}
  <template x-if="versions.length > 0">
    <div class="relative pl-12">

      {# Vertical connector line #}
      <div class="absolute left-5 top-6 bottom-6 w-0.5 bg-[var(--border-color)]"></div>

      <template x-for="(version, idx) in sortedVersions" :key="version.id">
        <div class="relative mb-6 last:mb-0">

          {# Timeline dot #}
          <div class="absolute -left-7 top-4 w-6 h-6 rounded-full flex items-center justify-center
                      text-[10px] font-bold z-10 border-2"
               :class="version.version_number === currentVersionNumber
                 ? 'bg-primary text-white border-primary shadow-md shadow-primary/30'
                 : 'bg-[var(--bg-card)] text-[var(--text-muted)] border-[var(--border-color)]'"
               x-text="'v' + version.version_number">
          </div>

          {# Version card #}
          <div class="tmf-card transition-all duration-200"
               :class="version.version_number === currentVersionNumber ? 'border-primary/40 shadow-md' : ''">
            <div class="p-5">

              {# Card header row #}
              <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
                <div class="flex items-center gap-2.5 flex-wrap">
                  {# Version badge #}
                  <span class="inline-flex items-center px-2.5 py-1 rounded-md text-sm font-bold font-mono"
                        :class="version.version_number === currentVersionNumber
                          ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 border border-primary-200 dark:border-primary-800'
                          : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-color)]'"
                        x-text="'v' + version.version_number">
                  </span>

                  {# Current badge #}
                  <template x-if="version.version_number === currentVersionNumber">
                    <span class="badge badge-pass text-xs">
                      <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                      </svg>
                      {{ _('Corrente') }}
                    </span>
                  </template>

                  {# Measurement count badge #}
                  <template x-if="measurementCounts[version.id] !== undefined">
                    <span class="badge text-xs"
                          :class="measurementCounts[version.id] > 0 ? 'badge-pass' : 'badge-neutral'">
                      <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                              d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                      </svg>
                      <span x-text="measurementCounts[version.id]"></span>
                      {{ _('misurazioni') }}
                    </span>
                  </template>
                  <template x-if="measurementCounts[version.id] === undefined && loadingCounts">
                    <span class="badge badge-neutral text-xs">
                      <svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                      </svg>
                      {{ _('Caricamento...') }}
                    </span>
                  </template>
                </div>

                {# View button #}
                <a :href="'/maker/recipes/' + recipeId + '/edit?version=' + version.id"
                   class="btn btn-secondary text-xs gap-1.5 shrink-0">
                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    <path stroke-linecap="round" stroke-linejoin="round"
                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                  </svg>
                  {{ _('Visualizza') }}
                </a>
              </div>

              {# Version details #}
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 text-sm">

                {# Created at #}
                <div class="flex items-center gap-2 text-[var(--text-secondary)]">
                  <svg class="w-4 h-4 text-[var(--text-muted)] shrink-0" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                  </svg>
                  <span x-text="formatDate(version.created_at)"></span>
                </div>

                {# Created by #}
                <template x-if="version.created_by_user">
                  <div class="flex items-center gap-2 text-[var(--text-secondary)]">
                    <svg class="w-4 h-4 text-[var(--text-muted)] shrink-0" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round"
                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                    <span x-text="version.created_by_user.display_name || version.created_by_user.username"></span>
                  </div>
                </template>

                {# Task count (if available) #}
                <template x-if="version.tasks && version.tasks.length > 0">
                  <div class="flex items-center gap-2 text-[var(--text-secondary)]">
                    <svg class="w-4 h-4 text-[var(--text-muted)] shrink-0" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
                    </svg>
                    <span x-text="version.tasks.length + ' task'"></span>
                  </div>
                </template>
              </div>

              {# Change notes #}
              <template x-if="version.change_notes">
                <div class="mt-3 p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
                  <div class="flex items-start gap-2">
                    <svg class="w-4 h-4 text-[var(--text-muted)] shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round"
                            d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
                    </svg>
                    <p class="text-sm text-[var(--text-secondary)] leading-relaxed" x-text="version.change_notes"></p>
                  </div>
                </div>
              </template>

            </div>
          </div>
        </div>
      </template>

    </div>
  </template>

  {# ================================================================
     EMPTY STATE
     ================================================================ #}
  <template x-if="versions.length === 0">
    <div class="tmf-card">
      <div class="p-12 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full
                    bg-[var(--bg-secondary)] mb-4">
          <svg class="w-8 h-8 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </div>
        <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2">
          {{ _('Nessuna versione trovata') }}
        </h3>
        <p class="text-sm text-[var(--text-secondary)] max-w-md mx-auto">
          {{ _('Questa ricetta non ha ancora versioni registrate. La prima versione verra creata automaticamente al salvataggio.') }}
        </p>
      </div>
    </div>
  </template>

  {# ================================================================
     FOOTER
     ================================================================ #}
  <div class="flex items-center justify-between gap-3 pt-6 pb-8">
    <a href="{{ url_for('maker.recipe_edit', recipe_id=recipe.id) }}"
       class="btn btn-secondary gap-2">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
      </svg>
      {{ _('Torna a Ricetta') }}
    </a>

    <a href="{{ url_for('maker.recipe_preview', recipe_id=recipe.id) }}"
       class="btn btn-secondary gap-2">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
      </svg>
      {{ _('Anteprima') }}
    </a>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
/**
 * Version History - Alpine.js component
 * Loads and displays recipe version timeline with AJAX measurement counts.
 */
function versionHistory() {
  return {
    recipeId: {{ recipe.id|tojson }},
    currentVersionNumber: {{ (recipe.current_version.version_number if recipe.current_version else 0)|tojson }},
    versions: {{ versions|tojson }},
    measurementCounts: {},
    loadingCounts: true,

    /**
     * Sorted versions: most recent first.
     */
    get sortedVersions() {
      return [...this.versions].sort((a, b) => b.version_number - a.version_number);
    },

    /**
     * Load measurement counts for all versions via AJAX.
     * Calls the proxy API endpoint for each version.
     */
    async loadMeasurementCounts() {
      this.loadingCounts = true;
      const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';

      const promises = this.versions.map(async (version) => {
        try {
          const resp = await fetch(
            '/maker/api/recipes/' + this.recipeId + '/versions/' + version.version_number + '/measurement-count',
            {
              method: 'GET',
              headers: {
                'X-CSRFToken': csrfToken
              }
            }
          );

          if (resp.ok) {
            const data = await resp.json();
            this.measurementCounts[version.id] = data.measurement_count || 0;
          } else {
            this.measurementCounts[version.id] = 0;
          }
        } catch (err) {
          console.error('Error loading measurement count for version', version.version_number, err);
          this.measurementCounts[version.id] = 0;
        }
      });

      await Promise.all(promises);
      this.loadingCounts = false;
    },

    /**
     * Format ISO date string to a localized display format.
     * Example output: "15 Gen 2026, 14:30"
     * @param {string} isoString - ISO 8601 date string
     * @returns {string} Formatted date
     */
    formatDate(isoString) {
      if (!isoString) return '—';

      try {
        const date = new Date(isoString);
        if (isNaN(date.getTime())) return isoString;

        const months = [
          'Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu',
          'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'
        ];

        const day = date.getDate();
        const month = months[date.getMonth()];
        const year = date.getFullYear();
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');

        return day + ' ' + month + ' ' + year + ', ' + hours + ':' + minutes;
      } catch (e) {
        return isoString;
      }
    }
  };
}
</script>
{% endblock %}