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

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

<div class="page-header">
  <div>
    <h1>{{ company.company }}</h1>
    <p class="text-muted mb-0">Company profile</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>Tier</th>
          <td id="tier-display">
            {% if company.tier %}
            {% set tier_css = 'tier' + company.tier|lower|replace(' ', '') %}
            <span class="tier-badge {{ tier_css }}">{{ tier_labels.get(company.tier, company.tier) }}</span>
            {% else %}
            —
            {% endif %}
            {% 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('companies.change_tier', company_name=company.company) }}"
                      hx-target="#tier-display"
                      hx-swap="innerHTML">
                  <select name="tier">
                    <option value="" {% if not company.tier %}selected{% endif %}>— None —</option>
                    <option value="1" {% if company.tier == '1' %}selected{% endif %}>Tier 1 ICP</option>
                    <option value="2" {% if company.tier == '2' %}selected{% endif %}>Tier 2 ICP</option>
                    <option value="Not ICP" {% if company.tier == 'Not ICP' %}selected{% endif %}>Not ICP</option>
                  </select>
                  <button type="submit" class="btn btn-primary btn-sm">Save</button>
                </form>
              </div>
            </div>
            {% endif %}
          </td>
        </tr>
        <tr><th>ICP Contacts</th><td>{{ company.icp_count }}</td></tr>
        <tr><th>POI Contacts</th><td>{{ company.poi_count }}</td></tr>
        <tr><th>Total Interactions</th><td>{{ company.total_interactions }}</td></tr>
      </table>
    </div>
  </div>

  <div class="card">
    <div class="card-header"><h3>Notes</h3></div>
    <div class="card-body">
      <p>{{ company.notes or "No notes." }}</p>
    </div>
  </div>
</div>

{# ── ICP + POI Contacts ── #}
<div class="card">
  <div class="card-header"><h2>ICP + POI Contacts ({{ company.contacts|length }})</h2></div>
  <div class="overflow-auto">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Title</th>
          <th>Status</th>
          <th>Total Interactions</th>
          <th>Last Active</th>
        </tr>
      </thead>
      <tbody>
        {% for c in company.contacts %}
        <tr>
          <td><a href="{{ url_for('contacts.detail', contact_id=c.id) }}">{{ c.name }}</a></td>
          <td>{{ c.title[:50] }}{% if c.title|length > 50 %}…{% endif %}</td>
          <td><span class="status-badge status-{{ c.status|lower|replace(' ', '') }}">{{ c.status }}</span></td>
          <td>{{ c.total_interactions }}</td>
          <td>{{ c.latest_interaction }}</td>
        </tr>
        {% else %}
        <tr><td colspan="5">No ICP or POI contacts at this company.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}