{% extends "base.html" %}
{% block title %}Sets{% endblock %}
{% block content %}
{% set set_id = None %}
{% set set_name = None %}
{% set card_count = 0 %}
{% set deck_list = [] %}

<h1>PTG Editor</h1>

<section class="card">
  <h2>Create New Set</h2>
  <form x-data="newSetForm()" @submit.prevent="submit">
    <div class="form-grid">
      <div class="form-group">
        <label for="set_id">Set ID</label>
        <input type="text" id="set_id" x-model="set_id" required placeholder="e.g. base_set">
      </div>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" x-model="name" required placeholder="e.g. Base Set">
      </div>
      <div class="form-group">
        <label for="author">Author</label>
        <input type="text" id="author" x-model="author" placeholder="Author name">
      </div>
      <div class="form-group full-width">
        <label for="description">Description</label>
        <textarea id="description" x-model="description" rows="2" placeholder="Set description..."></textarea>
      </div>
    </div>
    <div class="form-actions">
      <button type="submit" class="btn btn-primary" :disabled="loading">
        <span x-show="!loading">Create Set</span>
        <span x-show="loading">Creating...</span>
      </button>
      <span x-show="message" :class="'msg ' + msg_type" x-text="message"></span>
    </div>
  </form>
</section>

<section class="card">
  <h2>Available Sets</h2>
  {% if sets %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>ID</th>
        <th>Author</th>
        <th>Version</th>
      </tr>
    </thead>
    <tbody>
      {% for s in sets %}
      <tr class="clickable-row" onclick="window.location.href='/set/{{ s.set_id }}/'">
        <td><strong>{{ s.name }}</strong></td>
        <td><code>{{ s.set_id }}</code></td>
        <td>{{ s.author or '-' }}</td>
        <td>{{ s.version or '-' }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="empty-state">No sets found in <code>{{ config.PTG_BASE_DIR }}</code>.</p>
  <p>Create a new set above or add existing set directories to the base directory.</p>
  {% endif %}
</section>

<script>
function newSetForm() {
  return {
    set_id: '',
    name: '',
    author: '',
    description: '',
    loading: false,
    message: '',
    msg_type: 'success',
    async submit() {
      this.loading = true;
      this.message = '';
      try {
        const res = await fetch('/api/sets', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            set_id: this.set_id,
            name: this.name,
            author: this.author,
            description: this.description,
          }),
        });
        const data = await res.json();
        if (res.ok && data.success) {
          this.msg_type = 'success';
          this.message = 'Set created! Redirecting...';
          // Remember in localStorage
          const recent = JSON.parse(localStorage.getItem('ptg-recent-sets') || '[]');
          recent.unshift(data.set_id);
          localStorage.setItem('ptg-recent-sets', JSON.stringify([...new Set(recent)].slice(0, 10)));
          setTimeout(() => { window.location.href = '/set/' + data.set_id + '/'; }, 800);
        } else {
          this.msg_type = 'error';
          this.message = data.error || 'Failed to create set';
        }
      } catch (e) {
        this.msg_type = 'error';
        this.message = 'Network error: ' + e.message;
      }
      this.loading = false;
    },
  };
}
</script>
{% endblock %}