#set($reviewable = ($canadmin || $caninstruct))
#set($testtype = $test.getTestPlan().get("testmode"))

#set($totalquestions = 0)
#foreach($node in $test.getNodes())
  #set($question = $node.getQuestion())
  #if($question.questiontype != "info")
    #set($totalquestions = $totalquestions + 1)
  #end
#end

<div class="container my-4 d-print-none">
  <div class="text-end mb-3">

<button class="btn btn-outline-secondary btn-sm" onclick="openPrintWindow()">
  <i class="bi bi-printer me-1"></i> Print Results
</button>
</div></div>

<script>
function openPrintWindow() {
  const url = "$home$apphome/test/results/print.html?testid=$test.getId()";
  const printWin = window.open(url, "_blank");
  window.printWindowRef = printWin; // store reference for later if needed
}
</script>
<div class="container my-4">

<!-- NCFAS-G+R Summary Visualization -->
<div class="container my-5 d-print-none">

  <div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
      <div>
        <h5 class="mb-0">Family Functioning Summary</h5>
        <small class="text-muted">
          Visual overview of strengths and challenges based on your selected ratings.
        </small>
      </div>
    </div>

    <div class="card-body">

      <!-- Quick numeric overview -->
      <div class="row text-center mb-4">
        <div class="col-md-3">
          <div class="p-3 bg-light rounded shadow-sm">
            <div class="fw-bold fs-4 text-success">3</div>
            <div class="small text-muted">Clear Strengths (+2)</div>
          </div>
        </div>

        <div class="col-md-3">
          <div class="p-3 bg-light rounded shadow-sm">
            <div class="fw-bold fs-4 text-primary">5</div>
            <div class="small text-muted">Mild Strengths (+1)</div>
          </div>
        </div>

        <div class="col-md-3">
          <div class="p-3 bg-light rounded shadow-sm">
            <div class="fw-bold fs-4 text-warning">4</div>
            <div class="small text-muted">Baseline / Adequate (0)</div>
          </div>
        </div>

        <div class="col-md-3">
          <div class="p-3 bg-light rounded shadow-sm">
            <div class="fw-bold fs-4 text-danger">3</div>
            <div class="small text-muted">Challenges (–1 to –3)</div>
          </div>
        </div>
      </div>

      <div class="row">

        <!-- Distribution Bar Chart -->
        <div class="col-md-6 mb-4">
          <h6 class="fw-bold">Distribution of Ratings</h6>
          <div id="echart-rating-distribution"
               data-echart
               data-echart-options='{
                 "tooltip": { "trigger": "axis" },
                 "xAxis": { "type": "category", "data": ["+2", "+1", "0", "-1", "-2", "-3"] },
                 "yAxis": { "type": "value", "name": "Count" },
                 "series": [{
                   "type": "bar",
                   "data": [3, 5, 4, 2, 1, 0],
                   "itemStyle": { "borderRadius": [6,6,0,0] }
                 }]
               }'
               style="width: 100%; height: 100%; min-height: 260px;"></div>
        </div>

        <!-- Radar Chart: Functional Profile -->
        <div class="col-md-6 mb-4">
          <h6 class="fw-bold">Functional Profile Across Domains</h6>

          <p class="small text-muted mb-2">
            Shows how the family’s functioning varies across domains such as Safety, Environment,
            Parental Capabilities, Community Life, and Child Well-Being.
          </p>

          <div id="echart-functional-profile"
               data-echart
               data-echart-options='{
                 "tooltip": {},
                 "radar": {
                   "indicator": [
                     { "name": "Safety", "max": 2, "min": -3 },
                     { "name": "Environment", "max": 2, "min": -3 },
                     { "name": "Parental Capabilities", "max": 2, "min": -3 },
                     { "name": "Family Interactions", "max": 2, "min": -3 },
                     { "name": "Child Well-Being", "max": 2, "min": -3 }
                   ]
                 },
                 "series": [{
                   "type": "radar",
                   "data": [{
                     "value": [1, 0, -1, 2, 0],
                     "name": "Ratings"
                   }]
                 }]
               }'
               style="width: 100%; height: 100%; min-height: 260px;"></div>

        </div>
      </div>

    </div>
  </div>
