{% extends "base.html" %}
{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="card shadow border-0">
      <div class="card-header bg-primary text-white">
        <h4 class="mb-0"><i class="bi bi-question-circle"></i> Question Detail</h4>
      </div>
      <div class="card-body">
        <!-- Institution and Level -->
        <div class="text-center mb-3">
          <h2 class="display-6">{{ question.institution }}</h2>
          <h5 class="text-muted">{{ question.level }}</h5>
          <p class="lead">{{ question.question_date }}</p>
        </div>

        <!-- Metadata -->
        <dl class="row">
          <dt class="col-sm-4">Subject</dt>
          <dd class="col-sm-8">{{ question.subject }}</dd>

          {% if question.paper %}
          <dt class="col-sm-4">Paper</dt>
          <dd class="col-sm-8">{{ question.paper }}</dd>
          {% endif %}

          {% if question.group %}
          <dt class="col-sm-4">Group</dt>
          <dd class="col-sm-8">{{ question.group }}</dd>
          {% endif %}

          {% if question.chapter %}
          <dt class="col-sm-4">Chapter</dt>
          <dd class="col-sm-8">{{ question.chapter }}</dd>
          {% endif %}

          {% if question.syllabus_code %}
          <dt class="col-sm-4">Syllabus Code</dt>
          <dd class="col-sm-8">{{ question.syllabus_code }}</dd>
          {% endif %}

          {% if question.marks %}
          <dt class="col-sm-4">Marks</dt>
          <dd class="col-sm-8"><span class="badge bg-warning text-dark">{{ question.marks }}</span></dd>
          {% endif %}

          <dt class="col-sm-4">Question No.</dt>
          <dd class="col-sm-8">{{ question.question_number }}</dd>

          <dt class="col-sm-4">Type</dt>
          <dd class="col-sm-8"><span class="badge bg-info">{{ question.type or 'essay' }}</span></dd>
        </dl>

        <!-- Question text combined -->
        <div class="border-top pt-3 mt-3">
          <h5><i class="bi bi-translate"></i> Question</h5>
          <div class="p-3 bg-light rounded">
            {% if question.nepali_transcription and question.english_transcription %}
              <p class="mb-1">{{ question.nepali_transcription|safe }}</p>
              <p class="text-muted mb-0">({{ question.english_transcription|safe }})</p>
            {% elif question.nepali_transcription %}
              <p class="mb-0">{{ question.nepali_transcription|safe }}</p>
            {% elif question.english_transcription %}
              <p class="mb-0">{{ question.english_transcription|safe }}</p>
            {% endif %}
            {% if question.notes %}
              <div class="mt-2 text-warning">
                <i class="bi bi-pencil"></i> <strong>Note:</strong> {{ question.notes }}
              </div>
            {% endif %}
          </div>
        </div>

        <!-- ===== ANSWER & EXPLANATION ===== -->
        {% set has_answer = question.general_feedback
                            or question.grader_info
                            or (question.type == 'multichoice' and question.options|selectattr('correct')|list|length > 0)
                            or (question.type == 'truefalse' and question.options|selectattr('correct')|list|length > 0)
                            or question.correct_feedback
                            or question.partially_correct_feedback
                            or question.incorrect_feedback
                            or question.feedback_true
                            or question.feedback_false %}
        {% if has_answer %}
        <div class="border-top pt-3 mt-3">
          <h5 class="text-success">
            <i class="bi bi-check-circle-fill"></i> Answer &amp; Explanation
          </h5>

          {# ---- Explicit correct answer ---- #}
          {% if question.type == 'multichoice' %}
            {% for opt in question.options %}{% if opt.correct %}
              <div class="alert alert-success py-2 mb-2">
                <strong>✅ Correct option:</strong> {{ opt.text|safe }}
              </div>
            {% endif %}{% endfor %}

          {% elif question.type == 'truefalse' %}
            {% for opt in question.options %}{% if opt.correct %}
              <div class="alert alert-success py-2 mb-2">
                <strong>✅ Correct answer:</strong> {{ opt.text }}
              </div>
            {% endif %}{% endfor %}
            {% if question.feedback_true %}
              <div class="alert alert-light border py-2 mb-1 small">
                <strong>If answered True:</strong> {{ question.feedback_true|safe }}
              </div>
            {% endif %}
            {% if question.feedback_false %}
              <div class="alert alert-light border py-2 mb-1 small">
                <strong>If answered False:</strong> {{ question.feedback_false|safe }}
              </div>
            {% endif %}

          {% elif question.type == 'matching' %}
            {% if question.correct_feedback %}
              <div class="alert alert-success py-2 mb-1 small">
                <strong>Correct:</strong> {{ question.correct_feedback|safe }}
              </div>
            {% endif %}
            {% if question.partially_correct_feedback %}
              <div class="alert alert-warning py-2 mb-1 small">
                <strong>Partially correct:</strong> {{ question.partially_correct_feedback|safe }}
              </div>
            {% endif %}
            {% if question.incorrect_feedback %}
              <div class="alert alert-danger py-2 mb-1 small">
                <strong>Incorrect:</strong> {{ question.incorrect_feedback|safe }}
              </div>
            {% endif %}
          {% endif %}

          {# ---- General feedback as explanation / model answer ---- #}
          {% if question.general_feedback %}
            <div class="alert alert-info">
              <strong>💡 Explanation:</strong><br>
              {{ question.general_feedback|safe }}
            </div>
          {% endif %}

          {# ---- Essay grader notes ---- #}
          {% if question.type == 'essay' and question.grader_info %}
            <div class="alert alert-secondary">
              <strong>📝 Grader notes:</strong><br>
              {{ question.grader_info|safe }}
            </div>
          {% endif %}
        </div>
        {% endif %}

        <!-- ===== TYPE-SPECIFIC RICH CONTENT ===== -->
        <div class="border-top pt-3 mt-3">
          <h5><i class="bi bi-tag"></i> Type: {{ question.type or 'essay' }}</h5>

          {% if question.type == 'multichoice' %}
            <h6>Options</h6>
            <ul class="list-group">
              {% for opt in question.options %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                  {{ opt.text|safe }}
                  {% if opt.correct %}
                    <span class="badge bg-success">✓ Correct</span>
                  {% endif %}
                </li>
              {% endfor %}
            </ul>
            {% if question.fraction_correct or question.fraction_wrong %}
              <div class="mt-2 small text-muted">
                Correct fraction: {{ question.fraction_correct or 100 }}% |
                Wrong fraction: {{ question.fraction_wrong or -20 }}%
              </div>
            {% endif %}

          {% elif question.type == 'truefalse' %}
            <h6>Correct answer</h6>
            <p>
              {% for opt in question.options %}
                {% if opt.correct %}
                  <span class="badge bg-success">{{ opt.text }}</span>
                {% endif %}
              {% endfor %}
            </p>
            {% if question.feedback_true %}
              <div class="alert alert-info">Feedback if True: {{ question.feedback_true }}</div>
            {% endif %}
            {% if question.feedback_false %}
              <div class="alert alert-info">Feedback if False: {{ question.feedback_false }}</div>
            {% endif %}
            {% if question.fraction_correct or question.fraction_wrong %}
              <div class="mt-2 small text-muted">
                Correct fraction: {{ question.fraction_correct or 100 }}% |
                Wrong fraction: {{ question.fraction_wrong or -20 }}%
              </div>
            {% endif %}

          {% elif question.type == 'matching' %}
            <h6>Matching Pairs</h6>
            <table class="table table-bordered">
              <thead><tr><th>Subquestion</th><th>Answer</th></tr></thead>
              <tbody>
                {% for pair in question.pairs %}
                  <tr><td>{{ pair.subquestion }}</td><td>{{ pair.answer }}</td></tr>
                {% endfor %}
              </tbody>
            </table>
            {% if question.shuffle_answers is not none %}
              <div class="small text-muted">Shuffle answers: {{ 'Yes' if question.shuffle_answers else 'No' }}</div>
            {% endif %}
            {% if question.show_num_correct %}
              <div class="small text-muted">Show number correct: Yes</div>
            {% endif %}
            {% if question.correct_feedback %}
              <div class="alert alert-success">Correct feedback: {{ question.correct_feedback }}</div>
            {% endif %}
            {% if question.partially_correct_feedback %}
              <div class="alert alert-warning">Partially correct feedback: {{ question.partially_correct_feedback }}</div>
            {% endif %}
            {% if question.incorrect_feedback %}
              <div class="alert alert-danger">Incorrect feedback: {{ question.incorrect_feedback }}</div>
            {% endif %}
            {% if question.hints %}
              <h6>Hints</h6>
              <ul>
                {% for hint in question.hints %}
                  <li>
                    {{ hint.text }}
                    {% if hint.clear_incorrect %}<span class="badge bg-secondary">Clears incorrect</span>{% endif %}
                    {% if hint.show_num_correct %}<span class="badge bg-secondary">Shows number correct</span>{% endif %}
                  </li>
                {% endfor %}
              </ul>
            {% endif %}

          {% else %}
            {# Essay #}
            <h6>Essay settings</h6>
            <ul>
              <li>Lines: {{ question.response_lines or 15 }}</li>
              <li>Attachments: {{ question.attachments or 0 }}</li>
              <li>File types: {{ question.filetypes or '.doc,.docx,.pdf,.png,.jpg,.jpeg' }}</li>
              <li>Max bytes: {{ question.maxbytes or 2097152 }}</li>
              {% if question.grader_info %}<li>Grader info: {{ question.grader_info }}</li>{% endif %}
            </ul>
          {% endif %}

          {% if question.source %}
            <div class="small text-muted">Source: {{ question.source }}</div>
          {% endif %}
        </div>

      </div>
      <div class="card-footer text-end">
        {% if back_url %}
          <a href="{{ back_url }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back</a>
        {% else %}
          <a href="{{ url_for('question_list') }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back to list</a>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}