{% extends "_base.html" %}
{% block head_extra %}
<style>
  /* Keep each person row on one line — override the form.stack width:100% rule. */
  #persons-editor select { width: auto; }
  #persons-editor .person-row { display: flex; gap: .35rem; align-items: center; margin-bottom: .35rem; }
  #persons-editor .person-row .role-sel { flex: 0 0 7.5rem; }
  #persons-editor .person-row .ref-sel  { flex: 1 1 0; min-width: 0; }
</style>
{% endblock %}
{% block title %}{{ episode.title or 'New episode' }} — offshore{% endblock %}
{% block content %}
<h1>{{ 'New episode' if is_new else 'Edit episode' }}</h1>
<p class="muted text-sm"><span class="text-danger">*</span> required</p>

<form method="post" action="/episodes/save" class="stack"
      hx-post="/episodes/save"
      hx-target="#save-status"
      hx-swap="innerHTML"
      hx-indicator="#save-status">
  <input type="hidden" name="slug" value="{{ slug }}">
  <input type="hidden" name="is_new" value="{{ 'true' if is_new else 'false' }}">
  <input type="hidden" name="original_guid" value="{{ episode.guid }}">
  <input type="hidden" name="skip_audio_verify" id="skip-audio-verify" value="false">

  {% if not is_new %}
  <label>GUID</label>
  <div class="muted font-mono align-center">
    {{ episode.guid }}
    <div class="text-xs">Write-once. Changing it would look like a brand-new episode to subscribers.</div>
  </div>
  {% endif %}

  <label>Title</label>            <input type="text" name="title" value="{{ episode.title }}" required>
  <label>Subtitle</label>         <input type="text" name="subtitle" value="{{ episode.subtitle or '' }}">

  <label>pub_date</label>
  <input type="datetime-local" name="pub_date"
         value="{{ episode.pub_date.strftime('%Y-%m-%dT%H:%M') }}"
         {% if not is_new %}readonly title="pub_date is locked. Use Republish to change it."{% endif %} required>

  <label>Episode number</label>   <input type="number" name="episode_number" value="{{ episode.episode_number if episode.episode_number is not none else '' }}">
  <label>Season</label>            <input type="number" name="season" value="{{ episode.season if episode.season is not none else '' }}">
  <label>Type</label>
    <select name="episode_type">
      {% for t in ['full', 'trailer', 'bonus'] %}
        <option value="{{ t }}" {% if episode.episode_type == t %}selected{% endif %}>{{ t }}</option>
      {% endfor %}
    </select>
  <label>Explicit</label>          <input type="checkbox" name="explicit" value="true" {% if episode.explicit %}checked{% endif %}>

  <label>Audio URL</label>         <input type="url" name="audio_url"
         value="{{ '' if is_new else episode.audio.url }}"
         placeholder="{{ 'https://example.com/episode.mp3' if is_new else '' }}"
         required>
  {% if probe_entry is defined and probe_entry %}
    {% if probe_entry.ok %}
      <div class="full">
        <p class="muted text-sm mt-1">
          <span class="badge ok">probed</span>
          {{ probe_entry.mime_type }}, {{ probe_entry.length_bytes }} bytes
          — {{ probe_entry.probed_at.strftime('%Y-%m-%d %H:%M') }}
        </p>
      </div>
    {% else %}
      <div class="full">
        <p class="text-danger text-sm mt-1">
          <span class="badge fail">probe failed</span>
          {{ probe_entry.error or 'unknown error' }}
          — {{ probe_entry.probed_at.strftime('%Y-%m-%d %H:%M') }}
        </p>
      </div>
    {% endif %}
  {% elif episode.audio.length_bytes %}
    <div class="full">
      <p class="muted text-sm mt-1">
        <span class="badge ok">probed</span>
        {{ episode.audio.mime_type }}, {{ episode.audio.length_bytes }} bytes
      </p>
    </div>
  {% endif %}
  <label>Image URL</label>         <input type="url" name="image_url" value="{{ episode.image_url or '' }}">
  {% if episode_image_check.image == "fail" %}
    <div class="full">
      <p class="text-danger text-sm mt-1">
        <span class="badge fail">image check failed</span>
        {{ episode_image_check.image_warnings[0] if episode_image_check.image_warnings else "could not verify this image" }}
      </p>
    </div>
  {% elif episode_image_check.image_warnings %}
    <div class="full">
      {% for w in episode_image_check.image_warnings %}
        <p class="muted text-sm mt-1">
          <span class="badge warn">image warning</span> {{ w }}
        </p>
      {% endfor %}
    </div>
  {% endif %}
  <label>Episode page URL</label>  <input type="url" name="link" value="{{ episode.link or '' }}">

  <label>People</label>
  <div>
    <p class="muted mt-0">Hosts and guests, chosen from the show roster (edit under Show settings). Also drives <code>&lt;itunes:author&gt;</code> in the feed.</p>
    <div id="persons-editor"></div>
    <input type="hidden" name="persons_json" id="persons-json" value='{{ persons_json|tojson }}'>
    <button type="button" onclick="addPersonRow('host','')">+ host</button>
    <button type="button" onclick="addPersonRow('guest','')">+ guest</button>
  </div>

  <label>Shownote (Markdown)</label>
  <div>
    <textarea id="shownote-md" name="shownote_md"
              hx-post="/preview" hx-trigger="keyup changed delay:400ms" hx-target="#shownote-preview">{{ episode.shownote_md }}</textarea>
    <h4>Preview</h4>
    <div id="shownote-preview" class="preview"></div>
  </div>

  <div class="full row">
    <button type="submit" class="primary">Save</button>
    {% if not is_new %}
      <button type="button" onclick="document.getElementById('republish-dialog').showModal()">Republish…</button>
      <button type="submit" formaction="/episodes/{{ episode.guid }}/delete" formmethod="post" class="danger"
              onclick="return confirm('Delete this episode? Its lock entry is preserved.')">Delete</button>
      <button type="button" hx-post="/episodes/{{ episode.guid }}/probe" hx-target="#probe-result"
              hx-vals='{"slug": "{{ slug }}"}'>Probe audio</button>
    {% endif %}
  </div>
  <div id="save-status" class="full log-slot"
       hx-indicator="#save-status">
    <div class="working">
      <span class="spinner"></span>
      Saving{% if not is_new %} and verifying audio{% endif %}…
    </div>
  </div>