</div>


  <!-- Quick survey summary table -->
  <div class="card shadow-sm border-0">
    <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
      <div>
        <h5 class="mb-0">Your responses</h5>
        <small class="text-muted">
          A quick summary of each question and how you answered.
        </small>
      </div>
      <span class="badge bg-secondary-subtle text-secondary">
        <i class="bi bi-list-check me-1"></i>
        $totalquestions question#if($totalquestions != 1)s#end
      </span>
    </div>

    <div class="table-responsive">
      <table class="table table-striped table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th style="width: 60px;">#</th>
            <th>Question</th>
            <th>Your Answer</th>
            <th style="width: 110px;">Details</th>
          </tr>
        </thead>
        <tbody>
          #set($numb = 0)
          #foreach($node in $test.getNodes())
            #set($question = $node.getQuestion())
            $context.putPageValue("node", $node)

            #if($question.questiontype != "info")
              #set($counter = $numb + 1)
              <tr>
                <!-- Question number / dialog link -->
                <td>
                  <a class="ajaxDialog text-decoration-none"
                     data-title="Survey Response"
                     data-target="$home$apphome/test/results/questionview.html?question=$numb&oemaxlevel=1"
                     href="#">
                    $counter
                  </a>
                </td>
                #set($numb = $numb + 1)

                <!-- Question text -->
                <td>
                  $question.getText()
                </td>

                <!-- User answer using type-specific renderer -->
                <td>
                  #if($pages.doesExist("$apphome/test/questiontypes/results/${question.questiontype}.html"))
                    $pages.include("$apphome/test/questiontypes/results/${question.questiontype}.html", $context)
                  #else
                    $pages.include("$apphome/test/questiontypes/results/default.html", $context)
                  #end
                </td>

                <!-- Details link -->
                <td>
                ##	<property name="framepath">Application/${userid}/${testplan}/${questionid}</property>
                	#set($framepath = "Application/${user.id}//${question.id}")
    #set($thoughts = $testbench.query("thought").exact("framepath", $framepath).sort("dateDown").search())
    #if($thoughts.size() > 0)
                  <button class="btn btn-sm btn-outline-secondary"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#conv-$counter"
          aria-expanded="false">
    <i class="bi bi-chat-dots me-1"></i> Review AI discussion
  </button>
  #end
                </td>
              </tr>
              <tr class="collapse bg-light" id="conv-$counter">
  <td colspan="4" class="p-3">
    <div class="mb-2 fw-bold">AI Conversation for This Question</div>


    #if($thoughts.isEmpty())
      <div class="alert alert-secondary py-2 mb-0">
        No AI interactions recorded for this question.
      </div>
    #else

      <div class="list-group">

        #foreach($t in $thoughts)
          #set($role = $t.role)
          #set($msg  = $t.message)
          #set($ts   = $t.date)

          <div class="list-group-item">

            <div class="small text-muted mb-1">
              $ts —
              <strong>
                #if($role == "assistant")
                  Hope Strategic Assistant
                #elseif($role == "user")
                  Caseworker
                #else
                  Hope Strategic Assistant                 
                #end
              </strong>
            </div>

            <div class="p-2 rounded
                        #if($role == 'assistant')
                           bg-white border
                        #elseif($role == 'user')
                           bg-body-tertiary
                        #else
                           bg-light
                        #end">
              $!msg
            </div>

          </div>
        #end

      </div>

    #end
  </td>
</tr>
            #end
          #end
        </tbody>
      </table>
    </div>
  </div>

  <!-- Optional overall instructor feedback (if previously recorded and not in review mode) -->
  #if(!$content.isPropertyTrue("reviewmode") && $test.testfeedback)
    <div class="mt-4">
      <h5>Instructor comments on this survey:</h5>
      <div class="alert alert-info mb-0">
        $!test.testfeedback
      </div>
    </div>
  #end

  

</div>