{% extends "base.html" %}
{% set active_page = "crm" %}
{% block title %}CRM{% endblock %}

{% block content %}
{% if request.query_params.get('msg') %}
<div id="flash-msg" class="mb-4 px-4 py-3 rounded-lg bg-blue-900/40 border border-blue-700 text-blue-200 text-sm flex items-center justify-between">
    <span>{{ request.query_params.get('msg') | replace('+', ' ') }}</span>
    <button onclick="document.getElementById('flash-msg').remove()" class="text-blue-400 hover:text-white ml-4">&times;</button>
</div>
{% endif %}

<div class="flex items-center justify-between mb-6">
    <h1 class="text-xl font-semibold text-white">CRM &mdash; Intake Contacts</h1>
    <div class="text-sm text-gray-500">{{ stats.total }} contacts</div>
</div>

<!-- Stats row -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-6">
    <div class="card rounded-lg p-3 md:p-4 text-center">
        <div class="text-2xl font-bold text-white">{{ stats.total }}</div>
        <div class="text-xs text-gray-400">Total</div>
    </div>
    <div class="card rounded-lg p-3 md:p-4 text-center">
        <div class="text-2xl font-bold text-green-400">{{ stats.active }}</div>
        <div class="text-xs text-gray-400">Active</div>
    </div>
    <div class="card rounded-lg p-3 md:p-4 text-center">
        <div class="text-2xl font-bold text-blue-400">{{ stats.in_progress }}</div>
        <div class="text-xs text-gray-400">In Progress</div>
    </div>
    <div class="card rounded-lg p-3 md:p-4 text-center">
        <div class="text-2xl font-bold text-red-400">{{ stats.abandoned }}</div>
        <div class="text-xs text-gray-400">Abandoned</div>
    </div>
</div>

