{% extends "base.html" %}
{% block title %}Python Sandbox — Python 108{% endblock %}
{% block content %}

<div class="sandbox-page">

  <div class="sandbox-header">
    <div>
      <h1 class="sandbox-title">🐍 Python Sandbox</h1>
      <p class="sandbox-sub">Write and run any Python code — right in your browser. No installation needed.</p>
    </div>
    <div class="sandbox-header-right">
      <span class="pyodide-status" id="status-msg"></span>
      <button class="btn btn-ghost btn-sm" onclick="loadExample()">Load example</button>
    </div>
  </div>

  <div class="sandbox-layout">

    <!-- ── Editor panel ── -->
    <div class="sandbox-editor-panel">
      <div class="editor-toolbar">
        <span class="editor-label">Python 3</span>
        <div class="editor-actions">
          <button class="btn btn-ghost btn-sm" onclick="clearEditor()" title="Clear editor">Clear</button>
          <button class="btn btn-ghost btn-sm" onclick="copyEditorCode()" title="Copy code">Copy</button>
          <button id="run-btn" class="btn btn-run" onclick="triggerRun()">▶ Run</button>
        </div>
      </div>
      <textarea
        id="sandbox-editor"
        class="sandbox-editor"
        placeholder="# Write your Python here and click Run
print('Hello, World!')"
        spellcheck="false"
        autocomplete="off"
        autocorrect="off"
        autocapitalize="off"
        oninput="autoResize(this)"
        onkeydown="handleTab(event); handleRunShortcut(event)"
      ></textarea>
      <div class="editor-footer">
        <span class="editor-hint">Tip: Press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> to run</span>
        <span class="editor-hint">Tab key inserts 4 spaces</span>
      </div>
    </div>

    <!-- ── Output panel ── -->
    <div class="sandbox-output-panel">
      <div class="output-toolbar">
        <span class="output-label">Output</span>
        <button class="btn btn-ghost btn-sm" onclick="clearSandboxOutput()">Clear</button>
      </div>
      <pre id="sandbox-output" class="sandbox-output">Output will appear here…</pre>
    </div>

  </div>

  <!-- ── Quick snippets ── -->
  <div class="snippet-section">
    <div class="snippet-title">Quick snippets — click to load</div>
    <div class="snippet-grid">
      {% for label, code in [
        ('Hello World',   'print("Hello, World!")'),
        ('For loop',      'for i in range(1, 6):\n    print(f"Number {i}")'),
        ('List comp',     'squares = [x**2 for x in range(1, 11)]\nprint(squares)'),
        ('Function',      'def greet(name, times=1):\n    for _ in range(times):\n        print(f"Hello, {name}!")\n\ngreet("Python", 3)'),
        ('Dictionary',    'student = {"name": "Priya", "score": 95}\nfor k, v in student.items():\n    print(f"{k}: {v}")'),
        ('Fibonacci',     'a, b = 0, 1\nfor _ in range(10):\n    print(a, end=" ")\n    a, b = b, a + b'),
        ('Factorial',     'def factorial(n):\n    if n == 0: return 1\n    return n * factorial(n - 1)\n\nfor i in range(8):\n    print(f"{i}! = {factorial(i)}")'),
        ('Class',         'class Dog:\n    def __init__(self, name):\n        self.name = name\n    def bark(self):\n        return f"{self.name} says Woof!"\n\nd = Dog("Bruno")\nprint(d.bark())'),
        ('Exception',     'try:\n    result = 10 / 0\nexcept ZeroDivisionError as e:\n    print(f"Caught: {e}")\nfinally:\n    print("Done")'),
        ('List methods',  'nums = [3, 1, 4, 1, 5, 9, 2, 6]\nnums.sort()\nprint("Sorted:", nums)\nprint("Max:", max(nums))\nprint("Sum:", sum(nums))'),
        ('String ops',    's = "Python 108"\nprint(s.upper())\nprint(s[:6])\nprint(s[::-1])\nprint(len(s))'),
        ('Lambda',        'nums = [5, 2, 8, 1, 9, 3]\nsorted_nums = sorted(nums, key=lambda x: -x)\nprint(sorted_nums)\nevens = list(filter(lambda x: x % 2 == 0, nums))\nprint(evens)'),
      ] %}
      <button class="snippet-btn" onclick="loadSnippet(this)"
              data-code="{{ code | e }}">{{ label }}</button>
      {% endfor %}
    </div>
  </div>

</div>

<script src="{{ url_for('static', filename='js/pyodide_runner.js') }}"></script>
<script>
const editor  = document.getElementById('sandbox-editor');
const output  = document.getElementById('sandbox-output');
const runBtn  = document.getElementById('run-btn');
const statusEl = document.getElementById('status-msg');

// Pre-load Pyodide in background when page opens
ensurePyodide(statusEl);

async function triggerRun() {
  const code = editor.value.trim();
  if (!code) {
    output.textContent = "Nothing to run — write some Python first!";
    return;
  }
  await runPython(code, output, statusEl, runBtn);
}

function handleRunShortcut(e) {
  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
    e.preventDefault();
    triggerRun();
  }
}

function clearEditor() {
  editor.value = '';
  editor.style.height = '300px';
  editor.focus();
}

function copyEditorCode() {
  navigator.clipboard.writeText(editor.value).then(() => {
    const btn = document.querySelector('[onclick="copyEditorCode()"]');
    btn.textContent = 'Copied!';
    setTimeout(() => btn.textContent = 'Copy', 2000);
  });
}

function clearSandboxOutput() {
  clearOutput(output);
}

function loadSnippet(btn) {
  editor.value = btn.dataset.code;
  autoResize(editor);
  editor.focus();
  // Highlight active snippet
  document.querySelectorAll('.snippet-btn').forEach(b => b.classList.remove('snippet-active'));
  btn.classList.add('snippet-active');
}

function loadExample() {
  editor.value = `# Python 108 — Sandbox example
# Try editing and running this!

def is_prime(n):
    if n < 2:
        return False
    for i in range(2, int(n**0.5) + 1):
        if n % i == 0:
            return False
    return True

primes = [n for n in range(2, 50) if is_prime(n)]
print("Primes under 50:")
print(primes)
print(f"Count: {len(primes)}")`;
  autoResize(editor);
  editor.focus();
}

// Set default height
editor.style.height = '300px';
</script>
{% endblock %}