@page "/signup"
@model PlanTempus.Application.Features.Accounts.Pages.SignupModel
@{
    ViewData["Title"] = Model.SelectedPlan.IsContactSales ? "Kontakt salg" : "Opret konto";
    Layout = "/Features/_Shared/Pages/_AuthLayout.cshtml";

    var plan = Model.SelectedPlan;
    var badgeClass = plan.IsContactSales ? plan.BadgeClass : (plan.IsFree ? plan.BadgeClass : "selected");
    var badgeIcon = plan.IsContactSales ? plan.BadgeIcon : (plan.IsFree ? plan.BadgeIcon : "ph-check");
    var badgeText = plan.IsContactSales ? plan.BadgeText : (plan.IsFree ? plan.BadgeText : "Valgt");
}

<swp-auth-layout>
    <!-- Selected Plan Panel -->
    <swp-auth-plan-panel>
        <swp-auth-logo>
            <i class="ph ph-calendar-check"></i>
            <span>PlanTempus</span>
        </swp-auth-logo>

        <swp-selected-plan-header>@(plan.IsContactSales ? "Enterprise løsning" : "Dit valgte abonnement")</swp-selected-plan-header>

        <swp-plan-card class="selected">
            <swp-plan-badge class="@badgeClass">
                <i class="ph @badgeIcon"></i>
                @badgeText
            </swp-plan-badge>
            <swp-plan-name>@plan.Name</swp-plan-name>
            <swp-plan-users>@plan.UserRange</swp-plan-users>
            @if (plan.PricePerMonth.HasValue)
            {
                <swp-plan-price>
                    <swp-plan-price-amount>@plan.PriceDisplay</swp-plan-price-amount>
                    <swp-plan-price-period>kr/md</swp-plan-price-period>
                </swp-plan-price>
            }
            <swp-plan-features>
                @foreach (var feature in plan.Features)
                {
                    <swp-plan-feature>
                        <i class="ph ph-check-circle"></i>
                        @feature
                    </swp-plan-feature>
                }
            </swp-plan-features>
        </swp-plan-card>

        <swp-change-plan-link>
            <a href="/pricing">
                <i class="ph ph-arrows-clockwise"></i>
                Skift abonnement
            </a>
        </swp-change-plan-link>
    </swp-auth-plan-panel>

    <!-- Form Panel -->
    <swp-auth-form-panel>
        <swp-auth-form-container>
            @if (plan.IsContactSales)
            {
                <!-- Enterprise Contact Form -->
                <swp-auth-header>
                    <swp-auth-title>Kontakt vores salgsteam</swp-auth-title>
                    <swp-auth-description>Vi vender tilbage inden for 24 timer</swp-auth-description>
                </swp-auth-header>

                <swp-auth-form>
                    <swp-form-group>
                        <swp-form-label>Virksomhedsnavn</swp-form-label>
                        <swp-form-input>
                            <input type="text"
                                   name="companyName"
                                   placeholder="F.eks. Salon Group ApS"
                                   autocomplete="organization" />
                        </swp-form-input>
                    </swp-form-group>

                    <swp-form-group>
                        <swp-form-label>Antal ansatte</swp-form-label>
                        <swp-form-input>
                            <select name="employeeCount">
                                <option value="">Vælg antal</option>
                                <option value="8-15">8-15 ansatte</option>
                                <option value="16-30">16-30 ansatte</option>
                                <option value="31-50">31-50 ansatte</option>
                                <option value="50+">Mere end 50 ansatte</option>
                            </select>
                        </swp-form-input>
                    </swp-form-group>

                    <swp-form-group>
                        <swp-form-label>Kontaktperson</swp-form-label>
                        <swp-form-input>
                            <input type="text"
                                   name="contactName"
                                   placeholder="Dit fulde navn"
                                   autocomplete="name" />
                        </swp-form-input>
                    </swp-form-group>

                    <swp-form-row>
                        <swp-form-group>
                            <swp-form-label>Email</swp-form-label>
                            <swp-form-input>
                                <input type="email"
                                       name="email"
                                       placeholder="din@email.dk"
                                       autocomplete="email" />
                            </swp-form-input>
                        </swp-form-group>

                        <swp-form-group>
                            <swp-form-label>Telefon</swp-form-label>
                            <swp-form-input>
                                <input type="tel"
                                       name="phone"
                                       placeholder="+45 12 34 56 78"
                                       autocomplete="tel" />
                            </swp-form-input>
                        </swp-form-group>
                    </swp-form-row>

                    <swp-form-group>
                        <swp-form-label>Besked <span class="optional">(valgfrit)</span></swp-form-label>
                        <swp-form-input>
                            <textarea name="message"
                                      rows="3"
                                      placeholder="Fortæl os om jeres behov..."></textarea>
                        </swp-form-input>
                    </swp-form-group>

                    <swp-btn class="primary full-width lg">
                        <span>Send forespørgsel</span>
                        <i class="ph ph-paper-plane-tilt"></i>
                    </swp-btn>
                </swp-auth-form>

                <swp-auth-footer>
                    <swp-auth-footer-text>
                        Eller ring til os på <a href="tel:+4570123456">70 12 34 56</a>
                    </swp-auth-footer-text>
                </swp-auth-footer>
            }
            else
            {
                <!-- Standard Signup Form -->
                <swp-auth-header>
                    <swp-auth-title>Opret din konto</swp-auth-title>
                    <swp-auth-description>
                        @(plan.IsFree ? "Kom i gang gratis - ingen kreditkort påkrævet" : "Start din gratis 14-dages prøveperiode")
                    </swp-auth-description>
                </swp-auth-header>

                <!-- User Info (already known) -->
                <swp-user-info-card>
                    <swp-user-avatar>MJ</swp-user-avatar>
                    <swp-user-details>
                        <swp-user-name>Maria Jensen</swp-user-name>
                        <swp-user-email>maria@example.dk</swp-user-email>
                    </swp-user-details>
                    <swp-user-verified>
                        <i class="ph ph-check-circle"></i>
                    </swp-user-verified>
                </swp-user-info-card>

                <swp-auth-form>
                    <swp-form-group>
                        <swp-form-label>Virksomhedsnavn</swp-form-label>
                        <swp-form-input>
                            <input type="text"
                                   name="companyName"
                                   placeholder="F.eks. Salon Copenhagen"
                                   autocomplete="organization" />
                        </swp-form-input>
                    </swp-form-group>

                    <swp-form-group>
                        <swp-form-label>Vælg adgangskode</swp-form-label>
                        <swp-form-input class="has-icon">
                            <input type="password"
                                   name="password"
                                   id="password"
                                   placeholder="Mindst 8 tegn"
                                   autocomplete="new-password" />
                            <span class="input-icon" id="togglePassword">
                                <i class="ph ph-eye"></i>
                            </span>
                        </swp-form-input>
                        <swp-password-strength>
                            <swp-strength-bar>
                                <swp-strength-fill id="strengthFill"></swp-strength-fill>
                            </swp-strength-bar>
                            <swp-strength-text id="strengthText"></swp-strength-text>
                        </swp-password-strength>
                    </swp-form-group>

                    <swp-form-checkbox>
                        <input type="checkbox" name="acceptTerms" id="acceptTerms" />
                        <span>
                            Jeg accepterer <a href="/terms">vilkår og betingelser</a>
                            samt <a href="/privacy">privatlivspolitikken</a>
                        </span>
                    </swp-form-checkbox>

                    <swp-btn class="primary full-width lg">
                        <span>Opret konto</span>
                        <i class="ph ph-arrow-right"></i>
                    </swp-btn>
                </swp-auth-form>

                <swp-auth-footer>
                    <swp-auth-footer-text>
                        Har du allerede en konto? <a href="/login">Log ind</a>
                    </swp-auth-footer-text>
                </swp-auth-footer>
            }
        </swp-auth-form-container>
    </swp-auth-form-panel>
