{% extends "base.html" %}

{% block title %}{{ _('Team Contacts & Messaging') }}{% endblock %}

{% block content %}
<div class="page-header">
    <h2><i class="fas fa-comments"></i> {{ _('Team Contacts & Messaging') }}</h2>
</div>

<div class="row mb-4">
    <div class="col-md-6">
        <div class="input-group">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
            <input type="text" class="form-control" id="contact-search"
                   placeholder="{{ _('Search by name, role, site...') }}" oninput="filterContacts()">
        </div>
    </div>
    <div class="col-md-3">
        <select class="form-select" id="role-filter" onchange="filterContacts()">
            <option value="">{{ _('All roles') }}</option>
            <option value="ADMIN">Admin</option>
            <option value="OPERATOR">{{ _('Operator') }}</option>
            <option value="VIEWER">{{ _('Viewer') }}</option>
        </select>
    </div>
    <div class="col-md-3 text-end">
        <span class="badge bg-info fs-6" id="contact-count">{{ contacts|length }} {{ _('contacts') }}</span>
    </div>
</div>

<div class="row" id="contacts-grid">
{% for c in contacts %}
<div class="col-lg-4 col-md-6 mb-3 contact-card"
     data-name="{{ c.full_name or c.username }}"
     data-role="{{ c.role }}"
     data-sites="{{ c.sites|join(',') if c.sites else '' }}">
    <div class="card h-100 shadow-sm">
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
                     style="width:48px;height:48px;font-size:1.2rem;flex-shrink:0;">
                    {{ (c.full_name or c.username)[0]|upper }}
                </div>
                <div class="ms-3">
                    <h5 class="mb-0">{{ c.full_name or c.username }}</h5>
                    <span class="badge bg-{% if c.role == 'ADMIN' %}danger{% elif c.role == 'OPERATOR' %}primary{% else %}secondary{% endif %}">
                        {{ c.role }}
                    </span>
                </div>
            </div>

            <!-- Contact Actions -->
            <div class="d-flex flex-wrap gap-2 mb-3">
                {% if c.email %}
                <a href="mailto:{{ c.email }}" class="btn btn-outline-primary btn-sm" title="{{ _('Send Email') }}">
                    <i class="fas fa-envelope"></i> Email
                </a>
                {% endif %}
                {% if c.telegram_username %}
                <a href="https://t.me/{{ c.telegram_username }}" target="_blank"
                   class="btn btn-sm" style="background:#0088cc;color:white;" title="{{ _('Telegram Message') }}">
                    <i class="fab fa-telegram-plane"></i> {{ _('Message') }}
                </a>
                <a href="https://t.me/{{ c.telegram_username }}?voicechat" target="_blank"
                   class="btn btn-sm" style="background:#0088cc;color:white;" title="{{ _('Telegram Call') }}">
                    <i class="fas fa-phone"></i> {{ _('Call') }}
                </a>
                {% endif %}
                {% if c.phone %}
                <a href="tel:{{ c.phone }}" class="btn btn-outline-success btn-sm" title="{{ _('Phone Call') }}">
                    <i class="fas fa-phone"></i> {{ c.phone }}
                </a>
                <a href="https://wa.me/{{ c.phone|replace('+','')|replace(' ','') }}" target="_blank"
                   class="btn btn-sm" style="background:#25d366;color:white;" title="WhatsApp">
                    <i class="fab fa-whatsapp"></i> WhatsApp
                </a>
                {% endif %}
                {% if not c.email and not c.telegram_username and not c.phone %}
                <span class="text-muted"><i class="fas fa-info-circle"></i> {{ _('No contact info available') }}</span>
                {% endif %}
            </div>

            <!-- Stats -->
            {% if c.us_count > 0 %}
            <div class="d-flex gap-3 mb-2">
                <small><i class="fas fa-map-marker-alt text-primary"></i> {{ c.sites_count }} {{ _('sites') }}</small>
                <small><i class="fas fa-layer-group text-info"></i> {{ c.us_count }} US</small>
                {% if c.years_range %}
                <small><i class="fas fa-calendar text-success"></i> {{ c.years_range }}</small>
                {% endif %}
            </div>
            {% endif %}

            <!-- Sites worked on -->
            {% if c.sites and c.sites|length > 0 %}
            <div class="mt-2">
                <small class="text-muted fw-bold">{{ _('Sites') }}:</small>
                <div class="d-flex flex-wrap gap-1 mt-1">
                    {% for site in c.sites[:8] %}
                    <a href="{{ url_for('sites_list') }}?search={{ site }}" class="badge bg-light text-dark text-decoration-none"
                       style="font-size:0.75rem;">{{ site|replace('_',' ')|truncate(30) }}</a>
                    {% endfor %}
                    {% if c.sites|length > 8 %}
                    <span class="badge bg-light text-muted">+{{ c.sites|length - 8 }}</span>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endfor %}
</div>

{% if not contacts %}
<div class="alert alert-info">
    <i class="fas fa-info-circle me-2"></i>
    {{ _('No contacts found. Users will appear here when they have contact information (email, Telegram, phone) or have excavation activity.') }}
</div>
{% endif %}

<div class="card mt-4">
    <div class="card-header"><h5 class="mb-0"><i class="fab fa-telegram-plane"></i> {{ _('Setup Telegram') }}</h5></div>
    <div class="card-body">
        <p>{{ _('To enable Telegram messaging and calls, each user needs to set their Telegram username in their profile.') }}</p>
        <p>{{ _('Admin can set it in User Management, or users can set it themselves.') }}</p>
        <p class="mb-0"><small class="text-muted">{{ _('WhatsApp links are generated automatically from the phone number field.') }}</small></p>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function filterContacts() {
    const search = document.getElementById('contact-search').value.toLowerCase();
    const roleFilter = document.getElementById('role-filter').value;
    let visible = 0;
    document.querySelectorAll('.contact-card').forEach(card => {
        const name = card.dataset.name.toLowerCase();
        const role = card.dataset.role;
        const sites = (card.dataset.sites || '').toLowerCase();
        const matchSearch = !search || name.includes(search) || sites.includes(search);
        const matchRole = !roleFilter || role === roleFilter;
        card.style.display = matchSearch && matchRole ? '' : 'none';
        if (matchSearch && matchRole) visible++;
    });
    document.getElementById('contact-count').textContent = visible + ' {{ _("contacts") }}';
}
</script>
{% endblock %}