{% extends 'base.html' %}
{% load fmt %}

{% block title %}Ask Mkulima Outgrower{% endblock %}

{% block content %}
<div class="wrap" style="padding-top:28px">
  <div class="ask-layout">
    <aside>
      <div class="card" style="padding:16px">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
          <h3 style="margin:0;font-size:.95rem">Your questions</h3>
          {% if chats %}<a class="btn btn-ghost btn-sm" href="{% url 'ask' %}">New</a>{% endif %}
        </div>
        <div class="chat-list">
          {% for c in chats %}
            <a href="{% url 'ask_chat' c.id %}" class="{% if chat and chat.id == c.id %}active{% endif %}">
              <span class="ct">{{ c.title }}</span>
              <form method="post" action="{% url 'delete_chat' c.id %}" style="margin:0">
                {% csrf_token %}<button class="x" type="submit" title="Delete">&times;</button>
              </form>
            </a>
          {% empty %}
            <p class="muted small" style="padding:8px 10px;margin:0">No questions yet. Ask one to start a thread.</p>
          {% endfor %}
        </div>
      </div>

      <div class="card" style="margin-top:16px;padding:16px">
        <h3 style="font-size:.95rem">Try asking</h3>
        <div class="chips" style="justify-content:flex-start">
          {% for s in suggestions|slice:":6" %}
            <button class="chip" data-q="{{ s }}">{{ s }}</button>
          {% endfor %}
        </div>
      </div>
    </aside>

    <section>
      {% if chat %}
        <div class="crumbs"><a href="{% url 'ask' %}">Ask</a> / {{ chat.title|truncatechars:60 }}</div>
        <div class="thread">
          {% for m in chat.messages.all %}
            {% if m.role == 'user' %}
              <div class="msg-user">{{ m.text }}</div>
            {% else %}
              <div class="msg-ai">
                <div class="avatar">AC</div>
                <div class="msg-body">
                  {% if m.payload.headline %}<div class="ans-head">{{ m.payload.headline }}{% if m.payload.ai %} <span class="ai-badge" title="Rewritten by AI">AI</span>{% endif %}</div>{% endif %}
                  <div class="ans-text">{{ m.text }}</div>

                  {% if m.payload.chart %}
                    <div class="evidence">
                      <div class="evidence-head">Chart</div>
                      <div class="card" style="padding:14px">
                        <div class="chart-box mid"><canvas id="chart-{{ m.id }}" data-spec="{% spec_json m.payload.chart %}"></canvas></div>
                      </div>
                    </div>
                  {% endif %}

                  {% if m.payload.table %}
                    <div class="evidence">
                      <div class="evidence-head">Table{% if m.payload.table.rows|length %} &middot; {{ m.payload.table.rows|length }} rows{% endif %}</div>
                      <div class="table-wrap table-scroll">
                        <table class="data">
                          <thead><tr>{% for c in m.payload.table.columns %}<th>{{ c.label }}</th>{% endfor %}</tr></thead>
                          <tbody>
                            {% for row in m.payload.table.rows %}
                              <tr>
                                {% for cell in row %}
                                  <td>{% table_cell cell m.payload.table.columns forloop.counter0 %}</td>
                                {% endfor %}
                              </tr>
                            {% endfor %}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  {% endif %}

                  {% if m.payload.sources %}
                    <div class="evidence">
                      <div class="evidence-head">Sources</div>
                      <div class="sources">
                        {% for s in m.payload.sources %}
                          <div class="source">
                            <span class="badge {{ s.kind }}">{{ s.kind }}</span>
                            <span><span class="s-title">{{ s.title }}</span>
                              <span class="s-detail">{{ s.detail }}</span></span>
                          </div>
                        {% endfor %}
                      </div>
                    </div>
                  {% endif %}

                  {% if m.payload.table %}
                    <div class="export-row">
                      <span class="lbl">Export this answer:</span>
                      <a class="btn btn-ghost btn-sm" href="{% url 'answer_export' chat.id m.id 'xlsx' %}">Excel</a>
                      <a class="btn btn-ghost btn-sm" href="{% url 'answer_export' chat.id m.id 'pdf' %}">PDF</a>
                      <a class="btn btn-ghost btn-sm" href="{% url 'answer_export' chat.id m.id 'csv' %}">CSV</a>
                    </div>
                  {% endif %}

                  <p class="muted small" style="margin-top:12px">Demo dataset &middot; verify key figures against the cited sources.</p>
                </div>
              </div>
            {% endif %}
          {% endfor %}
        </div>

        <div class="sticky-ask">
          <form method="post" action="{% url 'ask_submit' %}">
            {% csrf_token %}
            <input type="hidden" name="chat_id" value="{{ chat.id }}">
            <input name="q" placeholder="Ask a follow-up question..." autocomplete="off" aria-label="Follow-up question">
            <button class="btn btn-solid" type="submit">Ask</button>
          </form>
        </div>

      {% else %}
        <div class="card empty-state">
          <h2>Ask about Kenya's farm economy and credit book</h2>
          <p class="muted">Plain-word questions about acreage, yields, profits, prices, growers and the input-credit portfolio.
            Answers arrive with tables, charts and their sources.</p>
          <form method="post" action="{% url 'ask_submit' %}" class="askbar" style="margin-top:20px">
            {% csrf_token %}
            <input name="q" placeholder="e.g. What is maize yield by county in Kenya?" autocomplete="off" aria-label="Ask a question">
            <button class="btn btn-solid" type="submit">Ask Mkulima</button>
          </form>
          <div class="chips" style="margin-top:18px">
            {% for s in suggestions %}<button class="chip" data-q="{{ s }}">{{ s }}</button>{% endfor %}
          </div>
        </div>
      {% endif %}
    </section>
  </div>
</div>
{% endblock %}