@extends('layouts.theme_selector')

@section('content')
    @php
        $modulos = collect(session('modulos_habilitados') ?? []);
        $main = $modulos->filter(fn($m) => (int) $m->id_sector !== 1);
        $admin = $modulos->filter(fn($m) => (int) $m->id_sector === 1);
    @endphp

    <style>
        :root {
            /* Mapping to Bootstrap 5.3 Variables */
            --brand-primary: #0b5ed7;
            --brand-accent: #dc3545;

            /* Backgrounds */
            --bg-1: var(--bs-tertiary-bg);
            --bg-2: var(--bs-body-bg);

            /* Text Colors */
            --ink-1: var(--bs-body-color);
            --ink-2: var(--bs-secondary-color);
            --ink-3: var(--bs-tertiary-color);
            --ink-4: var(--bs-secondary-color);
            /* Fallback or specific shade if needed */

            /* Tiles / Cards */
            --tile: var(--bs-card-bg);
            --tile-b: var(--bs-border-color);

            /* Effects */
            --tile-hover: rgba(11, 94, 215, 0.08);
            /* Keep custom hover tint but could use var(--bs-primary-bg-subtle) */
            --shadow: var(--bs-box-shadow-sm);
            --ring: rgba(11, 94, 215, .35);
        }

        /* 
                           Dark Mode is now handled automatically by Bootstrap's CSS variables 
                           mapped above (e.g., --bs-body-color changes automatically).
                           We only need to adjust slight specifics if necessary, but the mapping above covers most.
                        */

        .dashboard {
            padding: 28px 0 56px;
        }

        .page-head {
            display: flex;
            gap: 14px;
            align-items: end;
            justify-content: space-between;
            margin-bottom: 20px
        }

        .page-title {
            font-weight: 700;
            letter-spacing: .2px;
            color: var(--ink-1);
            margin: 0
        }

        .sub {
            color: var(--ink-3);
            margin-top: 4px
        }

        .actions {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap
        }

        .search {
            position: relative;
            min-width: 260px
        }

        .search input {
            width: 100%;
            border: 1px solid var(--tile-b);
            border-radius: 12px;
            padding: 10px 14px 10px 40px;
            background: var(--tile);
            color: var(--ink-1);
            outline: 0;
        }

        .search svg {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            opacity: .6;
            color: var(--ink-1);
        }

        .app-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 16px
        }

        .tile {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border-radius: 16px;
            background: var(--tile);
            border: 1px solid var(--tile-b);
            box-shadow: var(--shadow);
            text-decoration: none;
            transition: transform .12s ease, border-color .12s ease, background .12s ease;
            color: var(--ink-1);
        }

        /* Hover effect: simple darken/lighten or keep custom */
        .tile:hover {
            transform: translateY(-2px);
            border-color: var(--brand-primary);
            background: var(--tile-hover);
        }

        [data-bs-theme="dark"] .tile:hover {
            background: rgba(11, 94, 215, .15);
        }

        /* Slight adjustment for dark mode hover visibility */

        .tile:focus {
            outline: 3px solid var(--ring);
        }

        .tile .ico {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            letter-spacing: .5px;
            background: linear-gradient(145deg, var(--brand-primary), #3b82f6);
            color: #fff;
            flex: 0 0 42px;
        }

        .tile .txt .name {
            font-weight: 600;
            line-height: 1.1;
            color: var(--ink-1)
        }

        .tile .txt .hint {
            font-size: .85rem;
            color: var(--ink-4)
        }

        .section {
            margin-top: 28px
        }

        .section .section-title {
            font-weight: 700;
            color: var(--ink-2);
            margin-bottom: 10px
        }

        /* Admin accent */
        .tile.admin .ico {
            background: linear-gradient(145deg, var(--brand-accent), #ff6b6b);
        }

        .empty {
            padding: 18px 16px;
            border-radius: 14px;
            border: 1px dashed var(--tile-b);
            color: var(--ink-3)
        }

        /* Overlay / avisos */
        .game-overlay {
            position: fixed;
            inset: 0;
            z-index: 9996;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            pointer-events: none;
        }

        .game-overlay .toast {
            margin-top: 16px;
            padding: 10px 14px;
            border-radius: 12px;
            border: 1px solid var(--tile-b);
            background: var(--tile);
            color: var(--ink-1);
            box-shadow: var(--shadow);
            font-weight: 600;
        }

        /* Botón imposible */
        .impossible-target {
            position: fixed;
            z-index: 9997;
            left: 50%;
            top: 60%;
            padding: 10px 16px;
            border: 0;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 700;
            background: linear-gradient(145deg, var(--brand-primary), #3b82f6);
            color: #fff;
            box-shadow: var(--shadow);
            transition: transform .05s linear;
            user-select: none;
            -webkit-user-select: none;
        }

        /* Confetti */
        @keyframes confettiFall {
            to {
                transform: translateY(110vh) rotate(720deg);
            }
        }

        .confetti {
            position: fixed;
            top: -10vh;
            width: 8px;
            height: 14px;
            opacity: .95;
            animation-name: confettiFall;
            animation-timing-function: ease-in;
            will-change: transform;
            z-index: 9995;
        }
    </style>

    <div class="dashboard">
        <div class="container-xl">
            <div class="page-head">
                <div>
                    <h1 class="page-title">SanpaNet</h1>
                    <div class="sub">Elegí un módulo para comenzar</div>
                </div>
                <div class="actions">
                    <div class="search">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M21 21l-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z" stroke="currentColor"
                                stroke-width="1.6" stroke-linecap="round" />
                        </svg>
                        <input id="moduleSearch" type="search" placeholder="Buscar módulo…">
                    </div>
                </div>
            </div>

            {{-- MAIN --}}
            <div class="section">
                <div class="section-title">Menú Principal</div>

                @if($main->isEmpty())
                    <div class="empty">Tu usuario no tiene módulos habilitados para operar.</div>
                @else
                    <div class="app-grid" id="gridMain">
                        @foreach($main as $modulo)
                            @php
                                $parts = preg_split('/\s+/', trim($modulo->nombre));
                                $initials = mb_strtoupper(collect($parts)->map(fn($w) => mb_substr($w, 0, 1))->take(2)->implode(''));
                            @endphp
                            <a class="tile" data-name="{{ Str::lower($modulo->nombre) }}" href="{{ route($modulo->route) }}">
                                <span class="ico">{{ $initials }}</span>
                                <span class="txt">
                                    <div class="name">{{ $modulo->nombre }}</div>
                                </span>
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- ADMIN --}}
            @if(session('es_admin') && $admin->isNotEmpty())
                <div class="section">
                    <div class="section-title">Panel Administrador</div>
                    <div class="app-grid" id="gridAdmin">
                        @foreach($admin as $modulo)
                            @php
                                $parts = preg_split('/\s+/', trim($modulo->nombre));
                                $initials = mb_strtoupper(collect($parts)->map(fn($w) => mb_substr($w, 0, 1))->take(2)->implode(''));
                            @endphp
                            <a class="tile admin" data-name="{{ Str::lower($modulo->nombre) }}" href="{{ route($modulo->route) }}">
                                <span class="ico">{{ $initials }}</span>
                                <span class="txt">
                                    <div class="name">{{ $modulo->nombre }}</div>
                                </span>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>

    <script>
        (function () {
            const q = document.getElementById('moduleSearch');
            const tiles = Array.from(document.querySelectorAll('.tile'));
            q?.addEventListener('input', function () {
                const s = (this.value || '').trim().toLowerCase();
                tiles.forEach(el => {
                    const match = el.dataset.name.includes(s);
                    el.style.display = match ? '' : 'none';
                });
            });
            // accesibilidad: Enter abre el primer match
            q?.addEventListener('keydown', e => {
                if (e.key === 'Enter') {
                    const first = tiles.find(el => el.style.display !== 'none');
                    if (first) { first.focus(); first.click(); }
                }
            });
        })();

        /* 5 clics rápidos → caída + juego imposible con "gastadas" */
        (function () {
            const getTiles = () => Array.from(document.querySelectorAll('.tile'));
            let clicks = [];
            let coolingDown = false;
            let gameActive = false;
            let cleanupGame = null;

            // --------- UI helpers ----------
            const toast = (msg, ms = 1500) => {
                const ov = document.createElement('div'); ov.className = 'game-overlay';
                ov.innerHTML = `<div class="toast">${msg}</div>`;
                document.body.appendChild(ov);
                setTimeout(() => ov.remove(), ms);
            };

            // Globitos cerca del cursor (sin CSS extra)
            const toastMini = (msg, x, y, ms = 900) => {
                const n = document.createElement('div');
                n.textContent = msg;
                Object.assign(n.style, {
                    position: 'fixed', left: Math.max(8, Math.min(window.innerWidth - 220, x - 10)) + 'px',
                    top: Math.max(8, Math.min(window.innerHeight - 60, y - 34)) + 'px',
                    background: 'var(--tile)', color: 'var(--ink-1)', border: '1px solid var(--tile-b)',
                    padding: '6px 10px', borderRadius: '10px', boxShadow: 'var(--shadow)', zIndex: 9998,
                    fontWeight: '600', pointerEvents: 'none', whiteSpace: 'nowrap'
                });
                document.body.appendChild(n);
                setTimeout(() => n.remove(), ms);
            };

            const confetti = () => {
                const N = 120;
                for (let i = 0; i < N; i++) {
                    const c = document.createElement('div');
                    c.className = 'confetti';
                    c.style.left = (Math.random() * 100) + 'vw';
                    c.style.background = `hsl(${Math.random() * 360}, 90%, 60%)`;
                    c.style.animationDuration = (1.3 + Math.random() * 0.9) + 's';
                    c.style.transform = 'translateY(-10vh)';
                    document.body.appendChild(c);
                    setTimeout(() => c.remove(), 2500);
                }
            };

            // --------- Efecto de caída ----------
            function triggerFall() {
                if (coolingDown) return;
                coolingDown = true;

                const tiles = getTiles();
                tiles.forEach((el) => {
                    const rect = el.getBoundingClientRect();
                    const dy = (window.innerHeight - rect.bottom) + 60 + Math.random() * 80;
                    const dx = (Math.random() * 240) - 120;
                    const rot = (Math.random() * 50) - 25;
                    const delay = Math.random() * 120;
                    const duration = 700 + Math.random() * 500;

                    el.style.pointerEvents = 'none';
                    el.style.willChange = 'transform';
                    el.animate([
                        { transform: 'translate(0,0) rotate(0deg)' },
                        { transform: `translate(${dx}px, ${dy * 0.92}px) rotate(${rot}deg)`, offset: 0.82, easing: 'cubic-bezier(.15,.95,.35,1)' },
                        { transform: `translate(${dx}px, ${dy}px) rotate(${rot}deg)` },
                        { transform: `translate(${dx}px, ${dy - 10}px) rotate(${rot}deg)` },
                        { transform: `translate(${dx}px, ${dy}px) rotate(${rot}deg)` },
                    ], { duration, delay, fill: 'forwards' });
                });

                setTimeout(() => {
                    getTiles().forEach(el => { el.style.pointerEvents = ''; el.style.willChange = ''; });
                    toast('🎮 ¡Empieza el juego! Atrapa el botón…', 1400);
                    setTimeout(startImpossibleGame, 1100);
                    coolingDown = false;
                }, 2200);
            }

            // --------- Juego imposible ----------
            function startImpossibleGame() {
                if (gameActive) return;
                gameActive = true;

                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'impossible-target';
                btn.textContent = '¡Clickeame!';
                document.body.appendChild(btn);

                placeRandom(btn);

                let level = 1;                 // aumenta al acercarse
                let locked = false;            // evita múltiples escapes simultáneos
                let lastTaunt = 0;             // rate limit de gastadas
                const TAUNT_COOLDOWN = 900;    // ms
                const TAUNTS = [
                    'Uff, ¡por un pelo! 😏',
                    'Uy, esa pasó al lado 😬',
                    '¿Qué pasó, máquina? 😉',
                    'Casi casi crack… tranqui 😎',
                    'No me agarrás ni con VAR 😂',
                    'Ahí no, campeón ✋',
                    'Esa tocó el palo 🥅',
                    'Bien ahí, pero no 😜',
                    'Uy, bocha de cerca 🙈',
                    'Te vi venir, eh 👀',
                    'Jajaja que pasó? 😂'
                ];

                const onPointerMove = (e) => {
                    if (!document.body.contains(btn)) return;
                    const rect = btn.getBoundingClientRect();
                    const cx = rect.left + rect.width / 2;
                    const cy = rect.top + rect.height / 2;
                    const d = Math.hypot((e.clientX - cx), (e.clientY - cy));

                    const radius = Math.max(60, 160 - level * 18);
                    if (d < radius && !locked) {
                        locked = true;

                        // Gastada cerca del click (rate limited)
                        const now = performance.now();
                        if (now - lastTaunt > TAUNT_COOLDOWN) {
                            lastTaunt = now;
                            const msg = TAUNTS[(Math.random() * TAUNTS.length) | 0];
                            toastMini(msg, e.clientX, e.clientY);
                        }

                        const step = 80 + level * 30 + Math.random() * 50;
                        let vx = (cx - e.clientX) || (Math.random() - .5);
                        let vy = (cy - e.clientY) || (Math.random() - .5);
                        const mag = Math.hypot(vx, vy) || 1; vx /= mag; vy /= mag;

                        let nx = rect.left + vx * step + (Math.random() - .5) * 60;
                        let ny = rect.top + vy * step + (Math.random() - .5) * 40;

                        moveTo(btn, nx, ny);
                        level = Math.min(level + 1, 7);
                        setTimeout(() => locked = false, 40);
                    }
                };

                const onTouchStart = (e) => {
                    // Teletransporte + gastada corta
                    moveTo(btn, Math.random() * (window.innerWidth - btn.offsetWidth - 16) + 8,
                        Math.random() * (window.innerHeight - btn.offsetHeight - 16) + 8);
                    const t = e.touches?.[0];
                    if (t) toastMini('¿Con dedo también? ¡Duro! 🤭', t.clientX, t.clientY);
                    e.preventDefault();
                };

                const onClick = () => {
                    toast('🏆 ¡Ganaste!', 1600);
                    confetti();
                    stopGame();
                };

                const onClamp = () => clamp(btn);

                document.addEventListener('pointermove', onPointerMove);
                btn.addEventListener('touchstart', onTouchStart, { passive: false });
                btn.addEventListener('click', onClick, { once: true });
                window.addEventListener('resize', onClamp);
                window.addEventListener('scroll', onClamp);

                cleanupGame = () => {
                    document.removeEventListener('pointermove', onPointerMove);
                    window.removeEventListener('resize', onClamp);
                    window.removeEventListener('scroll', onClamp);
                    btn.remove();
                    gameActive = false;
                };

                function stopGame() { if (cleanupGame) cleanupGame(); }
            }

            // --------- Posicionamiento helpers ----------
            function placeRandom(el) {
                el.style.left = (Math.random() * (window.innerWidth - el.offsetWidth - 16) + 8) + 'px';
                el.style.top = (Math.random() * (window.innerHeight - el.offsetHeight - 16) + 8) + 'px';
            }
            function clamp(el) {
                const maxX = window.innerWidth - el.offsetWidth - 8;
                const maxY = window.innerHeight - el.offsetHeight - 8;
                let x = parseFloat(el.style.left || '0'); let y = parseFloat(el.style.top || '0');
                el.style.left = Math.max(8, Math.min(maxX, x)) + 'px';
                el.style.top = Math.max(8, Math.min(maxY, y)) + 'px';
            }
            function moveTo(el, x, y) {
                const maxX = window.innerWidth - el.offsetWidth - 8;
                const maxY = window.innerHeight - el.offsetHeight - 8;
                el.style.left = Math.max(8, Math.min(maxX, x)) + 'px';
                el.style.top = Math.max(8, Math.min(maxY, y)) + 'px';
            }

            // --------- Detector 5 clics ----------
            document.addEventListener('pointerdown', () => {
                const now = performance.now();
                clicks.push(now);
                clicks = clicks.filter(t => now - t < 1200);
                if (clicks.length >= 5) {
                    clicks = [];
                    triggerFall();
                }
            }, true);

            // --------- Reset ----------
            function resetAll() {
                getTiles().forEach(el => el.getAnimations().forEach(a => a.cancel()));
                if (cleanupGame) cleanupGame();
            }
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' || e.key.toLowerCase() === 'r') resetAll();
            });
            window.addEventListener('resize', () => getTiles().forEach(el => el.getAnimations().forEach(a => a.cancel())));
        })();

    </script>

@endsection