{% extends "base.html" %}

{% block title %}Rejestracja zakonczona - Norda Biznes Partner{% endblock %}

{% block container_class %}container-narrow{% endblock %}

{% block extra_css %}
<style>
    .auth-container {
        max-width: 480px;
        margin: 0 auto;
        padding: var(--spacing-md) 0;
    }

    .auth-card {
        background-color: var(--surface);
        padding: var(--spacing-lg);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        text-align: center;
    }

    .success-icon {
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, #10b981, #059669);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto var(--spacing-md);
        animation: scaleIn 0.5s ease-out;
    }

    @keyframes scaleIn {
        0% { transform: scale(0); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }

    .success-icon svg {
        width: 28px;
        height: 28px;
        color: white;
    }

    .success-title {
        font-size: var(--font-size-xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
    }

    .success-subtitle {
        color: var(--text-secondary);
        margin-bottom: var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    .email-box {
        background-color: #f0f9ff;
        border: 2px solid #0ea5e9;
        border-radius: var(--radius);
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .email-icon {
        width: 40px;
        height: 40px;
        background: #0ea5e9;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .email-icon svg {
        width: 20px;
        height: 20px;
        color: white;
    }

    .email-info {
        text-align: left;
    }

    .email-label {
        font-size: var(--font-size-xs);
        color: #0369a1;
    }

    .email-address {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: #0c4a6e;
        word-break: break-all;
    }

    .steps-box {
        background-color: var(--background);
        border-radius: var(--radius);
        padding: var(--spacing-sm) var(--spacing-md);
        margin-bottom: var(--spacing-sm);
        text-align: left;
    }

    .steps-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xs);
    }

    .steps-list li {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        color: var(--text-secondary);
        font-size: var(--font-size-xs);
    }

    .step-number {
        width: 18px;
        height: 18px;
        background: var(--primary);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 600;
        flex-shrink: 0;
    }

    .timer-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
        background-color: #fef3c7;
        border-radius: var(--radius);
        margin-bottom: var(--spacing-md);
        color: #92400e;
        font-size: var(--font-size-xs);
    }

    .timer-box svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .resend-section {
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--border);
    }

    .resend-text {
        color: var(--text-secondary);
        font-size: var(--font-size-xs);
        margin-bottom: var(--spacing-sm);
    }

    .btn-outline {
        background: transparent;
        border: 2px solid var(--primary);
        color: var(--primary);
    }

    .btn-outline:hover {
        background: var(--primary);
        color: white;
    }

    .waiting-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
        background-color: #ecfdf5;
        border: 1px solid #10b981;
        border-radius: var(--radius);
        margin-bottom: var(--spacing-md);
        color: #065f46;
        font-size: var(--font-size-xs);
    }

    .waiting-dot {
        width: 8px;
        height: 8px;
        background: #10b981;
        border-radius: 50%;
        animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 0.4; transform: scale(0.8); }
        50% { opacity: 1; transform: scale(1.2); }
    }

    .waiting-indicator.verified {
        background-color: #d1fae5;
        border-color: #059669;
    }

    .waiting-indicator.verified .waiting-dot {
        animation: none;
        background: #059669;
    }
</style>
{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-card">
        <div class="success-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
        </div>

        <h1 class="success-title">Rejestracja zakonczona!</h1>
        <p class="success-subtitle">Aktywuj konto klikajac link w mailu.</p>

        <div class="email-box">
            <div class="email-icon">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
            </div>
            <div class="email-info">
                <div class="email-label">Link wyslany na:</div>
                <div class="email-address">{{ email }}</div>
            </div>
        </div>

        <div class="steps-box">
            <ol class="steps-list">
                <li><span class="step-number">1</span><span>Otworz skrzynke</span></li>
                <li><span class="step-number">2</span><span>Znajdz mail od Norda</span></li>
                <li><span class="step-number">3</span><span>Kliknij "Aktywuj konto"</span></li>
                <li><span class="step-number">4</span><span>Zostaniesz zalogowany</span></li>
            </ol>
        </div>

        <div class="waiting-indicator" id="waitingIndicator">
            <span class="waiting-dot"></span>
            <span id="waitingText">Oczekuje na aktywacje...</span>
        </div>

        <div class="timer-box">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <span>Link wazny <strong>24h</strong> · Sprawdz tez folder SPAM</span>
        </div>

        <div class="resend-section">
            <p class="resend-text">Nie otrzymales maila?</p>
            <a href="{{ url_for('resend_verification') }}" class="btn btn-outline">
                Wyslij ponownie
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
// Poll for email verification status - redirect when verified
(function() {
    const email = '{{ email }}';
    const checkUrl = '{{ url_for("auth.check_verification_status") }}?email=' + encodeURIComponent(email);
    const indicator = document.getElementById('waitingIndicator');
    const waitingText = document.getElementById('waitingText');

    function checkVerification() {
        fetch(checkUrl)
            .then(response => response.json())
            .then(data => {
                if (data.verified && data.redirect) {
                    indicator.classList.add('verified');
                    waitingText.textContent = 'Aktywowano! Przekierowuje...';
                    setTimeout(() => {
                        window.location.href = data.redirect;
                    }, 500);
                }
            })
            .catch(() => {});
    }

    // Check every 3 seconds
    setInterval(checkVerification, 3000);
})();
{% endblock %}
