{% extends "base_layout.html" %}

{% block title %}Manage Cases - InterroGen{% endblock %}

{% block head_extra %}
<style>
    .case-status {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .status-active {
        background-color: rgba(22, 170, 255, 0.1);
        color: var(--info);
    }
    .status-completed {
        background-color: rgba(58, 196, 125, 0.1);
        color: var(--success);
    }
    .status-pending {
        background-color: rgba(247, 185, 36, 0.1);
        color: var(--warning);
    }
     .status-closed {
        background-color: rgba(108, 117, 125, 0.1); /* Using secondary color for closed */
        color: var(--secondary);
    }
</style>
{% endblock %}

{% block page_content %}
<div class="heading-container">
    <h1 class="h3">Manage Cases</h1>
    <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#newCaseModal">
        <i class="bi bi-plus-lg"></i> Create New Case
    </button>
</div>

<!-- New Case Modal -->
<div class="modal fade" id="newCaseModal" tabindex="-1" aria-labelledby="newCaseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="newCaseFormModal">
                <div class="modal-header">
                    <h5 class="modal-title" id="newCaseModalLabel">Create New Case</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="modal_case_id_display" class="form-label">Case ID (e.g., C-2025XXXX - will be auto-generated if left blank)</label>
                        <input type="text" class="form-control" id="modal_case_id_display" name="case_id_display">
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="modal_case_type" class="form-label">Case Type <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="modal_case_type" name="case_type" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="modal_suspect_name" class="form-label">Suspect Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="modal_suspect_name" name="suspect_name" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="modal_profile_details" class="form-label">Profile Details</label>
                        <textarea class="form-control" id="modal_profile_details" name="profile_details" rows="4"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="modal_evidence_summary" class="form-label">Evidence Summary</label>
                        <textarea class="form-control" id="modal_evidence_summary" name="evidence_summary" rows="4"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="modal_country_id_case" class="form-label">Country Context (for recommendations)</label>
                        <select class="form-select" id="modal_country_id_case" name="country_id">
                            <option value="">Select Country (Optional)</option>
                            {# Countries will be loaded by JavaScript #}
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Create Case</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        Existing Cases
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Case ID</th>
                        <th>Suspect</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Country</th>
                        <th>Created</th>
                        <th>Updated</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% if cases %}
                        {% for case_item in cases %}
                        <tr>
                            <td><a href="{{ url_for('view_case', case_id=case_item.id) }}">{{ case_item.case_id_display }}</a></td>
                            <td>{{ case_item.suspect_name }}</td>
                            <td>{{ case_item.case_type }}</td>
                            <td><span class="case-status status-{{ case_item.status.value.lower() }}">{{ case_item.status.value }}</span></td>
                            <td>{{ case_item.country_context.name if case_item.country_context else 'N/A'}}</td>
                            <td>{{ case_item.created_at.strftime("%Y-%m-%d") }}</td>
                            <td>{{ case_item.updated_at.strftime("%Y-%m-%d") }}</td>
                            <td>
                                <a href="{{ url_for('view_case', case_id=case_item.id) }}" class="btn btn-sm btn-outline-primary">View</a>
                                <!-- Add edit/delete buttons if needed -->
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">No cases found. Create one to get started!</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
    {% if cases and cases.has_prev %}
        <a href="{{ url_for('manage_cases', page=cases.prev_num) }}">Previous</a>
    {% endif %}
    {% if cases and cases.has_next %}
        <a href="{{ url_for('manage_cases', page=cases.next_num) }}">Next</a>
    {% endif %}
</div>

{% endblock %}

{% block scripts %}
<script>
    document.addEventListener(\'DOMContentLoaded\', function() {
        // Fetch countries for the modal dropdown
        const countrySelectModal = document.getElementById(\'modal_country_id_case\');
        if (countrySelectModal) {
             fetch("{{ url_for('get_countries') }}")
                .then(response => response.json())
                .then(data => {
                    data.forEach(country => {
                        const option = document.createElement(\'option\');
                        option.value = country.id;
                        option.textContent = country.name;
                        countrySelectModal.appendChild(option);
                    });
                }).catch(error => console.error(\'Error fetching countries for modal:\', error));
        }

        const newCaseFormModal = document.getElementById(\'newCaseFormModal\');
        if (newCaseFormModal) {
            newCaseFormModal.addEventListener(\'submit\', function(event) {
                event.preventDefault();
                const formData = new FormData(newCaseFormModal);
                fetch("{{ url_for('manage_cases') }}", {
                    method: \'POST\',
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(err => { throw err; });
                    }
                    return response.json();
                })
                .then(data => {
                    alert(data.message || \'Case created successfully!\');
                    var modal = bootstrap.Modal.getInstance(document.getElementById(\'newCaseModal\'));
                    modal.hide();
                    window.location.reload(); // Reload to see the new case
                })
                .catch(error => {
                    console.error(\'Error creating case:\', error);
                    let errorMsg = \'Error creating case.\';
                    if (error && error.error) { // Assuming error object has an error field
                        errorMsg = error.error;
                    } else if (error && error.message) {
                        errorMsg = error.message;
                    }
                    alert(errorMsg);
                });
            });
        }
    });
</script>
{% endblock %}