{% extends "base.html" %}

{% block title %}Reports - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <div>
        <h1 class="text-3xl font-bold text-gray-800 mb-2">Reports</h1>
        <p class="text-gray-600">Medical assessment reports and documents</p>
    </div>
    <a href="{{ url_for('report_new') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition shadow-md hover:shadow-lg">
        <i class="fas fa-upload mr-2"></i>Upload Report
    </a>
</div>

<!-- Search and Filter -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
    <form method="GET" action="{{ url_for('reports_list') }}" class="space-y-4">
        <div class="flex gap-4">
            <div class="flex-1">
                <input type="text" 
                       name="search" 
                       value="{{ search }}" 
                       placeholder="Search by title, case, claimant, client, doctor, or description..." 
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-search mr-2"></i>Search
            </button>
        </div>
        <div class="flex gap-4">
            <div class="flex-1">
                <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option value="">All Statuses</option>
                    <option value="draft" {% if status_filter == 'draft' %}selected{% endif %}>Draft</option>
                    <option value="final" {% if status_filter == 'final' %}selected{% endif %}>Final</option>
                    <option value="sent" {% if status_filter == 'sent' %}selected{% endif %}>Sent</option>
                    <option value="archived" {% if status_filter == 'archived' %}selected{% endif %}>Archived</option>
                </select>
            </div>
            <div class="flex-1">
                <select name="report_type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option value="">All Report Types</option>
                    {% for type in report_types %}
                    <option value="{{ type['report_type'] }}" {% if report_type_filter == type['report_type'] %}selected{% endif %}>{{ type['report_type'] }}</option>
                    {% endfor %}
                </select>
            </div>
            {% if search or status_filter or report_type_filter %}
            <a href="{{ url_for('reports_list') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-times mr-2"></i>Clear
            </a>
            {% endif %}
        </div>
    </form>
</div>

<!-- Reports List -->
{% if reports %}
<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Report
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Case
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Doctor
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Status
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Uploaded
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for report in reports %}
                <tr class="hover:bg-gray-50 transition">
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                {% if report['file_type'] == 'pdf' %}
                                <i class="fas fa-file-pdf text-red-500 text-2xl"></i>
                                {% elif report['file_type'] in ['doc', 'docx'] %}
                                <i class="fas fa-file-word text-blue-500 text-2xl"></i>
                                {% elif report['file_type'] in ['jpg', 'jpeg', 'png'] %}
                                <i class="fas fa-file-image text-green-500 text-2xl"></i>
                                {% else %}
                                <i class="fas fa-file text-gray-500 text-2xl"></i>
                                {% endif %}
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900">
                                    {{ report['report_title'] }}
                                </div>
                                {% if report['report_type'] %}
                                <div class="text-xs text-gray-500">
                                    {{ report['report_type'] }}
                                </div>
                                {% endif %}
                                <div class="text-xs text-gray-400">
                                    {{ report['file_name'] }}
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if report['file_case_id'] %}
                        <div class="text-sm text-gray-900">{{ report['file_case_id'] }}</div>
                        <div class="text-xs text-gray-500">{{ report['claimant_first_name'] }} {{ report['claimant_last_name'] }}</div>
                        {% else %}
                        <span class="text-xs text-gray-400">Not linked</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                        {{ report['doctor_name'] or 'N/A' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if report['status'] == 'draft' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                            Draft
                        </span>
                        {% elif report['status'] == 'final' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                            Final
                        </span>
                        {% elif report['status'] == 'sent' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                            Sent
                        </span>
                        {% elif report['status'] == 'archived' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                            Archived
                        </span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ report['uploaded_at'][:10] if report['uploaded_at'] else 'N/A' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
                        <a href="{{ url_for('report_view', report_id=report['id']) }}" 
                           class="text-blue-600 hover:text-blue-900" title="View">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="{{ url_for('report_edit_popup', report_id=report['id']) }}"
                           target="_blank"
                           class="text-indigo-600 hover:text-indigo-900" title="Edit Letter">
                            <i class="fas fa-pen-to-square"></i>
                        </a>
                        <a href="{{ url_for('report_print', report_id=report['id']) }}" 
                           target="_blank"
                           class="text-purple-600 hover:text-purple-900" title="Print Cover">
                            <i class="fas fa-print"></i>
                        </a>
                        <a href="{{ url_for('report_download', report_id=report['id']) }}" 
                           class="text-green-600 hover:text-green-900" title="Download">
                            <i class="fas fa-download"></i>
                        </a>
                        <form method="POST" 
                              action="{{ url_for('report_delete', report_id=report['id']) }}" 
                              onsubmit="return confirm('Are you sure you want to delete this report and its file?');"
                              style="display: inline;">
                            <button type="submit" class="text-red-600 hover:text-red-900" title="Delete">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% else %}
<div class="bg-white rounded-lg shadow-md p-12 text-center">
    <i class="fas fa-file-medical text-6xl text-gray-300 mb-4"></i>
    <h2 class="text-2xl font-bold text-gray-600 mb-2">No Reports Found</h2>
    <p class="text-gray-500 mb-6">
        {% if search or status_filter or report_type_filter %}
        No reports match your search criteria. Try adjusting your filters.
        {% else %}
        Start by uploading your first report.
        {% endif %}
    </p>
    <a href="{{ url_for('report_new') }}" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition">
        <i class="fas fa-upload mr-2"></i>Upload First Report
    </a>
</div>
{% endif %}
{% endblock %}