{% extends "base.html" %}
{% block title %}{{ contact.name }}{% endblock %}

{% block content %}
<a href="{{ url_for('contacts.index') }}" onclick="if(document.referrer && document.referrer.includes('/contacts')){history.back();return false;}" class="btn-back">&larr; Back to contacts</a>

<div class="page-header">
  <div>
    <h1>{{ contact.name }}</h1>
    <p class="text-muted mb-0">{{ contact.title }}</p>
  </div>
</div>

<div class="detail-grid">
  <div class="card">
    <div class="card-header"><h3>Details</h3></div>
    <div class="card-body">
      <table>
        <tr>
          <th>Company</th>
          <td id="company-display">
            {{ contact.company or "—" }}
            {% if role in ('editor', 'admin') %}
            <div class="inline-edit">
              <button type="button" class="inline-edit-trigger btn-sm" onclick="this.nextElementSibling.classList.toggle('open')">Change</button>
              <div class="inline-edit-dropdown">
                <form hx-patch="{{ url_for('contacts.update_company', contact_id=contact.id) }}"
                      hx-target="#company-display"
                      hx-swap="innerHTML">
                  <input type="text" name="company" value="{{ contact.company }}" placeholder="Company name">
                  <button type="submit" class="btn btn-primary btn-sm">Save</button>
                </form>
              </div>
            </div>
            {% endif %}
          </td>
        </tr>
        <tr><th>Tier</th><td>{{ contact.company_tier or "—" }}</td></tr>
        <tr>
          <th>Status</th>
          <td id="status-display">
            <span class="status-badge status-{{ contact.status|lower|replace(' ', '') }}">{{ contact.status }}</span>
            {% if role in ('editor', 'admin') %}
            <div class="inline-edit">
              <button type="button" class="inline-edit-trigger btn-sm" onclick="this.nextElementSibling.classList.toggle('open')">Change</button>
              <div class="inline-edit-dropdown">
                <form hx-patch="{{ url_for('contacts.update_status', contact_id=contact.id) }}"
                      hx-target="#status-display"
                      hx-swap="innerHTML">
                  <select name="status">
                    {% for s in ['ICP', 'POI', 'Not ICP', 'Review'] %}
                    <option value="{{ s }}" {% if s == contact.status %}selected{% endif %}>{{ s }}</option>
                    {% endfor %}
                  </select>
                  <button type="submit" class="btn btn-primary btn-sm">Save</button>
                </form>
              </div>
            </div>
            {% endif %}
          </td>
        </tr>
        <tr><th>Match Reason</th><td>{{ contact.match_reason or "—" }}</td></tr>
        <tr><th>Total Interactions</th><td>{{ contact.total_interactions }}</td></tr>
        <tr><th>First Seen</th><td>{{ contact.first_interaction }}</td></tr>
        <tr><th>Last Active</th><td>{{ contact.latest_interaction }}</td></tr>
        <tr>
          <th>Zoho CRM</th>
          <td id="zoho-status">
            {% if contact.zoho_id %}
            <span class="status-badge status-icp">Synced</span>
            <small class="text-muted">ID: {{ contact.zoho_id }} &mdash; {{ contact.zoho_synced_at.strftime('%Y-%m-%d %H:%M') if contact.zoho_synced_at else '' }}</small>
            {% elif contact.status == 'ICP' %}
            <span class="status-badge status-review">Pending</span>
            {% if role == 'admin' %}
            <button class="btn btn-sm btn-primary"
                    hx-post="{{ url_for('zoho.sync_one', contact_id=contact.id) }}"
                    hx-target="#zoho-status"
                    hx-swap="innerHTML">Sync now</button>
            {% endif %}
            {% else %}
            <span class="text-muted">N/A</span>
            {% endif %}
          </td>
        </tr>
      </table>
    </div>
  </div>

  <div class="card">
    <div class="card-header"><h3>Notes</h3></div>
    <div class="card-body">
      {% if role in ('editor', 'admin') %}
      <form hx-patch="{{ url_for('contacts.update_notes', contact_id=contact.id) }}"
            hx-target="#notes-feedback"
            hx-swap="innerHTML">
        <textarea name="notes" rows="5">{{ contact.notes }}</textarea>
        <button type="submit" class="btn btn-primary btn-sm">Save Notes</button>
        <span id="notes-feedback"></span>
      </form>
      {% else %}
      <p>{{ contact.notes or "No notes." }}</p>
      {% endif %}
    </div>
  </div>
</div>

{# ── Interaction Timeline ── #}
<div class="card">
  <div class="card-header"><h2>Interaction History ({{ interactions|length }})</h2></div>
  <div class="overflow-auto">
    <table>
      <thead>
        <tr><th>Date</th><th>Type</th><th>Post</th><th>Executive</th></tr>
      </thead>
      <tbody>
        {% for i in interactions %}
        <tr>
          <td>{{ i.date }}</td>
          <td>{{ i.type }}</td>
          <td>{{ i.post_hook[:60] }}{% if i.post_hook|length > 60 %}…{% endif %}</td>
          <td>{{ i.source_profile }}</td>
        </tr>
        {% else %}
        <tr><td colspan="4">No interactions recorded.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}