{% extends "_base.html" %}
{% from "_category_select.html" import category_select %}
{% block title %}Show settings — offshore{% endblock %}
{% block content %}
<style>
  #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>
<h1>Show settings</h1>
<p class="muted" style="font-size:.875rem;"><span style="color:#c00">*</span> required</p>
<form method="post" action="/show/edit" class="stack">
  <input type="hidden" name="slug" value="{{ slug }}">
  <label>Slug</label>              <input type="text" name="slug_display" value="{{ show.slug }}" disabled>
  <label>GUID</label>              <input type="text" value="{{ show.guid }}" disabled title="Show GUID never changes.">
  <label>Title</label>              <input type="text" name="title" value="{{ show.title }}" required>
  <label>Subtitle</label>           <input type="text" name="subtitle" value="{{ show.subtitle or '' }}">
  <label>Description</label>        <textarea name="description" required style="min-height: 4rem;">{{ show.description }}</textarea>
  <label>Homepage URL</label>       <input type="url" name="link" value="{{ show.link or '' }}">
  <label>Language</label>
  <select name="language" required>
    {% set common_codes = [] %}
    {% for code, name in common_languages %}
      {% if common_codes.append(code) %}{% endif %}
    {% endfor %}
    {% set all_codes = [] %}
    {% for code, name in all_languages %}
      {% if all_codes.append(code) %}{% endif %}
    {% endfor %}
    {% set in_list = show.language in common_codes or show.language in all_codes %}
    {% if not in_list %}
      <option value="{{ show.language }}" selected>{{ show.language }}</option>
    {% endif %}
    {% for code, name in common_languages %}
      <option value="{{ code }}" {% if show.language == code %}selected{% endif %}>{{ name }} ({{ code }})</option>
    {% endfor %}
    <optgroup label="All Languages">
      {% for code, name in all_languages %}
        {% if code not in common_codes %}
          <option value="{{ code }}" {% if show.language == code %}selected{% endif %}>{{ name }} ({{ code }})</option>
        {% endif %}
      {% endfor %}
    </optgroup>
  </select>
  <label>Copyright</label>          <input type="text" name="copyright" value="{{ show.copyright or '' }}">
  <label>Type</label>
    <select name="type">
      <option value="episodic" {% if show.type == 'episodic' %}selected{% endif %}>episodic</option>
      <option value="serial" {% if show.type == 'serial' %}selected{% endif %}>serial</option>
    </select>
  <label>People</label>
  <div>
    <p class="muted" style="margin-top:0;">Hosts and other roles for the show, chosen from the roster below. Drives <code>&lt;itunes:author&gt;</code> and <code>&lt;podcast:person&gt;</code> tags 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')">+ people</button>
  </div>
  <label>Cover image URL</label>     <input type="url" name="image_url" value="{{ show.image_url }}" required>
  {% if show_image_check.image == "fail" %}
    <div class="full">
      <p style="color:#c00; margin:.25rem 0 0; font-size:.875rem;">
        <span class="badge fail">image check failed</span>
        {{ show_image_check.image_warnings[0] if show_image_check.image_warnings else "could not verify this image" }}
      </p>
    </div>
  {% elif show_image_check.image_warnings %}
    <div class="full">
      {% for w in show_image_check.image_warnings %}
        <p class="muted" style="margin:.25rem 0 0; font-size:.875rem;">
          <span class="badge warn">image warning</span> {{ w }}
        </p>
      {% endfor %}
    </div>
  {% endif %}
  <label>Feed self URL</label>       <input type="url" name="feed_self_url" value="{{ show.feed_self_url }}" required>
  <label>Hub URL</label>             <input type="url" name="hub_url" value="{{ show.hub_url or '' }}">
  <label>Keywords (comma-separated)</label>
    <input type="text" name="keywords" value="{{ show.keywords|join(', ') }}">
  {{ category_select(show.categories[0].cat, show.categories[0].sub or "", apple_categories) }}
  <label>Explicit</label>            <input type="checkbox" name="explicit" value="true" {% if show.explicit %}checked{% endif %}>
  <label>Output path
    <span class="muted" style="font-size:.8rem; font-weight:normal;">
      Full file path for the generated feed, including the filename (e.g. <code>/my/site/podcast.xml</code>).
    </span>
  </label>
  <input type="text" name="output_path"
         value="{{ output_path_value if output_path_value is defined else (show.output_path or '') }}"
         placeholder="{{ show_dir }}/podcast.xml"
         style="font-family:monospace;"
         {% if output_path_error is defined and output_path_error %}aria-invalid="true"{% endif %}>
  {% if output_path_error is defined and output_path_error %}
    <p style="color:#c00; margin:.25rem 0 0; font-size:.875rem;">{{ output_path_error }}</p>
  {% endif %}
  <div class="full"><button type="submit" class="primary">Save</button></div>
</form>

<h2>People roster</h2>
<table>
  <thead><tr><th>Name</th><th>Website or Email</th><th></th></tr></thead>
  <tbody>
    {% for p in show.people %}
      <tr>
        <td>{{ p.name }}</td>
        <td class="muted">
          {% if p.href and p.href.startswith('mailto:') %}
            {{ p.href[7:] }} <span style="font-size:0.8rem; opacity:0.7;">(Email)</span>
          {% else %}
            {{ p.href or '' }}
          {% endif %}
        </td>
        <td style="white-space:nowrap;">
          <button type="button"
                  data-pid="{{ p.id }}"
                  data-pname="{{ p.name }}"
                  data-phref="{{ p.href or '' }}"
                  onclick="openEditPerson(this.dataset)"
                  style="padding:.2rem .55rem; font-size:.85rem;">Edit</button>
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>
<h3>Add person</h3>
<form method="post" action="/show/people/add" class="stack">
  <input type="hidden" name="slug" value="{{ slug }}">
  <label>Name</label>  <input type="text" name="name" required>
  <label>Link Type</label>
  <select id="add-href-type" name="href_type" onchange="updateHrefInput(this, 'add-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-href-value" type="url" name="href_value" placeholder="https://…">
  <div class="full"><button type="submit">Add</button></div>
