{% extends 'auth/layout.html.twig' %}

{% block title %}RISKINESS - Password Generator{% endblock %}

{% block stylesheets %}
<style>
:root {
            --brand-pink: #F5245E;
            --brand-orange: #FF7A3D;
            --brand-gradient: linear-gradient(135deg, #F5245E 0%, #FF7A3D 100%);
            --bg-canvas: #0B0910;
            --bg-page: #120F17;
            --surface-1: #17131D;
            --text-primary: #FFFFFF;
            --text-secondary: rgba(255, 255, 255, 0.72);
            --text-tertiary: rgba(255, 255, 255, 0.52);
            --text-muted: rgba(255, 255, 255, 0.40);
            --border: rgba(255, 255, 255, 0.10);
            --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
            --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.30);
            --radius-xl: 32px;
            --radius-pill: 999px;
            --container: 1240px;
        }

        * { box-sizing: border-box; }
        html { color-scheme: dark; }
        body {
            margin: 0;
            min-height: 100vh;
            font-family: 'Poppins', system-ui, sans-serif;
            color: var(--text-primary);
            background:
                radial-gradient(circle at 15% 15%, rgba(245, 36, 94, 0.14), transparent 25%),
                radial-gradient(circle at 85% 20%, rgba(255, 122, 61, 0.12), transparent 28%),
                radial-gradient(circle at 50% 100%, rgba(245, 36, 94, 0.08), transparent 32%),
                linear-gradient(180deg, var(--bg-canvas) 0%, var(--bg-page) 100%);
            padding-bottom: 52px;
        }

        a { color: inherit; text-decoration: none; }
        button, input { font: inherit; }
        .page { position: relative; overflow: clip; }
        .page::before,
        .page::after {
            content: '';
            position: fixed;
            pointer-events: none;
            z-index: 0;
            filter: blur(18px);
            opacity: 0.45;
        }
        .page::before {
            width: 420px;
            height: 420px;
            top: -120px;
            right: -120px;
            border-radius: 999px;
            background: rgba(255, 122, 61, 0.14);
        }
        .page::after {
            width: 360px;
            height: 360px;
            left: -100px;
            top: 220px;
            border-radius: 999px;
            background: rgba(245, 36, 94, 0.13);
        }

        .shell {
            position: relative;
            z-index: 1;
            width: min(calc(100% - 32px), var(--container));
            margin: 0 auto;
            padding: 28px 0 24px;
        }

        .headerline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: nowrap;
            gap: 16px;
            padding: 12px 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius-pill);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-secondary);
        }
        .headerline__actions {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex: none;
            white-space: nowrap;
        }
        .headerline__button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-primary);
            flex: none;
            transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
        }
        .headerline__button:hover {
            transform: translateY(-1px);
            background: rgba(255, 255, 255, 0.06);
            border-color: currentColor;
        }
        .headerline__button svg {
            width: 22px;
            height: 22px;
            stroke-width: 1.9;
        }
        .headerline__button--home {
            color: var(--text-primary);
        }
        .headerline__button--account-logged-in {
            color: rgba(60, 196, 119, 0.92);
            border-color: rgba(60, 196, 119, 0.22);
            background: rgba(60, 196, 119, 0.08);
        }
        .headerline__button--account-guest {
            color: rgba(255, 92, 107, 0.92);
            border-color: rgba(255, 92, 107, 0.22);
            background: rgba(255, 92, 107, 0.08);
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            flex: 1 1 auto;
            min-width: 0;
        }
        .brand__logo {
            display: block;
            width: auto;
            height: 42px;
            max-width: min(340px, 44vw);
            object-fit: contain;
        }
        .brand__name {
            color: var(--text-primary);
            font-size: 1.02rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .toolbar {
            margin: 24px 4px 0;
            padding: 14px 18px;
            border: 1px solid var(--border);
            border-radius: 28px;
            background:
                radial-gradient(circle at top right, rgba(255, 122, 61, 0.12), transparent 34%),
                radial-gradient(circle at left, rgba(245, 36, 94, 0.10), transparent 30%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
                var(--surface-1);
            box-shadow: var(--shadow-sm);
        }
        .toolbar__brand {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }
        .toolbar__main {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }
        .toolbar__logo {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            color: #fff;
            flex: none;
        }
        .toolbar__logo svg {
            width: 48px;
            height: 48px;
            display: block;
        }
        .toolbar__eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius-pill);
            background: rgba(255, 255, 255, 0.035);
            color: var(--text-secondary);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .toolbar__eyebrow::before {
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: var(--brand-gradient);
            box-shadow: 0 0 18px rgba(245, 36, 94, 0.55);
        }
        .toolbar__info {
            width: 38px;
            min-width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: var(--radius-pill);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 1rem;
            font-weight: 800;
            line-height: 1;
            transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
        }
        .toolbar__info:hover,
        .toolbar__info[data-open="true"] {
            transform: translateY(-1px);
            border-color: rgba(245, 36, 94, 0.42);
            background: rgba(245, 36, 94, 0.10);
            color: #fff;
        }
        .toolbar__lead {
            margin: 18px 0 0;
            max-width: 780px;
            color: var(--text-secondary);
            line-height: 1.65;
        }
        .toolbar__lead[hidden] {
            display: none !important;
        }
        .intro {
            display: none !important;
        }

        .generator {
            margin-top: 18px;
            padding: 0 4px 4px;
        }
        .generator__panel {
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background:
                radial-gradient(circle at top right, rgba(255, 122, 61, 0.14), transparent 34%),
                radial-gradient(circle at left, rgba(245, 36, 94, 0.12), transparent 28%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03)),
                var(--surface-1);
            box-shadow: var(--shadow-md);
            padding: 14px;
        }
        .generator__title {
            margin: 12px 0 6px;
            font-size: clamp(1.6rem, 2.5vw, 2.2rem);
            line-height: 1.05;
            letter-spacing: -0.04em;
        }
        .generator__lead {
            margin: 0;
            max-width: 62ch;
            color: var(--text-secondary);
            line-height: 1.65;
        }
        .generator__actions-top {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 10px;
            align-items: center;
        }
        .generator__button {
            appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid transparent;
            border-radius: 16px;
            min-height: 46px;
            padding: 0 16px;
            cursor: pointer;
            color: var(--text-primary);
            background: var(--brand-gradient);
            font-weight: 700;
            letter-spacing: -0.01em;
            box-shadow: 0 12px 28px rgba(245, 36, 94, 0.20);
            transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
        }
        .generator__button:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 34px rgba(245, 36, 94, 0.28);
        }
        .generator__button--secondary {
            background: var(--brand-gradient);
            border-color: transparent;
            box-shadow: 0 12px 28px rgba(245, 36, 94, 0.18);
            color: var(--text-primary);
        }
        .generator__button--secondary:hover {
            box-shadow: 0 16px 34px rgba(245, 36, 94, 0.26);
            background: var(--brand-gradient);
        }
        .generator__button--copy {
            min-width: 220px;
        }
        .generator__button--refresh {
            min-width: 132px;
            padding: 0 16px;
            border-radius: 15px;
        }
        .generator__button--manager {
            min-width: 174px;
            justify-content: center;
        }
        .generator__button svg {
            width: 18px;
            height: 18px;
            stroke-width: 2.2;
        }
        .generator__display {
            margin-top: 0;
            display: grid;
            gap: 10px;
        }
        .generator__password {
            width: 100%;
            min-height: 58px;
            padding: 12px 18px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(10, 8, 15, 0.68);
            color: var(--text-primary);
            font-size: clamp(1.05rem, 2vw, 1.35rem);
            line-height: 1.3;
            letter-spacing: 0.04em;
            font-family: 'SFMono-Regular', ui-monospace, Consolas, monospace;
            outline: none;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
        }
        .generator__password::selection {
            background: rgba(245, 36, 94, 0.35);
        }
        .generator__controls {
            margin-top: 12px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }
        .control-card {
            border-radius: 22px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            padding: 14px 16px;
        }
        .control-card--length {
            align-self: start;
        }
        .control-card__title {
            margin: 0 0 10px;
            font-size: 0.92rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }
        .range-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .range-row input[type="range"] {
            width: 100%;
            accent-color: var(--brand-pink);
        }
        .range-value {
            flex: none;
            min-width: 56px;
            padding: 8px 10px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.07);
            text-align: center;
            font-weight: 700;
        }
        .toggle-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 42px;
            padding: 8px 14px;
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }
        .toggle__label {
            display: grid;
            gap: 3px;
        }
        .toggle__title {
            font-weight: 700;
            letter-spacing: -0.01em;
            white-space: nowrap;
        }
        .toggle input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--brand-pink);
            flex: none;
        }

        .footer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px 12px;
            background: rgba(11, 9, 16, 0.24);
            backdrop-filter: blur(8px);
            border-top: 1px solid rgba(255, 255, 255, 0.03);
            color: rgba(255, 255, 255, 0.34);
            font-size: 0.70rem;
            line-height: 1.15;
            text-align: center;
            letter-spacing: 0.01em;
            pointer-events: none;
        }

        @media (max-width: 900px) {
            .headerline { gap: 12px; }
            .generator__controls { grid-template-columns: 1fr; }
            .toggle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        @media (max-width: 640px) {
            .shell { width: min(calc(100% - 20px), var(--container)); }
            .brand__logo { max-width: 100%; height: 34px; }
            .brand__name { font-size: 0.98rem; }
            .headerline__button { width: 44px; height: 44px; border-radius: 16px; }
            .headerline__button svg { width: 20px; height: 20px; }
            .toolbar {
                padding: 12px 14px;
                border-radius: 24px;
            }
            .toolbar__brand {
                gap: 12px;
            }
            .toolbar__main {
                gap: 10px;
            }
            .toolbar__logo,
            .toolbar__logo svg {
                width: 42px;
                height: 42px;
            }
            .toolbar__eyebrow {
                max-width: 56vw;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .generator__panel { padding: 18px; border-radius: 28px; }
            .generator__actions-top {
                grid-template-columns: 1fr auto;
                width: 100%;
            }
            .generator__button--copy {
                min-width: 0;
                width: 100%;
                grid-column: 1 / -1;
            }
            .generator__button--refresh {
                min-width: 104px;
            }
            .generator__button--manager {
                min-width: 0;
                width: 100%;
            }
            .toggle-grid { grid-template-columns: 1fr; }
            .footer { padding: 4px 10px; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation: none !important;
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
            }
        }
</style>
{% endblock %}

{% block content %}
            <section class="toolbar" aria-label="Password Generator">
                <div class="toolbar__brand">
                    <div class="toolbar__main">
                        <span class="toolbar__logo" aria-hidden="true">
                            <svg viewBox="0 0 64 64" fill="none" role="img">
                                <defs>
                                    <linearGradient id="passwordGeneratorAccent" x1="10" y1="12" x2="54" y2="52" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#F5245E"/>
                                        <stop offset="1" stop-color="#FF7A3D"/>
                                    </linearGradient>
                                </defs>
                                <rect x="7" y="7" width="50" height="50" rx="17" fill="url(#passwordGeneratorAccent)"/>
                                <path d="M22 29v-5.5C22 17.7 26.5 13 32 13s10 4.7 10 10.5V29" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round"/>
                                <rect x="17" y="27" width="30" height="24" rx="8" fill="#FFFFFF"/>
                                <path d="M28 39h8M32 35v8M23 39h.1M41 39h.1" stroke="#241B2E" stroke-width="3.5" stroke-linecap="round"/>
                            </svg>
                        </span>
                        <span class="toolbar__eyebrow">Password Generator</span>
                    </div>
                    <button class="toolbar__info" type="button" data-info-toggle aria-expanded="false" aria-controls="password-generator-info" aria-label="Afficher les informations">i</button>
                </div>
                <p class="toolbar__lead" id="password-generator-info" data-info-panel hidden>Genere automatiquement des mots de passe forts, ajuste leur longueur et copie-les rapidement.</p>
            </section>

            <section class="intro" aria-label="Introduction Riskiness">
                <h2><span class="accent">Générateur de mot de passe.</span></h2>
            </section>

            <section id="password-generator" class="generator" aria-label="Générateur de mot de passe">
                <div class="generator__panel" data-password-generator>
                    <div class="generator__display">
                        <input class="generator__password" type="text" value="" readonly spellcheck="false" autocapitalize="off" autocomplete="off" aria-label="Mot de passe généré" data-password-output>
                        <div class="generator__actions-top">
                            <button class="generator__button generator__button--copy" type="button" data-copy-button>Copier le mot de passe</button>
                            <button class="generator__button generator__button--secondary generator__button--refresh" type="button" data-regenerate-button>Actualiser</button>
                            <a class="generator__button generator__button--secondary generator__button--manager" href="{{ path('app_password_manager') }}">Password Manager</a>
                        </div>
                        <span class="generator__status" data-copy-status aria-live="polite"></span>
                    </div>

                    <div class="generator__controls">
                        <div class="control-card control-card--length">
                            <p class="control-card__title">Longueur</p>
                            <div class="range-row">
                                <input type="range" min="8" max="32" step="1" value="16" aria-label="Longueur du mot de passe" data-length-slider>
                                <span class="range-value" data-length-value>16</span>
                            </div>
                        </div>

                        <div class="control-card">
                            <p class="control-card__title">Composition</p>
                            <div class="toggle-grid">
                                <label class="toggle">
                                    <span class="toggle__label">
                                        <span class="toggle__title">Lettres</span>
                                    </span>
                                    <input type="checkbox" checked data-option="letters">
                                </label>
                                <label class="toggle">
                                    <span class="toggle__label">
                                        <span class="toggle__title">Chiffres</span>
                                    </span>
                                    <input type="checkbox" checked data-option="numbers">
                                </label>
                                <label class="toggle">
                                    <span class="toggle__label">
                                        <span class="toggle__title">Symboles</span>
                                    </span>
                                    <input type="checkbox" checked data-option="symbols">
                                </label>
                                <label class="toggle">
                                    <span class="toggle__label">
                                        <span class="toggle__title">Caractères semblables</span>
                                    </span>
                                    <input type="checkbox" checked data-option="similar">
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

<script>
(function () {
        const root = document.querySelector('[data-password-generator]');

        if (!root) {
            return;
        }

        const output = root.querySelector('[data-password-output]');
        const slider = root.querySelector('[data-length-slider]');
        const lengthValue = root.querySelector('[data-length-value]');
        const copyButton = root.querySelector('[data-copy-button]');
        const regenerateButtons = root.querySelectorAll('[data-regenerate-button]');
        const status = root.querySelector('[data-copy-status]');
        const optionInputs = Array.from(root.querySelectorAll('[data-option]'));
        const infoToggle = document.querySelector('[data-info-toggle]');
        const infoPanel = document.querySelector('[data-info-panel]');
        const defaultMaxLength = Number(slider.max);

        const charSets = {
            letters: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
            numbers: '0123456789',
            symbols: '!@#$%^&*()-_=+[]{};:,.?/<>~'
        };
        const similarCharacters = new Set(['I', 'l', '1', 'O', '0', 'o']);

        function randomIndex(max) {
            const array = new Uint32Array(1);
            window.crypto.getRandomValues(array);
            return array[0] % max;
        }

        function pickCharacter(pool) {
            return pool[randomIndex(pool.length)];
        }

        function shuffle(items) {
            for (let index = items.length - 1; index > 0; index -= 1) {
                const swapIndex = randomIndex(index + 1);
                const temp = items[index];
                items[index] = items[swapIndex];
                items[swapIndex] = temp;
            }
        }

        function stripSimilarCharacters(value) {
            return Array.from(value).filter((character) => !similarCharacters.has(character)).join('');
        }

        function uniqueCharacters(value) {
            return Array.from(new Set(Array.from(value))).join('');
        }

        function getPoolState() {
            const state = {
                letters: root.querySelector('[data-option="letters"]').checked,
                numbers: root.querySelector('[data-option="numbers"]').checked,
                symbols: root.querySelector('[data-option="symbols"]').checked,
                similar: root.querySelector('[data-option="similar"]').checked
            };

            if (!state.letters && !state.numbers && !state.symbols) {
                state.letters = true;
            }

            return state;
        }

        function hasCharacterFamilySelected() {
            return ['letters', 'numbers', 'symbols'].some((option) => root.querySelector('[data-option="' + option + '"]').checked);
        }

        function buildPools(state) {
            const pools = [];

            if (state.letters) {
                pools.push(state.similar ? charSets.letters : stripSimilarCharacters(charSets.letters));
            }

            if (state.numbers) {
                pools.push(state.similar ? charSets.numbers : stripSimilarCharacters(charSets.numbers));
            }

            if (state.symbols) {
                pools.push(charSets.symbols);
            }

            return pools.filter((pool) => pool.length > 0);
        }

        function maxLengthForPools(pools, state) {
            if (state.similar) {
                return defaultMaxLength;
            }

            return Math.max(pools.length, uniqueCharacters(pools.join('')).length);
        }

        function pickUniqueFromPool(pool, availableCharacters) {
            const candidates = Array.from(pool).filter((character) => availableCharacters.includes(character));

            if (candidates.length === 0) {
                return '';
            }

            const character = candidates[randomIndex(candidates.length)];
            const index = availableCharacters.indexOf(character);
            availableCharacters.splice(index, 1);

            return character;
        }

        function syncLengthBounds() {
            const state = getPoolState();
            const pools = buildPools(state);
            const maxLength = maxLengthForPools(pools, state);

            slider.max = String(maxLength);

            if (Number(slider.value) > maxLength) {
                slider.value = String(maxLength);
            }

            syncLength();
        }

        function generatePassword() {
            const state = getPoolState();
            const pools = buildPools(state);
            const combinedPool = state.similar ? pools.join('') : uniqueCharacters(pools.join(''));
            const length = Math.min(Number(slider.value), combinedPool.length);
            const minimumLength = Math.max(length, pools.length);
            const characters = [];
            const availableCharacters = Array.from(combinedPool);

            pools.forEach((pool) => {
                characters.push(state.similar ? pickCharacter(pool) : pickUniqueFromPool(pool, availableCharacters));
            });

            while (characters.length < minimumLength && availableCharacters.length > 0) {
                const index = randomIndex(availableCharacters.length);
                characters.push(availableCharacters.splice(index, 1)[0]);
            }

            shuffle(characters);

            const password = characters.slice(0, length).join('');
            output.value = password;
            return password;
        }

        function syncLength() {
            lengthValue.textContent = slider.value;
        }

        async function copyPassword() {
            const password = output.value;

            try {
                await navigator.clipboard.writeText(password);
                status.textContent = 'Mot de passe copié dans le presse-papiers.';
            } catch (error) {
                output.focus();
                output.select();
                const copied = document.execCommand('copy');
                status.textContent = copied
                    ? 'Mot de passe copié dans le presse-papiers.'
                    : 'Copie impossible, sélection manuelle requise.';
            }
        }

        function regenerate() {
            syncLengthBounds();
            generatePassword();
            status.textContent = '';
        }

        function setInfoOpen(open) {
            if (!infoToggle || !infoPanel) {
                return;
            }

            infoPanel.hidden = !open;
            infoToggle.dataset.open = open ? 'true' : 'false';
            infoToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
        }

        slider.addEventListener('input', () => {
            syncLength();
            regenerate();
        });

        optionInputs.forEach((input) => {
            input.addEventListener('change', () => {
                if (['letters', 'numbers', 'symbols'].includes(input.dataset.option) && !hasCharacterFamilySelected()) {
                    input.checked = true;
                }

                regenerate();
            });
        });

        regenerateButtons.forEach((button) => {
            button.addEventListener('click', regenerate);
        });

        copyButton.addEventListener('click', copyPassword);

        if (infoToggle && infoPanel) {
            infoToggle.addEventListener('click', () => {
                setInfoOpen(infoPanel.hidden);
            });
        }

        output.addEventListener('focus', () => {
            output.select();
        });

        syncLength();
        regenerate();
    })();
</script>
{% endblock %}