@extends('layouts.auth')

@section('title', 'Set up your studio')
@section('width', 'max-w-lg')

@push('head')
    <script src="https://www.paypal.com/sdk/js?client-id={{ config('services.paypal.client_id') }}&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
@endpush

@section('content')
<h1 class="display text-3xl">Set up your studio.</h1>
<p class="mt-3 text-sm" style="color: var(--ink-soft);">
    Already have one?
    <a href="{{ route('login') }}" class="font-semibold underline decoration-2 underline-offset-4" style="color: var(--stencil);">Log in</a>
</p>

@if($errors->any())
    <div class="mt-7 border-l-2 pl-4 py-1" style="border-color: var(--bad);">
        <ul class="space-y-1 text-sm" style="color: var(--bad);">
            @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
        </ul>
    </div>
@endif

{{-- No form element: the fields are read by id and posted with fetch once
     PayPal confirms the subscription, so nothing can be submitted early. --}}
<div class="mt-8 space-y-5">

    <div>
        <label for="studio_name" class="field-label">Studio name</label>
        <input id="studio_name" type="text" value="{{ old('studio_name') }}" required autofocus class="field">
    </div>

    <div>
        <label for="name" class="field-label">Your name</label>
        <input id="name" type="text" value="{{ old('name') }}" required class="field">
    </div>

    <div>
        <label for="email" class="field-label">Email</label>
        <input id="email" type="email" value="{{ old('email') }}" required autocomplete="email" class="field">
    </div>

    <div class="grid gap-5 sm:grid-cols-2">
        <div>
            <label for="password" class="field-label">Password</label>
            <input id="password" type="password" required autocomplete="new-password" minlength="8" class="field">
        </div>
        <div>
            <label for="password_confirmation" class="field-label">Confirm it</label>
            <input id="password_confirmation" type="password" required autocomplete="new-password" class="field">
        </div>
    </div>

    <fieldset>
        <legend class="field-label">Choose a plan</legend>
        <div class="mt-1 space-y-2" id="plan-options">
            @foreach($plans as $plan)
                <label id="plan-label-{{ $plan->id }}"
                       onclick="selectPlan('{{ $plan->id }}', '{{ strtolower($plan->name) }}')"
                       class="plan-option relative flex cursor-pointer items-start gap-3 p-4"
                       style="background: var(--surface); outline: 1px solid var(--rule); outline-offset: -1px;">
                    <input type="radio" name="plan_id" value="{{ $plan->id }}" id="plan-radio-{{ $plan->id }}"
                           class="sr-only" data-plan-slug="{{ strtolower($plan->name) }}"
                           data-plan-free="{{ $plan->isFree() ? '1' : '0' }}"
                           {{ $loop->first ? 'checked required' : '' }}>

                    <span class="flex flex-1 flex-col">
                        <span class="flex items-center gap-2">
                            <span class="text-sm font-semibold">{{ $plan->name }}</span>
                            @if($plan->name === 'Professional')
                                <span class="pill pill-stencil">Popular</span>
                            @endif
                        </span>
                        <span class="mt-1 flex items-baseline gap-1">
                            @if($plan->isFree())
                                <span class="display text-2xl">Free</span>
                                <span class="text-sm" style="color: var(--muted);">forever</span>
                            @else
                                <span class="display text-2xl">${{ number_format($plan->price, 2) }}</span>
                                <span class="text-sm" style="color: var(--muted);">/month</span>
                            @endif
                        </span>
                        @if($plan->description)
                            <span class="mt-1.5 text-xs leading-relaxed" style="color: var(--muted);">{{ $plan->description }}</span>
                        @endif
                    </span>

                    <svg id="plan-check-{{ $plan->id }}" class="mt-1 size-5 shrink-0 {{ $loop->first ? '' : 'hidden' }}"
                         style="color: var(--stencil);" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                    </svg>
                </label>
            @endforeach
        </div>
    </fieldset>

    <div>
        {{-- Paid plans check out through PayPal; the free plan has nothing to
             charge for, so it submits straight through. --}}
        <div id="paid-checkout">
            <p class="field-label">Subscribe with PayPal</p>
            <div id="paypal-button-container" style="min-height: 55px;"></div>
        </div>

        <div id="free-checkout" style="display:none;">
            <button type="button" id="free-submit" class="btn btn-primary w-full py-3">
                Create my studio
            </button>
        </div>

        <div id="paypal-message" style="display:none; margin-top:.75rem; padding:.75rem; text-align:center; font-weight:500; font-size:.875rem;"></div>
        <div id="form-errors" style="display:none; margin-top:.75rem; padding:.75rem; text-align:center; font-weight:500; font-size:.875rem; background: var(--bad-wash); color: var(--bad);"></div>
    </div>

    <p class="text-xs leading-relaxed" style="color: var(--muted);">
        <span id="terms-paid">Your studio is created once PayPal confirms the subscription. Cancel any time from your
        settings.</span>
        <span id="terms-free" style="display:none;">No card needed, and no time limit. Upgrade later from your settings when you
        take on another artist.</span>
        By continuing you agree to our
        <a href="{{ route('terms') }}" class="underline decoration-2 underline-offset-2">terms</a>
        and <a href="{{ route('privacy') }}" class="underline decoration-2 underline-offset-2">privacy policy</a>.
    </p>
