{% extends "base.html" %}
{% block title %}Edit — {{ sub.data.get('hermit-name','Hermit') }}{% endblock %}

{% block head %}
<style>
  .editor-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 0;
    height: calc(100vh - 73px);  /* subtract page-header height */
  }

  /* ── Left panel (form) ── */
  .editor-form-panel {
    background: #131F13;
    border-right: 1px solid rgba(201,168,76,0.2);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .editor-form-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(201,168,76,0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: #131F13;
    z-index: 10;
  }
  .editor-form-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .editor-form-body { padding: 20px; flex: 1; }

  .field-group {
    margin-bottom: 18px;
  }
  .field-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
  }
  .field-input {
    width: 100%;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 4px;
    color: var(--parchment);
    padding: 8px 10px;
    font-family: 'EB Garamond', serif;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
    resize: vertical;
  }
  .field-input:focus { border-color: var(--gold); }
  .field-input option { background: #1C2E1C; }

  .image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 6px;
  }
  .image-option {
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 3/4;
  }
  .image-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.7);
    transition: filter .2s;
  }
  .image-option:hover img { filter: brightness(.9); }
  .image-option.selected { border-color: var(--gold); }
  .image-option.selected img { filter: brightness(1); }
  .image-option input { position: absolute; opacity: 0; width: 0; height: 0; }
  .image-option .img-check {
    position: absolute; top: 4px; right: 4px;
    width: 18px; height: 18px;
    background: var(--gold);
    border-radius: 50%;
    display: none;
    align-items: center; justify-content: center;
    font-size: 10px; color: var(--deep-green); font-weight: 700;
  }
  .image-option.selected .img-check { display: flex; }

  .skills-wrap {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
  }
  .skill-pill {
    display: flex; align-items: center; gap: 5px;
    background: rgba(201,168,76,.1);
    border: 1px solid rgba(201,168,76,.3);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px; color: var(--parchment);
    cursor: pointer;
    user-select: none;
  }
  .skill-pill.active {
    background: rgba(201,168,76,.25);
    border-color: var(--gold);
    color: var(--gold);
  }
  .skill-pill .rm { font-size: 14px; line-height: 1; color: var(--text-muted); margin-left: 2px; }
  .add-skill-row {
    display: flex; gap: 6px; margin-top: 8px;
  }
  .add-skill-row input {
    flex: 1;
    background: rgba(0,0,0,.3);
    border: 1px dashed rgba(201,168,76,.3);
    border-radius: 4px;
    color: var(--parchment);
    padding: 5px 8px;
    font-family: 'EB Garamond', serif;
    font-size: 13px;
    outline: none;
  }

  .editor-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(201,168,76,.2);
    display: flex;
    gap: 10px;
    background: #131F13;
    position: sticky;
    bottom: 0;
  }

  /* ── Right panel (preview) ── */
  .editor-preview-panel {
    display: flex;
    flex-direction: column;
    background: var(--deep-green);
    overflow: hidden;
  }
  .preview-toolbar {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(201,168,76,.2);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
  }
  .preview-toolbar .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold); opacity: .5;
    transition: opacity .3s;
  }
  .preview-toolbar .dot.live { opacity: 1; }
  #previewFrame {
    flex: 1;
    border: none;
    background: #fff;
  }
</style>
{% endblock %}

{% block content %}
{% set d = sub.data %}

<div class="page-header" style="padding:14px 32px;">
  <div style="display:flex;align-items:center;gap:16px;">
    <a href="/inbox" class="btn btn-outline btn-sm" style="padding:4px 12px;">← Inbox</a>
    <div>
      <h1 style="font-size:16px;">Editing: {{ d.get('hermit-name','Hermit') }}</h1>
      <p style="margin-top:2px;">Applied {{ sub.created_at[:10] }} · {{ sub.email }}</p>
    </div>
  </div>
</div>

