{% extends "base.html" %}
{% block title %}Profile — devcoach{% endblock %}

{% block content %}
<div x-data="{
  editMode: JSON.parse(localStorage.getItem('km-edit-mode') || 'false'),
  toggle() { this.editMode = !this.editMode; localStorage.setItem('km-edit-mode', this.editMode); }
}">

<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">Knowledge Map</h1>

  <div class="flex items-center gap-2">

    {# Add group — edit mode only #}
    <div x-show="editMode" style="display:none" x-data="{ open: false }" class="relative">
      <button type="button" @click="open = !open"
              class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition
                     bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:border-indigo-400">
        + Add group
      </button>
      <div x-show="open" @click.outside="open = false"
           class="absolute right-0 top-full mt-1 z-50 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-3 w-56"
           style="display:none">
        <form method="post" action="/groups" class="flex gap-2">
          <input type="text" name="group_name" placeholder="Group name…" required
                 class="flex-1 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
          <button type="submit"
                  class="px-3 py-1.5 rounded-lg text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-500 transition">Add</button>
        </form>
      </div>
    </div>

    {# Add topic — edit mode only #}
    <div x-show="editMode" style="display:none" x-data="{ open: false }" class="relative">
      <button type="button" @click="open = !open"
              class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition
                     bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:border-indigo-400">
        + Add topic
      </button>
      <div x-show="open" @click.outside="open = false"
           class="absolute right-0 top-full mt-1 z-50 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-4 w-72"
           style="display:none">
        <form method="post" action="/knowledge" class="space-y-3">
          <div>
            <label for="add-topic-id" class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Topic ID</label>
            <input id="add-topic-id" type="text" name="topic" placeholder="e.g. rust_lifetimes" required
                   class="w-full text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
          </div>
          <div class="flex gap-2">
            <div class="w-24">
              <label for="add-topic-confidence" class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Confidence</label>
              <input id="add-topic-confidence" type="number" name="confidence" value="5" min="0" max="10"
                     class="w-full text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
            </div>
            <div class="flex-1">
              <label for="add-topic-group" class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Group</label>
              <select id="add-topic-group" name="group"
                      class="w-full text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <option value="">Other (ungrouped)</option>
                {% for g in all_groups if g != 'Other' %}
                <option value="{{ g }}">{{ g }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <button type="submit"
                  class="w-full px-3 py-1.5 rounded-lg text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-500 transition">Add</button>
        </form>
      </div>
    </div>

    {# Edit / Done toggle #}
    <button type="button" @click="toggle()"
            :class="editMode
              ? 'bg-indigo-600 text-white border-indigo-600 hover:bg-indigo-500'
              : 'bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:border-indigo-400'"
            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition">
      <span x-text="editMode ? '✓ Done' : '✎ Edit'">✎ Edit</span>
    </button>

  </div>
</div>

{# Stats bar #}
<div class="mb-6 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
  <span>
    <span class="font-semibold text-gray-800 dark:text-gray-100">{{ stats.total_lessons }}</span>
    lessons total
  </span>
  <span class="text-gray-300 dark:text-gray-600">·</span>
  <span>
    <span class="font-semibold text-gray-800 dark:text-gray-100">{{ stats.lessons_today }}</span>
    / {{ max_per_day }} today
  </span>
  <span class="text-gray-300 dark:text-gray-600">·</span>
  <span>
    <span class="font-semibold text-gray-800 dark:text-gray-100">{{ stats.lessons_this_week }}</span>
    this week
  </span>
  <span class="text-gray-300 dark:text-gray-600">·</span>
  {% if rate_limit.allowed %}
    <span class="text-green-600 dark:text-green-400 font-medium">Available now</span>
  {% else %}
    <span class="text-yellow-600 dark:text-yellow-400">{{ rate_limit.reason }}</span>
  {% endif %}
</div>

{% for category, topics in categorised.items() %}
<section class="mb-6 group/section">
  <div class="flex items-center gap-2 mb-2 border-b border-gray-200 dark:border-gray-800 pb-1">

    {# Group name + delete × — grouped so × sits right after the name on hover #}
    <div class="flex items-center gap-1 flex-1 min-w-0">
      <h2 class="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 shrink-0">
        {{ category }}
      </h2>
      {% if category != 'Other' %}
      <form x-show="editMode" style="display:none"
            method="post" action="/groups/{{ category | urlencode }}/delete"
            onsubmit="return confirm('Remove group &quot;{{ category }}&quot;? Topics will move to Other.')">
        <button type="submit"
                class="text-xs text-gray-300 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400 transition w-4 text-center opacity-0 group-hover/section:opacity-100" title="Delete group">×</button>
      </form>
      {% endif %}
    </div>

    {# Add topic to this group — edit mode only #}
    <div x-show="editMode" style="display:none" x-data="{ open: false }" class="relative">
      <button type="button" @click="open = !open"
              class="text-xs text-gray-300 dark:text-gray-600 hover:text-indigo-500 dark:hover:text-indigo-400 transition px-1">+ topic</button>
      <div x-show="open" @click.outside="open = false"
           class="absolute right-0 top-full mt-1 z-50 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-3 w-64"
           style="display:none">
        <form method="post" action="/knowledge" class="space-y-2">
          <input type="hidden" name="group" value="{{ category if category != 'Other' else '' }}" />
          <input type="text" name="topic" placeholder="topic_id (e.g. rust_lifetimes)" required
                 class="w-full text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
          <div class="flex items-center gap-2">
            <label for="cat-confidence-{{ loop.index }}" class="text-xs text-gray-400 dark:text-gray-500 shrink-0">Confidence</label>
            <input id="cat-confidence-{{ loop.index }}" type="number" name="confidence" value="5" min="0" max="10"
                   class="w-16 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-2 py-1 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
            <button type="submit"
                    class="flex-1 px-3 py-1.5 rounded-lg text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-500 transition">Add</button>
          </div>
        </form>
      </div>
    </div>

  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-8 gap-y-0">
    {% for entry in topics %}
    {% set topic = entry.topic %}
    {% set confidence = entry.confidence %}
    {% set pct = (confidence / 10 * 100) | int %}
    {% if confidence >= 7 %}
      {% set color = "bg-green-500" %}
      {% set text_color = "text-green-600 dark:text-green-400" %}
    {% elif confidence >= 4 %}
      {% set color = "bg-yellow-500" %}
      {% set text_color = "text-yellow-600 dark:text-yellow-400" %}
    {% else %}
      {% set color = "bg-red-500" %}
      {% set text_color = "text-red-600 dark:text-red-400" %}
    {% endif %}

    <div class="flex items-center gap-2 py-1.5 border-b border-gray-100 dark:border-gray-800/50 group/row">

      {# Move to group — edit mode only, revealed on hover, before topic name #}
      <div x-show="editMode" style="display:none" x-data="{ open: false }" class="relative shrink-0 flex items-center">
        <button type="button" @click="open = !open"
                class="text-xs text-gray-200 dark:text-gray-700 hover:text-indigo-500 dark:hover:text-indigo-400 transition w-4 text-center opacity-0 group-hover/row:opacity-100" title="Move to group">⇄</button>
        <div x-show="open" @click.outside="open = false"
             class="absolute left-0 top-full mt-1 z-50 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-1 w-40"
             style="display:none">
          <form method="post" action="/knowledge/{{ topic }}/group">
            <select name="group" onchange="this.form.submit()"
                    class="w-full text-xs bg-transparent text-gray-700 dark:text-gray-200 px-2 py-1 focus:outline-none">
              <option value="Other" {% if category == 'Other' %}selected{% endif %}>Other (ungrouped)</option>
              {% for g in all_groups if g != 'Other' %}
              <option value="{{ g }}" {% if g == category %}selected{% endif %}>{{ g }}</option>
              {% endfor %}
            </select>
          </form>
        </div>
      </div>

      {# Topic name + delete button grouped so × stays tight against the text #}
      <div class="flex items-center gap-1 flex-1 min-w-0">

        {# View mode: topic is a link to lessons filtered by this topic #}
        <a x-show="!editMode"
           href="/lessons?search={{ topic }}"
           class="text-sm text-gray-700 dark:text-gray-200 min-w-0 truncate hover:text-indigo-600 dark:hover:text-indigo-400 hover:underline transition"
           title="{{ topic }}">{{ topic }}</a>

        {# Edit mode: plain text #}
        <span x-show="editMode" style="display:none"
              class="text-sm text-gray-700 dark:text-gray-200 min-w-0 truncate"
              title="{{ topic }}">{{ topic }}</span>

        {# Delete topic — edit mode only, revealed on hover, snug after topic text #}
        <form x-show="editMode" style="display:none"
              method="post" action="/knowledge/{{ topic }}/delete"
              onsubmit="return confirm('Remove {{ topic }} from your knowledge map?')"
              class="shrink-0 flex items-center">
          <button type="submit"
                  class="text-xs text-gray-200 dark:text-gray-700 hover:text-red-500 dark:hover:text-red-400 transition w-4 text-center opacity-0 group-hover/row:opacity-100" title="Remove topic">×</button>
        </form>

      </div>

      {# − button — edit mode only #}
      <form x-show="editMode" style="display:none" method="post" action="/knowledge/{{ topic }}" class="shrink-0 flex items-center">
        <input type="hidden" name="delta" value="-1" />
        <button class="text-xs text-gray-300 dark:text-gray-600 hover:text-red-500 dark:hover:text-red-400 transition w-5 text-center leading-none">−</button>
      </form>

      <div class="w-20 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shrink-0">
        <div class="{{ color }} h-full rounded-full transition-all" style="width: {{ pct }}%"></div>
      </div>

      {# + button — edit mode only #}
      <form x-show="editMode" style="display:none" method="post" action="/knowledge/{{ topic }}" class="shrink-0 flex items-center">
        <input type="hidden" name="delta" value="1" />
        <button class="text-xs text-gray-300 dark:text-gray-600 hover:text-green-600 dark:hover:text-green-400 transition w-5 text-center leading-none">+</button>
      </form>

      <span class="text-xs font-bold {{ text_color }} w-5 text-right shrink-0">{{ confidence }}</span>

    </div>
    {% endfor %}
  </div>
</section>
{% endfor %}

</div>
{% endblock %}