{% extends "base.html" %}

{% block title %}Rejestracja - 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-2xl) 0;
    }

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

    .auth-header {
        text-align: center;
        margin-bottom: var(--spacing-xl);
    }

    .auth-header h1 {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

    .auth-header p {
        color: var(--text-secondary);
    }

    .form-group {
        margin-bottom: var(--spacing-lg);
    }

    .form-label {
        display: block;
        font-weight: 500;
        margin-bottom: var(--spacing-sm);
        color: var(--text-primary);
    }

    .form-label .required {
        color: var(--error);
    }

    .form-input {
        width: 100%;
        padding: var(--spacing-md);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: var(--font-size-base);
        font-family: var(--font-family);
        transition: var(--transition);
    }

    .form-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .form-input.error {
        border-color: var(--error);
    }

    .form-help {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-top: var(--spacing-xs);
    }

    .password-strength {
        margin-top: var(--spacing-sm);
        height: 4px;
        background-color: var(--border);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }

    .password-strength-bar {
        height: 100%;
        width: 0;
        transition: var(--transition);
    }

    .password-strength-bar.weak {
        background-color: var(--error);
        width: 33%;
    }

    .password-strength-bar.medium {
        background-color: var(--warning);
        width: 66%;
    }

    .password-strength-bar.strong {
        background-color: var(--success);
        width: 100%;
    }

    .password-requirements {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-top: var(--spacing-sm);
    }

    .password-requirements ul {
        list-style: none;
        padding: 0;
        margin: var(--spacing-sm) 0 0 0;
    }

    .password-requirements li {
        padding: var(--spacing-xs) 0;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        transition: all 0.2s ease;
    }

    .password-requirements li .checkbox-icon {
        width: 20px;
        height: 20px;
        border: 2px solid var(--border);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface);
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .password-requirements li.valid .checkbox-icon {
        background: var(--success);
        border-color: var(--success);
    }

    .password-requirements li.valid .checkbox-icon::after {
        content: "✓";
        color: white;
        font-weight: bold;
        font-size: 14px;
    }

    .password-requirements li.valid {
        color: var(--success);
        font-weight: 500;
    }

    .form-actions {
        margin-top: var(--spacing-xl);
    }

    .btn-full {
        width: 100%;
    }

    .auth-footer {
        text-align: center;
        margin-top: var(--spacing-lg);
        padding-top: var(--spacing-lg);
        border-top: 1px solid var(--border);
        color: var(--text-secondary);
    }

    .auth-footer a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
    }

    .auth-footer a:hover {
        text-decoration: underline;
    }

    /* Password toggle */
    .password-wrapper {
        position: relative;
    }

    .password-wrapper .form-input {
        padding-right: 48px;
    }

    .password-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .password-toggle:hover {
        color: var(--text-primary);
    }

    .password-toggle svg {
        width: 20px;
        height: 20px;
    }

    .nip-status {
        padding: var(--spacing-md);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .nip-status.norda-member {
        background-color: #d1fae5;
        border: 1px solid #10b981;
        color: #065f46;
    }

    .nip-status.non-member {
        background-color: #dbeafe;
        border: 1px solid #3b82f6;
        color: #1e40af;
    }

    .nip-status.error {
        background-color: #fee2e2;
        border: 1px solid #ef4444;
        color: #991b1b;
    }

    .nip-status .icon {
        font-size: var(--font-size-lg);
        font-weight: bold;
    }

    .nip-status.loading {
        background-color: #f3f4f6;
        border: 1px solid #d1d5db;
        color: #4b5563;
    }

    .btn-secondary {
        background-color: var(--surface);
        color: var(--text-primary);
        border: 2px solid var(--border);
        padding: var(--spacing-sm) var(--spacing-lg);
        border-radius: var(--radius);
        font-weight: 500;
        transition: var(--transition);
        cursor: pointer;
    }

    .btn-secondary:hover {
        background-color: var(--background);
        border-color: var(--primary);
    }

    .btn-secondary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .email-status {
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) 0;
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .email-status.available {
        color: var(--success);
    }

    .email-status.taken {
        color: var(--error);
    }

    .email-status.checking {
        color: var(--text-secondary);
    }
</style>
{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-card">
        <div class="auth-header">
            <img src="{{ url_for('static', filename='img/norda-logo.svg') }}" alt="Norda Biznes" height="56" style="margin-bottom: var(--spacing-md);">
            <h1>Utwórz konto</h1>
            <p>Dołącz do społeczności Norda Biznes Partner</p>
        </div>

        <form method="POST" action="{{ url_for('register') }}" novalidate>
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <div class="form-group">
                <label for="name" class="form-label">
                    Imię i nazwisko <span class="required">*</span>
                </label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    class="form-input"
                    placeholder="Jan Kowalski"
                    required
                    autocomplete="name"
                    autofocus
                >
            </div>

            <div class="form-group">
                <label for="email" class="form-label">
                    Adres email <span class="required">*</span>
                </label>
                <input
                    type="email"
                    id="email"
                    name="email"
                    class="form-input"
                    placeholder="twoj@email.com"
                    required
                    autocomplete="email"
                >
                <div id="emailStatus" class="form-help" style="display: none; margin-top: var(--spacing-xs);"></div>
            </div>

            <div class="form-group">
                <label for="company_nip" class="form-label">
                    NIP firmy <span class="required">*</span>
                </label>
                <div style="display: flex; gap: var(--spacing-sm);">
                    <input
                        type="text"
                        id="company_nip"
                        name="company_nip"
                        class="form-input"
                        placeholder="0000000000"
                        maxlength="10"
                        required
                        style="flex: 1;"
                    >
                    <button
                        type="button"
                        id="verifyNipBtn"
                        class="btn btn-secondary"
                        style="white-space: nowrap;"
                    >
                        Sprawdź NIP
                    </button>
                </div>
                <div class="form-help">
                    Podaj 10 cyfr bez spacji i myślników (np. 5882465814)
                </div>
                <div id="nipStatus" class="nip-status" style="display: none; margin-top: var(--spacing-sm);"></div>
            </div>

            <div class="form-group">
                <label for="password" class="form-label">
                    Hasło <span class="required">*</span>
                </label>
                <div class="password-wrapper">
                    <input
                        type="password"
                        id="password"
                        name="password"
                        class="form-input"
                        placeholder="••••••••"
                        required
                        autocomplete="new-password"
                    >
                    <button type="button" class="password-toggle" onclick="togglePassword('password', this)" title="Pokaż/ukryj hasło">
                        <svg class="eye-open" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                            <circle cx="12" cy="12" r="3"/>
                        </svg>
                        <svg class="eye-closed" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="display:none;">
                            <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/>
                            <line x1="1" y1="1" x2="23" y2="23"/>
                        </svg>
                    </button>
                </div>
                <div class="password-strength">
                    <div class="password-strength-bar" id="strengthBar"></div>
                </div>
                <div class="password-requirements">
                    <ul id="requirements">
                        <li id="req-length">
                            <span class="checkbox-icon"></span>
                            <span class="requirement-text">Minimum 8 znaków</span>
                        </li>
                        <li id="req-upper">
                            <span class="checkbox-icon"></span>
                            <span class="requirement-text">Wielka litera</span>
                        </li>
                        <li id="req-lower">
                            <span class="checkbox-icon"></span>
                            <span class="requirement-text">Mała litera</span>
                        </li>
                        <li id="req-digit">
                            <span class="checkbox-icon"></span>
                            <span class="requirement-text">Cyfra</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary btn-lg btn-full" id="submitBtn" disabled>
                    Zarejestruj się
                </button>
            </div>
        </form>

        <div class="auth-footer">
            <p>Masz już konto? <a href="{{ url_for('login') }}">Zaloguj się</a></p>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
    // Password toggle function
    function togglePassword(inputId, button) {
        const input = document.getElementById(inputId);
        const eyeOpen = button.querySelector('.eye-open');
        const eyeClosed = button.querySelector('.eye-closed');

        if (input.type === 'password') {
            input.type = 'text';
            eyeOpen.style.display = 'none';
            eyeClosed.style.display = 'block';
        } else {
            input.type = 'password';
            eyeOpen.style.display = 'block';
            eyeClosed.style.display = 'none';
        }
    }

    // Version: 2025-11-24 14:00 - Live checkbox validation
    console.log('🔧 Password validation loaded - Version 2025-11-24 14:00');

    const passwordInput = document.getElementById('password');
    const strengthBar = document.getElementById('strengthBar');
    const submitBtn = document.getElementById('submitBtn');

    // Password strength checker
    passwordInput.addEventListener('input', function() {
        const password = this.value;
        let strength = 0;
        let validCount = 0;

        // Check requirements
        const hasLength = password.length >= 8;
        const hasUpper = /[A-Z]/.test(password);
        const hasLower = /[a-z]/.test(password);
        const hasDigit = /\d/.test(password);

        // Update UI for each requirement
        updateRequirement('req-length', hasLength);
        updateRequirement('req-upper', hasUpper);
        updateRequirement('req-lower', hasLower);
        updateRequirement('req-digit', hasDigit);

        // Calculate strength
        if (hasLength) { strength++; validCount++; }
        if (hasUpper) { strength++; validCount++; }
        if (hasLower) { strength++; validCount++; }
        if (hasDigit) { strength++; validCount++; }

        // Update strength bar
        strengthBar.className = 'password-strength-bar';
        if (strength === 1 || strength === 2) {
            strengthBar.classList.add('weak');
        } else if (strength === 3) {
            strengthBar.classList.add('medium');
        } else if (strength === 4) {
            strengthBar.classList.add('strong');
        }

        // Enable submit button only if all requirements met
        submitBtn.disabled = validCount < 4;
    });

    function updateRequirement(id, valid) {
        const el = document.getElementById(id);
        console.log(`Updating ${id}: ${valid ? 'VALID' : 'invalid'}`); // DEBUG
        if (valid) {
            el.classList.add('valid');
        } else {
            el.classList.remove('valid');
        }
    }

    // Form validation
    document.querySelector('form').addEventListener('submit', function(e) {
        const name = document.getElementById('name');
        const email = document.getElementById('email');
        const password = document.getElementById('password');
        let valid = true;

        // Name validation
        if (!name.value || name.value.length < 2) {
            name.classList.add('error');
            valid = false;
        } else {
            name.classList.remove('error');
        }

        // Email validation
        if (!email.value || !email.value.includes('@')) {
            email.classList.add('error');
            valid = false;
        } else {
            email.classList.remove('error');
        }

        // Password validation
        const hasLength = password.value.length >= 8;
        const hasUpper = /[A-Z]/.test(password.value);
        const hasLower = /[a-z]/.test(password.value);
        const hasDigit = /\d/.test(password.value);

        if (!hasLength || !hasUpper || !hasLower || !hasDigit) {
            password.classList.add('error');
            valid = false;
        } else {
            password.classList.remove('error');
        }

        if (!valid) {
            e.preventDefault();
        }
    });

    // Email validation and availability check
    const emailInput = document.getElementById('email');
    const emailStatus = document.getElementById('emailStatus');
    let emailCheckTimeout;
    let emailAvailable = false;

    emailInput.addEventListener('input', function() {
        const email = this.value.trim();

        // Clear previous timeout
        clearTimeout(emailCheckTimeout);

        // Basic format validation
        if (!email) {
            emailStatus.style.display = 'none';
            emailAvailable = false;
            return;
        }

        // Proper email format validation
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
        if (!emailRegex.test(email)) {
            showEmailStatus('taken', '❌ Nieprawidłowy format email');
            emailAvailable = false;
            return;
        }

        // Check availability after 500ms of no typing
        emailCheckTimeout = setTimeout(() => {
            checkEmailAvailability(email);
        }, 500);
    });

    function checkEmailAvailability(email) {
        showEmailStatus('checking', '⏳ Sprawdzam dostępność...');

        const csrfToken = document.querySelector('input[name="csrf_token"]').value;

        fetch('/api/check-email', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({ email: email })
        })
        .then(response => response.json())
        .then(data => {
            if (data.available) {
                showEmailStatus('available', '✅ Email dostępny');
                emailAvailable = true;
            } else {
                showEmailStatus('taken', '❌ Email jest już zarejestrowany');
                emailAvailable = false;
            }
        })
        .catch(error => {
            console.error('Email check error:', error);
            emailStatus.style.display = 'none';
            emailAvailable = false;
        });
    }

    function showEmailStatus(statusClass, message) {
        emailStatus.className = 'email-status ' + statusClass;
        emailStatus.textContent = message;
        emailStatus.style.display = 'block';
    }

    // NIP verification
    const verifyNipBtn = document.getElementById('verifyNipBtn');
    const nipInput = document.getElementById('company_nip');
    const nipStatus = document.getElementById('nipStatus');
    let nipVerified = false;
    let isNordaMember = false;

    verifyNipBtn.addEventListener('click', function() {
        const nip = nipInput.value.trim();

        // Validate NIP format (10 digits)
        if (!/^\d{10}$/.test(nip)) {
            showNipStatus('error', '❌ Nieprawidłowy format NIP. Podaj 10 cyfr.');
            return;
        }

        // Show loading state
        showNipStatus('loading', '⏳ Sprawdzam NIP...');
        verifyNipBtn.disabled = true;

        // Get CSRF token from form
        const csrfToken = document.querySelector('input[name="csrf_token"]').value;

        // Call API
        fetch('/api/verify-nip', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({ nip: nip })
        })
        .then(response => response.json())
        .then(data => {
            nipVerified = true;
            isNordaMember = data.is_member;

            if (data.is_member) {
                showNipStatus('norda-member',
                    `✅ ${data.company_name}<br><strong>Firma należy do sieci NORDA</strong> - Konto uprzywilejowane`
                );
            } else {
                showNipStatus('non-member',
                    `✅ NIP zweryfikowany<br>Firma spoza sieci NORDA - Konto standardowe`
                );
            }
        })
        .catch(error => {
            console.error('NIP verification error:', error);
            showNipStatus('error', '❌ Błąd weryfikacji NIP. Spróbuj ponownie.');
            nipVerified = false;
        })
        .finally(() => {
            verifyNipBtn.disabled = false;
        });
    });

    function showNipStatus(statusClass, message) {
        nipStatus.className = 'nip-status ' + statusClass;
        nipStatus.innerHTML = '<span class="icon"></span>' + message;
        nipStatus.style.display = 'flex';
    }

    // Clear status when NIP is modified
    nipInput.addEventListener('input', function() {
        if (nipVerified) {
            nipStatus.style.display = 'none';
            nipVerified = false;
            isNordaMember = false;
        }
    });
{% endblock %}