</div>
@endsection

@push('scripts')
<script>
// PayPal plan ID mapping
        var paypalPlanIds = {
            starter: '{{ config("services.paypal.plans.starter") }}',
            professional: '{{ config("services.paypal.plans.professional") }}',
            enterprise: '{{ config("services.paypal.plans.enterprise") }}'
        };

        var selectedPlanSlug = '{{ strtolower($plans->first()->name ?? "starter") }}';
        var selectedPlanId = '{{ $plans->first()->id ?? "" }}';
        var selectedPlanIsFree = {{ ($plans->first()?->isFree() ?? false) ? 'true' : 'false' }};
        var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        // Plan selection
        function selectPlan(planId, planSlug) {
            document.querySelectorAll('.plan-option').forEach(function(label) {
                label.style.outline = '1px solid var(--rule)';
                label.style.outlineOffset = '-1px';
            });
            document.querySelectorAll('[id^="plan-check-"]').forEach(function(svg) {
                svg.classList.add('hidden');
            });
            document.querySelectorAll('input[name="plan_id"]').forEach(function(radio) {
                radio.checked = false;
            });

            var label = document.getElementById('plan-label-' + planId);
            label.style.outline = '2px solid var(--stencil)';
            label.style.outlineOffset = '-2px';

            document.getElementById('plan-check-' + planId).classList.remove('hidden');
            document.getElementById('plan-radio-' + planId).checked = true;

            selectedPlanSlug = planSlug;
            selectedPlanId = planId;

            // Swap the checkout control to match the plan. A free plan has no
            // PayPal subscription to create, so the button would fail.
            selectedPlanIsFree = document.getElementById('plan-radio-' + planId).dataset.planFree === '1';
            document.getElementById('paid-checkout').style.display = selectedPlanIsFree ? 'none' : '';
            document.getElementById('free-checkout').style.display = selectedPlanIsFree ? '' : 'none';
            document.getElementById('terms-paid').style.display = selectedPlanIsFree ? 'none' : '';
            document.getElementById('terms-free').style.display = selectedPlanIsFree ? '' : 'none';
        }

        document.addEventListener('DOMContentLoaded', function() {
            var firstRadio = document.querySelector('input[name="plan_id"]:checked');
            if (firstRadio) {
                selectPlan(firstRadio.value, firstRadio.dataset.planSlug);
            }

            document.getElementById('free-submit').addEventListener('click', function() {
                if (!validateForm()) {
                    return;
                }
                this.disabled = true;
                this.textContent = 'Creating your studio...';
                submitRegistration(null).finally(function() {
                    var btn = document.getElementById('free-submit');
                    btn.disabled = false;
                    btn.textContent = 'Create my studio';
                });
            });
        });

        // Shared by both checkout paths. subscriptionId is null on a free plan,
        // where the server does not ask for one.
        async function submitRegistration(subscriptionId) {
            var msgEl = document.getElementById('paypal-message');
            msgEl.style.display = 'block';
            msgEl.style.background = 'rgba(107, 70, 193, 0.1)';
            msgEl.style.color = '#6B46C1';
            msgEl.textContent = 'Creating your account...';

            try {
                var response = await fetch('{{ route("register") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        studio_name: document.getElementById('studio_name').value,
                        name: document.getElementById('name').value,
                        email: document.getElementById('email').value,
                        password: document.getElementById('password').value,
                        password_confirmation: document.getElementById('password_confirmation').value,
                        plan_id: selectedPlanId,
                        paypal_subscription_id: subscriptionId
                    })
                });

                var result = await response.json();

                if (result.success) {
                    // The only conversion that matters. Reported with the plan
                    // so free and paid signups can be told apart.
                    if (typeof gtag === 'function') {
                        gtag('event', 'sign_up', {
                            method: selectedPlanIsFree ? 'free' : 'paypal',
                            plan: selectedPlanSlug
                        });
                    }

                    msgEl.style.background = 'rgba(16, 185, 129, 0.1)';
                    msgEl.style.color = '#065F46';
                    msgEl.textContent = result.message || 'Account created! Redirecting...';
                    setTimeout(function() { window.location.href = result.redirect; }, 1500);
                } else {
                    msgEl.style.background = 'rgba(220, 38, 38, 0.1)';
                    msgEl.style.color = '#DC2626';
                    if (result.errors) {
                        msgEl.textContent = Object.values(result.errors).flat().join(' ');
                    } else {
                        msgEl.textContent = result.message || 'Something went wrong. Please try again.';
                    }
                }
            } catch (error) {
                msgEl.style.display = 'block';
                msgEl.style.background = 'rgba(220, 38, 38, 0.1)';
                msgEl.style.color = '#DC2626';
                msgEl.textContent = 'An error occurred. Please contact support.';
            }
        }

        // Client-side form validation
        function validateForm() {
            var errorsEl = document.getElementById('form-errors');
            var errors = [];

            var studioName = document.getElementById('studio_name').value.trim();
            var name = document.getElementById('name').value.trim();
            var email = document.getElementById('email').value.trim();
            var password = document.getElementById('password').value;
            var passwordConfirm = document.getElementById('password_confirmation').value;

            if (!studioName) errors.push('Studio name is required.');
            if (!name) errors.push('Your name is required.');
            if (!email) errors.push('Email address is required.');
            if (password.length < 8) errors.push('Password must be at least 8 characters.');
            if (password !== passwordConfirm) errors.push('Password confirmation does not match.');

            if (errors.length > 0) {
                errorsEl.innerHTML = errors.join('<br>');
                errorsEl.style.display = 'block';
                return false;
            }

            errorsEl.style.display = 'none';
            return true;
        }

        // PayPal subscription button
        paypal.Buttons({
            style: {
                shape: 'rect',
                color: 'gold',
                layout: 'vertical',
                label: 'subscribe'
            },
            createSubscription: function(data, actions) {
                if (!validateForm()) {
                    return actions.reject();
                }

                var paypalPlanId = paypalPlanIds[selectedPlanSlug];
                if (!paypalPlanId) {
                    var errorsEl = document.getElementById('form-errors');
                    errorsEl.textContent = 'Plan configuration error. Please contact support.';
                    errorsEl.style.display = 'block';
                    return actions.reject();
                }

                return actions.subscription.create({
                    plan_id: paypalPlanId
                });
            },
            onApprove: async function(data, actions) {
                await submitRegistration(data.subscriptionID);
            },
            onError: function(err) {
                var msgEl = document.getElementById('paypal-message');
                msgEl.style.display = 'block';
                msgEl.style.background = 'rgba(220, 38, 38, 0.1)';
                msgEl.style.color = '#DC2626';
                msgEl.textContent = 'PayPal encountered an error. Please try again.';
            }
        }).render('#paypal-button-container');
</script>
@endpush