<?php
use App\Core\Csrf;

$editing = !empty($editing);
$old = $_SESSION['old'] ?? ($client ?? []);
$errors = $_SESSION['form_errors'] ?? [];
unset($_SESSION['old'], $_SESSION['form_errors']);

$adherentOld = static function (string $key, string $default = '') use ($old): string {
    return htmlspecialchars((string)($old[$key] ?? $default), ENT_QUOTES, 'UTF-8');
};
?>
<link rel="stylesheet" href="/public/assets/css/cda-v4-5-adherents.css">

<section class="page-intro">
    <div>
        <span class="page-kicker">Dossier adhérent</span>
        <h2><?= $editing ? 'Modifier l’adhérent' : 'Nouvel adhérent' ?></h2>
        <p>
            L’adhérent est le titulaire administratif du dossier familial.
            Sa fiche de participant est le même profil, réutilisé lorsqu’il suit lui-même une activité.
        </p>
    </div>

    <a class="button button-secondary" href="/public/clients">
        Retour aux adhérents
    </a>
</section>

<section class="adherent-explanation">
    <article class="adherent-role primary-role">
        <div class="role-icon">👤</div>
        <div>
            <span>1</span>
            <strong>Adhérent titulaire</strong>
            <p>Identité administrative, compte famille, adhésion annuelle et facturation.</p>
        </div>
    </article>

    <div class="role-arrow">→</div>

    <article class="adherent-role">
        <div class="role-icon">👨‍👩‍👧</div>
        <div>
            <span>2</span>
            <strong>Famille</strong>
            <p>Le dossier regroupe le titulaire, son conjoint et les autres membres.</p>
        </div>
    </article>

    <div class="role-arrow">→</div>

    <article class="adherent-role">
        <div class="role-icon">🎨</div>
        <div>
            <span>3</span>
            <strong>Membres participants</strong>
            <p>Le titulaire n’est pas recréé : son profil existant peut aussi participer aux ateliers.</p>
        </div>
    </article>
</section>

<?php if ($errors): ?>
<div class="alert alert-error">
    <strong>Certains champs doivent être corrigés :</strong>
    <ul>
        <?php foreach ($errors as $error): ?>
        <li><?= htmlspecialchars((string)$error) ?></li>
        <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

