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

{% block title %}{% if data_source %}Edit Data Source{% else %}Create Data Source{% endif %} - 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>{% if data_source %}Edit Data Source{% else %}Create New Data Source{% endif %}</h4>
                        <h6>{% if data_source %}Update data source configuration{% else %}Add a new data source for analytics{% endif %}</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'analytics:data_source_list' %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>Back to Sources
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <form method="post" id="dataSourceForm">
            {% csrf_token %}
            <div class="row">
                <!-- Main Form -->
                <div class="col-lg-8">
                    <!-- Basic Information -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-info-circle me-2"></i>Basic Information
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name" class="form-label">Data Source Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="name" name="name" 
                                               value="{{ data_source.name|default:'' }}" 
                                               placeholder="Enter data source name" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="source_type" class="form-label">Source Type <span class="text-danger">*</span></label>
                                        <select class="form-select" id="source_type" name="source_type" required onchange="updateSourceConfig()">
                                            <option value="">Select source type</option>
                                            <option value="database" {% if data_source.source_type == 'database' %}selected{% endif %}>Database</option>
                                            <option value="api" {% if data_source.source_type == 'api' %}selected{% endif %}>API</option>
                                            <option value="file" {% if data_source.source_type == 'file' %}selected{% endif %}>File</option>
                                            <option value="stream" {% if data_source.source_type == 'stream' %}selected{% endif %}>Stream</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" id="description" name="description" rows="3" 
                                          placeholder="Describe the data source and its purpose">{{ data_source.description|default:'' }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Database Configuration -->
                    <div class="card" id="databaseConfig" style="display: none;">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-database me-2"></i>Database Configuration
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="db_type" class="form-label">Database Type</label>
                                        <select class="form-select" id="db_type" name="db_type">
                                            <option value="postgresql" {% if data_source.db_type == 'postgresql' %}selected{% endif %}>PostgreSQL</option>
                                            <option value="mysql" {% if data_source.db_type == 'mysql' %}selected{% endif %}>MySQL</option>
                                            <option value="sqlite" {% if data_source.db_type == 'sqlite' %}selected{% endif %}>SQLite</option>
                                            <option value="oracle" {% if data_source.db_type == 'oracle' %}selected{% endif %}>Oracle</option>
                                            <option value="mssql" {% if data_source.db_type == 'mssql' %}selected{% endif %}>SQL Server</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="host" class="form-label">Host</label>
                                        <input type="text" class="form-control" id="host" name="host" 
                                               value="{{ data_source.host|default:'' }}" 
                                               placeholder="localhost">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="port" class="form-label">Port</label>
                                        <input type="number" class="form-control" id="port" name="port" 
                                               value="{{ data_source.port|default:'' }}" 
                                               placeholder="5432">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="database" class="form-label">Database Name</label>
                                        <input type="text" class="form-control" id="database" name="database" 
                                               value="{{ data_source.database|default:'' }}" 
                                               placeholder="database_name">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="schema" class="form-label">Schema (Optional)</label>
                                        <input type="text" class="form-control" id="schema" name="schema" 
                                               value="{{ data_source.schema|default:'' }}" 
                                               placeholder="public">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="username" class="form-label">Username</label>
                                        <input type="text" class="form-control" id="username" name="username" 
                                               value="{{ data_source.username|default:'' }}" 
                                               placeholder="database_user">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="password" class="form-label">Password</label>
                                        <input type="password" class="form-control" id="password" name="password" 
                                               placeholder="{% if data_source %}Leave blank to keep current{% else %}Enter password{% endif %}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- API Configuration -->
                    <div class="card" id="apiConfig" style="display: none;">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-plug me-2"></i>API Configuration
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="api_url" class="form-label">API URL</label>
                                <input type="url" class="form-control" id="api_url" name="api_url" 
                                       value="{{ data_source.api_url|default:'' }}" 
                                       placeholder="https://api.example.com/data">
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="auth_type" class="form-label">Authentication Type</label>
                                        <select class="form-select" id="auth_type" name="auth_type" onchange="updateAuthFields()">
                                            <option value="none" {% if data_source.auth_type == 'none' %}selected{% endif %}>None</option>
                                            <option value="api_key" {% if data_source.auth_type == 'api_key' %}selected{% endif %}>API Key</option>
                                            <option value="bearer" {% if data_source.auth_type == 'bearer' %}selected{% endif %}>Bearer Token</option>
                                            <option value="basic" {% if data_source.auth_type == 'basic' %}selected{% endif %}>Basic Auth</option>
                                            <option value="oauth" {% if data_source.auth_type == 'oauth' %}selected{% endif %}>OAuth 2.0</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="request_method" class="form-label">Request Method</label>
                                        <select class="form-select" id="request_method" name="request_method">
                                            <option value="GET" {% if data_source.request_method == 'GET' %}selected{% endif %}>GET</option>
                                            <option value="POST" {% if data_source.request_method == 'POST' %}selected{% endif %}>POST</option>
                                            <option value="PUT" {% if data_source.request_method == 'PUT' %}selected{% endif %}>PUT</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="authFields">
                                <!-- Auth fields will be populated by JavaScript -->
                            </div>
                            
                            <div class="form-group">
                                <label for="headers" class="form-label">Custom Headers (JSON)</label>
                                <textarea class="form-control" id="headers" name="headers" rows="3" 
                                          placeholder='{"Content-Type": "application/json"}'>{{ data_source.headers|default:'' }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- File Configuration -->
                    <div class="card" id="fileConfig" style="display: none;">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-file me-2"></i>File Configuration
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label for="file_path" class="form-label">File Path</label>
                                        <input type="text" class="form-control" id="file_path" name="file_path" 
                                               value="{{ data_source.file_path|default:'' }}" 
                                               placeholder="/path/to/data/file.csv">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="file_format" class="form-label">File Format</label>
                                        <select class="form-select" id="file_format" name="file_format">
                                            <option value="csv" {% if data_source.file_format == 'csv' %}selected{% endif %}>CSV</option>
                                            <option value="json" {% if data_source.file_format == 'json' %}selected{% endif %}>JSON</option>
                                            <option value="xml" {% if data_source.file_format == 'xml' %}selected{% endif %}>XML</option>
                                            <option value="excel" {% if data_source.file_format == 'excel' %}selected{% endif %}>Excel</option>
                                            <option value="parquet" {% if data_source.file_format == 'parquet' %}selected{% endif %}>Parquet</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="delimiter" class="form-label">Delimiter (CSV only)</label>
                                        <input type="text" class="form-control" id="delimiter" name="delimiter" 
                                               value="{{ data_source.delimiter|default:',' }}" 
                                               placeholder="," maxlength="1">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="encoding" class="form-label">Encoding</label>
                                        <select class="form-select" id="encoding" name="encoding">
                                            <option value="utf-8" {% if data_source.encoding == 'utf-8' %}selected{% endif %}>UTF-8</option>
                                            <option value="latin-1" {% if data_source.encoding == 'latin-1' %}selected{% endif %}>Latin-1</option>
                                            <option value="ascii" {% if data_source.encoding == 'ascii' %}selected{% endif %}>ASCII</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="has_header" name="has_header" 
                                       {% if data_source.has_header %}checked{% endif %}>
                                <label class="form-check-label" for="has_header">
                                    File has header row
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Stream Configuration -->
                    <div class="card" id="streamConfig" style="display: none;">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-stream me-2"></i>Stream Configuration
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="stream_type" class="form-label">Stream Type</label>
                                        <select class="form-select" id="stream_type" name="stream_type">
                                            <option value="kafka" {% if data_source.stream_type == 'kafka' %}selected{% endif %}>Apache Kafka</option>
                                            <option value="rabbitmq" {% if data_source.stream_type == 'rabbitmq' %}selected{% endif %}>RabbitMQ</option>
                                            <option value="redis" {% if data_source.stream_type == 'redis' %}selected{% endif %}>Redis Streams</option>
                                            <option value="websocket" {% if data_source.stream_type == 'websocket' %}selected{% endif %}>WebSocket</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="stream_url" class="form-label">Stream URL</label>
                                        <input type="text" class="form-control" id="stream_url" name="stream_url" 
                                               value="{{ data_source.stream_url|default:'' }}" 
                                               placeholder="localhost:9092">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="topic" class="form-label">Topic/Queue</label>
                                        <input type="text" class="form-control" id="topic" name="topic" 
                                               value="{{ data_source.topic|default:'' }}" 
                                               placeholder="data-topic">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="consumer_group" class="form-label">Consumer Group</label>
                                        <input type="text" class="form-control" id="consumer_group" name="consumer_group" 
                                               value="{{ data_source.consumer_group|default:'' }}" 
                                               placeholder="analytics-group">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Sync Settings -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-sync-alt me-2"></i>Sync Settings
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="sync_frequency" class="form-label">Sync Frequency</label>
                                        <select class="form-select" id="sync_frequency" name="sync_frequency">
                                            <option value="manual" {% if data_source.sync_frequency == 'manual' %}selected{% endif %}>Manual</option>
                                            <option value="hourly" {% if data_source.sync_frequency == 'hourly' %}selected{% endif %}>Hourly</option>
                                            <option value="daily" {% if data_source.sync_frequency == 'daily' %}selected{% endif %}>Daily</option>
                                            <option value="weekly" {% if data_source.sync_frequency == 'weekly' %}selected{% endif %}>Weekly</option>
                                            <option value="monthly" {% if data_source.sync_frequency == 'monthly' %}selected{% endif %}>Monthly</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="batch_size" class="form-label">Batch Size</label>
                                        <input type="number" class="form-control" id="batch_size" name="batch_size" 
                                               value="{{ data_source.batch_size|default:'1000' }}" 
                                               placeholder="1000" min="1">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="auto_sync" name="auto_sync" 
                                               {% if data_source.auto_sync %}checked{% endif %}>
                                        <label class="form-check-label" for="auto_sync">
                                            Enable automatic synchronization
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" 
                                               {% if data_source.is_active or not data_source %}checked{% endif %}>
                                        <label class="form-check-label" for="is_active">
                                            Active data source
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <!-- Connection Test -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-plug me-2"></i>Connection Test
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="text-center">
                                <button type="button" class="btn btn-outline-primary" onclick="testConnection()">
                                    <i class="fas fa-plug me-1"></i>Test Connection
                                </button>
                                <div id="connectionResult" class="mt-3" style="display: none;">
                                    <!-- Test result will be shown here -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="card">
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i>
                                    {% if data_source %}Update Data Source{% else %}Create Data Source{% endif %}
                                </button>
                                {% if data_source %}
                                <button type="button" class="btn btn-outline-secondary" onclick="syncNow()">
                                    <i class="fas fa-sync-alt me-1"></i>Sync After Save
                                </button>
                                {% endif %}
                                <a href="{% url 'analytics:data_source_list' %}" class="btn btn-outline-danger">
                                    <i class="fas fa-times me-1"></i>Cancel
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Help -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-question-circle me-2"></i>Help
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="help-content">
                                <h6>Data Source Types:</h6>
                                <ul class="list-unstyled">
                                    <li><strong>Database:</strong> Connect to SQL databases</li>
                                    <li><strong>API:</strong> Fetch data from REST APIs</li>
                                    <li><strong>File:</strong> Import from files (CSV, JSON, etc.)</li>
                                    <li><strong>Stream:</strong> Real-time data streams</li>
                                </ul>
                                
                                <h6 class="mt-3">Sync Frequency:</h6>
                                <p class="text-muted small">
                                    Choose how often the data should be synchronized. 
                                    Manual sync requires manual triggering.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize form based on existing data
    updateSourceConfig();
    updateAuthFields();
});

