{% extends "base.html" %}
{% block title %}Inbox{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Inbox</h1>
  <p>{{ applications|length }} hermit application{% if applications|length != 1 %}s{% endif %} &nbsp;·&nbsp;
     {{ estate_offers|length }} estate offer{% if estate_offers|length != 1 %}s{% endif %} &nbsp;·&nbsp;
     {{ hermit_offers|length }} offer{% if hermit_offers|length != 1 %}s{% endif %} to hermits</p>
</div>

<div class="page-content">

  <!-- ── Hermit Applications ── -->
  <div class="card" style="margin-bottom:28px;">
    <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
      <span>Hermit Applications</span>
      <span class="badge badge-gold">{{ applications|length }}</span>
    </div>
    <div class="card-body" style="padding:0;">
      {% if applications %}
      <table class="data-table">
        <thead>
          <tr>
            <th style="width:28px;"></th>
            <th>Hermit Name</th>
            <th>Specialty</th>
            <th>Years</th>
            <th>Skills</th>
            <th>Email</th>
            <th>Submitted</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for sub in applications %}
          {% set d = sub.data %}
          <tr id="row-{{ sub.id }}">
            <td style="text-align:center;">
              {% if sub._live %}
                <span title="Live on site" style="display:inline-block;width:9px;height:9px;border-radius:50%;background:#4CAF50;box-shadow:0 0 5px rgba(76,175,80,0.6);"></span>
              {% else %}
                <span title="Not yet published" style="display:inline-block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);"></span>
              {% endif %}
            </td>
            <td style="font-weight:600;color:var(--gold);">{{ d.get('hermit-name','—') }}</td>
            <td><span class="badge badge-muted">{{ d.get('specialty','—') }}</span></td>
            <td style="color:var(--text-muted);">{{ d.get('years','—') }}</td>
            <td style="font-size:11px;color:var(--text-muted);max-width:180px;">
              {% set skills = d.get('skills',[]) %}
              {% if skills is string %}{{ skills[:60] }}{% else %}{{ skills[:3]|join(', ') }}{% if skills|length > 3 %} +{{ skills|length - 3 }}{% endif %}{% endif %}
            </td>
            <td style="font-size:12px;font-family:monospace;">{{ sub.email or d.get('email','—') }}</td>
            <td style="font-size:11px;color:var(--text-muted);">{{ sub.created_at[:10] }}</td>
            <td style="display:flex;gap:6px;align-items:center;">
              <button class="btn btn-outline btn-sm"
                data-sub='{{ sub|tojson }}'
                onclick="openApplication(JSON.parse(this.dataset.sub))">Review</button>
              <button class="btn btn-sm"
                style="background:rgba(139,32,32,0.25);color:#CF7A7A;border:1px solid rgba(139,32,32,0.45);"
                onclick="removeApplication('{{ sub.id }}', this)">Remove</button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div style="padding:32px;text-align:center;color:var(--text-muted);font-style:italic;">
        No hermit applications yet. Share hermithire.com/join with the world.
      </div>
      {% endif %}
    </div>
  </div>

  <!-- ── Estate Offers ── -->
  <div class="card" style="margin-bottom:28px;">
    <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
      <span>Estate Offers <span style="font-size:11px;font-style:italic;color:var(--text-muted);font-family:'EB Garamond',serif;">(from landowners seeking a hermit)</span></span>
      <span class="badge badge-gold">{{ estate_offers|length }}</span>
    </div>
    <div class="card-body" style="padding:0;">
      {% if estate_offers %}
      <table class="data-table">
        <thead>
          <tr>
            <th>Estate</th>
            <th>County</th>
            <th>Type</th>
            <th>Preferred Hermit</th>
            <th>Start</th>
            <th>Contact</th>
            <th>Submitted</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for sub in estate_offers %}
          {% set d = sub.data %}
          <tr id="row-{{ sub.id }}">
            <td style="font-weight:600;">{{ d.get('estate-name','—') }}</td>
            <td style="color:var(--text-muted);">{{ d.get('county','—') }}</td>
            <td><span class="badge badge-muted">{{ d.get('estate-type','—') }}</span></td>
            <td style="font-size:12px;">{{ d.get('preferred-hermit','No preference') }}</td>
            <td style="font-size:12px;color:var(--text-muted);">{{ d.get('start-date','—') }}</td>
            <td style="font-size:12px;font-family:monospace;">{{ sub.email or d.get('email','—') }}</td>
            <td style="font-size:11px;color:var(--text-muted);">{{ sub.created_at[:10] }}</td>
            <td style="display:flex;gap:6px;align-items:center;">
              <button class="btn btn-outline btn-sm" data-sub='{{ sub|tojson }}' onclick="openOffer(JSON.parse(this.dataset.sub), 'estate')">Review</button>
              <button class="btn btn-sm"
                style="background:rgba(139,32,32,0.25);color:#CF7A7A;border:1px solid rgba(139,32,32,0.45);"
                onclick="removeApplication('{{ sub.id }}', this)">Remove</button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div style="padding:32px;text-align:center;color:var(--text-muted);font-style:italic;">
        No estate offers yet.
      </div>
      {% endif %}
    </div>
  </div>

  <!-- ── Offers to Hermits ── -->
  <div class="card">
    <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
      <span>Offers to Hermits <span style="font-size:11px;font-style:italic;color:var(--text-muted);font-family:'EB Garamond',serif;">(from hermit profile pages)</span></span>
      <span class="badge badge-gold">{{ hermit_offers|length }}</span>
    </div>
    <div class="card-body" style="padding:0;">
      {% if hermit_offers %}
      <table class="data-table">
        <thead>
          <tr>
            <th>Estate</th>
            <th>Hermit Preferred</th>
            <th>Stipend</th>
            <th>Duration</th>
            <th>Contact</th>
            <th>Submitted</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for sub in hermit_offers %}
          {% set d = sub.data %}
          <tr>
            <td style="font-weight:600;">{{ d.get('estate-name','—') }}</td>
            <td style="font-size:12px;">{{ d.get('hermit-preference','Any') }}</td>
            <td>€{{ '{:,}'.format(d.get('annual-stipend','0')|int) if d.get('annual-stipend','0').isdigit() else d.get('annual-stipend','—') }}</td>
            <td style="color:var(--text-muted);font-size:12px;">{{ d.get('duration','—') }}</td>
            <td style="font-size:12px;font-family:monospace;">{{ sub.email or d.get('email','—') }}</td>
            <td style="font-size:11px;color:var(--text-muted);">{{ sub.created_at[:10] }}</td>
            <td><button class="btn btn-outline btn-sm" data-sub='{{ sub|tojson }}' onclick="openOffer(JSON.parse(this.dataset.sub), 'hermit')">Review</button></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div style="padding:32px;text-align:center;color:var(--text-muted);font-style:italic;">
        No hermit offers yet.
      </div>
      {% endif %}
    </div>
  </div>

