{% extends "base.html" %}
{% block title %}回访管理 - 本地贷款CRM{% endblock %}
{% block header_title %}回访管理{% endblock %}
{% block content %}

<div class="space-y-6">
    <!-- 1. Overdue -->
    <div>
        <div class="flex items-center gap-2 mb-3">
            <span class="w-2 h-2 rounded-full bg-danger"></span>
            <h2 class="font-semibold text-danger">过期未回访</h2>
            <span class="text-xs text-danger bg-red-50 px-2 py-0.5 rounded-full">{{ overdue|length }}</span>
        </div>
        {% if overdue %}
        <div class="space-y-2">
            {% for f in overdue %}
            <a href="/followups/{{ f.id }}/edit"
               class="block bg-red-50 rounded-xl border border-red-200 p-3 hover:shadow-md transition-all">
                <div class="flex items-center justify-between">
                    <div class="min-w-0">
                        <span class="font-medium text-sm text-gray-900">{{ f.customer_name or '未命名客户' }}</span>
                        {% if f.customer_phone %}<span class="text-xs text-gray-400 ml-2">{{ f.customer_phone }}</span>{% endif %}
                    </div>
                    <span class="text-xs text-red-500 whitespace-nowrap ml-3">过期 {{ f.planned_at[:10] if f.planned_at else '' }}</span>
                </div>
                <div class="flex items-center gap-3 mt-1 text-xs text-gray-500">
                    <span>{{ f.method or '电话' }}</span>
                    {% if f.purpose %}<span>{{ f.purpose }}</span>{% endif %}
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-gray-400 bg-white rounded-xl border border-gray-100 p-4 text-center">暂无过期回访</p>
        {% endif %}
    </div>

    <!-- 2. Today -->
    <div>
        <div class="flex items-center gap-2 mb-3">
            <span class="w-2 h-2 rounded-full bg-primary"></span>
            <h2 class="font-semibold text-gray-900">今日待回访</h2>
            <span class="text-xs text-primary bg-blue-50 px-2 py-0.5 rounded-full">{{ today|length }}</span>
        </div>
        {% if today %}
        <div class="space-y-2">
            {% for f in today %}
            <a href="/followups/{{ f.id }}/edit"
               class="block bg-blue-50 rounded-xl border border-blue-200 p-3 hover:shadow-md transition-all">
                <div class="flex items-center justify-between">
                    <div class="min-w-0">
                        <span class="font-medium text-sm text-gray-900">{{ f.customer_name or '未命名客户' }}</span>
                        {% if f.customer_phone %}<span class="text-xs text-gray-400 ml-2">{{ f.customer_phone }}</span>{% endif %}
                    </div>
                    <span class="text-xs text-primary font-medium whitespace-nowrap ml-3">
                        {{ f.planned_at[11:16] if f.planned_at and f.planned_at|length > 10 else '' }}
                    </span>
                </div>
                <div class="flex items-center gap-3 mt-1 text-xs text-gray-500">
                    <span>{{ f.method or '电话' }}</span>
                    {% if f.purpose %}<span>{{ f.purpose }}</span>{% endif %}
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-gray-400 bg-white rounded-xl border border-gray-100 p-4 text-center">今日无待回访</p>
        {% endif %}
    </div>

    <!-- 3. Next 3 days -->
    <div>
        <div class="flex items-center gap-2 mb-3">
            <span class="w-2 h-2 rounded-full bg-warning"></span>
            <h2 class="font-semibold text-gray-900">未来三天待回访</h2>
            <span class="text-xs text-warning bg-amber-50 px-2 py-0.5 rounded-full">{{ upcoming|length }}</span>
        </div>
        {% if upcoming %}
        <div class="space-y-2">
            {% for f in upcoming %}
            <a href="/followups/{{ f.id }}/edit"
               class="block bg-white rounded-xl border border-gray-100 p-3 hover:shadow-md hover:border-warning/30 transition-all">
                <div class="flex items-center justify-between">
                    <div class="min-w-0">
                        <span class="font-medium text-sm text-gray-900">{{ f.customer_name or '未命名客户' }}</span>
                        {% if f.customer_phone %}<span class="text-xs text-gray-400 ml-2">{{ f.customer_phone }}</span>{% endif %}
                    </div>
                    <span class="text-xs text-gray-500 whitespace-nowrap ml-3">{{ f.planned_at[:10] if f.planned_at else '' }}</span>
                </div>
                <div class="flex items-center gap-3 mt-1 text-xs text-gray-500">
                    <span>{{ f.method or '电话' }}</span>
                    {% if f.purpose %}<span>{{ f.purpose }}</span>{% endif %}
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-gray-400 bg-white rounded-xl border border-gray-100 p-4 text-center">未来三天无待回访</p>
        {% endif %}
    </div>
</div>

{% endblock %}