{% extends "base.html" %}
{% block title %}{{ task.name }}{% endblock %}

{% block head %}
<style>
  body { overflow: hidden; }
  .main-content { padding: 0; height: calc(100vh - 52px); }
</style>
{% endblock %}

{% block content %}
<div class="task-layout">

  <!-- ── Left panel: task spec + code editor ── -->
  <div class="task-left" id="taskLeft">
    <div class="panel-header">
      <span class="badge">{{ task.badge }}</span>
      <h2 class="task-title">{{ task.name }}</h2>
    </div>

    <div class="panel-body">
      <h3 class="section-label">Function specification</h3>
      <pre class="code-block">{{ task.spec }}</pre>

      <h3 class="section-label">Examples</h3>
      <pre class="code-block">{% for ex in task.examples %}{{ ex }}
{% endfor %}</pre>

      <h3 class="section-label">Your solution</h3>
      <p class="hint-text">Write or paste your final solution here, then click <strong>Submit</strong>.</p>

      <form id="submitForm" method="POST" action="/study/{{ task.id }}/submit">
        <textarea
          id="codeEditor"
          name="code"
          class="code-editor"
          spellcheck="false"
          placeholder="# Write your Python solution here…"
        ></textarea>
        <button id="submitBtn" type="submit" class="btn btn-primary btn-submit">Submit Solution</button>
      </form>
      <div id="submissionFeedback" style="margin-top: .75rem;">
        {% if submission_feedback %}
        <p class="hint-text" style="margin-bottom: .4rem;">
          {% if submission_feedback.passed_all %}
          ✅ All example checks passed.
          {% else %}
          ❌ Some checks failed. You can edit and resubmit.
          {% endif %}
        </p>
        <pre class="code-block">{{ submission_feedback.report }}</pre>
        {% if submission_feedback.passed_all and submission_feedback.continue_url %}
        <a href="{{ submission_feedback.continue_url }}" class="btn btn-primary" style="margin-top: .35rem;">Continue →</a>
        {% endif %}
        {% endif %}
      </div>
    </div>
  </div>

  <!-- ── Right panel: chat ── -->
  <div class="task-right" id="taskRight">
    <div class="panel-header">
      <span class="panel-header-title">AI Assistant</span>
      <span class="group-badge group-{{ group }}">Group {{ group }}</span>
    </div>

    <div class="chat-messages" id="chatMessages">
      {% if not history %}
      <div class="chat-welcome">
        <p>Ask the assistant for help with the task.<br/>
        You may ask for code, hints, explanations, or debugging help.</p>
      </div>
      {% endif %}
      {% for msg in history %}
      <div class="chat-msg chat-msg--{{ msg.role }}">
        <div class="chat-bubble">
          <pre class="msg-content">{{ msg.content }}</pre>
        </div>
      </div>
      {% endfor %}
    </div>

    <div class="chat-input-area">
      <textarea
        id="chatInput"
        class="chat-input"
        rows="3"
        placeholder="Ask the assistant… (Enter to send, Shift+Enter for newline)"
      ></textarea>
      <button id="sendBtn" class="btn btn-send" onclick="sendMessage()">Send</button>
    </div>
  </div>

</div>

<script>
const TASK_ID = "{{ task.id }}";
const submitForm = document.getElementById("submitForm");
const submitBtn = document.getElementById("submitBtn");
const codeEditor = document.getElementById("codeEditor");
const feedbackEl = document.getElementById("submissionFeedback");

// ── Scroll chat to bottom ──
function scrollChat() {
  const el = document.getElementById("chatMessages");
  el.scrollTop = el.scrollHeight;
}
scrollChat();

function renderSubmissionFeedback(data) {
  const status = document.createElement("p");
  status.className = "hint-text";
  status.style.marginBottom = ".4rem";
  status.textContent = data.passed_all
    ? "✅ All example checks passed."
    : "❌ Some checks failed. You can edit and resubmit.";

  const report = document.createElement("pre");
  report.className = "code-block";
  report.textContent = data.report || "";

  feedbackEl.innerHTML = "";
  feedbackEl.appendChild(status);
  feedbackEl.appendChild(report);

  if (data.passed_all && data.continue_url) {
    const continueLink = document.createElement("a");
    continueLink.className = "btn btn-primary";
    continueLink.style.marginTop = ".35rem";
    continueLink.href = data.continue_url;
    continueLink.textContent = "Continue →";
    feedbackEl.appendChild(continueLink);
  }
}

submitForm.addEventListener("submit", async (e) => {
  e.preventDefault();
  const code = codeEditor.value;

  submitBtn.disabled = true;
  submitBtn.textContent = "Testing...";
  try {
    const res = await fetch(`/study/${TASK_ID}/submit`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ code }),
    });
    const data = await res.json();
    if (res.ok && data.report) {
      renderSubmissionFeedback(data);
    } else {
      renderSubmissionFeedback({
        passed_all: false,
        report: data.error || "Submission failed. Please try again.",
      });
    }
  } catch (_) {
    renderSubmissionFeedback({
      passed_all: false,
      report: "Network error while submitting. Please try again.",
    });
  } finally {
    submitBtn.disabled = false;
    submitBtn.textContent = "Submit Solution";
  }
});

// ── Send message ──
async function sendMessage() {
  const input = document.getElementById("chatInput");
  const msg = input.value.trim();
  if (!msg) return;

  input.value = "";
  appendMessage("user", msg);

  const sendBtn = document.getElementById("sendBtn");
  sendBtn.disabled = true;
  sendBtn.textContent = "…";

  try {
    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ task_id: TASK_ID, message: msg }),
    });
    const data = await res.json();
    if (data.reply) {
      appendMessage("assistant", data.reply);
    } else if (data.error) {
      appendMessage("assistant", "[Error: " + data.error + "]");
    }
  } catch (e) {
    appendMessage("assistant", "[Network error — please try again]");
  } finally {
    sendBtn.disabled = false;
    sendBtn.textContent = "Send";
  }
}

function appendMessage(role, content) {
  const container = document.getElementById("chatMessages");
  // Remove welcome message if present
  const welcome = container.querySelector(".chat-welcome");
  if (welcome) welcome.remove();

  const wrapper = document.createElement("div");
  wrapper.className = `chat-msg chat-msg--${role}`;
  const bubble = document.createElement("div");
  bubble.className = "chat-bubble";
  const pre = document.createElement("pre");
  pre.className = "msg-content";
  pre.textContent = content;
  bubble.appendChild(pre);
  wrapper.appendChild(bubble);
  container.appendChild(wrapper);
  scrollChat();
}

// ── Enter key to send ──
document.getElementById("chatInput").addEventListener("keydown", (e) => {
  if (e.key === "Enter" && !e.shiftKey) {
    e.preventDefault();
    sendMessage();
  }
});

// ── Copy tracking in chat ──
document.getElementById("chatMessages").addEventListener("copy", () => {
  const sel = window.getSelection();
  const len = sel ? sel.toString().length : 0;
  logEvent("copy", len);
});

// ── Paste tracking in code editor ──
codeEditor.addEventListener("paste", (e) => {
  const text = (e.clipboardData || window.clipboardData).getData("text");
  logEvent("paste", text.length);
});

async function logEvent(type, len) {
  try {
    await fetch("/api/event", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ task_id: TASK_ID, event_type: type, content_len: len }),
    });
  } catch (_) {}
}
</script>
{% endblock %}