{{-- Shared household profile rail — used by both the parent's self-service "Ma famille" page and
     the nounou's employer page. Expects $household, $completion, $imported, $importedNames and
     $importAction (the avis d'imposition upload form's action URL). --}}
@php
    $railDotClass = fn (string $anchor) => match ($completion['sections'][$anchor] ?? 'none-needed') {
        'complete' => 'profile-rail-dot--complete',
        'partial' => 'profile-rail-dot--partial',
        'empty' => 'profile-rail-dot--missing',
        default => 'profile-rail-dot--neutral',
    };
@endphp

<div class="profile-rail">
    @if (auth()->user()->isNounou())
        @if ($household->exists && ! $household->linkedParentUser)
            <div class="profile-documents-card" x-data="{ confirmSyncOpen: false }">
                <span class="profile-documents-title">Code parent</span>

                <form id="link_parent_form" method="post" action="{{ route('employers.link-parent', $household) }}" class="parent-notice-form">
                    @csrf
                    <label class="profile-field" for="parent_share_code">
                        <span>Code parent</span>
                        <input id="parent_share_code" name="parent_share_code" value="{{ old('parent_share_code') }}" maxlength="8" placeholder="Ex. GY98UN5A" class="profile-uppercase-input" required>
                        @error('parent_share_code')<small>{{ $message }}</small>@enderror
                    </label>

                    <button type="button" class="dashboard-primary-button" x-on:click="$el.closest('form').reportValidity() && (confirmSyncOpen = true)"><i class="ph-duotone ph-link" aria-hidden="true"></i>Synchroniser le parent</button>
                </form>

                <template x-teleport="body">
                    <div class="parent-sync-modal-overlay" x-show="confirmSyncOpen" x-cloak x-on:click.self="confirmSyncOpen = false" x-on:keydown.escape.window="confirmSyncOpen = false">
                        <div class="parent-sync-modal" role="dialog" aria-modal="true" aria-labelledby="parent-sync-modal-title">
                            <h3 id="parent-sync-modal-title">Synchroniser ce parent ?</h3>
                            <p>Cette action est irréversible. Le foyer sera relié au compte parent : je ne pourrai plus modifier ses informations, et l'historique complet (enfants, contrats, planning) devient accessible depuis son espace.</p>
                            <div class="parent-sync-modal-actions">
                                <button type="button" class="employers-secondary-button" x-on:click="confirmSyncOpen = false">Annuler</button>
                                <button type="submit" form="link_parent_form" class="dashboard-primary-button">Confirmer la synchronisation</button>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        @endif
    @elseif ($completion['percentage'] < 50 || $importedNames !== '')
        <div class="profile-documents-card">
            <span class="profile-documents-title">Avis d'imposition</span>

            <form method="post" action="{{ $importAction }}" enctype="multipart/form-data" class="parent-notice-form">
                @csrf
                <div class="profile-file-field" x-data="profileFileUpload(false, 'Mon avis d’imposition')">
                    <input id="avis_imposition" name="avis_imposition" type="file" accept="application/pdf" x-on:change="select">

                    <template x-if="fileName">
                        <div class="profile-document-preview-card">
                            <div class="profile-document-preview-file">
                                <span class="profile-document-preview-icon"><i class="ph-duotone" :class="iconClass()" aria-hidden="true"></i></span>
                                <div class="profile-document-preview-info">
                                    <span class="profile-document-preview-name" x-text="fileName"></span>
                                </div>
                            </div>
                            <div class="profile-document-preview-actions">
                                <label for="avis_imposition">Remplacer</label>
                            </div>
                        </div>
                    </template>
                    <template x-if="!fileName">
                        <label for="avis_imposition" class="profile-insurance-drop-row">
                            <span class="profile-insurance-drop-icon"><i class="ph-duotone ph-plus" aria-hidden="true"></i></span>
                            <span class="profile-insurance-drop-copy">
                                <strong>Déposer l'avis d'imposition</strong>
                                <small>PDF · 1 Mo maximum.</small>
                            </span>
                        </label>
                    </template>
                    @error('avis_imposition')
                        <small>{{ $message }}</small>
                    @enderror
                </div>

                <button type="submit" class="dashboard-primary-button"><i class="ph-duotone ph-magic-wand" aria-hidden="true"></i>Récupérer les infos</button>
            </form>
        </div>
    @endif

    <nav class="profile-rail-nav" aria-label="Sections du foyer">
        <a href="#sec-parent-employeur" class="profile-rail-link"><span class="profile-rail-dot {{ $railDotClass('sec-parent-employeur') }}"></span>Parent employeur</a>
        <a href="#sec-coparent" class="profile-rail-link"><span class="profile-rail-dot {{ $railDotClass('sec-coparent') }}"></span>Coparent</a>
        @unless ($household->linkedParentUser && auth()->user()->isNounou())
            <a href="#sec-pajemploi" class="profile-rail-link"><span class="profile-rail-dot {{ $railDotClass('sec-pajemploi') }}"></span>Calcul Pajemploi</a>
        @endunless
        <a href="#sec-enfants" class="profile-rail-link"><span class="profile-rail-dot {{ $railDotClass('sec-enfants') }}"></span>Enfants</a>
        <a href="#sec-garde" class="profile-rail-link"><span class="profile-rail-dot profile-rail-dot--neutral"></span>Infos de garde</a>
        @unless (auth()->user()->isNounou())
            <a href="#sec-securite" class="profile-rail-link"><span class="profile-rail-dot profile-rail-dot--neutral"></span>Sécurité &amp; données</a>
        @endunless
    </nav>

    @unless (auth()->user()->isNounou())
        <div class="profile-documents-card">
            <span class="profile-documents-title"><i class="ph-duotone ph-eye" aria-hidden="true"></i> Qui voit quoi</span>
            <p class="parent-import-hint">Votre assistante maternelle ne voit que l'état civil, l'adresse, l'enfant et le besoin de garde. Vos revenus servent uniquement à estimer vos aides.</p>
        </div>
    @endunless
</div>