<form method="post" action="<?= $editing ? '/public/clients/modifier' : '/public/clients' ?>" class="v4-form">
    <?= Csrf::field() ?>
    <?php if ($editing): ?><input type="hidden" name="id" value="<?= (int)$client['id'] ?>"><?php endif; ?>

    <section class="form-card">
        <header class="form-card-header">
            <div class="form-step">1</div>
            <div>
                <h3>Identité de l’adhérent titulaire</h3>
                <p>Cette personne sera le titulaire principal du dossier familial.</p>
            </div>
            <div class="form-icon">👤</div>
        </header>

        <div class="code-preview-v4">
            <span>Code adhérent prévisionnel</span>
            <strong id="adherentCodePreview"><?= $editing ? htmlspecialchars((string)($client['code_client'] ?? '')) : 'C…' ?></strong>
            <small>Format : C + nom + début du prénom, 13 caractères maximum.</small>
        </div>

        <div class="form-grid grid-4">
            <label class="field">
                <span>Civilité</span>
                <select name="civilite">
                    <?php $civilite = (string)($old['civilite'] ?? 'Non renseigne'); ?>
                    <option value="Non renseigne" <?= $civilite === 'Non renseigne' ? 'selected' : '' ?>>Non renseignée</option>
                    <option value="Mme" <?= $civilite === 'Mme' ? 'selected' : '' ?>>Mme</option>
                    <option value="M." <?= $civilite === 'M.' ? 'selected' : '' ?>>M.</option>
                    <option value="Autre" <?= $civilite === 'Autre' ? 'selected' : '' ?>>Autre</option>
                </select>
            </label>

            <label class="field">
                <span>Nom *</span>
                <input
                    required
                    data-uppercase
                    name="nom"
                    value="<?= $adherentOld('nom') ?>"
                    placeholder="Nom de l’adhérent"
                >
            </label>

            <label class="field">
                <span>Prénom *</span>
                <input
                    required
                    data-firstname
                    name="prenom"
                    value="<?= $adherentOld('prenom') ?>"
                    placeholder="Prénom de l’adhérent"
                >
            </label>

            <label class="field">
                <span>Date de naissance</span>
                <input
                    type="date"
                    name="date_naissance"
                    value="<?= $adherentOld('date_naissance') ?>"
                >
            </label>

            <label class="field">
                <span>E-mail principal</span>
                <input
                    type="email"
                    name="email"
                    value="<?= $adherentOld('email') ?>"
                    placeholder="prenom.nom@exemple.fr"
                >
            </label>

            <label class="field">
                <span>Téléphone principal</span>
                <input
                    data-phone
                    name="telephone_principal"
                    value="<?= $adherentOld('telephone_principal') ?>"
                    placeholder="+33 6 12 34 56 78"
                >
            </label>

            <label class="field">
                <span>Téléphone secondaire</span>
                <input
                    data-phone
                    name="telephone_secondaire"
                    value="<?= $adherentOld('telephone_secondaire') ?>"
                >
            </label>
        </div>
    </section>

    <section class="form-card">
        <header class="form-card-header">
            <div class="form-step pink">2</div>
            <div>
                <h3>Adresse de l’adhérent</h3>
                <p>Adresse principale utilisée pour le dossier et la facturation.</p>
            </div>
            <div class="form-icon pink">⌂</div>
        </header>

        <div class="form-grid grid-4">
            <label class="field address-field-v4" style="grid-column: span 2">
                <span>Adresse</span>
                <input
                    autocomplete="off"
                    data-address-autocomplete
                    name="adresse_ligne1"
                    value="<?= $adherentOld('adresse_ligne1') ?>"
                    placeholder="Commencez à saisir l’adresse…"
                >
                <div id="addressSuggestions" class="address-suggestions" hidden></div>
            </label>

            <label class="field">
                <span>Complément</span>
                <input
                    name="adresse_ligne2"
                    value="<?= $adherentOld('adresse_ligne2') ?>"
                >
            </label>

            <label class="field">
                <span>Code postal</span>
                <input
                    data-postcode
                    maxlength="5"
                    name="code_postal"
                    value="<?= $adherentOld('code_postal', $editing ? '' : '59123') ?>"
                >
            </label>

            <label class="field">
                <span>Ville</span>
                <input
                    data-city
                    data-uppercase
                    name="ville"
                    value="<?= $adherentOld('ville', $editing ? '' : 'BRAY-DUNES') ?>"
                >
            </label>

            <label class="field">
                <span>Pays</span>
                <input
                    name="pays"
                    value="<?= $adherentOld('pays', 'France') ?>"
                >
            </label>
        </div>
    </section>

    <section class="form-card">
        <header class="form-card-header">
            <div class="form-step orange">3</div>
            <div>
                <h3>Rôle dans la famille et les ateliers</h3>
                <p>L’adhérent sera automatiquement le premier membre de sa famille.</p>
            </div>
            <div class="form-icon orange">👨‍👩‍👧</div>
        </header>

        <div class="automatic-member-card">
            <div class="automatic-member-icon">✓</div>
            <div>
                <strong>Création automatique comme membre titulaire</strong>
                <p>
                    Après validation, l’adhérent apparaîtra aussi dans la liste des membres
                    de sa famille avec le statut « Titulaire ».
                </p>
            </div>
        </div>

        <div class="choice-grid">
            <label class="choice-card">
                <input type="checkbox" name="client_participant" <?= !empty($old['client_participant']) ? 'checked' : '' ?>>
                <span class="choice-icon blue">🎨</span>
                <span>
                    <strong>L’adhérent participe lui-même à un atelier</strong>
                    <small>Il pourra être affecté à un groupe ou à un créneau individuel.</small>
                </span>
            </label>

            <label class="choice-card">
                <input type="checkbox" name="rgpd_accepte" <?= !empty($old['rgpd_accepte']) ? 'checked' : '' ?>>
                <span class="choice-icon pink">✓</span>
                <span>
                    <strong>Consentement RGPD</strong>
                    <small>Le consentement est enregistré pour le dossier adhérent.</small>
                </span>
            </label>
        </div>

        <label class="field">
            <span>Observations internes</span>
            <textarea
                name="notes"
                rows="5"
                placeholder="Informations utiles concernant le dossier…"
            ><?= $adherentOld('notes') ?></textarea>
        </label>
    </section>

    <?php if (!$editing): ?>
    <section class="form-card">
        <header class="form-card-header">
            <div class="form-step blue">4</div>
            <div>
                <h3>Identifiants de connexion de la famille</h3>
                <p>Le compte est lié à cet adhérent titulaire et à ce dossier familial. Il ne crée aucun second adhérent.</p>
            </div>
            <div class="form-icon blue">🔐</div>
        </header>

        <label class="choice-card">
            <input type="checkbox" id="createFamilyAccount" name="create_family_account" value="1" <?= !array_key_exists('create_family_account', $old) || !empty($old['create_family_account']) ? 'checked' : '' ?>>
            <span class="choice-icon blue">✓</span>
            <span>
                <strong>Créer l’accès Famille pendant l’inscription</strong>
                <small>L’adresse e-mail principale saisie plus haut servira d’identifiant de connexion.</small>
            </span>
        </label>

        <div class="alert alert-info" id="familyAccountFields">
            <strong>Activation sécurisée</strong>
            <p>AXIOM crée un compte inactif et envoie un lien personnel valable 48 heures. L’adhérent choisit lui-même son mot de passe. Aucun mot de passe par défaut n’est généré ou communiqué.</p>
        </div>
    </section>
    <?php endif; ?>

    <div class="sticky-actions">
        <a class="button button-secondary" href="/public/clients">
            Annuler
        </a>

        <button class="button button-primary" type="submit">
            <?= $editing ? 'Enregistrer les corrections' : 'Créer l’adhérent et sa famille' ?>
        </button>
    </div>
</form>

<script src="/public/assets/js/cda-v4-form.js"></script>
<script src="/public/assets/js/adherent-form.js"></script>
<?php if (!$editing): ?>
<script>
(() => {
    const checkbox = document.getElementById('createFamilyAccount');
    const fields = document.getElementById('familyAccountFields');
    if (!checkbox || !fields) return;
    const refresh = () => {
        fields.hidden = !checkbox.checked;
    };
    checkbox.addEventListener('change', refresh);
    refresh();
})();
</script>
<?php endif; ?>
