{% 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. This should never be changed. Changing it will result in your show being treated as a new show by podcast distributors or other unexpected issues.">
  <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>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>Copyright</label>          <input type="text" name="copyright" value="{{ show.copyright or '' }}">
  
  <label>Owner</label>
  <div style="display: flex; gap: .35rem; align-items: center;">
    <input type="text" name="owner_name" id="owner_name" value="{{ show.owner.name if show.owner else '' }}" placeholder="Name" oninput="document.getElementById('owner_email').required = !!this.value.trim();" style="flex: 1 1 0; min-width: 0;">
    <input type="email" name="owner_email" id="owner_email" value="{{ show.owner.email if show.owner else '' }}" placeholder="Email" {% if show.owner and show.owner.name %}required{% endif %} style="flex: 2 1 0; min-width: 0;">
    <label style="display: flex; align-items: center; gap: 0.2rem; white-space: nowrap; margin: 0;" title="If set, it means you don't want your feed to be imported elsewhere without your permission. Please note this is only an expression of your intention, and can't technically prevent your feed being imported."><input type="checkbox" name="owner_locked" value="true" {% if show.owner %}{% if show.owner.locked %}checked{% endif %}{% else %}checked{% endif %}> Locked?</label>
  </div>

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