{% extends "base.html" %}

{% block title %}{{ 'Edit' if mode == 'edit' else 'New' }} Webhook - SneakyScanner{% endblock %}

{% block content %}
<div class="row mt-4">
    <div class="col-12 mb-4">
        <h1 style="color: #60a5fa;">{{ 'Edit' if mode == 'edit' else 'Create' }} Webhook</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('webhooks.list_webhooks') }}">Webhooks</a></li>
                <li class="breadcrumb-item active">{{ 'Edit' if mode == 'edit' else 'New' }}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                <form id="webhook-form">
                    <!-- Basic Information -->
                    <h5 class="card-title mb-3">Basic Information</h5>

                    <div class="mb-3">
                        <label for="name" class="form-label">Webhook Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" required
                            placeholder="e.g., Slack Notifications">
                        <div class="form-text">A descriptive name for this webhook</div>
                    </div>

                    <div class="mb-3">
                        <label for="url" class="form-label">Webhook URL <span class="text-danger">*</span></label>
                        <input type="url" class="form-control" id="url" name="url" required
                            placeholder="https://hooks.example.com/webhook">
                        <div class="form-text">The endpoint where alerts will be sent</div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="enabled" name="enabled" checked>
                            <label class="form-check-label" for="enabled">Enabled</label>
                        </div>
                        <div class="form-text">Disabled webhooks will not receive notifications</div>
                    </div>

                    <hr class="my-4">

                    <!-- Authentication -->
                    <h5 class="card-title mb-3">Authentication</h5>

                    <div class="mb-3">
                        <label for="auth_type" class="form-label">Authentication Type</label>
                        <select class="form-select" id="auth_type" name="auth_type">
                            <option value="none">None</option>
                            <option value="bearer">Bearer Token</option>
                            <option value="basic">Basic Auth (username:password)</option>
                            <option value="custom">Custom Headers</option>
                        </select>
                    </div>

                    <div class="mb-3" id="auth_token_field" style="display: none;">
                        <label for="auth_token" class="form-label">Authentication Token</label>
                        <input type="password" class="form-control" id="auth_token" name="auth_token"
                            placeholder="Enter token or username:password">
                        <div class="form-text" id="auth_token_help">Will be encrypted when stored</div>
                    </div>

                    <div class="mb-3" id="custom_headers_field" style="display: none;">
                        <label for="custom_headers" class="form-label">Custom Headers (JSON)</label>
                        <textarea class="form-control font-monospace" id="custom_headers" name="custom_headers" rows="4"
                            placeholder='{"X-API-Key": "your-key", "X-Custom-Header": "value"}'></textarea>
                        <div class="form-text">JSON object with custom HTTP headers</div>
                    </div>

                    <hr class="my-4">

                    <!-- Filters -->
                    <h5 class="card-title mb-3">Alert Filters</h5>

                    <div class="mb-3">
                        <label class="form-label">Alert Types</label>
                        <div class="form-text mb-2">Select which alert types trigger this webhook (leave all unchecked for all types)</div>
                        <div class="form-check">
                            <input class="form-check-input alert-type-check" type="checkbox" value="unexpected_port" id="type_unexpected">
                            <label class="form-check-label" for="type_unexpected">Unexpected Port</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input alert-type-check" type="checkbox" value="drift_detection" id="type_drift">
                            <label class="form-check-label" for="type_drift">Drift Detection</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input alert-type-check" type="checkbox" value="cert_expiry" id="type_cert">
                            <label class="form-check-label" for="type_cert">Certificate Expiry</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input alert-type-check" type="checkbox" value="weak_tls" id="type_tls">
                            <label class="form-check-label" for="type_tls">Weak TLS</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input alert-type-check" type="checkbox" value="ping_failed" id="type_ping">
                            <label class="form-check-label" for="type_ping">Ping Failed</label>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Severity Filter</label>
                        <div class="form-text mb-2">Select which severities trigger this webhook (leave all unchecked for all severities)</div>
                        <div class="form-check">
                            <input class="form-check-input severity-check" type="checkbox" value="critical" id="severity_critical">
                            <label class="form-check-label" for="severity_critical">Critical</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input severity-check" type="checkbox" value="warning" id="severity_warning">
                            <label class="form-check-label" for="severity_warning">Warning</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input severity-check" type="checkbox" value="info" id="severity_info">
                            <label class="form-check-label" for="severity_info">Info</label>
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- Advanced Settings -->
                    <h5 class="card-title mb-3">Advanced Settings</h5>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="timeout" class="form-label">Timeout (seconds)</label>
                            <input type="number" class="form-control" id="timeout" name="timeout" min="1" max="60" value="10">
                            <div class="form-text">Maximum time to wait for response</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="retry_count" class="form-label">Retry Count</label>
                            <input type="number" class="form-control" id="retry_count" name="retry_count" min="0" max="5" value="3">
                            <div class="form-text">Number of retry attempts on failure</div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- Submit Buttons -->
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('webhooks.list_webhooks') }}" class="btn btn-secondary">Cancel</a>
                        <div>
                            <button type="button" class="btn btn-outline-primary me-2" id="test-btn">
                                <i class="bi bi-send"></i> Test Webhook
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle"></i> Save Webhook
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Help Sidebar -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title"><i class="bi bi-info-circle"></i> Help</h5>

                <h6 class="mt-3">Payload Format</h6>
                <p class="small text-muted">Webhooks receive JSON payloads with alert details:</p>
                <pre class="small bg-dark text-light p-2 rounded"><code>{
  "event": "alert.created",
  "alert": {
    "id": 123,
    "type": "cert_expiry",
    "severity": "warning",
    "message": "...",
    "ip_address": "192.168.1.10",
    "port": 443
  },
  "scan": {...},
  "rule": {...}
}</code></pre>

                <h6 class="mt-3">Authentication Types</h6>
                <ul class="small">
                    <li><strong>None:</strong> No authentication</li>
                    <li><strong>Bearer:</strong> Add Authorization header with token</li>
                    <li><strong>Basic:</strong> Use username:password format</li>
                    <li><strong>Custom:</strong> Define custom HTTP headers</li>
                </ul>

                <h6 class="mt-3">Retry Logic</h6>
                <p class="small text-muted">Failed webhooks are retried with exponential backoff (2^attempt seconds, max 60s).</p>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
