{% extends "base.html" %}
{% block title %}沟通记录 - 本地贷款CRM{% endblock %}
{% block header_title %}沟通记录{% endblock %}
{% block content %}

<!-- Filters -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-3 mb-4">
    <form method="GET" class="flex flex-wrap items-center gap-2">
        <select name="customer_id" class="px-3 py-2 border border-gray-300 rounded-lg text-sm min-w-[120px]">
            <option value="">全部客户</option>
            {% for c in customers %}
            <option value="{{ c.id }}" {% if customer_id == c.id %}selected{% endif %}>{{ c.name }}</option>
            {% endfor %}
        </select>
        <div class="flex items-center gap-1.5">
            <span class="text-xs text-gray-400">最近</span>
            {% for d in [1, 3, 7, 15] %}
            <button type="submit" name="days" value="{{ d }}"
                    class="text-xs px-2.5 py-1.5 rounded-full border transition-colors
                           {% if days == d %}bg-primary text-white border-primary{% else %}border-gray-200 text-gray-500 hover:border-primary hover:text-primary{% endif %}">
                {{ '今天' if d == 1 else d ~ '天' }}
            </button>
            {% endfor %}
        </div>
        <a href="/communications" class="text-xs text-gray-400 hover:text-gray-600 ml-2">重置</a>
        <a href="/communications/new" class="ml-auto px-3 py-1.5 bg-primary text-white text-sm rounded-lg hover:bg-blue-700">+ 新增沟通</a>
    </form>
</div>

<!-- Timeline -->
{% if timeline %}
<div class="space-y-3">
    {% for item in timeline %}
    {% if item.type == 'comm' %}
    {% set c = item.data %}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <div class="flex items-start justify-between mb-2">
            <div class="flex items-center gap-2 flex-wrap">
                <span class="text-lg">{% if c.comm_type == '电话' %}📞{% elif c.comm_type == '微信' %}💬{% elif c.comm_type == '面谈' %}🤝{% elif c.comm_type == '短信' %}📱{% else %}📝{% endif %}</span>
                <a href="/customers/{{ c.customer_id }}" class="font-medium text-sm text-primary hover:underline">{{ c.customer_name }}</a>
                <span class="text-xs px-1.5 py-0.5 rounded-full bg-gray-100 text-gray-500">{{ c.comm_type }} · {{ c.direction }}</span>
                {% if c.mood %}<span class="text-xs text-gray-400">情绪: {{ c.mood }}</span>{% endif %}
            </div>
            <span class="text-xs text-gray-400 whitespace-nowrap">{{ c.created_at[:16] if c.created_at else '' }}</span>
        </div>
        {% if c.summary %}<p class="text-sm text-gray-700 whitespace-pre-wrap">{{ c.summary }}</p>{% else %}<p class="text-sm text-gray-400">(无摘要)</p>{% endif %}
        {% if c.next_contact_at %}<p class="text-xs text-gray-400 mt-2">下次联系: {{ c.next_contact_at[:16] if c.next_contact_at else '' }}</p>{% endif %}
    </div>
    {% else %}
    {% set f = item.data %}
    <div class="bg-white rounded-xl shadow-sm border border-l-4
                {% if f.status == 'completed' %}border-l-success
                {% elif f.status == 'cancelled' %}border-l-gray-300 opacity-60
                {% else %}border-l-warning{% endif %}
                border-gray-100 p-4">
        <div class="flex items-start justify-between mb-2">
            <div class="flex items-center gap-2 flex-wrap">
                <span class="text-lg">📅</span>
                <a href="/customers/{{ f.customer_id }}" class="font-medium text-sm text-primary hover:underline">{{ f.customer_name }}</a>
                <span class="text-xs px-1.5 py-0.5 rounded-full
                    {% if f.status == 'completed' %}bg-green-100 text-green-700
                    {% elif f.status == 'cancelled' %}bg-gray-100 text-gray-500
                    {% elif f.status == 'overdue' %}bg-red-100 text-red-700
                    {% else %}bg-amber-100 text-amber-700{% endif %}">回访</span>
                <span class="text-xs px-1.5 py-0.5 rounded-full bg-gray-100 text-gray-500">
                    {% if f.status == 'completed' %}已完成{% elif f.status == 'cancelled' %}已取消{% else %}待回访{% endif %}
                </span>
                {% if f.method %}<span class="text-xs text-gray-400">{{ f.method }}</span>{% endif %}
            </div>
            <span class="text-xs text-gray-400 whitespace-nowrap">{{ f.planned_at[:16] if f.planned_at else '' }}</span>
        </div>
        {% if f.purpose %}<p class="text-xs text-gray-500 mb-1">目的: {{ f.purpose }}</p>{% endif %}
        {% if f.result_summary %}<p class="text-sm text-gray-700 whitespace-pre-wrap">{{ f.result_summary }}</p>{% endif %}
        {% if f.status == 'pending' %}
        <div class="mt-2">
            <a href="/followups/{{ f.id }}/edit" class="text-xs text-primary hover:underline">填写回访结果 →</a>
        </div>
        {% endif %}
    </div>
    {% endif %}
    {% endfor %}
</div>
{% else %}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 text-center py-16">
    <p class="text-4xl mb-4">💬</p>
    <p class="text-gray-400">暂无沟通或回访记录</p>
</div>
{% endif %}

{% endblock %}