{% extends "base.html" %}
{% block title %}统计分析 - 本地贷款CRM{% endblock %}
{% block header_title %}统计分析{% endblock %}
{% block content %}

<div class="space-y-6">

<!-- 1. Stage Funnel -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6">
    <h2 class="font-semibold text-gray-900 mb-4">客户阶段漏斗</h2>
    <div class="flex items-end gap-1 md:gap-3 overflow-x-auto pb-2">
        {% set max_cnt = funnel_data|map(attribute='cnt')|max|default(1) %}
        {% for f in funnel_data %}
        <div class="flex flex-col items-center min-w-[60px]">
            <span class="text-sm font-bold text-gray-900">{{ f.cnt }}</span>
            <div class="w-12 md:w-16 rounded-t-lg mt-1" style="height: {{ (f.cnt / max_cnt * 120)|int if max_cnt > 0 else 0 }}px; background: {% if f.avatar_stage == '已放款' %}#059669{% elif f.avatar_stage == '已拒绝' %}#DC2626{% elif f.avatar_stage == '沉睡' %}#6B7280{% else %}#2563EB{% endif %}; min-height: 4px;"></div>
            <span class="text-[10px] text-gray-500 mt-1 text-center whitespace-nowrap">{{ f.avatar_stage }}</span>
        </div>
        {% endfor %}
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- 2. Application results -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6">
        <h2 class="font-semibold text-gray-900 mb-3">贷款申请结果</h2>
        <div class="flex items-center gap-4">
            <div class="flex-1 text-center">
                <div class="text-2xl font-bold text-success">{{ app_result.disbursed or 0 }}</div>
                <div class="text-xs text-gray-500">已放款</div>
            </div>
            <div class="flex-1 text-center">
                <div class="text-2xl font-bold text-danger">{{ app_result.rejected or 0 }}</div>
                <div class="text-xs text-gray-500">已拒绝</div>
            </div>
            <div class="flex-1 text-center">
                <div class="text-2xl font-bold text-primary">{{ app_result.ongoing or 0 }}</div>
                <div class="text-xs text-gray-500">进行中</div>
            </div>
        </div>
    </div>

    <!-- 3. Profile completeness -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6">
        <h2 class="font-semibold text-gray-900 mb-3">画像完整度</h2>
        {% set total = profile_stats.total or 1 %}
        <div class="space-y-2">
            {% set fields = [
                ('has_income', '收入范围'),
                ('has_willingness', '贷款意愿'),
                ('has_credit', '征信等级'),
                ('has_asset', '资产信息'),
                ('has_rate', '利率敏感度'),
                ('has_purpose', '资金用途')
            ] %}
            {% for key, label in fields %}
            <div class="flex items-center gap-2">
                <span class="text-xs text-gray-600 w-20">{{ label }}</span>
                <div class="flex-1 h-4 bg-gray-100 rounded-full overflow-hidden">
                    {% set pct = (profile_stats[key] / total * 100)|int if total > 0 else 0 %}
                    <div class="h-full rounded-full {% if pct >= 70 %}bg-success{% elif pct >= 30 %}bg-warning{% else %}bg-gray-300{% endif %}" style="width: {{ pct }}%"></div>
                </div>
                <span class="text-xs text-gray-400 w-10 text-right">{{ pct }}%</span>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- 4. Rejection distribution -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6">
        <h2 class="font-semibold text-gray-900 mb-3">拒绝原因分布</h2>
        <div class="space-y-1.5 max-h-64 overflow-y-auto">
            {% for r in rejection_data %}
            {% if r.cnt > 0 %}
            <div class="flex items-center gap-2 text-sm">
                <span class="text-xs text-gray-500 w-16">{{ r.category }}</span>
                <span class="flex-1 text-gray-700">{{ r.sub_category }}</span>
                <span class="font-bold text-gray-900">{{ r.cnt }}</span>
            </div>
            {% endif %}
            {% endfor %}
            {% if rejection_data|selectattr('cnt', 'gt', 0)|list|length == 0 %}
            <p class="text-sm text-gray-400 text-center py-4">暂无拒绝记录</p>
            {% endif %}
        </div>
    </div>

    <!-- 5. Communication types -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6">
        <h2 class="font-semibold text-gray-900 mb-3">近30天沟通方式</h2>
        <div class="space-y-2">
            {% set total_comm = comm_data|map(attribute='cnt')|sum|default(1) %}
            {% for c in comm_data %}
            <div class="flex items-center gap-2 text-sm">
                <span class="text-gray-600 w-12">{{ c.comm_type }}</span>
                <div class="flex-1 h-5 bg-gray-100 rounded-full overflow-hidden">
                    {% set pct = (c.cnt / total_comm * 100)|int %}
                    <div class="h-full bg-primary/70 rounded-full" style="width: {{ pct }}%"></div>
                </div>
                <span class="text-xs text-gray-500 w-10">{{ c.cnt }}次</span>
            </div>
            {% endfor %}
            {% if not comm_data %}
            <p class="text-sm text-gray-400 text-center py-4">暂无近期沟通</p>
            {% endif %}
        </div>
    </div>

    <!-- 6. Monthly trend -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6">
        <h2 class="font-semibold text-gray-900 mb-3">近6月新增客户</h2>
        {% set max_m = monthly_data|map(attribute='cnt')|max|default(1) %}
        <div class="flex items-end gap-2 h-32">
            {% for m in monthly_data %}
            <div class="flex flex-col items-center flex-1">
                <span class="text-xs font-bold text-gray-900">{{ m.cnt }}</span>
                <div class="w-full rounded-t bg-primary/70 mt-1" style="height: {{ (m.cnt / max_m * 100)|int if max_m > 0 else 0 }}px; min-height: 2px;"></div>
                <span class="text-[10px] text-gray-400 mt-1">{{ m.month }}</span>
            </div>
            {% endfor %}
            {% if not monthly_data %}
            <p class="text-sm text-gray-400 w-full text-center self-center">暂无数据</p>
            {% endif %}
        </div>
    </div>

    <!-- 7. Source channel -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6">
        <h2 class="font-semibold text-gray-900 mb-3">来源渠道分布</h2>
        <div class="space-y-2">
            {% for s in source_data %}
            <div class="flex items-center gap-2 text-sm">
                <span class="text-xs text-gray-600 w-16">{{ s.source }}</span>
                <div class="flex-1 h-5 bg-gray-100 rounded-full overflow-hidden">
                    {% set total_src = source_data|map(attribute='cnt')|sum|default(1) %}
                    {% set pct = (s.cnt / total_src * 100)|int %}
                    <div class="h-full rounded-full" style="width: {{ pct }}%; background: {% if s.source == '陌拜' %}#3B82F6{% elif s.source == '转介绍' %}#10B981{% else %}#8B5CF6{% endif %}"></div>
                </div>
                <span class="text-xs text-gray-500">{{ s.cnt }}个</span>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- 8. Top tags -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6">
    <h2 class="font-semibold text-gray-900 mb-3">标签使用排行</h2>
    <div class="flex flex-wrap gap-2">
        {% for t in tag_data %}
        <div class="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-full border bg-white">
            <span class="text-gray-400">{{ t.category }}·</span>
            <span>{{ t.name }}</span>
            <span class="font-bold text-gray-500">{{ t.cnt }}</span>
        </div>
        {% endfor %}
    </div>
</div>

</div>

{% endblock %}