<?php

declare(strict_types=1);

$form = is_array($form ?? null)
    ? $form
    : [];

$schema = is_array($administratorSchema ?? null)
    ? $administratorSchema
    : [];
?>
<div class="darlink-administrator-step">
    <div class="darlink-page-heading">
        <div>
            <span class="darlink-page-kicker">
                Compte principal
            </span>

            <h2>Premier administrateur</h2>

            <p>
                Créez le compte qui disposera de tous les droits
                dans Darlink ERP.
            </p>
        </div>

        <div class="darlink-readiness <?= empty($administratorError)
            ? 'is-ready'
            : 'has-errors' ?>">
            <i class="bi bi-person-fill-gear"></i>

            <div>
                <strong>Administrateur principal</strong>

                <span>
                    <?= (int)($schema['existing_users'] ?? 0) ?>
                    utilisateur(s) actuellement présent(s).
                </span>
            </div>
        </div>
    </div>

    <?php if (!empty($administratorError)): ?>
        <div class="darlink-notice darlink-notice-danger">
            <i class="bi bi-x-circle-fill"></i>

            <span>
                <?= htmlspecialchars(
                    (string)$administratorError,
                    ENT_QUOTES,
                    'UTF-8'
                ) ?>
            </span>
        </div>
    <?php endif; ?>

    <div class="darlink-administrator-layout">
        <section class="darlink-form-panel">
            <h3>Informations du compte</h3>

            <form
                method="post"
                action="index.php?step=7"
                class="darlink-install-form"
                autocomplete="off"
            >
                <div class="row g-3">
                    <div class="col-md-6">
                        <label
                            class="darlink-form-label"
                            for="prenom"
                        >
                            Prénom
                        </label>

                        <input
                            type="text"
                            class="darlink-form-control"
                            id="prenom"
                            name="prenom"
                            value="<?= htmlspecialchars(
                                (string)($form['prenom'] ?? ''),
                                ENT_QUOTES,
                                'UTF-8'
                            ) ?>"
                            maxlength="120"
                            autocomplete="given-name"
                            required
                        >
                    </div>

                    <div class="col-md-6">
                        <label
                            class="darlink-form-label"
                            for="nom"
                        >
                            Nom
                        </label>

                        <input
                            type="text"
                            class="darlink-form-control"
                            id="nom"
                            name="nom"
                            value="<?= htmlspecialchars(
                                (string)($form['nom'] ?? ''),
                                ENT_QUOTES,
                                'UTF-8'
                            ) ?>"
                            maxlength="120"
                            autocomplete="family-name"
                            required
                        >
                    </div>

                    <div class="col-md-6">
                        <label
                            class="darlink-form-label"
                            for="login"
                        >
                            Identifiant
                        </label>

                        <input
                            type="text"
                            class="darlink-form-control"
                            id="login"
                            name="login"
                            value="<?= htmlspecialchars(
                                (string)($form['login'] ?? ''),
                                ENT_QUOTES,
                                'UTF-8'
                            ) ?>"
                            minlength="3"
                            maxlength="80"
                            pattern="[A-Za-z0-9._-]+"
                            autocomplete="username"
                            required
                        >

                        <small class="darlink-field-hint">
                            Lettres, chiffres, point, tiret ou soulignement.
                        </small>
                    </div>

                    <div class="col-md-6">
                        <label
                            class="darlink-form-label"
                            for="email"
                        >
                            Adresse e-mail
                        </label>

                        <input
                            type="email"
                            class="darlink-form-control"
                            id="email"
                            name="email"
                            value="<?= htmlspecialchars(
                                (string)($form['email'] ?? ''),
                                ENT_QUOTES,
                                'UTF-8'
                            ) ?>"
                            maxlength="190"
                            autocomplete="email"
                            required
                        >
                    </div>

                    <div class="col-md-6">
                        <label
                            class="darlink-form-label"
                            for="administratorPassword"
                        >
                            Mot de passe
                        </label>

                        <div class="darlink-password-field">
                            <input
                                type="password"
                                class="darlink-form-control"
                                id="administratorPassword"
                                name="password"
                                minlength="10"
                                autocomplete="new-password"
                                data-password-strength-source
                                required
                            >

                            <button
                                type="button"
                                class="darlink-password-toggle"
                                data-password-toggle="administratorPassword"
                                title="Afficher ou masquer le mot de passe"
                            >
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <label
                            class="darlink-form-label"
                            for="administratorPasswordConfirmation"
                        >
                            Confirmation
                        </label>

                        <div class="darlink-password-field">
                            <input
                                type="password"
                                class="darlink-form-control"
                                id="administratorPasswordConfirmation"
                                name="password_confirmation"
                                minlength="10"
                                autocomplete="new-password"
                                required
                            >

                            <button
                                type="button"
                                class="darlink-password-toggle"
                                data-password-toggle="administratorPasswordConfirmation"
                                title="Afficher ou masquer le mot de passe"
                            >
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="darlink-password-strength mt-3">
                    <div class="darlink-password-strength-track">
                        <span data-password-strength-bar></span>
                    </div>

                    <div class="darlink-password-strength-text">
                        <strong data-password-strength-label>
                            Mot de passe non évalué
                        </strong>

                        <span>
                            10 caractères minimum, majuscule,
                            minuscule, chiffre et caractère spécial.
                        </span>
                    </div>
                </div>

                <div class="darlink-form-help">
                    <i class="bi bi-shield-lock-fill"></i>

                    <span>
                        Le mot de passe sera haché avec
                        <strong>password_hash()</strong>.
                        Il ne sera jamais enregistré en clair.
                    </span>
                </div>

                <button
                    type="submit"
                    class="btn darlink-install-btn-primary w-100"
                >
                    <i class="bi bi-person-check-fill me-2"></i>
                    Créer l’administrateur
                </button>
            </form>
        </section>

        <aside class="darlink-administrator-info">
            <div class="darlink-summary-icon">
                <i class="bi bi-shield-check"></i>
            </div>

            <h3>Contrôles automatiques</h3>

            <ul>
                <li>
                    <i class="bi bi-check-circle-fill"></i>
                    Vérification de l’adresse e-mail
                </li>

                <li>
                    <i class="bi bi-check-circle-fill"></i>
                    Identifiant unique
                </li>

                <li>
                    <i class="bi bi-check-circle-fill"></i>
                    E-mail unique
                </li>

                <li>
                    <i class="bi bi-check-circle-fill"></i>
                    Mot de passe robuste
                </li>

                <li>
                    <i class="bi bi-check-circle-fill"></i>
                    Hachage sécurisé
                </li>

                <li>
                    <i class="bi bi-check-circle-fill"></i>
                    Vérification après insertion
                </li>
            </ul>

            <div class="darlink-schema-information">
                <span>Table détectée</span>
                <strong>
                    <?= htmlspecialchars(
                        (string)($schema['table'] ?? 'utilisateurs'),
                        ENT_QUOTES,
                        'UTF-8'
                    ) ?>
                </strong>

                <span>Colonne mot de passe</span>
                <strong>
                    <?= htmlspecialchars(
                        (string)($schema['password_column'] ?? '—'),
                        ENT_QUOTES,
                        'UTF-8'
                    ) ?>
                </strong>
            </div>
        </aside>
    </div>

    <div class="darlink-install-actions">
        <a
            href="index.php?step=6"
            class="btn darlink-install-btn-secondary"
        >
            <i class="bi bi-arrow-left me-2"></i>
            Retour
        </a>
    </div>
</div>