</form>

<div id="probe-result"></div>

{% if not is_new %}
<dialog id="republish-dialog">
  <form method="post" action="/episodes/{{ episode.guid }}/republish">
    <input type="hidden" name="slug" value="{{ slug }}">
    <h3>Republish episode</h3>
    <p>Changing an episode's <code>pub_date</code> will look like a <strong>brand new item</strong> to some podcast clients. Subscribers may re-download and be notified.</p>
    <label>New pub_date <input type="datetime-local" name="new_pub_date" required
      value="{{ episode.pub_date.strftime('%Y-%m-%dT%H:%M') }}"></label>
    <div class="row mt-4">
      <button type="submit" class="danger">I understand, republish</button>
      <button type="button" onclick="this.closest('dialog').close()">Cancel</button>
    </div>
  </form>
</dialog>
{% endif %}

<script>
  // Render an initial preview so the pane isn't empty on load.
  htmx.ajax('POST', '/preview', {
    source: '#shownote-md',
    target: '#shownote-preview',
    values: { shownote_md: document.getElementById('shownote-md').value },
  });

  // Mutable roster — kept in sync as new people are added inline.
  const rosterMap = {{ roster_json|tojson }};
  const roster = rosterMap.map(p => p.id);
  const rosterById = {};
  rosterMap.forEach(p => rosterById[p.id] = p);

  const ADD_NEW_SENTINEL = '__add_new__';

  function personsFromInput() {
    try { return JSON.parse(document.getElementById('persons-json').value || '[]'); }
    catch (e) { return []; }
  }
  function writePersons(list) {
    document.getElementById('persons-json').value = JSON.stringify(list);
    renderPersons();
  }

  // Build the <select> for a person ref, including the "Add new person…" option.
  function buildRefSelect(currentRef, onRealChange) {
    const sel = document.createElement('select');
    roster.forEach(id => {
      const o = document.createElement('option');
      o.value = id;
      o.text = rosterById[id].name;
      if (id === currentRef) o.selected = true;
      sel.appendChild(o);
    });
    // Sentinel option at the bottom
    const addOpt = document.createElement('option');
    addOpt.value = ADD_NEW_SENTINEL;
    addOpt.text = '＋ Add new person…';
    sel.appendChild(addOpt);

    sel.onchange = e => {
      if (e.target.value === ADD_NEW_SENTINEL) {
        // Reset the select back to the previous value immediately so the list
        // doesn't get corrupted if the user cancels.
        e.target.value = currentRef;
        openAddPersonDialog(newPerson => {
          // After creation, update the row to point at the new person.
          e.target.value = newPerson.id;
          onRealChange(newPerson.id);
        });
      } else {
        onRealChange(e.target.value);
      }
    };
    return sel;
  }

  function renderPersons() {
    const list = personsFromInput();
    const root = document.getElementById('persons-editor');
    root.innerHTML = '';
    list.forEach((p, i) => {
      const row = document.createElement('div');
      row.className = 'person-row';

      const role = document.createElement('select');
      role.className = 'role-sel';
      ['host', 'cohost', 'guest', 'editor', 'producer'].forEach(r => {
        const o = document.createElement('option');
        o.value = r; o.text = r; if (p.role === r) o.selected = true;
        role.appendChild(o);
      });
      role.onchange = e => { list[i].role = e.target.value; writePersons(list); };

      const ref = buildRefSelect(p.ref, newId => {
        list[i].ref = newId;
        writePersons(list);
      });
      ref.className = 'ref-sel';

      const del = document.createElement('button');
      del.type = 'button'; del.textContent = '×';
      del.title = 'Remove';
      del.onclick = () => { list.splice(i, 1); writePersons(list); };
      row.append(role, ref, del);
      root.appendChild(row);
    });
  }

  function addPersonRow(role) {
    const list = personsFromInput();
    if (roster.length === 0) {
      // No one on the roster yet — go straight to the add dialog.
      openAddPersonDialog(newPerson => {
        list.push({ role, ref: newPerson.id });
        writePersons(list);
      });
      return;
    }
    list.push({ role, ref: roster[0] });
    writePersons(list);
  }

  // ── Inline "Add new person" dialog ────────────────────────────────────────

  function openAddPersonDialog(onCreated) {
    document.getElementById('add-person-name').value = '';
    document.getElementById('add-person-href-type').value = 'website';
    document.getElementById('add-person-href-value').value = '';
    updateHrefInput(document.getElementById('add-person-href-type'), 'add-person-href-value');
    document.getElementById('add-person-error').textContent = '';
    // Store callback so the submit handler can call it.
    _addPersonCallback = onCreated;
    document.getElementById('add-person-dialog').showModal();
    document.getElementById('add-person-name').focus();
  }

  let _addPersonCallback = null;

  function updateHrefInput(selectEl, inputId) {
    const valInput = document.getElementById(inputId);
    if (!valInput) return;
    const type = selectEl.value;
    if (type === 'none') {
      valInput.value = '';
      valInput.disabled = true;
      valInput.placeholder = '(no website or email)';
      valInput.type = 'text';
      valInput.required = false;
    } else if (type === 'email') {
      valInput.disabled = false;
      valInput.placeholder = 'e.g. john@example.com';
      valInput.type = 'email';
      valInput.required = true;
    } else {
      valInput.disabled = false;
      valInput.placeholder = 'https://…';
      valInput.type = 'url';
      valInput.required = true;
    }
  }

  document.getElementById('add-person-form').addEventListener('submit', async e => {
    e.preventDefault();
    const errEl = document.getElementById('add-person-error');
    errEl.textContent = '';
    const body = new URLSearchParams({
      slug: '{{ slug }}',
      name: document.getElementById('add-person-name').value.trim(),
      href_type: document.getElementById('add-person-href-type').value,
      href_value: document.getElementById('add-person-href-value').value.trim(),
    });
    try {
      const res = await fetch('/show/people/add-inline', { method: 'POST', body });
      const data = await res.json();
      if (!data.ok) {
        errEl.textContent = data.error || 'Unknown error';
        return;
      }
      // Add to the local in-memory roster so the dropdowns pick it up.
      const p = data.person;
      roster.push(p.id);
      rosterById[p.id] = p;
      document.getElementById('add-person-dialog').close();
      if (_addPersonCallback) { _addPersonCallback(p); _addPersonCallback = null; }
    } catch (err) {
      errEl.textContent = 'Request failed: ' + err.message;
    }
  });

  renderPersons();
</script>

<dialog id="add-person-dialog">
  <form id="add-person-form" class="stack">
    <h2 class="full" style="margin:0 0 .25rem;">Add person to roster</h2>
    <label>Name</label>
    <input id="add-person-name" type="text" name="name" required placeholder="e.g. Alice Smith">
    <label>Link Type</label>
    <select id="add-person-href-type" name="href_type" onchange="updateHrefInput(this, 'add-person-href-value')" style="margin-bottom: .5rem;">
      <option value="none">None</option>
      <option value="website" selected>Website</option>
      <option value="email">Email</option>
    </select>
    <label>Link Value</label>
    <input id="add-person-href-value" type="url" name="href_value" placeholder="https://…">
    <p id="add-person-error" class="full" style="color:#c00; margin:0; font-size:.875rem; min-height:1.2em;"></p>
    <div class="full row" style="margin-top:.25rem;">
      <button type="submit" class="primary">Add</button>
      <button type="button" onclick="document.getElementById('add-person-dialog').close()">Cancel</button>
    </div>
  </form>
</dialog>
{% endblock %}