{% extends "base.html" %}
{% set active_nav = "manage" %}

{% block title %}Upload Document - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <nav class="breadcrumb">
            <a href="/documents">Documents</a> &rsaquo;
            <span>Upload</span>
        </nav>
        <h1 class="page-title">Upload Document</h1>
    </div>
</div>

<div class="card" style="max-width: 600px;">
    <form method="POST" action="/documents/upload" enctype="multipart/form-data">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <input type="hidden" id="entity_type" name="entity_type" value="">
        <input type="hidden" id="entity_id" name="entity_id" value="">

        <div class="form-group">
            <label for="file" class="form-label">File *</label>
            <input type="file" id="file" name="file" class="form-input" required>
            <p class="form-hint">Select a file to upload (max 50MB)</p>
        </div>

        <div class="form-group">
            <label for="document_type" class="form-label">Document Type</label>
            <select id="document_type" name="document_type" class="form-input">
                <option value="">-- Select Type --</option>
                {% for dt in document_types %}
                <option value="{{ dt }}">{{ dt|replace('_', ' ')|title }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group">
            <label for="visibility" class="form-label">Who can see this document? *</label>
            <select id="visibility" name="visibility" class="form-input" required>
                <option value="organization">My Organization — visible to everyone in my organization</option>
                <option value="individual">Just Me — only I can see this document</option>
            </select>
            <p class="form-hint">Internal staff and admins can always view all documents.</p>
        </div>

        <div class="form-group">
            <label for="description" class="form-label">Description</label>
            <textarea id="description" name="description" class="form-input" rows="3"
                      placeholder="Optional description of this document"></textarea>
        </div>

        <!-- Link to Entity (Optional) -->
        <div class="form-group">
            <label class="form-label">Link to Entity (Optional)</label>
            <p class="form-hint">Optionally link this document to a Patient, Clinician, or TRF.</p>

            <div id="selectedEntity" class="entity-selection-badge" style="display:none;">
                <span id="selectedEntityLabel"></span>
                <button type="button" onclick="clearEntity()" class="btn btn-sm btn-ghost entity-clear-btn">&times;</button>
            </div>

            <div id="linkButtons" class="flex gap-sm flex-wrap">
                <button type="button" class="btn btn-sm btn-secondary" onclick="openSearchModal('patient')">
                    🔍 Search Patient
                </button>
                <button type="button" class="btn btn-sm btn-secondary" onclick="openSearchModal('clinician')">
                    🔍 Search Clinician
                </button>
                <button type="button" class="btn btn-sm btn-secondary" onclick="openSearchModal('trf')">
                    🔍 Search TRF
                </button>
            </div>
        </div>

        <div class="form-actions">
            <a href="/documents" class="btn btn-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary">Upload Document</button>
        </div>
    </form>
</div>

<!-- Entity Search Modal -->
<dialog id="entitySearchModal" class="entity-search-dialog">
    <div class="entity-search-dialog-header">
        <div class="flex justify-between items-center">
            <h3 id="modalTitle" style="margin:0; font-size:var(--text-lg); font-weight:600;">Search</h3>
            <button type="button" onclick="closeSearchModal()" class="btn btn-sm btn-ghost" style="font-size:1.25rem; padding:0 var(--space-xs);">&times;</button>
        </div>
        <div style="margin-top: var(--space-md);">
            <input type="text"
                   id="entitySearchInput"
                   class="form-input"
                   placeholder="Type to search..."
                   autocomplete="off"
                   hx-get="/documents/search-entities?entity_type=patient"
                   hx-trigger="input changed delay:300ms, search"
                   hx-target="#entitySearchResults"
                   hx-swap="innerHTML"
                   name="q"
            >
            <!-- Hidden inputs for linking form -->
        </div>
    </div>
    <div id="entitySearchResults" style="max-height: 420px; overflow-y: auto;">
        <div class="empty-state" style="padding:var(--space-xl);">
            <p class="text-muted">Type to search or browse recent entries</p>
        </div>
    </div>
</dialog>

<style>
/* === Entity Search Modal — theme-aware === */
.entity-search-dialog {
    border: none;
    border-radius: var(--radius-lg);
    padding: 0;
    max-width: 680px;
    width: 94vw;
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.entity-search-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}
.entity-search-dialog-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}
/* Selection badge shown on the upload form */
.entity-selection-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-weight: 500;
    color: var(--text-primary);
}
.entity-clear-btn {
    font-size: var(--text-lg);
    line-height: 1;
    padding: 0 var(--space-xs);
}
</style>
{% endblock %}

{% block scripts %}
<script>
const entityTypeLabels = {
    patient: 'Patient',
    clinician: 'Clinician',
    trf: 'TRF'
};
const entityTypeBackendMap = {
    patient: 'Patient',
    clinician: 'Clinician',
    trf: 'Trf'
};

let currentSearchType = '';

function openSearchModal(type) {
    currentSearchType = type;
    const modal = document.getElementById('entitySearchModal');
    const title = document.getElementById('modalTitle');
    const input = document.getElementById('entitySearchInput');
    const resultsDiv = document.getElementById('entitySearchResults');

    title.textContent = 'Search ' + entityTypeLabels[type];

    // Update HTMX get URL for subsequent typing-based searches
    input.setAttribute('hx-get', `/documents/search-entities?entity_type=${type}`);

    input.value = '';
    resultsDiv.innerHTML = '<div class="empty-state" style="padding:var(--space-xl);"><p class="text-muted">Loading...</p></div>';

    modal.showModal();
    if (typeof htmx !== 'undefined') {
        htmx.process(input);
    }
    input.focus();

    // Immediately fetch the first page of results via direct fetch
    fetch(`/documents/search-entities?entity_type=${type}&q=`)
        .then(r => r.text())
        .then(html => {
            resultsDiv.innerHTML = html;
            // Let HTMX pick up any hx-* attributes on the new content (pagination buttons)
            if (typeof htmx !== 'undefined') {
                htmx.process(resultsDiv);
            }
        })
        .catch(() => {
            resultsDiv.innerHTML = '<div class="empty-state" style="padding:var(--space-xl);"><p class="text-muted">Failed to load results</p></div>';
        });
}

function closeSearchModal() {
    document.getElementById('entitySearchModal').close();
}

function selectEntity(btn) {
    const id = btn.getAttribute('data-entity-id');
    const label = btn.getAttribute('data-entity-label');

    document.getElementById('entity_type').value = entityTypeBackendMap[currentSearchType] || currentSearchType;
    document.getElementById('entity_id').value = id;

    const selectedDiv = document.getElementById('selectedEntity');
    const selectedLabel = document.getElementById('selectedEntityLabel');
    selectedLabel.textContent = entityTypeLabels[currentSearchType] + ': ' + label;
    selectedDiv.style.display = 'flex';

    document.getElementById('linkButtons').style.display = 'none';
    closeSearchModal();
}

function clearEntity() {
    document.getElementById('entity_type').value = '';
    document.getElementById('entity_id').value = '';
    document.getElementById('selectedEntity').style.display = 'none';
    document.getElementById('linkButtons').style.display = 'flex';
}

// Close modal on backdrop click
document.getElementById('entitySearchModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeSearchModal();
    }
});
</script>
{% endblock %}