@extends('layouts.app', ['title' => 'ইতালিয়ান শব্দভাণ্ডার ও ডিকশনারি (৮৪,০০০+ শব্দ)'])

@section('content')
<div class="space-y-3.5 w-full">

    <!-- Top Header & Search Bar -->
    <div class="glass-card rounded-3xl p-4 shadow-xl border border-white/40 bg-white/95">
        <div class="flex items-center justify-between gap-2 mb-2">
            <div>
                <h2 class="text-lg sm:text-xl font-black text-slate-900 font-outfit">শব্দভাণ্ডার (Vocabulary)</h2>
                <p class="text-xs text-emerald-800 font-medium">৮৪,০০০+ শব্দার্থ, উচ্চারণ ও বাস্তব উদাহরণ</p>
            </div>
            <span class="text-xs font-black bg-emerald-100 text-emerald-800 border border-emerald-300 px-3 py-1 rounded-full font-outfit">
                {{ number_format($words->total()) }} শব্দ
            </span>
        </div>

        <!-- Search Form -->
        <form action="{{ route('words.index') }}" method="GET" class="mt-2 space-y-2.5">
            <div class="relative">
                <input type="text" name="q" value="{{ $search }}" placeholder="ইতালিয়ান বা বাংলা শব্দ লিখুন..." 
                       class="w-full bg-emerald-50/80 border border-emerald-200 rounded-2xl py-2.5 pl-10 pr-4 text-xs sm:text-sm font-bold placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 shadow-inner font-siliguri">
                <i data-lucide="search" class="w-4 h-4 absolute left-3.5 top-3 text-emerald-700"></i>
            </div>

            <!-- Level Filter Chips -->
            <div class="flex flex-wrap items-center gap-1.5">
                <span class="text-[11px] font-bold text-slate-600">লেভেল:</span>
                <a href="{{ route('words.index', array_merge(request()->query(), ['level' => null])) }}" 
                   class="text-[11px] font-bold px-2.5 py-1 rounded-xl transition {{ !$level ? 'bg-emerald-700 text-white shadow' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">
                    সকল
                </a>
                @foreach(['A0', 'A1', 'A2', 'B1', 'B2', 'C1'] as $lvl)
                <a href="{{ route('words.index', array_merge(request()->query(), ['level' => $lvl])) }}" 
                   class="text-[11px] font-bold px-2.5 py-1 rounded-xl transition {{ $level === $lvl ? 'bg-emerald-700 text-white shadow' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">
                    {{ $lvl }}
                </a>
                @endforeach

                @if($search || $level || $category)
                <a href="{{ route('words.index') }}" class="text-[11px] text-rose-600 hover:text-rose-800 font-bold ml-auto flex items-center gap-0.5">
                    <i data-lucide="x" class="w-3.5 h-3.5"></i>
                    রিসেট
                </a>
                @endif
            </div>
        </form>
    </div>

    <!-- 100% Exact App Two-Sided Word Cards List (item_word_card.xml) -->
    <div class="space-y-2.5">
        @forelse($words as $word)
        <div class="bg-white rounded-2xl shadow-md border border-slate-200/80 overflow-hidden hover:shadow-lg transition">
            
            <!-- Main Two-Sided Row -->
            <div class="flex items-stretch min-h-[58px]">
                
                <!-- Left: Italian Side -->
                <div onclick="speakItalian('{{ addslashes($word->italian) }}')" class="flex-1 p-3 flex flex-col justify-center cursor-pointer hover:bg-emerald-50/50 transition">
                    <div class="flex items-center gap-1.5">
                        <span class="text-sm sm:text-base font-black text-[#1A237E] font-outfit leading-tight">{{ $word->italian }}</span>
                        <span class="text-[9px] bg-emerald-100 text-emerald-800 font-bold px-1.5 py-0.2 rounded font-outfit">
                            {{ $word->level }}
                        </span>
                    </div>
                    @if($word->pronunciation)
                    <span class="text-[10px] text-slate-400 font-mono mt-0.5 block">/{{ $word->pronunciation }}/</span>
                    @endif
                </div>

                <!-- Middle Divider with Switch & Audio & Fav -->
                <div class="w-12 bg-slate-50 border-x border-slate-200 flex flex-col items-center justify-center gap-1 py-1 flex-shrink-0">
                    <button onclick="speakItalian('{{ addslashes($word->italian) }}')" class="w-7 h-7 rounded-full bg-amber-100 hover:bg-amber-200 text-amber-900 flex items-center justify-center text-xs transition shadow-2xs" title="উচ্চারণ শুনুন">
                        🔊
                    </button>
                    <button onclick="toggleFav(this, {{ $word->id }})" class="text-xs text-slate-400 hover:text-rose-500 transition" title="পছন্দে যোগ করুন">
                        🤍
                    </button>
                </div>

                <!-- Right: Bangla Side -->
                <div class="flex-1 p-3 flex flex-col justify-center bg-slate-50/30">
                    <span class="text-xs sm:text-sm font-black text-[#8B0000] leading-tight font-siliguri">{{ $word->bangla }}</span>
                    @if($word->part_of_speech)
                    <span class="text-[9px] text-slate-500 italic mt-0.5 block">{{ $word->part_of_speech }}</span>
                    @endif
                </div>

            </div>

            <!-- Expandable Examples Section -->
            @if($word->example_it)
            <div class="bg-gradient-to-r from-emerald-50/40 to-teal-50/40 border-t border-slate-100 px-3 py-2 text-xs flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <div class="flex items-center gap-1.5">
                        <span class="text-[9px] font-bold text-emerald-800 uppercase">উদাহরণ:</span>
                        <p class="font-bold text-slate-800 font-outfit italic truncate">"{{ $word->example_it }}"</p>
                    </div>
                    <p class="text-[11px] text-slate-600 mt-0.5 truncate">{{ $word->example_bn }}</p>
                </div>
                <button onclick="speakItalian('{{ addslashes($word->example_it) }}')" class="text-xs text-emerald-700 hover:text-emerald-900 flex-shrink-0" title="বাক্য শুনুন">
                    🔊
                </button>
            </div>
            @endif

        </div>
        @empty
        <div class="glass-card rounded-3xl p-8 text-center text-slate-600">
            <p class="text-sm font-bold">কোনো শব্দ পাওয়া যায়নি।</p>
        </div>
        @endforelse
    </div>

    <!-- Pagination -->
    <div class="pt-2">
        {{ $words->links() }}
    </div>

</div>

<script>
    function toggleFav(btn, id) {
        if (btn.innerText === '🤍') {
            btn.innerText = '❤️';
            btn.classList.add('text-rose-500');
        } else {
            btn.innerText = '🤍';
            btn.classList.remove('text-rose-500');
        }
    }
</script>
@endsection