{% extends 'base.html' %}
{% load static %}

{% block title %}Data Sources - Hospital Management{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>Data Sources</h4>
                        <h6>Manage analytics data sources and connections</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'analytics:data_source_create' %}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i>Add Data Source
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="row">
            <div class="col-lg-3 col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <div class="dash-widget-header">
                            <span class="dash-widget-icon text-primary border-primary">
                                <i class="fas fa-database"></i>
                            </span>
                            <div class="dash-count">
                                <h3>{{ total_sources|default:"0" }}</h3>
                            </div>
                        </div>
                        <div class="dash-widget-info">
                            <h6 class="text-muted">Total Sources</h6>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-primary" style="width: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <div class="dash-widget-header">
                            <span class="dash-widget-icon text-success border-success">
                                <i class="fas fa-check-circle"></i>
                            </span>
                            <div class="dash-count">
                                <h3>{{ active_sources|default:"0" }}</h3>
                            </div>
                        </div>
                        <div class="dash-widget-info">
                            <h6 class="text-muted">Active Sources</h6>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-success" style="width: {{ active_percentage|default:0 }}%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <div class="dash-widget-header">
                            <span class="dash-widget-icon text-warning border-warning">
                                <i class="fas fa-exclamation-triangle"></i>
                            </span>
                            <div class="dash-count">
                                <h3>{{ error_sources|default:"0" }}</h3>
                            </div>
                        </div>
                        <div class="dash-widget-info">
                            <h6 class="text-muted">With Errors</h6>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-warning" style="width: {{ error_percentage|default:0 }}%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <div class="dash-widget-header">
                            <span class="dash-widget-icon text-info border-info">
                                <i class="fas fa-sync-alt"></i>
                            </span>
                            <div class="dash-count">
                                <h3>{{ syncing_sources|default:"0" }}</h3>
                            </div>
                        </div>
                        <div class="dash-widget-info">
                            <h6 class="text-muted">Syncing</h6>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-info" style="width: {{ syncing_percentage|default:0 }}%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters and Search -->
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-3 col-sm-6">
                        <div class="form-group">
                            <label class="form-label">Source Type</label>
                            <select class="form-select" id="sourceTypeFilter">
                                <option value="">All Types</option>
                                <option value="database">Database</option>
                                <option value="api">API</option>
                                <option value="file">File</option>
                                <option value="stream">Stream</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="form-group">
                            <label class="form-label">Status</label>
                            <select class="form-select" id="statusFilter">
                                <option value="">All Status</option>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="error">Error</option>
                                <option value="syncing">Syncing</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <div class="form-group">
                            <label class="form-label">Search</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="searchInput" placeholder="Search data sources...">
                                <button class="btn btn-outline-secondary" type="button" id="searchBtn">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-sm-6">
                        <div class="form-group">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-grid">
                                <button type="button" class="btn btn-outline-secondary" onclick="clearFilters()">
                                    <i class="fas fa-times me-1"></i>Clear
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Data Sources Table -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    <i class="fas fa-database me-2"></i>Data Sources
                </h5>
                <div class="card-tools">
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="refreshSources()">
                            <i class="fas fa-sync-alt me-1"></i>Refresh
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="exportSources()">
                            <i class="fas fa-download me-1"></i>Export
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="dataSourcesTable">
                        <thead>
                            <tr>
                                <th>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="selectAll">
                                    </div>
                                </th>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Last Sync</th>
                                <th>Records</th>
                                <th>Created</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for source in data_sources %}
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input row-checkbox" type="checkbox" value="{{ source.id }}">
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="source-icon me-2">
                                            {% if source.source_type == 'database' %}
                                                <i class="fas fa-database text-primary"></i>
                                            {% elif source.source_type == 'api' %}
                                                <i class="fas fa-plug text-info"></i>
                                            {% elif source.source_type == 'file' %}
                                                <i class="fas fa-file text-warning"></i>
                                            {% elif source.source_type == 'stream' %}
                                                <i class="fas fa-stream text-success"></i>
                                            {% else %}
                                                <i class="fas fa-question-circle text-muted"></i>
                                            {% endif %}
                                        </div>
                                        <div>
                                            <h6 class="mb-0">{{ source.name }}</h6>
                                            <small class="text-muted">{{ source.description|truncatechars:50 }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-secondary">{{ source.get_source_type_display }}</span>
                                </td>
                                <td>
                                    {% if source.status == 'active' %}
                                        <span class="badge bg-success">
                                            <i class="fas fa-circle me-1" style="font-size: 8px;"></i>Active
                                        </span>
                                    {% elif source.status == 'inactive' %}
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-circle me-1" style="font-size: 8px;"></i>Inactive
                                        </span>
                                    {% elif source.status == 'error' %}
                                        <span class="badge bg-danger">
                                            <i class="fas fa-exclamation-triangle me-1"></i>Error
                                        </span>
                                    {% elif source.status == 'syncing' %}
                                        <span class="badge bg-info">
                                            <i class="fas fa-sync-alt fa-spin me-1"></i>Syncing
                                        </span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if source.last_sync %}
                                        <span class="text-muted">{{ source.last_sync|timesince }} ago</span>
                                    {% else %}
                                        <span class="text-muted">Never</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="text-muted">{{ source.record_count|default:"0"|floatformat:0 }}</span>
                                </td>
                                <td>
                                    <span class="text-muted">{{ source.created_at|date:"M d, Y" }}</span>
                                </td>
                                <td>
                                    <div class="dropdown">
                                        <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a class="dropdown-item" href="{% url 'analytics:data_source_detail' source.pk %}">
                                                    <i class="fas fa-eye me-2"></i>View Details
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="{% url 'analytics:data_source_update' source.pk %}">
                                                    <i class="fas fa-edit me-2"></i>Edit
                                                </a>
                                            </li>
                                            <li>
                                                <button class="dropdown-item" onclick="testConnection({{ source.id }})">
                                                    <i class="fas fa-plug me-2"></i>Test Connection
                                                </button>
                                            </li>
                                            <li>
                                                <button class="dropdown-item" onclick="syncSource({{ source.id }})">
                                                    <i class="fas fa-sync-alt me-2"></i>Sync Now
                                                </button>
                                            </li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li>
                                                <a class="dropdown-item text-danger" href="{% url 'analytics:data_source_delete' source.pk %}">
                                                    <i class="fas fa-trash me-2"></i>Delete
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="8" class="text-center py-4">
                                    <div class="empty-state">
                                        <i class="fas fa-database fa-3x text-muted mb-3"></i>
                                        <h5 class="text-muted">No Data Sources Found</h5>
                                        <p class="text-muted">Create your first data source to start building analytics.</p>
                                        <a href="{% url 'analytics:data_source_create' %}" class="btn btn-primary">
                                            <i class="fas fa-plus me-1"></i>Add Data Source
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                <nav aria-label="Data sources pagination">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1">&laquo; First</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
                            </li>
                        {% endif %}

                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                                <li class="page-item active">
                                    <span class="page-link">{{ num }}</span>
                                </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Last &raquo;</a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize filters
    initializeFilters();
    
    // Initialize select all checkbox
    initializeSelectAll();
});

