{% extends "base.html" %}
{% block title %}TasteEngine — Recommendations{% endblock %}

{% block breadcrumb %}
<ul class="breadcrumb">
  <li><a href="/">Home</a><span class="sep">/</span></li>
  <li class="current">Recommend</li>
</ul>
{% endblock %}

{% block content %}
{% from "macros.html" import glass, spinner, skeleton_cards %}

<div x-data="recommendApp()">
  <div class="row">
    {% call glass("User") %}
      <div class="form-group">
        <label class="form-label" for="userSelect">Select User</label>
        <select id="userSelect" x-model="selectedUserId" @change="onUserChange">
          <option value="">-- Choose --</option>
          {% for u in users %}
          <option value="{{ u.id }}">{{ u.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="mt-1" x-show="selectedUser" x-cloak>
        <div class="compact-row">
          <div class="profile-avatar" style="width:40px;height:40px;font-size:1rem;" x-text="selectedUser?.name?.charAt(0) || '?'"></div>
          <div>
            <div style="font-weight:600;color:var(--text-primary);font-size:0.9rem;" x-text="selectedUser?.name"></div>
            <div style="font-size:0.8rem;color:var(--text-muted);" x-text="'Categories: ' + (selectedUser?.categories?.join(', ') || 'none')"></div>
          </div>
        </div>
      </div>
    {% endcall %}

    {% call glass("Number of Recommendations") %}
      <div class="form-group">
        <input type="number" id="nRecs" value="10" min="1" max="50" style="max-width: 100px;" x-model.number="nRecs">
      </div>
    {% endcall %}
  </div>

  {% call glass("Choose Approach & Method") %}
    <div class="btn-group" id="approachGroup">
      <template x-for="(app, key) in approaches" :key="key">
        <button class="btn-approach"
          :class="{ active: currentApproach === key }"
          :data-approach="key"
          @click="selectApproach(key)">
          <span class="icon" x-text="app.icon"></span>
          <span x-text="app.label"></span>
        </button>
      </template>
    </div>

    <div class="mt-2">
      <template x-for="(app, key) in approaches" :key="key">
        <div x-show="currentApproach === key" x-transition.duration.200ms>
          <div class="btn-group">
            <template x-for="m in app.methods" :key="m.id">
              <button class="btn-method"
                :class="{ active: currentMethod === m.id }"
                @click="currentMethod = m.id"
                x-text="m.label">
              </button>
            </template>
          </div>
        </div>
      </template>
    </div>

    <div class="mt-2">
      <button class="btn btn-primary" @click="getRecommendations()" :disabled="loading || !selectedUserId">
        <span x-show="!loading">Get Recommendations</span>
        <span x-show="loading">Generating...</span>
      </button>
    </div>
  {% endcall %}

  <div x-show="showResults" x-cloak x-transition.duration.300ms>
    <div class="tabs">
      <button class="tab" :class="{ active: activeTab === 'cards' }" @click="activeTab = 'cards'">Cards</button>
      <button class="tab" :class="{ active: activeTab === 'compare' }" @click="activeTab = 'compare'">Compare Approaches</button>
    </div>

    <div x-show="activeTab === 'cards'" x-transition>
      {% call glass("") %}
        <h2 class="glass-header" x-text="resultTitle"></h2>
        <div class="mt-2">
          <div x-show="!results && loading" x-transition>
            {{ skeleton_cards(6) }}
          </div>
          <div x-show="results && results.length === 0 && !coldStartDetected" x-transition>
            {% from "macros.html" import empty_state %}
            {{ empty_state('📭', 'No recommendations', 'Try a different approach or method.') }}
          </div>
          <div x-show="results && results.length === 0 && coldStartDetected" x-transition>
            <div class="empty-state">
              <div class="empty-icon">👤</div>
              <div class="empty-title">This user has no ratings yet</div>
              <div class="empty-desc" style="margin-bottom:1rem;">
                Collaborative Filtering and Content-Based need rating history. Switch to
                <strong>Knowledge-Based</strong> which works with preferences alone.
              </div>
              <button class="btn btn-primary btn-sm" @click="switchToKnowledge()">Switch to Knowledge-Based</button>
            </div>
          </div>

          <div class="filter-bar" x-show="results && results.length > 0" x-cloak>
            <div class="form-group">
              <label class="form-label">Category</label>
              <select x-model="filterCategory">
                <option value="">All Categories</option>
                <template x-for="cat in availableCategories" :key="cat">
                  <option :value="cat" x-text="cat"></option>
                </template>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Brand</label>
              <select x-model="filterBrand">
                <option value="">All Brands</option>
                <template x-for="b in availableBrands" :key="b">
                  <option :value="b" x-text="b"></option>
                </template>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Max Price</label>
              <input type="number" x-model.number="filterPriceMax" placeholder="Any" min="0" style="min-width:100px;">
            </div>
            <div class="form-group" style="align-self:end;">
              <button class="btn btn-ghost btn-sm" @click="filterCategory=''; filterBrand=''; filterPriceMax=null">
                Clear Filters
              </button>
            </div>
          </div>

          <div class="product-grid" x-show="results && results.length > 0" x-transition>
            <template x-for="(item, idx) in filteredResults" :key="item.id">
              <div class="product-card stagger"
                :data-category="item.category"
                :style="{ animationDelay: (idx * 60) + 'ms' }"
                @mouseenter="item.showTooltip = true"
                @mouseleave="item.showTooltip = false">
                <div class="product-icon" x-text="getCategoryIcon(item.category)"></div>
                <div class="product-name" x-text="item.name"></div>
                <div class="product-meta" x-text="item.brand + ' · ' + item.subcategory"></div>
                <div class="compact-row flex-between">
                  <div class="product-price" x-text="'$' + item.price.toFixed(2)"></div>
                  <div class="product-rating">
                    <span x-text="stars(item.avg_rating)"></span>
                    <span x-text="item.avg_rating"></span>
                  </div>
                </div>
                <div class="product-score-bar" x-show="item.score">
                  <div class="product-score-bar-fill" :style="{ width: (item.score * 100) + '%' }"></div>
                </div>
                <div class="product-explanation" x-text="item.explanation"></div>
              </div>
            </template>
          </div>
        </div>
      {% endcall %}
    </div>

    <div x-show="activeTab === 'compare'" x-transition>
      {% call glass("Compare All Approaches") %}
        <p class="text-muted" style="font-size:0.85rem;margin-bottom:1rem;">
          Compare all methods across Collaborative Filtering, Content-Based, and Knowledge-Based.
        </p>
        <button class="btn btn-primary" @click="compareAll()" :disabled="loading || !selectedUserId">
          <span x-show="!loading">Compare All Approaches</span>
          <span x-show="loading">Loading...</span>
        </button>
        <div class="mt-2" x-show="compareResults">
          <div class="compare-view synced-scroll">
            <template x-for="col in compareResults" :key="col.method || col.label">
              <div class="compare-column" @scroll="syncScroll($el)">
                <h3 x-text="col.label"></h3>
                <template x-if="col.error">
                  <p class="text-dim" style="font-size:0.8rem;" x-text="col.error"></p>
                </template>
                <template x-if="!col.error && (!col.items || col.items.length === 0)">
                  <p class="text-dim" style="font-size:0.8rem;">No results</p>
                </template>
                <template x-for="(item, i) in col.items" :key="i">
                  <div class="compare-item">
                    <div class="compare-item-name" x-text="(i+1) + '. ' + item.name"></div>
                    <div class="compare-item-meta" x-text="'$' + item.price.toFixed(2) + ' · ' + item.brand"></div>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </div>
      {% endcall %}
    </div>
  </div>
</div>

<div class="kbd-hint" id="kbdHint">
  <kbd>1</kbd> <kbd>2</kbd> <kbd>3</kbd> Select approach ·
  <kbd>R</kbd> Recommend ·
  <kbd>E</kbd> Evaluate ·
  <kbd>H</kbd> Home
</div>

<script>
  setTimeout(() => document.getElementById('kbdHint')?.classList.add('visible'), 2000);
  setTimeout(() => document.getElementById('kbdHint')?.classList.remove('visible'), 8000);
  document.addEventListener('keydown', () => {
    const h = document.getElementById('kbdHint');
    if (h) h.classList.remove('visible');
  });
</script>
{% endblock %}

{% block scripts %}
<script>
  const userData = {{ users | tojson | safe }};
  const approaches = {{ approaches | tojson | safe }};

  document.addEventListener('alpine:init', () => {
    Alpine.data('recommendApp', () => ({
      approaches: approaches,
      selectedUserId: null,
      selectedUser: null,
      currentApproach: 'cf',
      currentMethod: 'user_based',
      loading: false,
      results: null,
      resultTitle: '',
      compareResults: null,
      activeTab: 'cards',
      nRecs: 10,
      showResults: false,
      coldStartDetected: false,
      filterCategory: '',
      filterBrand: '',
      filterPriceMax: null,

      get availableCategories() {
        return [...new Set((this.results || []).map(i => i.category))];
      },

      get availableBrands() {
        return [...new Set((this.results || []).map(i => i.brand))];
      },

      get filteredResults() {
        let items = this.results || [];
        if (this.filterCategory) items = items.filter(i => i.category === this.filterCategory);
        if (this.filterBrand) items = items.filter(i => i.brand === this.filterBrand);
        if (this.filterPriceMax) items = items.filter(i => i.price <= this.filterPriceMax);
        return items;
      },

      init() {
        const params = new URLSearchParams(window.location.search);
        const urlUser = params.get('user');
        const urlApproach = params.get('approach');
        const urlMethod = params.get('method');
        const saved = urlUser || localStorage.getItem('selectedUser');
        if (saved) {
          this.selectedUserId = parseInt(saved);
          this.onUserChange();
        }
        if (urlApproach && this.approaches[urlApproach]) {
          this.currentApproach = urlApproach;
          if (urlMethod) this.currentMethod = urlMethod;
          else if (this.approaches[urlApproach].methods.length > 0) {
            this.currentMethod = this.approaches[urlApproach].methods[0].id;
          }
        }
        setTimeout(() => {
          if (urlUser) this.getRecommendations();
        }, 300);
      },

      updateUrl() {
        const params = new URLSearchParams();
        if (this.selectedUserId) params.set('user', this.selectedUserId);
        if (this.currentApproach) params.set('approach', this.currentApproach);
        if (this.currentMethod) params.set('method', this.currentMethod);
        const qs = params.toString();
        const url = window.location.pathname + (qs ? '?' + qs : '');
        window.history.replaceState({}, '', url);
      },

      switchToKnowledge() {
        this.selectApproach('knowledge');
        this.coldStartDetected = false;
        this.getRecommendations();
      },

      onUserChange() {
        const uid = this.selectedUserId;
        if (!uid) {
          this.selectedUser = null;
          return;
        }
        this.selectedUser = userData.find(u => u.id === uid);
        localStorage.setItem('selectedUser', uid);
        this.results = null;
        this.compareResults = null;
        this.coldStartDetected = false;
      },

      selectApproach(key) {
        this.currentApproach = key;
        const methods = this.approaches[key].methods;
        if (methods.length > 0) {
          this.currentMethod = methods[0].id;
        }
        this.results = null;
        this.compareResults = null;
        this.coldStartDetected = false;
        this.updateUrl();
      },

      async getRecommendations() {
        if (!this.selectedUserId) {
          toast('Please select a user first.', 'warning');
          return;
        }

        this.loading = true;
        this.results = null;
        this.compareResults = null;

        try {
          const r = await fetch('/api/recommend', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              user_id: this.selectedUserId,
              approach: this.currentApproach,
              method: this.currentMethod,
              n: this.nRecs
            })
          });
          const data = await r.json();

          if (data.error) {
            toast(data.error, 'error');
            this.results = [];
            return;
          }

          const appInfo = this.approaches[this.currentApproach];
          const methodInfo = appInfo.methods.find(m => m.id === this.currentMethod);
          this.resultTitle = `Recommendations via ${appInfo.label} — ${methodInfo ? methodInfo.label : this.currentMethod}`;

          this.results = data.recommendations || [];
          this.activeTab = 'cards';
          this.showResults = true;
          this.updateUrl();

          if (this.results.length > 0) {
            this.coldStartDetected = false;
            toast(`Found ${this.results.length} recommendations`, 'success');
          } else {
            this.coldStartDetected = this.selectedUser &&
              (this.currentApproach === 'cf' || this.currentApproach === 'content');
            if (this.coldStartDetected) {
              toast(`No ratings for this user — try Knowledge-Based`, 'warning', 5000);
            }
          }
        } catch (err) {
          toast('Error: ' + err.message, 'error');
          this.results = [];
        } finally {
          this.loading = false;
        }
      },

      async compareAll() {
        if (!this.selectedUserId) {
          toast('Please select a user first.', 'warning');
          return;
        }

        this.loading = true;
        this.compareResults = null;

        const promises = [];
        const totalMethods = Object.values(this.approaches).reduce((sum, a) => sum + a.methods.length, 0);
        Object.keys(this.approaches).forEach(appKey => {
          this.approaches[appKey].methods.forEach(m => {
            promises.push(
              fetch('/api/recommend', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ user_id: this.selectedUserId, approach: appKey, method: m.id, n: 5 })
              })
              .then(r => r.json())
              .then(data => ({
                approach: appKey,
                method: m.id,
                label: this.approaches[appKey].icon + ' ' + m.label,
                data
              }))
              .catch(err => ({
                approach: appKey,
                method: m.id,
                label: this.approaches[appKey].icon + ' ' + m.label,
                data: { error: err.message, recommendations: [] }
              }))
            );
          });
        });

        try {
          const results = await Promise.all(promises);
          this.compareResults = results.map(r => ({
            approach: r.approach,
            method: r.method,
            label: r.label,
            error: r.data.error,
            items: r.data.recommendations || []
          }));
          this.activeTab = 'compare';
          this.showResults = true;
          const loaded = results.filter(r => !r.data.error && r.data.recommendations?.length).length;
          toast(`Loaded ${loaded} of ${totalMethods} methods`, loaded === totalMethods ? 'success' : 'warning');
        } catch (err) {
          toast('Error: ' + err.message, 'error');
        } finally {
          this.loading = false;
        }
      },
    }));
  });
</script>
{% endblock %}