function updateSourceConfig() {
    const sourceType = document.getElementById('source_type').value;
    
    // Hide all config sections
    document.getElementById('databaseConfig').style.display = 'none';
    document.getElementById('apiConfig').style.display = 'none';
    document.getElementById('fileConfig').style.display = 'none';
    document.getElementById('streamConfig').style.display = 'none';
    
    // Show relevant config section
    if (sourceType === 'database') {
        document.getElementById('databaseConfig').style.display = 'block';
    } else if (sourceType === 'api') {
        document.getElementById('apiConfig').style.display = 'block';
    } else if (sourceType === 'file') {
        document.getElementById('fileConfig').style.display = 'block';
    } else if (sourceType === 'stream') {
        document.getElementById('streamConfig').style.display = 'block';
    }
}

function updateAuthFields() {
    const authType = document.getElementById('auth_type').value;
    const authFields = document.getElementById('authFields');
    
    authFields.innerHTML = '';
    
    if (authType === 'api_key') {
        authFields.innerHTML = `
            <div class="form-group">
                <label for="api_key" class="form-label">API Key</label>
                <input type="password" class="form-control" id="api_key" name="api_key" 
                       value="{{ data_source.api_key|default:'' }}" 
                       placeholder="Enter API key">
            </div>
        `;
    } else if (authType === 'bearer') {
        authFields.innerHTML = `
            <div class="form-group">
                <label for="bearer_token" class="form-label">Bearer Token</label>
                <input type="password" class="form-control" id="bearer_token" name="bearer_token" 
                       value="{{ data_source.bearer_token|default:'' }}" 
                       placeholder="Enter bearer token">
            </div>
        `;
    } else if (authType === 'basic') {
        authFields.innerHTML = `
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="basic_username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="basic_username" name="basic_username" 
                               value="{{ data_source.basic_username|default:'' }}" 
                               placeholder="Username">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="basic_password" class="form-label">Password</label>
                        <input type="password" class="form-control" id="basic_password" name="basic_password" 
                               placeholder="Password">
                    </div>
                </div>
            </div>
        `;
    } else if (authType === 'oauth') {
        authFields.innerHTML = `
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="client_id" class="form-label">Client ID</label>
                        <input type="text" class="form-control" id="client_id" name="client_id" 
                               value="{{ data_source.client_id|default:'' }}" 
                               placeholder="OAuth Client ID">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="client_secret" class="form-label">Client Secret</label>
                        <input type="password" class="form-control" id="client_secret" name="client_secret" 
                               placeholder="OAuth Client Secret">
                    </div>
                </div>
            </div>
        `;
    }
}