function initializeFilters() {
    const sourceTypeFilter = document.getElementById('sourceTypeFilter');
    const statusFilter = document.getElementById('statusFilter');
    const searchInput = document.getElementById('searchInput');
    const searchBtn = document.getElementById('searchBtn');

    // Add event listeners
    sourceTypeFilter.addEventListener('change', applyFilters);
    statusFilter.addEventListener('change', applyFilters);
    searchInput.addEventListener('keyup', function(e) {
        if (e.key === 'Enter') {
            applyFilters();
        }
    });
    searchBtn.addEventListener('click', applyFilters);
}

function initializeSelectAll() {
    const selectAllCheckbox = document.getElementById('selectAll');
    const rowCheckboxes = document.querySelectorAll('.row-checkbox');

    selectAllCheckbox.addEventListener('change', function() {
        rowCheckboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });

    rowCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const allChecked = Array.from(rowCheckboxes).every(cb => cb.checked);
            const someChecked = Array.from(rowCheckboxes).some(cb => cb.checked);
            
            selectAllCheckbox.checked = allChecked;
            selectAllCheckbox.indeterminate = someChecked && !allChecked;
        });
    });
}

function applyFilters() {
    const sourceType = document.getElementById('sourceTypeFilter').value;
    const status = document.getElementById('statusFilter').value;
    const search = document.getElementById('searchInput').value;

    // Build query parameters
    const params = new URLSearchParams();
    if (sourceType) params.append('source_type', sourceType);
    if (status) params.append('status', status);
    if (search) params.append('search', search);

    // Redirect with filters
    window.location.href = '?' + params.toString();
}

function clearFilters() {
    document.getElementById('sourceTypeFilter').value = '';
    document.getElementById('statusFilter').value = '';
    document.getElementById('searchInput').value = '';
    window.location.href = window.location.pathname;
}

function refreshSources() {
    window.location.reload();
}

{#function exportSources() {#}
{#    const selectedIds = Array.from(document.querySelectorAll('.row-checkbox:checked'))#}
{#        .map(cb => cb.value);#}
{#    #}
{#    if (selectedIds.length === 0) {#}
{#        alert('Please select data sources to export');#}
{#        return;#}
{#    }#}
{#    #}
{#    // Create export URL with selected IDs#}
{#    const params = new URLSearchParams();#}
{#    selectedIds.forEach(id => params.append('ids', id));#}
{#    #}
{#    window.open(`{% url 'analytics:data_source_export' %}?${params.toString()}`);#}
{# }#}

function testConnection(sourceId) {
    const btn = event.target.closest('button');
    const originalText = btn.innerHTML;
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Testing...';
    btn.disabled = true;
    
    // Simulate API call
    setTimeout(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
        alert('Connection test completed successfully!');
    }, 2000);
}

function syncSource(sourceId) {
    if (confirm('Start synchronization for this data source?')) {
        const btn = event.target.closest('button');
        const originalText = btn.innerHTML;
        
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Syncing...';
        btn.disabled = true;
        
        // Simulate sync process
        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.disabled = false;
            alert('Synchronization started successfully!');
            window.location.reload();
        }, 2000);
    }
}
</script>

<style>
.dash-widget-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.dash-widget-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 15px;
    border: 2px solid;
}

.dash-count h3 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #2c3e50;
}

.dash-widget-info h6 {
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.source-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.empty-state {
    padding: 40px 20px;
}

.progress-sm {
    height: 4px;
}

@media (max-width: 768px) {
    .page-btn {
        margin-top: 15px;
    }
    
    .card-tools {
        margin-top: 15px;
    }
    
    .dash-widget-header {
        flex-direction: column;
        text-align: center;
    }
    
    .dash-widget-icon {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .dropdown-menu {
        font-size: 0.875rem;
    }
}
</style>
{% endblock %}