{% extends "base.html" %}
{% block title %}产品匹配 - 本地贷款CRM{% endblock %}
{% block header_title %}客户 × 产品匹配{% endblock %}
{% block content %}

<div class="flex items-center gap-2 mb-4">
    <a href="/products" class="text-sm px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600">产品列表</a>
    <a href="/products/match" class="text-sm px-3 py-1.5 rounded-lg bg-gray-900 text-white">客户匹配</a>
    <a href="/products/rate-sensitive" class="text-sm px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600">利率敏感</a>
</div>

<div class="flex flex-wrap gap-2 mb-4">
    <a href="/products/match" class="text-xs px-3 py-1.5 rounded-full {% if not stage %}bg-gray-900 text-white{% else %}bg-gray-100 text-gray-600{% endif %}">全部客户</a>
    <a href="/products/match?stage=有意向" class="text-xs px-3 py-1.5 rounded-full {% if stage == '有意向' %}bg-gray-900 text-white{% else %}bg-gray-100 text-gray-600{% endif %}">意向客户</a>
    <a href="/products/match?stage=已拒绝" class="text-xs px-3 py-1.5 rounded-full {% if stage == '已拒绝' %}bg-gray-900 text-white{% else %}bg-gray-100 text-gray-600{% endif %}">已拒绝客户</a>
</div>

{% if enriched %}
<div class="space-y-4">
    {% for item in enriched %}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <div class="flex items-center justify-between mb-3">
            <div>
                <a href="/customers/{{ item.customer.id }}" class="font-medium text-sm text-primary hover:underline">{{ item.customer.name }}</a>
                <span class="text-xs text-gray-400 ml-2">{{ item.customer.avatar_stage }}</span>
            </div>
            <span class="text-xs text-gray-400">{{ item.matches|length }}个匹配产品</span>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
            {% for p, score, reasons, warnings in item.matches[:6] %}
            <div class="border rounded-lg p-3 {% if score >= 80 %}border-green-200 bg-green-50{% elif score >= 50 %}border-yellow-200 bg-yellow-50{% else %}border-gray-200 bg-gray-50{% endif %}">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-sm font-medium">{{ p.name }}</span>
                    <span class="text-xs font-bold {% if score >= 80 %}text-green-700{% elif score >= 50 %}text-yellow-700{% else %}text-gray-500{% endif %}">{{ score }}分</span>
                </div>
                <p class="text-xs text-gray-500">利率: {{ p.rate_min or '?' }}%-{{ p.rate_max or '?' }}% · {{ p.amount_min or '?' }}-{{ p.amount_max or '?' }}万</p>
                {% if warnings %}
                <div class="mt-1.5">
                    {% for w in warnings[:2] %}
                    <p class="text-[10px] {% if score >= 50 %}text-yellow-600{% else %}text-red-500{% endif %}">⚠ {{ w[:60] }}</p>
                    {% endfor %}
                </div>
                {% endif %}
                {% if reasons %}
                <div class="mt-1">
                    {% for r in reasons[:1] %}
                    <p class="text-[10px] text-green-600">✓ {{ r[:60] }}</p>
                    {% endfor %}
                </div>
                {% endif %}
                <a href="/products/match/{{ item.customer.id }}" class="text-[10px] text-primary hover:underline mt-1.5 block">详细分析 →</a>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="text-center py-16">
    <p class="text-4xl mb-4">🔍</p>
    <p class="text-gray-400">暂无匹配结果。请先添加产品并完善客户画像。</p>
    <a href="/products" class="inline-flex mt-4 px-4 py-2 bg-primary text-white text-sm rounded-lg">管理产品</a>
</div>
{% endif %}

{% endblock %}