</form>

<hr style="margin: 2rem 0; border: none; border-top: 1px solid var(--border);">
<h2 style="color:#b23;">Danger zone</h2>
<p>Permanently delete this show and all its episodes. This cannot be undone.</p>
<button type="button" class="danger" onclick="document.getElementById('delete-dialog').showModal()">
  Delete show
</button>

<dialog id="delete-dialog">
  <h3 style="margin-top:0;">Delete &ldquo;{{ show.title }}&rdquo;?</h3>
  <p>
    This will permanently remove the show and all its episode data from disk.
    <strong>There is no undo.</strong>
  </p>
  <p>
    Before proceed, consider download a backup of the show data:
    <a href="/show/download-data?slug={{ slug }}" download="{{ slug }}.json" style="font-weight:bold;">
      Download {{ slug }}.json
    </a>
  </p>
  <p>To confirm, type the show slug <code>{{ slug }}</code> below:</p>
  <form method="post" action="/show/delete">
    <input type="hidden" name="slug" value="{{ slug }}">
    <input type="text" name="confirm_slug" required
           placeholder="{{ slug }}"
           autocomplete="off"
           pattern="{{ slug }}"
           title="Type the slug exactly to confirm"
           style="width:100%; margin-bottom:.75rem; padding:.35rem .5rem;
                  border:1px solid var(--border); border-radius:4px; font:inherit;">
    <div style="display:flex; gap:.5rem; justify-content:flex-end;">
      <button type="button" onclick="document.getElementById('delete-dialog').close()">Cancel</button>
      <button type="submit" class="danger">Delete permanently</button>
    </div>
  </form>
</dialog>

<!-- ── Edit person dialog ─────────────────────────────────────────────── -->
<dialog id="edit-person-dialog">
  <form id="edit-person-form" class="stack" method="post" action="/show/people/edit">
    <h2 class="full" style="margin:0 0 .25rem;">Edit person</h2>
    <input type="hidden" name="slug" value="{{ slug }}">
    <input type="hidden" name="original_id" id="edit-original-id">

    <label>Name</label>
    <input id="edit-person-name" type="text" name="name" required>

    <label>Link Type</label>
    <select id="edit-href-type" name="href_type" onchange="updateHrefInput(this, 'edit-href-value')" style="margin-bottom: .5rem;">
      <option value="none">None</option>
      <option value="website">Website</option>
      <option value="email">Email</option>
    </select>

    <label>Link Value</label>
    <input id="edit-href-value" type="text" name="href_value">

    <p id="edit-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">Save</button>
      <button type="button" onclick="document.getElementById('edit-person-dialog').close()">Cancel</button>
    </div>
  </form>
</dialog>

<dialog id="add-person-dialog">
  <form id="add-person-inline-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>

<script>
  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();
  }

  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) {
        e.target.value = currentRef;
        openAddPersonDialog(newPerson => {
          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) {
      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 = '';
    _addPersonCallback = onCreated;
    document.getElementById('add-person-dialog').showModal();
    document.getElementById('add-person-name').focus();
  }

  let _addPersonCallback = null;

  document.getElementById('add-person-inline-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;
      }
      const p = data.person;
      roster.push(p.id);
      rosterById[p.id] = p;
      
      const tbody = document.querySelector('table tbody');
      if (tbody) {
        const tr = document.createElement('tr');
        const hrefText = p.href ? (p.href.startsWith('mailto:') ? p.href.slice(7) + ' (Email)' : p.href) : '';
        tr.innerHTML = `
          <td>${p.name}</td>
          <td class="muted">${hrefText}</td>
          <td style="white-space:nowrap;">
            <button type="button"
                    data-pid="${p.id}"
                    data-pname="${p.name}"
                    data-phref="${p.href || ''}"
                    onclick="openEditPerson(this.dataset)"
                    style="padding:.2rem .55rem; font-size:.85rem;">Edit</button>
          </td>
        `;
        tbody.appendChild(tr);
      }

      document.getElementById('add-person-dialog').close();
      if (_addPersonCallback) { _addPersonCallback(p); _addPersonCallback = null; }
    } catch (err) {
      errEl.textContent = 'Request failed: ' + err.message;
    }
  });

  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;
    }
  }

  function openEditPerson(ds) {
    document.getElementById('edit-original-id').value = ds.pid;
    document.getElementById('edit-person-name').value = ds.pname;
    const selectEl = document.getElementById('edit-href-type');
    const inputEl = document.getElementById('edit-href-value');
    
    const href = ds.phref || '';
    if (!href) {
      selectEl.value = 'none';
      inputEl.value = '';
    } else if (href.startsWith('mailto:')) {
      selectEl.value = 'email';
      inputEl.value = href.slice(7);
    } else {
      selectEl.value = 'website';
      inputEl.value = href;
    }
    updateHrefInput(selectEl, 'edit-href-value');

    document.getElementById('edit-person-error').textContent = '';
    document.getElementById('edit-person-dialog').showModal();
    document.getElementById('edit-person-name').focus();
  }

  document.addEventListener('DOMContentLoaded', () => {
    updateHrefInput(document.getElementById('add-href-type'), 'add-href-value');
    renderPersons();
  });
</script>
{% endblock %}