</div>

<!-- ── Application Review Modal ── -->
<div class="modal-overlay" id="appModal">
  <div class="modal" style="width:600px;max-height:85vh;overflow-y:auto;">
    <h3 id="appModalTitle">Application</h3>
    <div id="appModalBody" style="font-size:13px;"></div>
    <div class="modal-footer">
      <button class="btn btn-outline" onclick="closeModal('appModal')">Close</button>
      <button class="btn btn-gold" id="editBtn" onclick="openEditor()">
        Preview &amp; Edit
      </button>
    </div>
  </div>
</div>

<!-- ── Offer Review Modal ── -->
<div class="modal-overlay" id="offerModal">
  <div class="modal" style="width:560px;max-height:85vh;overflow-y:auto;">
    <h3 id="offerModalTitle">Offer Details</h3>
    <div id="offerModalBody" style="font-size:13px;"></div>
    <div class="modal-footer">
      <button class="btn btn-outline" onclick="closeModal('offerModal')">Close</button>
      <a id="offerReplyBtn" href="#" class="btn btn-gold">Reply via Email</a>
    </div>
  </div>
</div>

<!-- ── Published confirmation ── -->
<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>
      <button class="btn btn-outline" onclick="closeModal('publishedModal')">Close</button>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
  let _currentSub = null;

  function row(label, value, highlight) {
    if (!value || value === '—' || value === '') return '';
    const v = highlight
      ? `<strong style="color:var(--gold)">${value}</strong>`
      : `<span style="color:var(--parchment)">${value}</span>`;
    return `<div style="display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
      <span style="color:var(--text-muted);font-family:'Cinzel',serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;min-width:160px">${label}</span>
      ${v}
    </div>`;
  }

  function formatSkills(val) {
    try {
      const arr = typeof val === 'string' ? JSON.parse(val) : val;
      if (Array.isArray(arr)) return arr.map(s => s.replace(/-/g,' ')).map(s => s[0].toUpperCase()+s.slice(1)).join(' · ');
    } catch(e) {}
    return val || '';
  }

  function openApplication(sub) {
    _currentSub = sub;
    const d = sub.data || {};
    document.getElementById('appModalTitle').textContent = d['hermit-name'] || 'Application';
    const stipend = d.stipend ? `€${parseInt(d.stipend).toLocaleString()} / year` : '—';
    document.getElementById('appModalBody').innerHTML =
      row('Hermit Name / Title', d['hermit-name'], true) +
      row('Primary Specialty', d.specialty) +
      row('Years of Practice', d.years + ' years') +
      row('Preferred Habitat', d.habitat) +
      row('Skills', formatSkills(d.skills)) +
      row('Available Seasons', formatSkills(d.seasons)) +
      row('Minimum Duration', d['min-duration']) +
      row('Desired Stipend', stipend, true) +
      row('Estate Preference', d['estate-pref']) +
      `<div style="margin-top:16px;padding:12px;background:rgba(0,0,0,0.25);border:1px solid rgba(201,168,76,0.15);border-radius:4px;">
        <p style="font-family:'Cinzel',serif;font-size:11px;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;">Statement of Intent</p>
        <p style="font-style:italic;line-height:1.8;">${d.bio || '<em>No statement provided.</em>'}</p>
      </div>` +
      `<div style="margin-top:12px;padding:10px 12px;background:rgba(139,32,32,0.15);border:1px solid rgba(139,32,32,0.3);border-radius:4px;font-size:12px;">
        <strong style="color:#CF7A7A;">Private</strong>
        <span style="color:var(--text-muted);margin-left:8px;">${d['legal-name'] || ''} &nbsp;·&nbsp; ${d.email || sub.email || ''}</span>
      </div>`;
    document.getElementById('appModal').classList.add('open');
  }

  function openOffer(sub, type) {
    const d = sub.data || {};
    const title = type === 'estate' ? (d['estate-name'] || 'Estate Offer') : (d['estate-name'] || 'Hermit Offer');
    document.getElementById('offerModalTitle').textContent = title;

    let body = '';
    if (type === 'estate') {
      body =
        row('Estate Name', d['estate-name'], true) +
        row('County', d.county) +
        row('Estate Type', d['estate-type']) +
        row('Preferred Hermit', d['preferred-hermit']) +
        row('Start Date', d['start-date']) +
        row('Duration', d.duration) +
        row('Contact Name', d['contact-name']) +
        row('Contact Email', d.email || sub.email) +
        `<div style="margin-top:16px;padding:12px;background:rgba(0,0,0,0.25);border:1px solid rgba(201,168,76,0.15);border-radius:4px;">
          <p style="font-family:'Cinzel',serif;font-size:11px;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;">Estate Description</p>
          <p style="font-style:italic;line-height:1.8;">${d['estate-description'] || '—'}</p>
        </div>`;
    } else {
      const stipend = d['annual-stipend'] ? `€${parseInt(d['annual-stipend']).toLocaleString()} / year` : '—';
      body =
        row('Estate Name', d['estate-name'], true) +
        row('Preferred Hermit', d['hermit-preference']) +
        row('Annual Stipend', stipend, true) +
        row('Duration', d.duration) +
        row('Lodgings', d.lodgings) +
        row('Duties', d.duties) +
        row('Privileges', d.privileges) +
        row('Special Considerations', d['special-considerations']);
    }
    document.getElementById('offerModalBody').innerHTML = body;

    const replyEmail = d.email || sub.email || '';
    const subject = encodeURIComponent(`Re: ${title} — Hermithire`);
    document.getElementById('offerReplyBtn').href = `mailto:${replyEmail}?subject=${subject}`;

    document.getElementById('offerModal').classList.add('open');
  }

  function closeModal(id) {
    document.getElementById(id).classList.remove('open');
  }

  function openEditor() {
    if (!_currentSub) return;
    closeModal('appModal');
    window.location.href = '/inbox/edit/' + _currentSub.id;
  }

  // Remove application
  function removeApplication(id, btn) {
    if (!confirm('Remove this application? This cannot be undone.')) return;
    btn.disabled = true;
    btn.textContent = '…';
    fetch('/api/delete_submission', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({id: id})
    })
    .then(r => r.json())
    .then(data => {
      if (data.ok) {
        const row = document.getElementById('row-' + id);
        row.style.transition = 'opacity 0.3s';
        row.style.opacity = '0';
        setTimeout(() => row.remove(), 300);
      } else {
        btn.disabled = false;
        btn.textContent = 'Remove';
        alert('Failed to remove: ' + (data.error || 'unknown error'));
      }
    });
  }

  // Close modals on overlay click
  ['appModal','offerModal','publishedModal'].forEach(id => {
    document.getElementById(id).addEventListener('click', function(e) {
      if (e.target === this) closeModal(id);
    });
  });
</script>
{% endblock %}