<div class="editor-layout">

  <!-- ── Form Panel ── -->
  <div class="editor-form-panel">
    <div class="editor-form-header">
      <h2>Profile Editor</h2>
      <span style="font-size:11px;color:var(--text-muted);font-style:italic;">Preview updates automatically</span>
    </div>

    <div class="editor-form-body">

      <div class="field-group">
        <label class="field-label">Hermit Name / Title</label>
        <input type="text" class="field-input" id="f-name" value="{{ d.get('hermit-name','') }}">
      </div>

      <div class="field-group">
        <label class="field-label">Tagline (shown under the name)</label>
        <input type="text" class="field-input" id="f-tagline"
          value="{{ d.get('specialty','').title() }} Hermit | {{ d.get('years','?') }} Years Contemplative Practice">
      </div>

      <div class="field-group">
        <label class="field-label">Biography</label>
        <textarea class="field-input" id="f-bio" rows="8">{{ d.get('bio','') }}</textarea>
      </div>

      <div class="field-group">
        <label class="field-label">Preferred Habitat</label>
        <input type="text" class="field-input" id="f-habitat" value="{{ d.get('habitat','') }}">
      </div>

      <div class="field-group">
        <label class="field-label">Specialty</label>
        <select class="field-input" id="f-specialty">
          {% for s in ['coastal','woodland','mountain','garden','urban','library','default'] %}
          <option value="{{ s }}" {% if d.get('specialty') == s %}selected{% endif %}>{{ s.title() }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="field-group">
        <label class="field-label">Availability</label>
        <select class="field-input" id="f-availability">
          <option value="available">Available</option>
          <option value="limited">Limited</option>
          <option value="engaged">Currently Engaged</option>
        </select>
      </div>

      <div class="field-group">
        <label class="field-label">Desired Annual Stipend (€)</label>
        <input type="number" class="field-input" id="f-stipend" value="{{ d.get('stipend','30000') }}">
      </div>

      <div class="field-group">
        <label class="field-label">Skills / Specialties</label>
        <div class="skills-wrap" id="skills-wrap">
          {% set raw_skills = d.get('skills', []) %}
          {% if raw_skills is string %}
            {% set skills_list = raw_skills | replace('[','') | replace(']','') | replace('"','') | split(',') %}
          {% else %}
            {% set skills_list = raw_skills %}
          {% endif %}
          {% for sk in skills_list %}
          <span class="skill-pill active" data-skill="{{ sk.strip() }}">
            {{ sk.strip().replace('-',' ') | title }}
            <span class="rm" onclick="removeSkill(this)">×</span>
          </span>
          {% endfor %}
        </div>
        <div class="add-skill-row">
          <input type="text" id="new-skill-input" placeholder="Add skill…">
          <button class="btn btn-outline btn-sm" onclick="addSkill()">Add</button>
        </div>
      </div>

      <div class="field-group">
        <label class="field-label">Profile Image</label>
        <div class="image-grid" id="image-grid">
          {% set default_img = specialty_images.get(d.get('specialty','default'), 'rembrandt-philosopher.jpg') %}
          {% for img in all_images %}
          <label class="image-option {% if img == default_img %}selected{% endif %}" onclick="selectImage(this)">
            <input type="radio" name="profile-img" value="{{ img }}" {% if img == default_img %}checked{% endif %}>
            <img src="https://hermithire.com/images/{{ img }}" alt="{{ img }}" loading="lazy">
            <span class="img-check">✓</span>
          </label>
          {% endfor %}
        </div>
      </div>

    </div><!-- /form-body -->

    <div class="editor-footer">
      <button class="btn btn-gold" style="flex:1;justify-content:center;" onclick="publishFromEditor()">
        Publish to Website
      </button>
      <a href="/inbox" class="btn btn-outline">Cancel</a>
    </div>
  </div><!-- /form-panel -->

  <!-- ── Preview Panel ── -->
  <div class="editor-preview-panel">
    <div class="preview-toolbar">
      <div class="dot" id="previewDot"></div>
      <span>hermithire.com/hermit/<span id="slugPreview"></span></span>
      <span style="margin-left:auto;font-family:'Cinzel',serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);">Live Preview</span>
    </div>
    <iframe id="previewFrame" title="Profile Preview"></iframe>
  </div>

</div>

<!-- Published modal -->
<div class="modal-overlay" id="publishedModal">
  <div class="modal" style="text-align:center;">
    <h3 style="color:#7ACF7A;">Published!</h3>
    <p style="color:var(--text-muted);margin:16px 0;font-style:italic;" id="publishedMsg"></p>
    <div class="modal-footer" style="justify-content:center;">
      <a id="publishedLink" href="#" target="_blank" class="btn btn-gold">View on Site</a>
      <a href="/inbox" class="btn btn-outline">Back to Inbox</a>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
  // ── Store original submission data ──
  const _subData = {{ sub.data | tojson }};
  const _subId   = {{ sub.id | tojson }};

  // ── Skill management ──
  function getSkills() {
    return [...document.querySelectorAll('#skills-wrap .skill-pill')]
      .map(el => el.dataset.skill);
  }

  function removeSkill(btn) {
    btn.closest('.skill-pill').remove();
    schedulePreview();
  }

  function addSkill() {
    const input = document.getElementById('new-skill-input');
    const val = input.value.trim();
    if (!val) return;
    const slug = val.toLowerCase().replace(/\s+/g, '-');
    const pill = document.createElement('span');
    pill.className = 'skill-pill active';
    pill.dataset.skill = slug;
    pill.innerHTML = `${val} <span class="rm" onclick="removeSkill(this)">×</span>`;
    document.getElementById('skills-wrap').appendChild(pill);
    input.value = '';
    schedulePreview();
  }

  document.getElementById('new-skill-input').addEventListener('keydown', e => {
    if (e.key === 'Enter') { e.preventDefault(); addSkill(); }
  });

  // ── Image selection ──
  function selectImage(label) {
    document.querySelectorAll('.image-option').forEach(l => l.classList.remove('selected'));
    label.classList.add('selected');
    label.querySelector('input').checked = true;
    schedulePreview();
  }

  // ── Build data object from form ──
  function buildData() {
    const img = document.querySelector('input[name="profile-img"]:checked')?.value
             || 'rembrandt-philosopher.jpg';
    return {
      ..._subData,
      'hermit-name': document.getElementById('f-name').value,
      'tagline':     document.getElementById('f-tagline').value,
      'bio':         document.getElementById('f-bio').value,
      'habitat':     document.getElementById('f-habitat').value,
      'specialty':   document.getElementById('f-specialty').value,
      'availability':document.getElementById('f-availability').value,
      'stipend':     document.getElementById('f-stipend').value,
      'skills':      getSkills(),
      '_image':      img,
    };
  }

  // ── Slug preview ──
  function makeSlug(name) {
    return name.toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'');
  }

  // ── Debounced preview update ──
  let _previewTimer = null;
  function schedulePreview() {
    document.getElementById('previewDot').classList.remove('live');
    clearTimeout(_previewTimer);
    _previewTimer = setTimeout(refreshPreview, 600);
  }

  function refreshPreview() {
    const data = buildData();
    document.getElementById('slugPreview').textContent = makeSlug(data['hermit-name']);

    fetch('/api/preview_html', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data)
    }).then(r => r.text()).then(html => {
      document.getElementById('previewFrame').srcdoc = html;
      document.getElementById('previewDot').classList.add('live');
    });
  }

  // ── Wire all inputs to preview ──
  ['f-name','f-tagline','f-bio','f-habitat','f-specialty','f-availability','f-stipend'].forEach(id => {
    const el = document.getElementById(id);
    el.addEventListener('input', schedulePreview);
    el.addEventListener('change', schedulePreview);
  });

  // ── Publish ──
  function publishFromEditor() {
    const data = buildData();
    const btn = document.querySelector('.editor-footer .btn-gold');
    btn.textContent = 'Publishing…';
    btn.disabled = true;

    fetch('/api/publish_hermit', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({id: _subId, data})
    }).then(r => r.json()).then(res => {
      if (res.ok) {
        document.getElementById('publishedMsg').textContent =
          `${data['hermit-name']} is now live at ${res.url}`;
        document.getElementById('publishedLink').href = res.url;
        document.getElementById('publishedModal').classList.add('open');
      } else {
        alert('Publish failed: ' + res.msg);
        btn.textContent = 'Publish to Website';
        btn.disabled = false;
      }
    });
  }

  // Initial preview load
  refreshPreview();
</script>
{% endblock %}