<script setup>
import { ref, onMounted, nextTick } from 'vue';
import UserLayout from '../layouts/user/userlayout.vue';

const liveFeed = ref([]);

const generateLiveFeed = () => {
    const games = ['Mental', 'San Quentin', 'Flight Mode', 'Sweet Bonanza'];
    const users = ['Andri_X', 'CryptoKing', 'Neon_Ripper'];
    const items = [];
    for(let i=0; i<8; i++) {
        const isWin = Math.random() > 0.3;
        items.push({
            id: i,
            user: users[Math.floor(Math.random()*users.length)],
            game: games[Math.floor(Math.random()*games.length)],
            amount: isWin ? '+' + (Math.random()).toFixed(3) + ' BTC' : '—',
            isWin
        });
    }
    liveFeed.value = items;
    nextTick(() => {
        if (window.lucide) window.lucide.createIcons();
    });
};

onMounted(() => {
    generateLiveFeed();

    // Slot hover effect
    const slots = document.querySelectorAll('.slot');
    slots.forEach(card => {
        card.addEventListener('mousemove', e => {
            const rect = card.getBoundingClientRect();
            card.style.setProperty('--mouse-x', `${((e.clientX - rect.left) / rect.width) * 100}%`);
            card.style.setProperty('--mouse-y', `${((e.clientY - rect.top) / rect.height) * 100}%`);
        });
    });
});
</script>

<template>
    <UserLayout>
        <section class="content">
            <div class="wrap">
                <div class="panel">
                    <div class="toolbar">
                        <div class="search">
                            <i data-lucide="search" style="width:14px; color:#333;"></i>
                            <input type="text" placeholder="Suche nach Slots...">
                        </div>
                        <div style="display:flex;">
                            <div class="chip active">Alle</div>
                            <div class="chip">Top</div>
                            <div class="chip">Neu</div>
                        </div>
                    </div>

                    <div class="section-head">
                        <h2>Top Slots</h2>
                        <div class="view-all">Alle anzeigen →</div>
                    </div>
                    <div class="grid">
                        <article class="slot c1"><div class="slot-provider">Nolimit City</div><div class="thumb"><img src="https://netcontent.cc/bitkingz/i/s4/nolimit/FlightModeDX2.webp"></div><div class="slot-overlay"><button class="btn-s btn-play">Play</button><button class="btn-s btn-demo">Demo</button></div></article>
                        <article class="slot c2"><div class="slot-provider">Nolimit City</div><div class="thumb"><img src="https://netcontent.cc/bitkingz/i/s6/nolimit/SanQuentin.webp"></div><div class="slot-overlay"><button class="btn-s btn-play">Play</button><button class="btn-s btn-demo">Demo</button></div></article>
                        <article class="slot c3"><div class="slot-provider">Nolimit City</div><div class="thumb"><img src="https://netcontent.cc/bitkingz/i/s4/nolimit/MentalDX1.webp"></div><div class="slot-overlay"><button class="btn-s btn-play">Play</button><button class="btn-s btn-demo">Demo</button></div></article>
                        <article class="slot c4"><div class="slot-provider">Pragmatic Play</div><div class="thumb"><img src="https://netcontent.cc/bitkingz/i/s4/pragmatic/SweetBonanza.webp"></div><div class="slot-overlay"><button class="btn-s btn-play">Play</button><button class="btn-s btn-demo">Demo</button></div></article>
                    </div>
                </div>

                <div class="panel live-card">
                    <div class="live-head">
                        <div class="live-title"><span class="dot"></span> Live Feed</div>
                        <div class="live-meta" style="font-size: 10px; color: #444; font-weight: 800;">Realtime Protocol v2.0</div>
                    </div>
                    <div class="live-body" id="live-feed">
                        <div v-for="item in liveFeed" :key="item.id" class="live-item">
                            <div class="li-avatar"><i data-lucide="user" style="width:14px; color:#333;"></i></div>
                            <div class="li-info"><span class="li-user">{{ item.user }}</span><span class="li-game">{{ item.game }}</span></div>
                            <div class="li-val"><span :class="['li-amount', { loss: !item.isWin }]">{{ item.amount }}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </UserLayout>
</template>

