{% extends "base.html" %}
{% block title %}Tools & Screeners{% endblock %}

{% block content %}
<div x-data="toolsDashboard()" class="space-y-5">

    <!-- Header -->
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div class="flex items-center gap-3">
            <svg class="w-7 h-7 text-koin-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/>
            </svg>
            <div>
                <h1 class="text-2xl font-bold text-white">Tools & Screeners</h1>
                <p class="text-sm text-gray-500">{{ features|length }} fitur tersedia &mdash; Tier: <span class="text-koin-400 font-semibold">{{ user_tier|title }}</span></p>
            </div>
        </div>
        {% if not is_admin and user_tier != 'ultimate' %}
        <a href="{{ tools_base }}/upgrade" class="px-4 py-2 rounded-lg bg-amber-600 hover:bg-amber-500 text-white text-sm font-semibold transition flex items-center gap-1.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/></svg>
            Upgrade
        </a>
        {% endif %}
    </div>

    <!-- Filter / Search -->
    <div class="flex flex-wrap gap-2 items-center">
        <div class="relative flex-1 min-w-[200px]">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <input type="text" x-model="search" placeholder="Cari fitur..."
                   class="w-full pl-10 pr-4 py-2 bg-gray-900 border border-gray-800 rounded-lg text-sm text-white placeholder-gray-600 focus:border-koin-500 focus:outline-none">
        </div>
        <!-- Category filter -->
        <template x-for="cat in categories" :key="cat.key">
            <button @click="activeCategory = activeCategory === cat.key ? '' : cat.key"
                    class="px-3 py-2 rounded-lg text-xs font-semibold transition"
                    :class="activeCategory === cat.key
                        ? 'bg-koin-600 text-white'
                        : 'bg-gray-900 border border-gray-800 text-gray-400 hover:text-white hover:border-gray-600'">
                <span x-text="cat.label"></span>
            </button>
        </template>
        <!-- Tier filter -->
        <select x-model="activeTier" class="px-3 py-2 rounded-lg bg-gray-900 border border-gray-800 text-xs text-gray-300 focus:border-koin-500 focus:outline-none">
            <option value="">Semua Tier</option>
            <option value="free">Free</option>
            <option value="starter">Starter</option>
            <option value="pro">Pro</option>
            <option value="ultimate">Ultimate</option>
        </select>
    </div>

    <!-- Feature Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
        {% for feat in features %}
        <a href="{{ tools_base }}{{ feat.url_path }}"
           x-show="matchFilter('{{ feat.feature_slug }}', '{{ feat.feature_label }}', '{{ feat.category }}', '{{ feat.min_tier }}')"
           class="group block bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-koin-500/50 hover:bg-gray-800/50 transition relative overflow-hidden">

            <!-- Tier badge -->
            {% set tier_colors = {'free': 'bg-gray-700 text-gray-300', 'starter': 'bg-sky-900/60 text-sky-300', 'pro': 'bg-violet-900/60 text-violet-300', 'ultimate': 'bg-amber-900/60 text-amber-300'} %}
            <span class="absolute top-2 right-2 text-[10px] font-bold uppercase px-1.5 py-0.5 rounded {{ tier_colors.get(feat.min_tier, 'bg-gray-700 text-gray-400') }}">
                {{ feat.min_tier }}
            </span>

            <!-- Lock overlay if tier insufficient -->
            {% set feat_level = {'guest': -1, 'free': 0, 'starter': 1, 'pro': 2, 'ultimate': 3}.get(feat.min_tier, 0) %}
            {% if feat_level > user_tier_level %}
            <div class="absolute inset-0 bg-gray-950/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition z-10">
                <div class="text-center">
                    <svg class="w-6 h-6 text-amber-400 mx-auto" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/>
                    </svg>
                    <p class="text-amber-400 text-xs font-semibold mt-1">{{ feat.min_tier|title }} Required</p>
                </div>
            </div>
            {% endif %}

            <!-- Category icon -->
            {% set cat_icons = {
                'screener': '<path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"/>',
                'analytics': '<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>',
                'insights': '<path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/>',
                'tools': '<path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17l-5.1 5.1a2.121 2.121 0 01-3-3l5.1-5.1m0 0L3.34 8.09a1.5 1.5 0 010-2.12l.88-.88a1.5 1.5 0 012.12 0l4.08 4.08m0 0l4.1-4.1a2.121 2.121 0 013 3l-4.1 4.1"/>',
                'advanced': '<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/>',
            } %}
            <div class="flex items-start gap-3">
                <div class="p-2 rounded-lg bg-gray-800 text-koin-400 shrink-0 {% if feat_level > user_tier_level %}opacity-50{% endif %}">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        {{ cat_icons.get(feat.category, cat_icons['tools'])|safe }}
                    </svg>
                </div>
                <div class="min-w-0 {% if feat_level > user_tier_level %}opacity-60{% endif %}">
                    <h3 class="text-sm font-semibold text-white truncate">{{ feat.feature_label }}</h3>
                    <p class="text-xs text-gray-500 mt-0.5 capitalize">{{ feat.category }} &middot; Wave {{ feat.wave }}</p>
                </div>
            </div>
        </a>
        {% endfor %}
    </div>

    <!-- Empty state -->
    <div x-show="document.querySelectorAll('[x-show*=matchFilter]:not([style*=none])').length === 0" x-cloak
         class="text-center py-10">
        <p class="text-gray-500">Tidak ada fitur yang cocok dengan filter.</p>
    </div>
</div>

<script>
function toolsDashboard() {
    return {
        search: '',
        activeCategory: '',
        activeTier: '',
        categories: [
            {key: 'screener', label: 'Screener'},
            {key: 'analytics', label: 'Analytics'},
            {key: 'insights', label: 'Insights'},
            {key: 'tools', label: 'Tools'},
            {key: 'advanced', label: 'Advanced'},
        ],

        matchFilter(slug, label, category, tier) {
            if (this.activeCategory && category !== this.activeCategory) return false;
            if (this.activeTier && tier !== this.activeTier) return false;
            if (this.search) {
                const q = this.search.toLowerCase();
                if (!slug.includes(q) && !label.toLowerCase().includes(q)) return false;
            }
            return true;
        },
    }
}
</script>
{% endblock %}