<!-- Filter pills -->
<div class="flex items-center gap-2 md:gap-3 mb-6 flex-wrap">
    <a href="/crm"
       class="px-3 py-1.5 text-xs rounded-full transition
       {% if not current_status %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
        All
    </a>
    <a href="/crm?status=active"
       class="px-3 py-1.5 text-xs rounded-full transition
       {% if current_status == 'active' %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
        Active
    </a>
    <a href="/crm?status=in_progress"
       class="px-3 py-1.5 text-xs rounded-full transition
       {% if current_status == 'in_progress' %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
        In Progress
    </a>
    <a href="/crm?status=abandoned"
       class="px-3 py-1.5 text-xs rounded-full transition
       {% if current_status == 'abandoned' %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
        Abandoned
    </a>
</div>

<!-- Contacts table -->
<div class="card rounded-lg overflow-hidden">
    <table class="w-full text-sm">
        <thead>
            <tr class="border-b border-gray-800 text-left">
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">Name</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">Email</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">Company</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">Status</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">NDA</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">Last Activity</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-800">
            {% for c in contacts %}
            <tr class="hover:bg-gray-900/50 transition">
                <td class="px-4 py-3">
                    <div class="text-white font-medium">{{ c.full_name }}</div>
                    <div class="text-xs text-gray-600 mt-0.5">{{ c.source }}</div>
                </td>
                <td class="px-4 py-3 text-gray-400 text-xs">
                    <a href="mailto:{{ c.email }}" class="hover:text-blue-400">{{ c.email }}</a>
                </td>
                <td class="px-4 py-3 text-gray-400">{{ c.company or '&mdash;' }}</td>
                <td class="px-4 py-3">
                    {% if c.category == 'active' %}
                    <span class="badge badge-green">Completed</span>
                    {% elif c.category == 'in_progress' %}
                        {% if c.session_status == 'nda_pending' %}
                        <span class="badge badge-yellow">NDA Pending</span>
                        {% elif c.session_status == 'started' %}
                        <span class="badge badge-gray">Started</span>
                        {% elif c.session_status == 'nda_signed' %}
                        <span class="badge badge-blue">NDA Signed</span>
                        {% elif c.session_status == 'nda_skipped' %}
                        <span class="badge badge-gray">NDA Skipped</span>
                        {% elif c.session_status == 'description_submitted' %}
                        <span class="badge badge-blue">Description Submitted</span>
                        {% elif c.session_status == 'analyzing' %}
                        <span class="badge badge-purple">Analyzing</span>
                        {% elif c.session_status == 'questions_ready' %}
                        <span class="badge badge-blue">Questions Ready</span>
                        {% elif c.session_status == 'questions_answered' %}
                        <span class="badge badge-blue">Questions Answered</span>
                        {% elif c.session_status == 'scope_refined' %}
                        <span class="badge badge-blue">Scope Refined</span>
                        {% elif c.session_status == 'plan_generated' %}
                        <span class="badge badge-emerald">Plan Generated</span>
                        {% elif c.session_status == 'pricing_presented' %}
                        <span class="badge badge-emerald">Pricing Presented</span>
                        {% else %}
                        <span class="badge badge-blue">{{ c.session_status | replace('_', ' ') | title }}</span>
                        {% endif %}
                    {% elif c.category == 'abandoned' %}
                        {% if c.session_status == 'no_session' %}
                        <span class="badge badge-red">No Session</span>
                        {% else %}
                        <span class="badge badge-red">Abandoned</span>
                        {% endif %}
                    {% endif %}
                </td>
                <td class="px-4 py-3">
                    {% if c.nda_status == 'signed' %}
                    <span class="badge badge-green">Signed</span>
                    {% elif c.nda_status == 'pending' %}
                    <span class="badge badge-yellow">Pending</span>
                    {% elif c.nda_status == 'declined' %}
                    <span class="badge badge-red">Declined</span>
                    {% else %}
                    <span class="text-gray-600">&mdash;</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-gray-500 text-xs">{{ c.session_updated_at | timeago }}</td>
                <td class="px-4 py-3">
                    <div class="flex items-center gap-2">
                        {% if c.project_id %}
                        <a href="/projects/{{ c.project_id }}" class="text-xs text-blue-400 hover:text-blue-300">View Project</a>
                        {% endif %}
                        {% if c.project_description %}
                        <button onclick="showDescription('{{ c.full_name | e }}', this)"
                                data-desc="{{ c.project_description[:500] | e }}"
                                class="text-xs text-gray-400 hover:text-white transition">
                            Brief
                        </button>
                        {% endif %}
                        {% if c.category == 'abandoned' and c.session_status != 'no_session' %}
                        <form action="/crm/{{ c.id }}/re-engage" method="post" style="display:inline">
                            <button type="submit" class="text-xs px-2 py-1 bg-orange-600/20 text-orange-400 hover:bg-orange-600/40 rounded transition">
                                Re-engage
                            </button>
                        </form>
                        {% endif %}
                    </div>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="7" class="px-4 py-8 text-center text-gray-600">No contacts found</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Description Modal -->
<div id="desc-modal" class="fixed inset-0 bg-black/70 z-50 hidden flex items-center justify-center p-4" onclick="if(event.target===this)closeDescModal()">
    <div class="bg-gray-900 border border-gray-700 rounded-lg w-full max-w-2xl max-h-[60vh] flex flex-col">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-800">
            <h3 id="desc-modal-title" class="text-sm font-semibold text-white">Project Brief</h3>
            <button onclick="closeDescModal()" class="text-gray-500 hover:text-white">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div id="desc-modal-content" class="flex-1 overflow-y-auto p-4 text-sm text-gray-300 leading-relaxed whitespace-pre-wrap">
        </div>
    </div>
</div>

<script>
function showDescription(name, btn) {
    var desc = btn.getAttribute('data-desc');
    document.getElementById('desc-modal').classList.remove('hidden');
    document.getElementById('desc-modal-title').textContent = name + ' \u2014 Project Brief';
    document.getElementById('desc-modal-content').textContent = desc;
}

function closeDescModal() {
    document.getElementById('desc-modal').classList.add('hidden');
}

document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeDescModal(); });
</script>
{% endblock %}