{% extends "base.html" %}
{% block title %}推荐联系客户 - 本地贷款CRM{% endblock %}
{% block header_title %}推荐联系客户{% endblock %}
{% block extra_js %}
<style>[x-cloak] { display: none !important; }</style>
{% endblock %}
{% block content %}

<div class="space-y-6">
    <!-- 1. Birthday -->
    <div>
        <div class="flex items-center gap-2 mb-3">
            <span class="w-2 h-2 rounded-full bg-pink-500"></span>
            <h2 class="font-semibold text-pink-600">🎂 当天生日</h2>
            <span class="text-xs text-pink-600 bg-pink-50 px-2 py-0.5 rounded-full">{{ grouped.get('birthday', [])|length }}</span>
        </div>
        {% set birthdays = grouped.get('birthday', []) %}
        {% if birthdays %}
        <div class="space-y-2">
            {% for r in birthdays %}
            <a href="/customers/{{ r.customer_id }}"
               class="block bg-pink-50 rounded-xl border border-pink-200 p-3 hover:shadow-md transition-all"
               x-data="{ open: false }">
                <div class="flex items-center justify-between">
                    <div class="min-w-0">
                        <span class="font-medium text-sm text-gray-900">{{ r.customer_name or '未命名客户' }}</span>
                        {% if r.customer_phone %}<span class="text-xs text-gray-400 ml-2">{{ r.customer_phone }}</span>{% endif %}
                    </div>
                    <span class="text-xs text-pink-600 font-medium whitespace-nowrap ml-3 bg-pink-100 px-2 py-0.5 rounded-full">{{ r.reason_detail }}</span>
                </div>
                {% if r.customer_company %}
                <div class="mt-1 text-xs text-gray-500">{{ r.customer_company }}</div>
                {% endif %}
                {% if r.sales_script %}
                <div class="mt-2 pt-2 border-t border-pink-200">
                    <button @click="open = !open; $event.preventDefault()"
                            class="text-xs text-pink-600 hover:text-pink-800 font-medium flex items-center gap-1">
                        <span x-text="open ? '收起话术 ▲' : '查看话术 ▼'"></span>
                    </button>
                    <div x-show="open" x-cloak
                         class="mt-1.5 text-sm text-gray-700 bg-white/80 rounded-lg p-2.5 leading-relaxed">
                        {{ r.sales_script }}
                    </div>
                </div>
                {% endif %}
            </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. Next Contact -->
    <div>
        <div class="flex items-center gap-2 mb-3">
            <span class="w-2 h-2 rounded-full bg-blue-500"></span>
            <h2 class="font-semibold text-blue-600">📞 下次联系提醒</h2>
            <span class="text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">{{ grouped.get('next_contact', [])|length }}</span>
        </div>
        {% set next_contacts = grouped.get('next_contact', []) %}
        {% if next_contacts %}
        <div class="space-y-2">
            {% for r in next_contacts %}
            <a href="/customers/{{ r.customer_id }}"
               class="block bg-blue-50 rounded-xl border border-blue-200 p-3 hover:shadow-md transition-all"
               x-data="{ open: false }">
                <div class="flex items-center justify-between">
                    <div class="min-w-0">
                        <span class="font-medium text-sm text-gray-900">{{ r.customer_name or '未命名客户' }}</span>
                        {% if r.customer_phone %}<span class="text-xs text-gray-400 ml-2">{{ r.customer_phone }}</span>{% endif %}
                    </div>
                    <span class="text-xs text-blue-600 font-medium whitespace-nowrap ml-3 bg-blue-100 px-2 py-0.5 rounded-full">{{ r.reason_detail }}</span>
                </div>
                {% if r.customer_company %}
                <div class="mt-1 text-xs text-gray-500">{{ r.customer_company }}</div>
                {% endif %}
                {% if r.sales_script %}
                <div class="mt-2 pt-2 border-t border-blue-200">
                    <button @click="open = !open; $event.preventDefault()"
                            class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center gap-1">
                        <span x-text="open ? '收起话术 ▲' : '查看话术 ▼'"></span>
                    </button>
                    <div x-show="open" x-cloak
                         class="mt-1.5 text-sm text-gray-700 bg-white/80 rounded-lg p-2.5 leading-relaxed">
                        {{ r.sales_script }}
                    </div>
                </div>
                {% endif %}
            </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. Dormant -->
    <div>
        <div class="flex items-center gap-2 mb-3">
            <span class="w-2 h-2 rounded-full bg-amber-500"></span>
            <h2 class="font-semibold text-amber-600">💤 沉睡客户</h2>
            <span class="text-xs text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full">{{ grouped.get('dormant', [])|length }}</span>
        </div>
        {% set dormant = grouped.get('dormant', []) %}
        {% if dormant %}
        <div class="space-y-2">
            {% for r in dormant %}
            <a href="/customers/{{ r.customer_id }}"
               class="block bg-amber-50 rounded-xl border border-amber-200 p-3 hover:shadow-md transition-all"
               x-data="{ open: false }">
                <div class="flex items-center justify-between">
                    <div class="min-w-0">
                        <span class="font-medium text-sm text-gray-900">{{ r.customer_name or '未命名客户' }}</span>
                        {% if r.customer_phone %}<span class="text-xs text-gray-400 ml-2">{{ r.customer_phone }}</span>{% endif %}
                    </div>
                    <span class="text-xs text-amber-600 font-medium whitespace-nowrap ml-3 bg-amber-100 px-2 py-0.5 rounded-full">{{ r.reason_detail }}</span>
                </div>
                {% if r.customer_company %}
                <div class="mt-1 text-xs text-gray-500">{{ r.customer_company }}</div>
                {% endif %}
                {% if r.sales_script %}
                <div class="mt-2 pt-2 border-t border-amber-200">
                    <button @click="open = !open; $event.preventDefault()"
                            class="text-xs text-amber-600 hover:text-amber-800 font-medium flex items-center gap-1">
                        <span x-text="open ? '收起话术 ▲' : '查看话术 ▼'"></span>
                    </button>
                    <div x-show="open" x-cloak
                         class="mt-1.5 text-sm text-gray-700 bg-white/80 rounded-lg p-2.5 leading-relaxed">
                        {{ r.sales_script }}
                    </div>
                </div>
                {% endif %}
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-gray-400 bg-white rounded-xl border border-gray-100 p-4 text-center">没有沉睡超过90天的客户</p>
        {% endif %}
    </div>
</div>

{% endblock %}