const webhookId = {{ webhook.id if webhook else 'null' }};
const mode = '{{ mode }}';

// Show/hide auth fields based on type
document.getElementById('auth_type').addEventListener('change', function() {
    const authType = this.value;
    const tokenField = document.getElementById('auth_token_field');
    const headersField = document.getElementById('custom_headers_field');
    const tokenHelp = document.getElementById('auth_token_help');

    tokenField.style.display = 'none';
    headersField.style.display = 'none';

    if (authType === 'bearer') {
        tokenField.style.display = 'block';
        document.getElementById('auth_token').placeholder = 'Enter bearer token';
        tokenHelp.textContent = 'Bearer token for Authorization header (encrypted when stored)';
    } else if (authType === 'basic') {
        tokenField.style.display = 'block';
        document.getElementById('auth_token').placeholder = 'username:password';
        tokenHelp.textContent = 'Format: username:password (encrypted when stored)';
    } else if (authType === 'custom') {
        headersField.style.display = 'block';
    }
});

// Load existing webhook data if editing
if (mode === 'edit' && webhookId) {
    loadWebhookData(webhookId);
}

async function loadWebhookData(id) {
    try {
        const response = await fetch(`/api/webhooks/${id}`);
        const data = await response.json();
        const webhook = data.webhook;

        // Populate form fields
        document.getElementById('name').value = webhook.name || '';
        document.getElementById('url').value = webhook.url || '';
        document.getElementById('enabled').checked = webhook.enabled;
        document.getElementById('auth_type').value = webhook.auth_type || 'none';
        document.getElementById('timeout').value = webhook.timeout || 10;
        document.getElementById('retry_count').value = webhook.retry_count || 3;

        // Trigger auth type change to show relevant fields
        document.getElementById('auth_type').dispatchEvent(new Event('change'));

        // Don't populate auth_token (it's encrypted)
        if (webhook.custom_headers) {
            document.getElementById('custom_headers').value = JSON.stringify(webhook.custom_headers, null, 2);
        }

        // Check alert types
        if (webhook.alert_types && webhook.alert_types.length > 0) {
            webhook.alert_types.forEach(type => {
                const checkbox = document.querySelector(`.alert-type-check[value="${type}"]`);
                if (checkbox) checkbox.checked = true;
            });
        }

        // Check severities
        if (webhook.severity_filter && webhook.severity_filter.length > 0) {
            webhook.severity_filter.forEach(sev => {
                const checkbox = document.querySelector(`.severity-check[value="${sev}"]`);
                if (checkbox) checkbox.checked = true;
            });
        }
    } catch (error) {
        console.error('Error loading webhook:', error);
        alert('Failed to load webhook data');
    }
}

