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

{% block head %}
<link id="hljs-theme" rel="stylesheet" href="/static/vendor/hljs-dark.min.css" />
{% endblock %}

{% block content %}
<div class="mb-4">
  <a href="/lessons" class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-white text-sm transition">← Back to lessons</a>
</div>

{% if lesson.level == 'junior' %}
  {% set level_class = 'text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-900/30 border-green-300 dark:border-green-700' %}
{% elif lesson.level == 'mid' %}
  {% set level_class = 'text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/30 border-yellow-300 dark:border-yellow-700' %}
{% else %}
  {% set level_class = 'text-red-700 dark:text-red-400 bg-red-50 dark:bg-red-900/30 border-red-300 dark:border-red-700' %}
{% endif %}

<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-6">

  <!-- Row 1: star + title + level badge -->
  <div class="flex flex-wrap items-center gap-3 mb-2">
    <form method="post" action="/lessons/{{ lesson.id }}/star">
      <input type="hidden" name="starred" value="{% if lesson.starred %}0{% else %}1{% endif %}" />
      <input type="hidden" name="next" value="/lessons/{{ lesson.id }}" />
      <button type="submit" title="{% if lesson.starred %}Unstar{% else %}Star{% endif %}"
              class="w-6 text-center text-xl leading-none transition {% if lesson.starred %}text-yellow-400 hover:text-yellow-300{% else %}text-gray-300 dark:text-gray-600 hover:text-yellow-400{% endif %}">
        {% if lesson.starred %}★{% else %}☆{% endif %}
      </button>
    </form>
    <h1 class="text-xl font-bold text-gray-900 dark:text-white flex-1 min-w-0">{{ lesson.title }}</h1>
    <a href="/lessons?level={{ lesson.level }}"
       class="text-xs font-semibold px-2 py-0.5 rounded-full border {{ level_class }} shrink-0 hover:ring-2 hover:ring-current hover:ring-offset-1 transition-shadow">{{ lesson.level }}</a>
  </div>

  <!-- Row 2: date + topic + tags + feedback result (all inline) -->
  <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-500 dark:text-gray-400 mb-5">
    <span class="relative group/date cursor-default">
      🗓 <span data-ts="{{ lesson.timestamp_iso }}">{{ lesson.timestamp_iso[:10] }}</span>
      <span class="absolute z-10 bottom-full left-0 mb-1 px-2 py-1 rounded bg-gray-800 dark:bg-gray-700
                   text-white text-xs whitespace-nowrap pointer-events-none
                   opacity-0 group-hover/date:opacity-100 transition-opacity duration-150">
        {{ lesson.timestamp_iso[:16].replace('T', ' ') }}
      </span>
    </span>
    <span>🏷 <span class="text-cyan-600 dark:text-cyan-400">{{ lesson.topic_id }}</span></span>
    {% for cat in lesson.categories %}
    <a href="/lessons?category={{ cat }}"
       class="inline-block bg-gray-100 dark:bg-gray-800 hover:bg-indigo-50 dark:hover:bg-indigo-900/50 text-gray-600 dark:text-gray-300 text-xs rounded px-2 py-0.5 transition border border-gray-200 dark:border-gray-700 hover:border-indigo-400 dark:hover:border-indigo-600">
      {{ cat }}
    </a>
    {% endfor %}
    {% if lesson.feedback %}
    {% if lesson.feedback == 'know' %}
    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-700">✓ I know this</span>
    {% else %}
    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-700">✗ I don't know this</span>
    {% endif %}
    <form method="post" action="/lessons/{{ lesson.id }}/feedback">
      <input type="hidden" name="feedback" value="clear" />
      <input type="hidden" name="next" value="/lessons/{{ lesson.id }}" />
      <button type="submit" class="text-xs text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 transition">Clear</button>
    </form>
    {% endif %}
  </div>

  <!-- TL;DR callout -->
  <div class="my-5 pl-4 border-l-4 border-indigo-400 dark:border-indigo-500 bg-indigo-50 dark:bg-indigo-950/40 rounded-r-lg py-3 pr-4">
    <p class="text-xs font-semibold uppercase tracking-wide text-indigo-500 dark:text-indigo-400 mb-1">TL;DR</p>
    <div id="summary-content" class="markdown-body text-sm text-indigo-900 dark:text-indigo-100"></div>
  </div>

  <!-- Lesson body (rendered as markdown) -->
  <div id="body-content" class="markdown-body"></div>

  <!-- Task context -->
  {% if lesson.task_context %}
  <div class="mt-6 pt-4 border-t border-gray-100 dark:border-gray-800 text-sm text-gray-500 dark:text-gray-400">
    <span class="text-gray-400 dark:text-gray-500">Context:</span> {{ lesson.task_context }}
  </div>
  {% endif %}

  <!-- Git / project metadata -->
  {% set has_meta = lesson.project or lesson.repository or lesson.branch or lesson.commit_hash or lesson.folder %}
  {% if has_meta %}

  {# Compute repo and commit URLs from platform key #}
  {% set _domains = {"github": "github.com", "gitlab": "gitlab.com", "bitbucket": "bitbucket.org"} %}
  {% set _is_local = (lesson.repository_platform == "local") %}
  {% if _is_local and lesson.repository %}
    {% set repo_url = "vscode://file/" ~ lesson.repository %}
  {% elif lesson.repository_platform in _domains and lesson.repository %}
    {% set repo_url = "https://" ~ _domains[lesson.repository_platform] ~ "/" ~ lesson.repository %}
  {% else %}
    {% set repo_url = None %}
  {% endif %}
  {% if repo_url and lesson.commit_hash and not _is_local %}
    {% if lesson.repository_platform == "gitlab" %}
      {% set commit_url = repo_url ~ "/-/commit/" ~ lesson.commit_hash %}
    {% elif lesson.repository_platform == "bitbucket" %}
      {% set commit_url = repo_url ~ "/commits/" ~ lesson.commit_hash %}
    {% else %}
      {% set commit_url = repo_url ~ "/commit/" ~ lesson.commit_hash %}
    {% endif %}
  {% else %}
    {% set commit_url = None %}
  {% endif %}

  <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
    <div class="flex flex-wrap gap-x-5 gap-y-1.5 text-xs text-gray-400 dark:text-gray-500 font-mono">

      {% if lesson.project %}
      <span>
        <span class="text-gray-400 dark:text-gray-600">project</span>
        {% if repo_url %}
        <a href="{{ repo_url }}" {% if not _is_local %}target="_blank" rel="noopener"{% endif %}
           class="text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition">{{ lesson.project }}</a>
        {% else %}
        <span class="text-gray-600 dark:text-gray-300">{{ lesson.project }}</span>
        {% endif %}
      </span>
      {% endif %}

      {% if lesson.repository %}
      <span class="inline-flex items-center gap-1">
        <span class="text-gray-400 dark:text-gray-600">repo</span>
        {% if lesson.repository_platform in ("github", "gitlab", "bitbucket") %}
        <img src="/static/vendor/icons/{{ lesson.repository_platform }}.svg"
             class="w-3 h-3 dark:invert opacity-60 shrink-0" alt="" />
        {% endif %}
        {% if repo_url %}
        <a href="{{ repo_url }}" {% if not _is_local %}target="_blank" rel="noopener"{% endif %}
           class="text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition">{{ lesson.repository }}</a>
        {% else %}
        <span class="text-gray-600 dark:text-gray-300">{{ lesson.repository }}</span>
        {% endif %}
      </span>
      {% endif %}

      {% if lesson.branch %}
      <span><span class="text-gray-400 dark:text-gray-600">branch</span> <span class="text-indigo-600 dark:text-indigo-400">{{ lesson.branch }}</span></span>
      {% endif %}

      {% if lesson.commit_hash %}
      <span>
        <span class="text-gray-400 dark:text-gray-600">commit</span>
        {% if commit_url %}
        <a href="{{ commit_url }}" target="_blank" rel="noopener"
           class="text-cyan-600 dark:text-cyan-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition">{{ lesson.commit_hash[:7] }}</a>
        {% else %}
        <span class="text-cyan-600 dark:text-cyan-400">{{ lesson.commit_hash[:7] }}</span>
        {% endif %}
      </span>
      {% endif %}

      {% if lesson.folder %}
      <span class="inline-flex items-center gap-1">
        <span class="text-gray-400 dark:text-gray-600">folder</span>
        <a href="vscode://file/{{ lesson.folder }}"
           class="inline-flex items-center gap-1 text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition">
          <img src="/static/vendor/icons/vscode.svg" class="w-3.5 h-3.5 shrink-0" alt="" />
          {{ lesson.folder }}
        </a>
      </span>
      {% endif %}

    </div>
  </div>
  {% endif %}

  <!-- Feedback buttons at the bottom (only when no feedback given yet) -->
  {% if not lesson.feedback %}
  <div class="mt-6 pt-4 border-t border-gray-100 dark:border-gray-800 flex flex-wrap gap-2">
    <form method="post" action="/lessons/{{ lesson.id }}/feedback">
      <input type="hidden" name="feedback" value="know" />
      <input type="hidden" name="next" value="/lessons/{{ lesson.id }}" />
      <button type="submit"
              class="px-3 py-1 rounded text-sm font-medium transition bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-700 dark:hover:text-white">
        ✓ I know this
      </button>
    </form>
    <form method="post" action="/lessons/{{ lesson.id }}/feedback">
      <input type="hidden" name="feedback" value="dont_know" />
      <input type="hidden" name="next" value="/lessons/{{ lesson.id }}" />
      <button type="submit"
              class="px-3 py-1 rounded text-sm font-medium transition bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-red-100 dark:hover:bg-red-900 hover:text-red-700 dark:hover:text-white">
        ✗ I don't know this
      </button>
    </form>
  </div>
  {% endif %}

  <!-- Footer -->
  <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800 text-xs text-gray-300 dark:text-gray-600">
    ID: {{ lesson.id }}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/vendor/highlight.min.js"></script>
<script src="/static/vendor/marked.min.js"></script>
<script src="/static/relative-time.js"></script>
<script>
  // Set correct hljs theme immediately (base.html updateHljsTheme targets #hljs-theme)
  updateHljsTheme();

  marked.setOptions({
    highlight: function(code, lang) {
      const language = lang && hljs.getLanguage(lang) ? lang : 'plaintext';
      return hljs.highlight(code, { language }).value;
    },
    breaks: true,
    gfm: true,
  });

  document.getElementById('summary-content').innerHTML = marked.parse({{ lesson.summary | tojson }});
  document.getElementById('body-content').innerHTML = marked.parse({{ lesson.body | tojson }});
</script>
{% endblock %}