@extends('site.layout')

@section('title', 'Dewemoji - Discover')

@push('head')
<style>
    .glass-header {
        background: rgba(5, 5, 5, 0.85);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
</style>
@endpush

@section('content')
<div class="flex h-screen w-full">
    <aside class="hidden lg:flex w-20 lg:w-64 h-full glass-panel flex-col justify-between p-4 z-50 shrink-0">
        <div>
            <div class="flex items-center gap-3 px-2 mb-8 mt-2">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-white to-gray-300 flex items-center justify-center shadow-lg shadow-white/20 shrink-0">
                    <img src="/assets/logo/logo-mark.svg" alt="Dewemoji logo" class="w-7 h-7 object-contain" />
                </div>
                <h1 class="font-display font-bold text-lg tracking-tight hidden lg:block">Dewemoji</h1>
            </div>
            <nav class="space-y-1">
                <a href="{{ route('home') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl bg-white/10 text-brand-sun border border-white/5 transition-all group">
                    <i data-lucide="layout-grid" class="w-5 h-5"></i>
                    <span class="text-sm font-medium hidden lg:block">Discover</span>
                </a>
                <a href="{{ route('api-docs') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all group">
                    <i data-lucide="book-open" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
                    <span class="text-sm font-medium hidden lg:block">API Docs</span>
                </a>
                <a href="{{ route('pricing') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all group">
                    <i data-lucide="badge-dollar-sign" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
                    <span class="text-sm font-medium hidden lg:block">Pricing</span>
                </a>
            </nav>
        </div>
        <div class="space-y-1">
            <a href="{{ route('privacy') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
                <i data-lucide="shield-check" class="w-5 h-5"></i>
                <span class="text-sm font-medium hidden lg:block">Privacy</span>
            </a>
            <a href="{{ route('terms') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
                <i data-lucide="file-text" class="w-5 h-5"></i>
                <span class="text-sm font-medium hidden lg:block">Terms</span>
            </a>
        </div>
    </aside>

    <main class="flex-1 flex flex-col h-full min-w-0 relative z-10">
        <header class="glass-header px-6 py-5 shrink-0 sticky top-0 z-40">
            <div class="w-full flex flex-col gap-4">
                <div class="flex flex-col md:flex-row gap-4 md:items-center justify-between">
                    <div class="relative group grow max-w-3xl">
                        <div class="absolute -inset-0.5 bg-gradient-to-r from-brand-ocean to-brand-sun rounded-xl blur opacity-20 group-hover:opacity-40 transition duration-500"></div>
                        <div class="relative flex items-center bg-[#151518] border border-white/10 rounded-xl shadow-2xl h-11">
                            <div class="pl-4 pr-3 text-gray-400">
                                <i data-lucide="search" class="w-5 h-5"></i>
                            </div>
                            <input id="q" type="text" placeholder="Search emojis by keyword, mood, meaning..." class="w-full bg-transparent text-white placeholder-gray-500 focus:outline-none font-medium h-full">
                            <div class="hidden md:flex items-center pr-3">
                                <kbd class="hidden sm:inline-block px-2 py-0.5 text-[10px] font-mono text-gray-500 bg-white/5 border border-white/10 rounded-md">⌘K</kbd>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center gap-3 shrink-0">
                        <select id="category" class="bg-[#151518] border border-white/10 rounded-xl px-4 text-sm text-gray-300 focus:outline-none focus:border-brand-ocean hover:bg-white/5 transition-colors h-11 cursor-pointer appearance-none">
                            <option value="">All Categories</option>
                        </select>
                        <select id="subcategory" class="bg-[#151518] border border-white/10 rounded-xl px-4 text-sm text-gray-300 focus:outline-none focus:border-brand-ocean hover:bg-white/5 transition-colors h-11 cursor-pointer appearance-none" disabled>
                            <option value="">All Subcategories</option>
                        </select>
                        <div class="w-px h-8 bg-white/10 mx-1 hidden lg:block"></div>
                        <div class="hidden lg:flex w-10 h-10 rounded-full bg-gradient-to-r from-gray-700 to-gray-600 border border-white/10"></div>
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-2 justify-between">
                    <div class="flex flex-wrap gap-2">
                        <button data-tag="happy" class="quick-tag px-2 py-1 bg-white/5 hover:bg-brand-ocean/20 hover:text-brand-oceanSoft border border-white/5 rounded text-[11px] transition-colors">#happy</button>
                        <button data-tag="love" class="quick-tag px-2 py-1 bg-white/5 hover:bg-brand-ocean/20 hover:text-brand-oceanSoft border border-white/5 rounded text-[11px] transition-colors">#love</button>
                        <button data-tag="party" class="quick-tag px-2 py-1 bg-white/5 hover:bg-brand-ocean/20 hover:text-brand-oceanSoft border border-white/5 rounded text-[11px] transition-colors">#party</button>
                        <button data-tag="thumbs" class="quick-tag px-2 py-1 bg-white/5 hover:bg-brand-ocean/20 hover:text-brand-oceanSoft border border-white/5 rounded text-[11px] transition-colors">#thumbs</button>
                        <button data-tag="animal" class="quick-tag px-2 py-1 bg-white/5 hover:bg-brand-ocean/20 hover:text-brand-oceanSoft border border-white/5 rounded text-[11px] transition-colors">#animal</button>
                    </div>
                    <div class="text-xs text-gray-400" id="result-count">Showing 0</div>
                </div>
            </div>
        </header>

        <div class="flex-1 overflow-y-auto p-4 sm:p-6 pb-24 lg:pb-6">
            <div class="w-full">
                <div id="hero-cards" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-6 transition-all duration-300">
                    <section id="hero-main" class="md:col-span-2 glass-card rounded-2xl p-6 relative overflow-hidden min-h-[180px] flex flex-col justify-end transition-all duration-300">
                        <div class="absolute top-0 right-0 p-5 opacity-50">
                            <i data-lucide="sparkles" class="w-5 h-5 text-brand-sun"></i>
                        </div>
                        <div class="relative z-10">
                            <span class="inline-block px-2 py-0.5 rounded bg-brand-sun/20 text-brand-sun text-[10px] font-bold mb-2 border border-brand-sun/30">NEW ENGINE</span>
                            <h3 class="font-display text-2xl font-bold mb-1">Semantic Discovery</h3>
                            <p class="text-gray-400 text-xs max-w-sm">Search the meaning, not just emoji names. EN + ID keywords supported.</p>
                        </div>
                        <div class="absolute -top-10 -right-10 w-48 h-48 bg-gradient-to-br from-brand-ocean/25 to-brand-sun/20 rounded-full blur-3xl"></div>
                    </section>

                    <section id="hero-optional-1" class="glass-card rounded-2xl p-5 flex flex-col relative">
                        <div class="flex justify-between items-center mb-4">
                            <h4 class="font-bold text-gray-200 text-sm">Trending Now</h4>
                            <i data-lucide="trending-up" class="w-4 h-4 text-brand-sun"></i>
                        </div>
                        <div id="trending-list" class="flex flex-wrap gap-2"></div>
                    </section>

                    <section id="hero-optional-2" class="glass-card rounded-2xl p-5 flex flex-col justify-between">
                        <div class="flex justify-between items-start">
                            <div class="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400">
                                <i data-lucide="history" class="w-4 h-4"></i>
                            </div>
                            <span id="dataset-count" class="text-[10px] text-gray-500 font-mono">0 items</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-sm">Recent</h4>
                            <div id="recent-list" class="flex gap-2 mt-2"></div>
                        </div>
                    </section>
                </div>

                <div class="flex items-center gap-2 mb-4 px-1">
                    <h4 class="font-bold text-gray-200">All Emojis</h4>
                    <div class="h-px bg-white/10 flex-1"></div>
                    <span id="count" class="text-xs text-gray-500">0 / 0</span>
                </div>

                <div id="grid" class="grid grid-cols-5 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-14 2xl:grid-cols-16 gap-2 pb-8"></div>

                <div class="py-8 flex justify-center">
                    <button id="more" class="hidden px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-sm text-gray-200 transition-colors">Load more</button>
                </div>
            </div>
        </div>
    </main>
</div>

<nav class="lg:hidden fixed bottom-0 inset-x-0 z-50 border-t border-white/10 bg-[#0b0b0f]/95 backdrop-blur px-2 py-2">
    <div class="grid grid-cols-5 gap-1 text-[11px]">
        <a href="{{ route('home') }}" class="flex flex-col items-center justify-center gap-1 rounded-lg py-2 text-brand-sun bg-white/5">
            <i data-lucide="layout-grid" class="w-4 h-4"></i><span>Discover</span>
        </a>
        <a href="{{ route('api-docs') }}" class="flex flex-col items-center justify-center gap-1 rounded-lg py-2 text-gray-300 hover:bg-white/5">
            <i data-lucide="book-open" class="w-4 h-4"></i><span>Docs</span>
        </a>
        <a href="{{ route('pricing') }}" class="flex flex-col items-center justify-center gap-1 rounded-lg py-2 text-gray-300 hover:bg-white/5">
            <i data-lucide="badge-dollar-sign" class="w-4 h-4"></i><span>Pricing</span>
        </a>
        <a href="{{ route('privacy') }}" class="flex flex-col items-center justify-center gap-1 rounded-lg py-2 text-gray-300 hover:bg-white/5">
            <i data-lucide="shield-check" class="w-4 h-4"></i><span>Privacy</span>
        </a>
        <a href="{{ route('terms') }}" class="flex flex-col items-center justify-center gap-1 rounded-lg py-2 text-gray-300 hover:bg-white/5">
            <i data-lucide="file-text" class="w-4 h-4"></i><span>Terms</span>
        </a>
    </div>
</nav>

<div id="toast" class="fixed bottom-8 left-1/2 -translate-x-1/2 translate-y-24 opacity-0 transition-all duration-300 z-50">
    <div class="bg-brand-ocean text-white px-4 py-2 rounded-full font-bold shadow-[0_0_20px_rgba(32,83,255,0.45)] flex items-center gap-2 text-sm">
        <i data-lucide="check" class="w-4 h-4"></i>
        <span id="toast-msg">Copied!</span>
    </div>
</div>
@endsection

@push('scripts')
<script>
(() => {
    const state = { page: 1, limit: 32, total: 0, items: [], categories: {} };
    const qEl = document.getElementById('q');
    const catEl = document.getElementById('category');
    const subEl = document.getElementById('subcategory');
    const grid = document.getElementById('grid');
    const count = document.getElementById('count');
    const more = document.getElementById('more');
    const resultCount = document.getElementById('result-count');
    const datasetCount = document.getElementById('dataset-count');
    const trendingList = document.getElementById('trending-list');
    const recentList = document.getElementById('recent-list');
    const heroCards = document.getElementById('hero-cards');
    const heroMain = document.getElementById('hero-main');
    const heroOptional1 = document.getElementById('hero-optional-1');
    const heroOptional2 = document.getElementById('hero-optional-2');

    const initParams = new URLSearchParams(window.location.search);
    if (initParams.get('q')) qEl.value = initParams.get('q');

    function esc(s) {
        return String(s || '').replace(/[&<>"']/g, (c) => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c]));
    }

    function hasActiveFilters() {
        return qEl.value.trim() !== '' || catEl.value !== '' || subEl.value !== '';
    }

    function updateHeroMode() {
        const compact = hasActiveFilters();
        heroCards.classList.toggle('mb-6', !compact);
        heroCards.classList.toggle('mb-3', compact);
        heroMain.classList.toggle('min-h-[180px]', !compact);
        heroMain.classList.toggle('min-h-[120px]', compact);
    }

    async function loadCategories() {
        const res = await fetch('/v1/categories');
        const data = await res.json();
        state.categories = data || {};
        Object.keys(state.categories).forEach((name) => {
            const opt = document.createElement('option');
            opt.value = name;
            opt.textContent = name;
            catEl.appendChild(opt);
        });
    }

    function renderSubcategories() {
        const subs = state.categories[catEl.value] || [];
        subEl.innerHTML = '<option value="">All subcategories</option>';
        subs.forEach((s) => {
            const opt = document.createElement('option');
            opt.value = s;
            opt.textContent = s;
            subEl.appendChild(opt);
        });
        subEl.disabled = subs.length === 0;
    }

    function showToast(message) {
        const toast = document.getElementById('toast');
        const msg = document.getElementById('toast-msg');
        msg.textContent = message;
        toast.classList.remove('translate-y-24', 'opacity-0');
        setTimeout(() => toast.classList.add('translate-y-24', 'opacity-0'), 1400);
    }

    function loadRecent() {
        try {
            return JSON.parse(localStorage.getItem('dewemoji_recent') || '[]');
        } catch {
            return [];
        }
    }

    function saveRecent(items) {
        localStorage.setItem('dewemoji_recent', JSON.stringify(items.slice(0, 8)));
    }

    function addRecent(emoji) {
        const curr = loadRecent().filter((e) => e !== emoji);
        curr.unshift(emoji);
        saveRecent(curr);
        renderRecent();
    }

    function renderRecent() {
        const recent = loadRecent();
        recentList.innerHTML = '';
        const fallback = ['🚀', '💀', '✨'];
        const source = recent.length ? recent : fallback;
        source.forEach((emoji) => {
            const btn = document.createElement('button');
            btn.className = 'w-8 h-8 rounded bg-white/5 hover:bg-white/10 flex items-center justify-center text-lg';
            btn.textContent = emoji;
            btn.addEventListener('click', () => window.copyEmoji(emoji));
            recentList.appendChild(btn);
        });
    }

    function renderTrendingFromItems(items) {
        const score = new Map();
        items.forEach((item) => {
            const tags = []
                .concat(item.keywords_en || [])
                .concat(item.intent_tags || []);
            tags.forEach((tag) => {
                const t = String(tag || '').trim().toLowerCase();
                if (!t || t.length < 3) return;
                score.set(t, (score.get(t) || 0) + 1);
            });
        });

        const top = Array.from(score.entries())
            .sort((a, b) => b[1] - a[1])
            .slice(0, 6)
            .map(([tag]) => tag);

        const fallback = ['happy', 'love', 'party', 'thumbs', 'animal', 'food'];
        const tags = top.length ? top : fallback;

        trendingList.innerHTML = '';
        tags.forEach((tag) => {
            const btn = document.createElement('button');
            btn.className = 'px-2 py-1 bg-white/5 hover:bg-brand-ocean/20 hover:text-brand-oceanSoft border border-white/5 rounded text-[11px] transition-colors';
            btn.textContent = '#' + tag;
            btn.addEventListener('click', () => {
                qEl.value = tag;
                fetchEmojis(true);
            });
            trendingList.appendChild(btn);
        });
    }

    window.copyEmoji = function (emoji) {
        navigator.clipboard.writeText(emoji).then(() => {
            showToast('Copied ' + emoji);
            addRecent(emoji);
        });
    }

    async function fetchEmojis(reset = false) {
        if (reset) {
            state.page = 1;
            state.items = [];
            grid.innerHTML = '';
        }

        updateHeroMode();

        const params = new URLSearchParams({ page: String(state.page), limit: String(state.limit) });
        if (qEl.value.trim()) params.set('q', qEl.value.trim());
        if (catEl.value) params.set('category', catEl.value);
        if (subEl.value) params.set('subcategory', subEl.value);

        const res = await fetch('/v1/emojis?' + params.toString());
        const data = await res.json();
        state.total = data.total || 0;

        const incoming = data.items || [];
        incoming.forEach((item) => state.items.push(item));
        renderGrid(incoming, reset);
        updateStats();
    }

    function renderGrid(items, reset) {
        if (reset && state.items.length === 0) {
            grid.innerHTML = '<p class="text-xs text-gray-500 col-span-full">No emojis found.</p>';
            return;
        }

        items.forEach((item) => {
            const card = document.createElement('a');
            card.href = '/emoji/' + encodeURIComponent(item.slug);
            card.className = 'aspect-square rounded-lg bg-white/5 hover:bg-white/10 flex flex-col items-center justify-center gap-1 text-center transition-transform hover:scale-105 border border-transparent hover:border-white/20';
            card.innerHTML = `
                <span class="text-2xl leading-none">${esc(item.emoji)}</span>
                <span class="emoji-name-clamp text-[10px] text-gray-400 px-1 w-full">${esc(item.name)}</span>
            `;
            card.addEventListener('contextmenu', (e) => {
                e.preventDefault();
                navigator.clipboard.writeText(item.emoji).then(() => {
                    showToast('Copied ' + item.emoji);
                    addRecent(item.emoji);
                });
            });
            grid.appendChild(card);
        });
    }

    function updateStats() {
        count.textContent = `${state.items.length} / ${state.total}`;
        resultCount.textContent = `Showing ${state.items.length}`;
        datasetCount.textContent = `${state.total} matches`;
        more.classList.toggle('hidden', state.items.length >= state.total);
    }

    let timer = null;
    qEl.addEventListener('input', () => {
        clearTimeout(timer);
        timer = setTimeout(() => fetchEmojis(true), 220);
    });

    catEl.addEventListener('change', async () => {
        renderSubcategories();
        await fetchEmojis(true);
    });

    subEl.addEventListener('change', () => fetchEmojis(true));

    more.addEventListener('click', async () => {
        state.page += 1;
        await fetchEmojis(false);
    });

    document.querySelectorAll('.quick-tag').forEach((btn) => {
        btn.addEventListener('click', () => {
            qEl.value = btn.dataset.tag || '';
            fetchEmojis(true);
        });
    });

    (async () => {
        await loadCategories();
        await fetchEmojis(true);
        renderTrendingFromItems(state.items);
        renderRecent();
        updateHeroMode();
        lucide.createIcons();
    })();
})();
</script>
@endpush