// Form submission
document.getElementById('webhook-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const formData = {
        name: document.getElementById('name').value,
        url: document.getElementById('url').value,
        enabled: document.getElementById('enabled').checked,
        auth_type: document.getElementById('auth_type').value,
        timeout: parseInt(document.getElementById('timeout').value),
        retry_count: parseInt(document.getElementById('retry_count').value)
    };

    // Add auth token if provided
    const authToken = document.getElementById('auth_token').value;
    if (authToken) {
        formData.auth_token = authToken;
    }

    // Add custom headers if provided
    const customHeaders = document.getElementById('custom_headers').value;
    if (customHeaders.trim()) {
        try {
            formData.custom_headers = JSON.parse(customHeaders);
        } catch (e) {
            alert('Invalid JSON in custom headers');
            return;
        }
    }

    // Collect selected alert types
    const alertTypes = Array.from(document.querySelectorAll('.alert-type-check:checked'))
        .map(cb => cb.value);
    if (alertTypes.length > 0) {
        formData.alert_types = alertTypes;
    }

    // Collect selected severities
    const severities = Array.from(document.querySelectorAll('.severity-check:checked'))
        .map(cb => cb.value);
    if (severities.length > 0) {
        formData.severity_filter = severities;
    }

    try {
        const url = mode === 'edit' ? `/api/webhooks/${webhookId}` : '/api/webhooks';
        const method = mode === 'edit' ? 'PUT' : 'POST';

        const response = await fetch(url, {
            method: method,
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(formData)
        });

        const result = await response.json();

        if (result.status === 'success') {
            alert('Webhook saved successfully!');
            window.location.href = '{{ url_for("webhooks.list_webhooks") }}';
        } else {
            alert(`Failed to save webhook: ${result.message}`);
        }
    } catch (error) {
        console.error('Error saving webhook:', error);
        alert('Failed to save webhook');
    }
});

// Test webhook button
document.getElementById('test-btn').addEventListener('click', async function() {
    if (mode !== 'edit' || !webhookId) {
        alert('Please save the webhook first before testing');
        return;
    }

    if (!confirm('Send a test payload to this webhook?')) return;

    try {
        const response = await fetch(`/api/webhooks/${webhookId}/test`, { method: 'POST' });
        const result = await response.json();

        if (result.status === 'success') {
            alert(`Test successful!\nHTTP ${result.status_code}\n${result.message}`);
        } else {
            alert(`Test failed:\n${result.message}`);
        }
    } catch (error) {
        console.error('Error testing webhook:', error);
        alert('Failed to test webhook');
    }
});
</script>
{% endblock %}