{% extends 'base.html.twig' %}

{% block title %}{{ 'lang.testTrustedDomain' | trans }}{% endblock %}

{% block body %}
    <div class="container mt-4">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <h2 class="mb-0">{{ 'lang.testTrustedDomain' | trans }}</h2>
                    </div>
                    <div class="card-body">
                        <!-- Current Information -->
                        <div class="row mb-4">
                            <div class="col-md-3">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h6 class="card-title">{{ 'lang.currentDomain' | trans }}</h6>
                                        <p class="card-text" id="currentDomain">-</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h6 class="card-title">{{ 'lang.currentIp' | trans }}</h6>
                                        <p class="card-text" id="currentIp">-</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h6 class="card-title">{{ 'lang.trustedStatus' | trans }}</h6>
                                        <p class="card-text" id="trustedStatus">
                                            <span class="badge bg-secondary">{{ 'lang.checking' | trans }}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h6 class="card-title">{{ 'lang.debugInfo' | trans }}</h6>
                                        <p class="card-text" id="debugInfo">
                                            <small class="text-muted">{{ 'lang.loading' | trans }}</small>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Manual Test Form -->
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">{{ 'lang.manualTest' | trans }}</h5>
                            </div>
                            <div class="card-body">
                                <form id="testForm">
                                    <div class="mb-3">
                                        <label for="domain" class="form-label">{{ 'lang.domain' | trans }}</label>
                                        <input type="text" class="form-control" id="domain" name="domain" 
                                               placeholder="example.com или 192.168.1.1" required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="userSettingsId" class="form-label">{{ 'lang.userSettingsId' | trans }}</label>
                                        <input type="number" class="form-control" id="userSettingsId" name="user_settings_id" 
                                               value="{{ user_setting.id }}" required>
                                    </div>
                                    <button type="submit" class="btn btn-primary">{{ 'lang.test' | trans }}</button>
                                </form>
                                
                                <div id="result" class="mt-4" style="display: none;">
                                    <div class="alert" id="resultAlert">
                                        <h5>{{ 'lang.result' | trans }}:</h5>
                                        <pre id="resultContent"></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input id="domain-check" type="hidden" value="{{ path('app_trusted_domain_api_check') }}" >
        <input id="domain-check-current" type="hidden" value="{{ path('app_trusted_domain_api_check_current') }}" >
    </div>

    <script>
        // Get current domain and IP
        const pathDomainCheck = document.getElementById('domain-check').value
        const pathDomainCheckCurrent = document.getElementById('domain-check-current').value


        function getCurrentInfo() {
            const currentDomain = window.location.hostname;
            document.getElementById('currentDomain').textContent = currentDomain;
            
            // Get IP address
            fetch('https://api.ipify.org?format=json')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('currentIp').textContent = data.ip;
                    
                    // Check both domain and IP
                    checkCurrentTrust(currentDomain, data.ip, {{ user_setting.id }});
                })
                .catch(error => {
                    document.getElementById('currentIp').textContent = '{{ 'lang.unavailable' | trans }}';
                    console.error('Error getting IP:', error);
                });
        }

        // Check current domain and IP trust status
        function checkCurrentTrust(domain, ip, userSettingsId) {
            fetch(`${pathDomainCheckCurrent}?domain=${encodeURIComponent(domain)}&ip=${encodeURIComponent(ip)}&user_settings_id=${userSettingsId}`)
                .then(response => response.json())
                .then(data => {
                    const statusElement = document.getElementById('trustedStatus');
                    const debugElement = document.getElementById('debugInfo');
                    
                    if (data.error) {
                        statusElement.innerHTML = '<span class="badge bg-danger">{{ 'lang.error' | trans }}</span>';
                        debugElement.innerHTML = '<small class="text-danger">Error: ' + data.error + '</small>';
                    } else {
                        const results = data.results;
                        let statusHtml = '';
                        let debugHtml = '';
                        
                        if (results.domain && results.domain.is_trusted) {
                            statusHtml += '<span class="badge bg-success me-1">{{ 'lang.trusted' | trans }} ({{ 'lang.domain' | trans }})</span>';
                            debugHtml += '<small class="text-success">Domain trusted ✓</small><br>';
                        } else if (results.ip && results.ip.is_trusted) {
                            statusHtml += '<span class="badge bg-success me-1">{{ 'lang.trusted' | trans }} (IP)</span>';
                            debugHtml += '<small class="text-success">IP trusted ✓</small><br>';
                        } else {
                            statusHtml += '<span class="badge bg-warning">{{ 'lang.notTrusted' | trans }}</span>';
                            debugHtml += '<small class="text-warning">Not trusted ✗</small><br>';
                        }
                        
                        // Add debug info
                        if (results.domain) {
                            debugHtml += '<small class="text-muted">Domain: ' + results.domain.value + ' → ' + (results.domain.is_trusted ? 'trusted' : 'not trusted') + '</small><br>';
                        }
                        if (results.ip) {
                            debugHtml += '<small class="text-muted">IP: ' + results.ip.value + ' → ' + (results.ip.is_trusted ? 'trusted' : 'not trusted') + '</small>';
                        }
                        
                        statusElement.innerHTML = statusHtml;
                        debugElement.innerHTML = debugHtml;
                    }
                })
                .catch(error => {
                    const statusElement = document.getElementById('trustedStatus');
                    const debugElement = document.getElementById('debugInfo');
                    statusElement.innerHTML = '<span class="badge bg-danger">{{ 'lang.error' | trans }}</span>';
                    debugElement.innerHTML = '<small class="text-danger">Network error</small>';
                    console.error('Error checking trust status:', error);
                });
        }

        // Check if domain is trusted (for manual testing)
        function checkDomainTrust(domain, userSettingsId) {
            fetch(`${pathDomainCheck}?domain=${encodeURIComponent(domain)}&user_settings_id=${userSettingsId}`)
                .then(response => response.json())
                .then(data => {
                    const statusElement = document.getElementById('trustedStatus');
                    if (data.error) {
                        statusElement.innerHTML = '<span class="badge bg-danger">{{ 'lang.error' | trans }}</span>';
                    } else {
                        if (data.is_trusted) {
                            statusElement.innerHTML = '<span class="badge bg-success">{{ 'lang.trusted' | trans }}</span>';
                        } else {
                            statusElement.innerHTML = '<span class="badge bg-warning">{{ 'lang.notTrusted' | trans }}</span>';
                        }
                    }
                })
                .catch(error => {
                    const statusElement = document.getElementById('trustedStatus');
                    statusElement.innerHTML = '<span class="badge bg-danger">{{ 'lang.error' | trans }}</span>';
                    console.error('Error checking domain trust:', error);
                });
        }

        // Manual test form
        document.getElementById('testForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const domain = document.getElementById('domain').value;
            const userSettingsId = document.getElementById('userSettingsId').value;
            
            fetch(`${pathDomainCheck}?domain=${encodeURIComponent(domain)}&user_settings_id=${userSettingsId}`)
                .then(response => response.json())
                .then(data => {
                    const resultDiv = document.getElementById('result');
                    const resultAlert = document.getElementById('resultAlert');
                    const resultContent = document.getElementById('resultContent');
                    
                    resultContent.textContent = JSON.stringify(data, null, 2);
                    
                    if (data.error) {
                        resultAlert.className = 'alert alert-danger';
                    } else {
                        resultAlert.className = data.is_trusted ? 'alert alert-success' : 'alert alert-warning';
                    }
                    
                    resultDiv.style.display = 'block';
                })
                .catch(error => {
                    const resultDiv = document.getElementById('result');
                    const resultAlert = document.getElementById('resultAlert');
                    const resultContent = document.getElementById('resultContent');
                    
                    resultContent.textContent = 'Error: ' + error.message;
                    resultAlert.className = 'alert alert-danger';
                    resultDiv.style.display = 'block';
                });
        });

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            getCurrentInfo();
        });
    </script>
{% endblock %}