</swp-auth-layout>

@if (!Model.SelectedPlan.IsContactSales)
{
    @section Scripts {
    <script>
        // Toggle password visibility
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');
        const toggleIcon = togglePassword.querySelector('i');

        togglePassword.addEventListener('click', function() {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            toggleIcon.classList.toggle('ph-eye');
            toggleIcon.classList.toggle('ph-eye-slash');
        });

        // Password strength indicator
        const strengthFill = document.getElementById('strengthFill');
        const strengthText = document.getElementById('strengthText');

        passwordInput.addEventListener('input', function() {
            const password = this.value;
            const strength = calculateStrength(password);

            strengthFill.className = '';
            strengthText.className = '';

            if (password.length === 0) {
                strengthText.textContent = '';
                return;
            }

            if (strength < 2) {
                strengthFill.classList.add('weak');
                strengthText.classList.add('weak');
                strengthText.textContent = 'Svag';
            } else if (strength < 3) {
                strengthFill.classList.add('fair');
                strengthText.classList.add('fair');
                strengthText.textContent = 'Middel';
            } else if (strength < 4) {
                strengthFill.classList.add('good');
                strengthText.classList.add('good');
                strengthText.textContent = 'God';
            } else {
                strengthFill.classList.add('strong');
                strengthText.classList.add('strong');
                strengthText.textContent = 'Stærk';
            }
        });

        function calculateStrength(password) {
            let strength = 0;
            if (password.length >= 8) strength++;
            if (password.length >= 12) strength++;
            if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
            if (/\d/.test(password)) strength++;
            if (/[^a-zA-Z0-9]/.test(password)) strength++;
            return strength;
        }
    </script>
    }
}