function testConnection() {
    const btn = event.target;
    const originalText = btn.innerHTML;
    const resultDiv = document.getElementById('connectionResult');
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Testing...';
    btn.disabled = true;
    
    // Simulate connection test
    setTimeout(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
        
        resultDiv.innerHTML = `
            <div class="alert alert-success">
                <i class="fas fa-check-circle me-2"></i>
                Connection successful!
            </div>
        `;
        resultDiv.style.display = 'block';
    }, 2000);
}

function syncNow() {
    document.getElementById('sync_after_save').value = 'true';
}

// Form validation
document.getElementById('dataSourceForm').addEventListener('submit', function(e) {
    const name = document.getElementById('name').value.trim();
    const sourceType = document.getElementById('source_type').value;
    
    if (!name || !sourceType) {
        e.preventDefault();
        alert('Please fill in all required fields');
        return;
    }
    
    // Show loading state
    const submitBtn = document.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Saving...';
    submitBtn.disabled = true;
    
    // Re-enable after delay (in real app, handled by form submission)
    setTimeout(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    }, 2000);
});
</script>

<style>
.help-content h6 {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 10px;
}

.help-content ul li {
    margin-bottom: 5px;
    font-size: 0.875rem;
}

.help-content ul li strong {
    color: #2c3e50;
}

@media (max-width: 768px) {
    .page-btn {
        margin-top: 15px;
    }
    
    .help-content {
        font-size: 0.875rem;
    }
}
</style>
{% endblock %}