<style scoped>
    .content { padding: 30px; padding-bottom: 30px; }
    .wrap { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }

    .panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; animation: fade-in 0.8s cubic-bezier(0.2, 0, 0, 1); }
    @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    .toolbar { padding: 15px 20px; display: flex; gap: 20px; align-items: center; border-bottom: 1px solid var(--border); }
    .search { flex: 1; background: #000; border: 1px solid var(--border); display: flex; align-items: center; padding: 0 15px; border-radius: 10px; transition: 0.3s; }
    .search:focus-within { border-color: var(--cyan); }
    .search input { background: transparent; border: none; color: #fff; padding: 10px; width: 100%; font-size: 12px; }

    .chip { padding: 8px 16px; font-size: 10px; font-weight: 900; color: #444; cursor: pointer; text-transform: uppercase; border-radius: 8px; transition: 0.2s; }
    .chip:hover { color: #fff; }
    .chip.active { color: var(--magenta); background: rgba(255,0,122,0.05); }

    .section-head { padding: 25px 20px 10px; display: flex; justify-content: space-between; align-items: flex-end; }
    .section-head h2 { margin: 0; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #444; }
    .view-all { font-size: 10px; color: var(--cyan); font-weight: 900; cursor: pointer; text-transform: uppercase; }

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

    .slot { background: #000; border: 1px solid var(--border); border-radius: 18px; position: relative; overflow: hidden; aspect-ratio: 16/11; transition: 0.4s cubic-bezier(0.2, 0, 0, 1); --mouse-x: 50%; --mouse-y: 50%; }
    .slot::after { content: ""; position: absolute; inset: -10px; z-index: 3; pointer-events: none; background: radial-gradient(240px circle at var(--mouse-x) var(--mouse-y), var(--glow), transparent 70%); opacity: 0; transition: opacity 0.22s cubic-bezier(0.2, 0, 0, 1); filter: blur(10px); }
    .slot:hover::after { opacity: 1; }
    .slot.c1 { --glow: var(--cyan); }
    .slot.c2 { --glow: var(--magenta); }
    .slot.c3 { --glow: var(--green); }
    .slot.c4 { --glow: var(--gold); }
    .slot:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 40px rgba(0,0,0,0.9); }

    .slot-provider { position: absolute; top: 12px; left: 12px; z-index: 4; font-size: 8px; font-weight: 900; background: rgba(0,0,0,0.85); padding: 5px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: 1px; color: #fff; border: 1px solid #222; opacity: 1; transition: 0.3s; }
    .slot:hover .slot-provider { opacity: 0; }

    .thumb { width: 100%; height: 100%; }
    .thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; transition: 0.6s cubic-bezier(0.2, 0, 0, 1); filter: grayscale(1) brightness(0.6); }
    .slot:hover img { opacity: 1; filter: grayscale(0) brightness(1); transform: scale(1.08); }
    .slot-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); opacity: 0; transition: 0.3s; z-index: 5; }
    .slot:hover .slot-overlay { opacity: 1; }
    .btn-s { width: 110px; padding: 10px; border-radius: 50px; font-size: 10px; font-weight: 900; text-transform: uppercase; cursor: pointer; transition: 0.2s; border: none; }
    .btn-play { background: var(--glow); color: #000; box-shadow: 0 0 15px var(--glow); }
    .btn-demo { background: transparent; border: 1px solid #fff; color: #fff; margin-top: 4px; }

    .live-card { background: #000; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
    .live-head { padding: 16px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid var(--border); }
    .live-title { display:flex; align-items:center; gap:10px; font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
    .live-title .dot { width:8px; height:8px; border-radius:99px; background: var(--green); box-shadow: 0 0 18px rgba(0,255,157,.6); animation: pulse 1.2s infinite; }
    @keyframes pulse { 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.25); opacity:.65 } }
    .live-body { height: 280px; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 8px; }

    .live-item { display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap: 15px; padding: 10px 15px; border-radius: 12px; border: 1px solid #111; background: #050505; transition: .3s cubic-bezier(0.2, 0, 0, 1); }
    .li-avatar { width: 32px; height: 32px; border-radius: 8px; background: #111; display: flex; align-items: center; justify-content: center; border: 1px solid #222; }
    .li-info { display: flex; flex-direction: column; }
    .li-user { font-size: 12px; font-weight: 800; color: #fff; }
    .li-game { font-size: 10px; color: #555; font-weight: 700; text-transform: uppercase; }
    .li-val { text-align: right; }
    .li-amount { font-size: 12px; font-weight: 900; color: var(--green); display: block; }
    .li-amount.loss { color: #444; }

    :global(:root) {
        --bg-card: #0a0a0a;
        --border: #151515;
        --magenta: #ff007a;
        --cyan: #00f2ff;
        --green: #00ff9d;
        --gold: #f7931a;
    }
</style>
