{% extends "base.html" %}

{% block content %}
{# Inline task data to avoid a runtime fetch #}
{% set tasks_data = load_data(path="static/data/tasks.json", format="json") %}

<script>
  window.TASKS_DATA = {{ tasks_data | json_encode | safe }};
</script>

<div class="tracker-layout">
  <!-- Sidebar filters -->
  <aside class="sidebar" id="sidebar">
    <button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle filters">☰ Filters</button>

    <div class="sidebar-content" id="sidebar-content">
      <div class="filter-group">
        <label for="search-input">Search</label>
        <input type="search" id="search-input" placeholder="Task name…" autocomplete="off">
      </div>

      <div class="filter-group">
        <label>Status</label>
        <div class="chip-group" id="filter-status">
          <button class="chip active" data-value="all">All</button>
          <button class="chip" data-value="todo">To Do</button>
          <button class="chip" data-value="done">Done</button>
        </div>
      </div>

      <div class="filter-group">
        <label for="filter-difficulty">Difficulty</label>
        <select id="filter-difficulty">
          <option value="">All</option>
          <option value="Easy">Easy</option>
          <option value="Medium">Medium</option>
          <option value="Hard">Hard</option>
          <option value="Elite">Elite</option>
          <option value="Master">Master</option>
        </select>
      </div>

      <div class="filter-group">
        <label for="filter-area">Area</label>
        <select id="filter-area">
          <option value="">All</option>
        </select>
      </div>

      <div class="filter-group" id="unlocked-filter-group">
        <label>Unlocked</label>
        <div class="chip-group" style="margin-bottom:0.6rem">
          <button class="chip" id="filter-unlocked-only" data-active="false">Unlocked Only</button>
        </div>
        <div id="area-unlock-list" class="area-unlock-list"></div>
      </div>

      <button class="btn btn-secondary btn-block" id="clear-filters-btn">Clear Filters</button>
    </div>
  </aside>

  <!-- Main content -->
  <div class="main-content">
    <!-- Progress summary -->
    <section class="progress-section" id="progress-section">
      <div class="progress-overall">
        <span id="progress-text">Loading…</span>
        <div class="progress-bar-wrap">
          <div class="progress-bar-fill" id="progress-bar" style="width:0%"></div>
        </div>
      </div>
      <div class="progress-by-diff" id="progress-by-diff"></div>
    </section>

    <!-- Task list -->
    <section class="task-section">
      <div class="task-list-header">
        <span id="task-count-label">Loading tasks…</span>
        <div class="sort-controls">
          <label for="sort-select">Sort by</label>
          <select id="sort-select">
            <option value="difficulty">Difficulty</option>
            <option value="name">Name</option>
            <option value="points">Points</option>
            <option value="area">Area</option>
          </select>
        </div>
      </div>
      <div id="task-list" role="list" aria-label="Task list"></div>
    </section>
  </div>
</div>

<!-- Import result toast -->
<div class="toast" id="toast" aria-live="polite"></div>

<!-- LLM provider / download modal -->
<div class="llm-modal" id="llm-modal" hidden aria-modal="true" role="dialog" aria-labelledby="llm-modal-title">
  <div class="llm-modal-box">
    <h2 id="llm-modal-title">💡 AI How-To Guide</h2>
    <p>Choose how to generate step-by-step guides for tasks.</p>

    <div class="llm-provider-options">
      <label class="llm-provider-card">
        <input type="radio" name="llm-provider" value="small" checked>
        <div class="llm-provider-info">
          <strong>Small Model</strong>
          <span class="llm-model-meta">Llama 3.2 1B &mdash; ~900 MB</span>
          <p>Runs entirely in your browser via WebGPU. Downloaded once, then cached locally.</p>
        </div>
      </label>

      <label class="llm-provider-card">
        <input type="radio" name="llm-provider" value="large">
        <div class="llm-provider-info">
          <strong>Large Model</strong>
          <span class="llm-model-meta">Llama 3.2 3B &mdash; ~1.8 GB</span>
          <p>Better guide quality. Same in-browser WebGPU approach, larger one-time download.</p>
        </div>
      </label>

      <label class="llm-provider-card">
        <input type="radio" name="llm-provider" value="cpu">
        <div class="llm-provider-info">
          <strong>CPU Model</strong>
          <span class="llm-model-meta">SmolLM2 360M &mdash; ~200 MB</span>
          <p>Runs in your browser via WebAssembly. No GPU required. Slower than GPU models.</p>
        </div>
      </label>

      <label class="llm-provider-card">
        <input type="radio" name="llm-provider" value="ollama">
        <div class="llm-provider-info">
          <strong>Ollama (Local)</strong>
          <span class="llm-model-meta">No browser download required</span>
          <p>Uses your own Ollama instance. No data leaves your machine.</p>
          <div class="llm-ollama-config" id="llm-ollama-config" hidden>
            <label class="ollama-field">
              URL
              <input type="url" id="ollama-url" value="http://localhost:11434" placeholder="http://localhost:11434">
            </label>
            <label class="ollama-field">
              Model
              <input type="text" id="ollama-model" value="llama3.2" placeholder="llama3.2">
            </label>
            <p class="ollama-cors-note">
              Set <code>OLLAMA_ORIGINS=*</code> (or your site&rsquo;s domain) to allow browser access.
            </p>
          </div>
        </div>
      </label>
    </div>

    <div class="llm-progress-wrap" id="llm-progress-wrap" hidden>
      <span id="llm-progress-label">Preparing…</span>
      <progress id="llm-progress" max="100" value="0"></progress>
    </div>
    <div class="llm-modal-actions">
      <button id="llm-confirm-btn" class="btn btn-secondary">Download &amp; Generate</button>
      <button id="llm-cancel-btn" class="btn btn-danger">Cancel</button>
    </div>
  </div>
</div>
{% endblock content %}