{% extends "base.html" %}
{% block title %}首页 - 本地贷款CRM{% endblock %}
{% block header_title %}仪表盘{% endblock %}
{% block content %}

<!-- Stats cards -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
    <a href="/customers" class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md hover:border-primary/30 transition-all block">
        <div class="text-2xl font-bold text-gray-900">{{ total_customers }}</div>
        <div class="text-xs text-gray-500 mt-1">总客户数</div>
    </a>
    <a href="/recommendations" class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md hover:border-rose-300 transition-all block">
        <div class="text-2xl font-bold text-rose-500">{{ rec_count }}</div>
        <div class="text-xs text-gray-500 mt-1">今日推荐</div>
    </a>
    <a href="/customers?stage=有意向" class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md hover:border-success/30 transition-all block">
        <div class="text-2xl font-bold text-success">{{ stage_counts.get('有意向', 0) }}</div>
        <div class="text-xs text-gray-500 mt-1">意向客户</div>
    </a>
    <a href="/customers?stage=审批中" class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md hover:border-warning/30 transition-all block">
        <div class="text-2xl font-bold text-warning">{{ stage_counts.get('审批中', 0) }}</div>
        <div class="text-xs text-gray-500 mt-1">审批中</div>
    </a>
    <a href="/followups" class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md hover:border-danger/30 transition-all block">
        <div class="text-2xl font-bold {% if today_fu > 0 %}text-danger{% else %}text-gray-900{% endif %}">{{ today_fu }}</div>
        <div class="text-xs text-gray-500 mt-1">今日待回访</div>
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Recent communications -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <h2 class="font-semibold text-gray-900 mb-3">近期沟通动态</h2>
        {% if recent_comms %}
        <div class="space-y-3">
            {% for c in recent_comms[:10] %}
            <div class="flex items-start gap-3 pb-3 border-b border-gray-50 last:border-0 last:pb-0">
                <span class="text-lg mt-0.5">{% if c.comm_type == '电话' %}📞{% elif c.comm_type == '微信' %}💬{% elif c.comm_type == '面谈' %}🤝{% elif c.comm_type == '短信' %}📱{% else %}📝{% endif %}</span>
                <div class="flex-1 min-w-0">
                    <a href="/customers/{{ c.customer_id }}" class="font-medium text-sm text-primary hover:underline truncate block">{{ c.customer_name }}</a>
                    <p class="text-xs text-gray-500 mt-0.5 line-clamp-1">{{ c.summary or '(无摘要)' }}</p>
                </div>
                <span class="text-xs text-gray-400 whitespace-nowrap">{{ c.created_at[:10] if c.created_at else '' }}</span>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-gray-400 py-6 text-center">暂无沟通记录</p>
        {% endif %}
    </div>

    <!-- Follow-ups -->
    <div class="space-y-4">
        <!-- Overdue -->
        {% if overdue_fus %}
        <div class="bg-red-50 rounded-xl border border-red-200 p-4">
            <h2 class="font-semibold text-red-800 mb-3">逾期回访 ({{ overdue_fus|length }})</h2>
            <div class="space-y-2">
                {% for f in overdue_fus[:5] %}
                <div class="flex items-center justify-between">
                    <a href="/customers/{{ f.customer_id }}" class="text-sm text-red-700 hover:underline truncate">{{ f.customer_name }}</a>
                    <span class="text-xs text-red-500">{{ f.planned_at[:10] if f.planned_at else '' }}</span>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Upcoming -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
            <h2 class="font-semibold text-gray-900 mb-3">即将回访</h2>
            {% if upcoming_fus %}
            <div class="space-y-2">
                {% for f in upcoming_fus[:10] %}
                <div class="flex items-center justify-between pb-2 border-b border-gray-50 last:border-0 last:pb-0">
                    <a href="/customers/{{ f.customer_id }}" class="text-sm text-gray-900 hover:text-primary hover:underline truncate">{{ f.customer_name }}</a>
                    <div class="flex items-center gap-2">
                        <span class="text-xs text-gray-400 whitespace-nowrap">{{ f.planned_at[:10] if f.planned_at else '' }}</span>
                        <span class="text-xs px-1.5 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ f.method or '电话' }}</span>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-sm text-gray-400 py-6 text-center">暂无待回访任务</p>
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}