@extends('layouts.public')

@section('title', 'Accept Invitation - Meduvo Health')

@php
    $roleLabels = [
        'clinic_admin' => 'Clinic Admin',
        'pcp' => 'PCP',
        'bhcm' => 'BHCM',
        'psychiatrist' => 'Psychiatrist',
        'billing_staff' => 'Billing Staff',
        'practice_manager' => 'Practice Manager',
        'clinical_support' => 'Clinical Support',
        'front_desk' => 'Front Desk',
        'patient' => 'Patient',
    ];
@endphp

@section('content')
<main class="mx-auto max-w-3xl px-5 py-10 sm:px-6 lg:px-8">
    <div class="mb-8">
        <p class="text-sm font-semibold text-brand-orange">Secure account setup</p>
        <h1 class="mt-3 text-3xl font-bold tracking-tight text-accent">Accept your Meduvo invitation.</h1>
        <p class="mt-3 text-sm leading-relaxed text-ink-secondary">Create your own password to activate access for the invited practice workspace.</p>
    </div>

    @if ($errors->any())
        <div class="mb-6 rounded-lg border border-status-critical/30 bg-status-critical/10 px-4 py-3 text-sm text-status-critical">
            {{ $errors->first() }}
        </div>
    @endif

    @if ($state !== 'valid')
        <section class="card p-6">
            <h2 class="text-lg font-semibold text-accent">
                @if ($state === 'accepted')
                    Invitation already accepted
                @elseif ($state === 'expired')
                    Invitation expired
                @elseif ($state === 'revoked')
                    Invitation revoked
                @else
                    Invitation unavailable
                @endif
            </h2>
            <p class="mt-2 text-sm leading-relaxed text-ink-secondary">
                @if ($state === 'accepted')
                    This setup link has already been used. Sign in with the account that was created from this invitation.
                @elseif ($state === 'expired')
                    This invitation is past its expiration date. Ask the clinic admin to send a new staff invitation.
                @elseif ($state === 'revoked')
                    This setup link was revoked. Ask the clinic admin to send a fresh invitation.
                @else
                    This setup link is invalid or no longer exists. Ask the clinic admin to send a fresh invitation.
                @endif
            </p>
            <div class="mt-5">
                <a href="{{ route('login') }}" class="btn-primary">Go to sign in</a>
            </div>
        </section>
    @else
        <section class="card p-6">
            <div class="grid gap-4 border-b border-border-subtle pb-5 sm:grid-cols-3">
                <div>
                    <p class="text-xs font-medium text-ink-muted">Practice</p>
                    <p class="mt-1 text-sm font-semibold text-accent">{{ $invitation->tenant?->name ?? 'Meduvo Health' }}</p>
                </div>
                <div>
                    <p class="text-xs font-medium text-ink-muted">Role</p>
                    <p class="mt-1 text-sm font-semibold text-accent">{{ $roleLabels[$invitation->role] ?? $invitation->role }}</p>
                </div>
                <div>
                    <p class="text-xs font-medium text-ink-muted">Expires</p>
                    <p class="mt-1 text-sm font-semibold text-accent">{{ \App\Support\UsFormat::date($invitation->expires_at) }}</p>
                </div>
            </div>

            <form
                method="POST"
                action="{{ $formAction ?? route('staff-invitations.accept.store', ['token' => $token]) }}"
                class="mt-6 space-y-5"
                x-data="{
                    password: '',
                    confirmation: '',
                    checks() {
                        return {
                            length: this.password.length >= 8,
                            mixed: /[a-z]/.test(this.password) && /[A-Z]/.test(this.password),
                            number: /[0-9]/.test(this.password),
                            symbol: /[^A-Za-z0-9]/.test(this.password),
                        };
                    },
                    score() {
                        return Object.values(this.checks()).filter(Boolean).length;
                    },
                    percent() {
                        return this.password.length === 0 ? 0 : Math.max(12, this.score() * 25);
                    },
                    label() {
                        if (this.password.length === 0) return 'Start typing';
                        if (this.score() <= 1) return 'Weak';
                        if (this.score() === 2) return 'Getting stronger';
                        if (this.score() === 3) return 'Almost strong';
                        return 'Strong password';
                    },
                    barClass() {
                        if (this.score() <= 1) return 'bg-status-critical';
                        if (this.score() === 2) return 'bg-status-warning';
                        if (this.score() === 3) return 'bg-brand-orange';
                        return 'bg-status-good';
                    },
                    matches() {
                        return this.confirmation.length > 0 && this.password === this.confirmation;
                    },
                }"
            >
                @csrf
                <div>
                    <label for="name" class="mb-1.5 block text-sm font-medium text-accent">Full name</label>
                    <input id="name" name="name" value="{{ old('name') }}" required class="input-field" autocomplete="name">
                </div>

                <div>
                    <label for="email" class="mb-1.5 block text-sm font-medium text-accent">Email</label>
                    <input id="email" value="{{ $invitation->email }}" readonly class="input-field bg-surface-2 text-ink-secondary">
                </div>

                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="password" class="mb-1.5 block text-sm font-medium text-accent">Password</label>
                        <input id="password" name="password" type="password" required minlength="8" class="input-field" autocomplete="new-password" x-model="password">
                    </div>
                    <div>
                        <label for="password_confirmation" class="mb-1.5 block text-sm font-medium text-accent">Confirm password</label>
                        <input id="password_confirmation" name="password_confirmation" type="password" required minlength="8" class="input-field" autocomplete="new-password" x-model="confirmation">
                    </div>
                </div>

                <div class="rounded-md border border-border-subtle bg-surface-2/70 p-3">
                    <div class="flex items-center justify-between gap-3">
                        <p class="text-xs font-semibold uppercase tracking-wide text-accent">Password strength</p>
                        <p class="text-xs font-semibold text-ink-secondary" x-text="label()">Start typing</p>
                    </div>
                    <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-white shadow-inner">
                        <div class="h-full rounded-full transition-all duration-500 ease-out" :class="barClass()" :style="`width: ${percent()}%`"></div>
                    </div>
                    <div class="mt-2 grid gap-1.5 text-xs leading-tight sm:grid-cols-2">
                        <div class="flex items-center gap-1.5 transition-colors" :class="checks().length ? 'text-status-good' : 'text-ink-muted'">
                            <span class="inline-flex h-4 w-4 items-center justify-center rounded-full border transition-all" :class="checks().length ? 'border-status-good bg-status-good text-white scale-105' : 'border-border-default bg-white'">
                                <svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="m5 13 4 4L19 7" /></svg>
                            </span>
                            8+ characters
                        </div>
                        <div class="flex items-center gap-1.5 transition-colors" :class="checks().mixed ? 'text-status-good' : 'text-ink-muted'">
                            <span class="inline-flex h-4 w-4 items-center justify-center rounded-full border transition-all" :class="checks().mixed ? 'border-status-good bg-status-good text-white scale-105' : 'border-border-default bg-white'">
                                <svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="m5 13 4 4L19 7" /></svg>
                            </span>
                            Upper/lowercase
                        </div>
                        <div class="flex items-center gap-1.5 transition-colors" :class="checks().number ? 'text-status-good' : 'text-ink-muted'">
                            <span class="inline-flex h-4 w-4 items-center justify-center rounded-full border transition-all" :class="checks().number ? 'border-status-good bg-status-good text-white scale-105' : 'border-border-default bg-white'">
                                <svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="m5 13 4 4L19 7" /></svg>
                            </span>
                            Number
                        </div>
                        <div class="flex items-center gap-1.5 transition-colors" :class="checks().symbol ? 'text-status-good' : 'text-ink-muted'">
                            <span class="inline-flex h-4 w-4 items-center justify-center rounded-full border transition-all" :class="checks().symbol ? 'border-status-good bg-status-good text-white scale-105' : 'border-border-default bg-white'">
                                <svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="m5 13 4 4L19 7" /></svg>
                            </span>
                            Symbol
                        </div>
                    </div>
                    <p x-show="confirmation.length > 0" x-cloak class="mt-2 text-xs font-medium" :class="matches() ? 'text-status-good' : 'text-status-critical'">
                        <span x-show="matches()">Passwords match.</span>
                        <span x-show="!matches()">Passwords do not match yet.</span>
                    </p>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="btn-primary">Activate account</button>
                </div>
            </form>
        </section>
    @endif
</main>
@endsection