{% extends "base.html" %}

{% block title %}{{ domain.name }} — Memory — {{ config.INSTANCE_NAME or 'AI Data Analyst' }}{% endblock %}

{% block content %}
<style>
  .dom-detail-header {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #eceff1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
  }
  .dom-detail-icon {
    width: 64px; height: 64px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
  }
  .dom-detail-heading { flex: 1; min-width: 0; }
  .dom-detail-heading h1 { margin: 0; font-size: 24px; }
  .dom-detail-heading .desc { color: var(--text-secondary, #5f6368); margin-top: 6px; font-size: 14px; }
  .dom-detail-heading .meta {
    margin-top: 8px; font-size: 13px;
    color: var(--text-secondary, #5f6368);
  }
  .dom-detail-actions { display: flex; gap: 8px; }
  .dom-detail-actions .btn {
    padding: 8px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border, #eceff1);
    background: var(--surface, #fff);
  }
  .dom-detail-actions .btn-primary {
    background: var(--primary, #0073D1); color: #fff;
    border-color: var(--primary, #0073D1);
  }
  .dom-detail-actions .btn-danger { color: #b91c1c; border-color: #fecaca; }
  .dom-detail-actions .btn-required {
    background: #fef3c7; color: #92400e; border-color: #fde68a;
    cursor: not-allowed;
  }

  .memory-item {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #eceff1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
  }
  .memory-item.is-required {
    background: #fffbeb;
    border-color: #f59e0b;
  }
  .memory-item__header {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 8px;
  }
  .memory-item__title {
    margin: 0; font-size: 16px; font-weight: 600;
    flex: 1;
  }
  .memory-item__badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px;
    background: rgba(0, 115, 209, 0.12); color: #0056A3;
  }
  .badge--category    { background: rgba(124, 58, 237, 0.14); color: #6d28d9; }
  .badge--source      { background: rgba(16, 183, 127, 0.14); color: #0e9b6a; }
  .badge--required    { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
  .badge--status      { background: rgba(100, 116, 139, 0.18); color: #475569; }

  .memory-item__content {
    font-size: 14px; line-height: 1.6;
    color: var(--text-primary, #202124);
    white-space: pre-wrap;
  }

  .memory-item__footer {
    display: flex; align-items: center; gap: 16px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light, #eceff1);
    font-size: 12px; color: var(--text-secondary, #5f6368);
  }
  .memory-item__votes {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: help;
  }
  .memory-item__votes button {
    appearance: none; border: 1px solid var(--border, #eceff1);
    background: var(--surface, #fff); cursor: pointer;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary, #5f6368);
    display: inline-flex; align-items: center; gap: 5px;
    transition: all 0.15s ease;
  }
  .memory-item__votes button:hover {
    border-color: var(--primary, #0073D1);
    color: var(--primary, #0073D1);
    background: rgba(0, 115, 209, 0.06);
  }
  .memory-item__votes button[data-vote="down"]:hover {
    border-color: #b91c1c; color: #b91c1c;
    background: rgba(185, 28, 28, 0.06);
  }
  .vote-icon { width: 14px; height: 14px; flex-shrink: 0; }
  .vote-count { font-variant-numeric: tabular-nums; }
  .memory-item__contributors {
    display: inline-flex; gap: 4px; align-items: center;
  }
  .memory-item__avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0, 115, 209, 0.18); color: #0056A3;
    font-size: 10px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .memory-item__tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
  .memory-item__tag {
    font-size: 10px; padding: 2px 6px; border-radius: 4px;
    background: var(--border-light, #f3f4f6); color: var(--text-secondary, #5f6368);
  }
  .memory-item__actions {
    margin-left: auto;
    display: inline-flex; gap: 6px;
  }
  .memory-item__actions button {
    appearance: none; border: 1px solid var(--border, #eceff1);
    background: var(--surface, #fff);
    padding: 4px 10px; border-radius: 6px;
    font-size: 12px; cursor: pointer;
  }
  .memory-item__actions button:hover { background: var(--border-light, #f3f4f6); }

  .back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-secondary, #5f6368); text-decoration: none;
    font-size: 13px; margin-bottom: 12px;
  }
  .back-link:hover { color: var(--primary, #0073D1); }
</style>

<a class="back-link" href="/corporate-memory">← All memory domains</a>

<div class="dom-detail-header">
  <div class="dom-detail-icon" style="background: {{ domain.color or '#dcfce7' }}">
    {{ domain.icon or '🎯' }}
  </div>
  <div class="dom-detail-heading">
    <h1>{{ domain.name }}</h1>
    {% if domain.description %}<div class="desc">{{ domain.description }}</div>{% endif %}
    <div class="meta">
      {{ items|length }} item{{ 's' if items|length != 1 else '' }}
      {% if required_count %} · <strong>{{ required_count }}</strong> required{% endif %}
    </div>
  </div>
  <div class="dom-detail-actions">
    {% if effective_requirement == 'required' %}
      <button class="btn btn-required" disabled>In stack (required)</button>
    {% elif in_stack %}
      <button class="btn btn-danger" id="dom-remove-btn">Remove from stack</button>
    {% else %}
      <button class="btn btn-primary" id="dom-add-btn">+ Add to stack</button>
    {% endif %}
  </div>
</div>

{% if items %}
<div class="memory-items">
  {% for it in items %}
  <div class="memory-item {% if it.is_required %}is-required{% endif %}" data-item-id="{{ it.id }}">
    <div class="memory-item__header">
      <h3 class="memory-item__title">{{ it.title }}</h3>
      <div class="memory-item__badges">
        {% if it.is_required %}
          <span class="badge badge--required">Required</span>
        {% endif %}
        {% if it.category %}<span class="badge badge--category">{{ it.category }}</span>{% endif %}
        {% if it.source_type %}<span class="badge badge--source">{{ it.source_type }}</span>{% endif %}
        {% if it.status and it.status != 'approved' %}
          <span class="badge badge--status">{{ it.status }}</span>
        {% endif %}
        {% if it.confidence %}
          <span class="badge">{{ (it.confidence * 100)|round(0)|int }}% conf</span>
        {% endif %}
      </div>
    </div>

    <div class="memory-item__content">{{ it.content }}</div>

    <div class="memory-item__footer">
      <span class="memory-item__votes"
            title="Upvote useful items to surface them; downvote outdated ones. Counts feed admin's review queue + the analyst sort order.">
        <button data-vote="up" data-item="{{ it.id }}" title="Useful — promote in review queue">
          <svg class="vote-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
               stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M7 10v12"/>
            <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/>
          </svg>
          <span class="vote-count">{{ it.upvotes or 0 }}</span>
        </button>
        <button data-vote="down" data-item="{{ it.id }}" title="Outdated — flag for admin attention">
          <svg class="vote-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
               stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M17 14V2"/>
            <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/>
          </svg>
          <span class="vote-count">{{ it.downvotes or 0 }}</span>
        </button>
      </span>
      {% if it.contributors_display %}
      <span class="memory-item__contributors">
        {% for c in it.contributors_display[:3] %}
          <span class="memory-item__avatar" title="{{ c.name }}">{{ c.initials }}</span>
        {% endfor %}
      </span>
      {% endif %}
      {% if it.tags %}
      <span class="memory-item__tags">
        {% for t in it.tags %}<span class="memory-item__tag">{{ t }}</span>{% endfor %}
      </span>
      {% endif %}
      <span class="memory-item__actions">
        {% if user.is_admin %}
          <a href="/admin/corporate-memory#item-{{ it.id }}"
             title="Visible only to admins — analysts won't see this link.">Edit <span class="admin-only-hint">admin-only</span></a>
        {% endif %}
        {% if it.is_required %}
          {# Required items can't be dismissed — single source of truth. #}
        {% elif it.dismissed_by_me %}
          <button data-action="undismiss" data-item="{{ it.id }}">Undismiss</button>
        {% else %}
          <button data-action="dismiss" data-item="{{ it.id }}">Dismiss</button>
        {% endif %}
      </span>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="stack-empty">
  <h3>No items in this domain yet</h3>
  <p>Items show up here once an admin adds them to this domain.</p>
</div>
{% endif %}

<script>
'use strict';
(function() {
  const domId = {{ domain.id | tojson }};
  const addBtn = document.getElementById('dom-add-btn');
  const removeBtn = document.getElementById('dom-remove-btn');

  async function api(method, url, body) {
    const opts = { method, credentials: 'same-origin' };
    if (body) {
      opts.headers = { 'Content-Type': 'application/json' };
      opts.body = JSON.stringify(body);
    }
    return fetch(url, opts);
  }

  if (addBtn) addBtn.addEventListener('click', async () => {
    addBtn.disabled = true;
    const r = await api('POST', '/api/stack/subscribe',
      { resource_type: 'memory_domain', resource_id: domId });
    if (r.ok) location.reload();
    else { alert('Failed to add'); addBtn.disabled = false; }
  });
  if (removeBtn) removeBtn.addEventListener('click', async () => {
    removeBtn.disabled = true;
    const r = await api('DELETE',
      '/api/stack/subscription/memory_domain/' + encodeURIComponent(domId));
    if (r.ok) location.reload();
    else { alert('Failed to remove'); removeBtn.disabled = false; }
  });

  // Per-item votes. Route is POST /api/memory/{id}/vote — the extra
  // /items/ segment a previous edit added didn't match any route and
  // every vote silently 404'd (caught by Devin review on PR #333).
  document.querySelectorAll('[data-vote]').forEach(b => {
    b.addEventListener('click', async () => {
      const itemId = b.dataset.item;
      const value = b.dataset.vote === 'up' ? 1 : -1;
      const r = await api('POST', '/api/memory/' + encodeURIComponent(itemId) + '/vote',
        { value: value });
      if (r.ok) location.reload();
    });
  });

  // Per-item dismiss / undismiss. Routes are POST /api/memory/{id}/dismiss
  // (dismiss) and DELETE /api/memory/{id}/dismiss (undismiss) — there is
  // no /undismiss endpoint and the /items/ segment is wrong. Previous
  // code sent both as POST to /api/memory/items/{id}/{dismiss,undismiss}
  // which silently 404'd both ways (Devin review on PR #333).
  document.querySelectorAll('[data-action]').forEach(b => {
    b.addEventListener('click', async () => {
      const itemId = b.dataset.item;
      const action = b.dataset.action;
      const url = '/api/memory/' + encodeURIComponent(itemId) + '/dismiss';
      const method = action === 'dismiss' ? 'POST' : 'DELETE';
      const r = await api(method, url);
      if (r.ok) location.reload();
    });
  });
})();
</script>
{% endblock %}