<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Painel de Controle - Abertura de Portas</title>
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
    <link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
    <div class="app-container">
        <main class="control-panel dashboard-panel">
            <header class="app-header">
                <div class="app-logo">
                    <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Logo">
                </div>
                <h1 class="app-title">Controle de Acesso</h1>
                <p class="app-subtitle">Abertura remota para equipamentos ControlID</p>
            </header>

            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    <div class="flash-stack">
                        {% for category, message in messages %}
                            <div class="flash-message flash-{{ category }}">{{ message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endwith %}

            <section class="action-section">
                {% if active_device %}
                    <div class="status-indicator">Sistema online - pronto para uso</div>
                    <div class="active-device-card">
                        <span class="section-label">Equipamento ativo</span>
                        <h2>{{ active_device.name }}</h2>
                        <p>{{ active_device.location or "Local nao informado" }}</p>
                        <div class="device-meta">
                            <span>{{ active_device.device_ip }}:{{ active_device.device_port }}</span>
                            <span>{{ active_device.device_login }}</span>
                        </div>
                    </div>

                    <form action="{{ url_for('mostrar') }}" method="POST" id="accessForm">
                        <button type="submit" class="main-button" id="accessButton">
                            <span class="loading-spinner"></span>
                            <span class="button-text">Abrir porta</span>
                        </button>
                    </form>
                {% else %}
                    <div class="empty-state">
                        <span class="section-label">Configuracao pendente</span>
                        <h2>Nenhum equipamento ativo</h2>
                        <p>Cadastre um ControlID para liberar a abertura remota.</p>
                    </div>
                {% endif %}
            </section>

            <section class="info-section">
                <div class="info-item">
                    <strong>Equipamentos cadastrados:</strong> {{ devices|length }}
                </div>
                <div class="info-item">
                    <strong>Persistencia:</strong> banco local SQLite
                </div>
                <div class="info-item">
                    <a class="secondary-link" href="{{ url_for('configuracoes') }}">Gerenciar equipamentos</a>
                </div>
                <div class="info-item">
                    <a class="secondary-link" href="{{ url_for('logout') }}">Sair</a>
                </div>
            </section>
        </main>
    </div>

    <script>
        const accessForm = document.getElementById('accessForm');
        if (accessForm) {
            accessForm.addEventListener('submit', function() {
                const button = document.getElementById('accessButton');
                button.classList.add('loading');
                button.disabled = true;
            });
        }

        function createFloatingParticle() {
            const particle = document.createElement('div');
            particle.style.cssText = `
                position: fixed;
                width: 4px;
                height: 4px;
                background: rgba(0, 212, 255, 0.6);
                border-radius: 50%;
                pointer-events: none;
                z-index: 1;
                left: ${Math.random() * 100}vw;
                top: 100vh;
                animation: floatUp ${3 + Math.random() * 4}s linear forwards;
            `;
            document.body.appendChild(particle);
            setTimeout(() => particle.remove(), 7000);
        }

        const style = document.createElement('style');
        style.textContent = `
            @keyframes floatUp {
                to {
                    transform: translateY(-100vh) rotate(360deg);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);
        setInterval(createFloatingParticle, 3000);
    </script>
</body>
</html>
