@extends('layouts.admin', ['title' => 'শব্দভাণ্ডার ম্যানেজমেন্ট'])

@section('content')
<div class="space-y-5">

    <!-- Top Action Bar -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-slate-950 border border-slate-800 p-5 rounded-3xl">
        <div>
            <h1 class="text-xl font-bold text-white font-outfit">শব্দভাণ্ডার পরিচালনা (Words Database)</h1>
            <p class="text-xs text-slate-400 mt-0.5">মোট {{ number_format($words->total()) }}টি শব্দ সংরক্ষিত আছে</p>
        </div>

        <div class="flex items-center gap-2">
            <a href="{{ route('admin.ai_generator') }}" class="bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold text-xs px-3.5 py-2.5 rounded-xl transition flex items-center gap-1.5">
                <i data-lucide="sparkles" class="w-4 h-4"></i>
                <span>এআই জেনারেটর</span>
            </a>
            <a href="{{ route('admin.words.create') }}" class="bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs px-3.5 py-2.5 rounded-xl transition flex items-center gap-1.5 shadow">
                <i data-lucide="plus" class="w-4 h-4"></i>
                <span>নতুন শব্দ যোগ</span>
            </a>
        </div>
    </div>

    <!-- Search & Filters -->
    <div class="bg-slate-950 border border-slate-800 p-4 rounded-2xl">
        <form action="{{ route('admin.words.index') }}" method="GET" class="grid grid-cols-1 sm:grid-cols-12 gap-2.5">
            <div class="sm:col-span-6 relative">
                <input type="text" name="q" value="{{ $search }}" placeholder="ইতালিয়ান বা বাংলা শব্দ খুঁজুন..." 
                       class="w-full bg-slate-900 border border-slate-700 text-white placeholder-slate-500 text-xs rounded-xl py-2.5 pl-9 pr-3 focus:outline-none focus:ring-2 focus:ring-emerald-500">
                <i data-lucide="search" class="w-4 h-4 absolute left-3 top-2.5 text-slate-400"></i>
            </div>

            <div class="sm:col-span-3">
                <select name="level" class="w-full bg-slate-900 border border-slate-700 text-white text-xs rounded-xl py-2.5 px-3 focus:outline-none focus:ring-2 focus:ring-emerald-500">
                    <option value="">সকল লেভেল (A0 - C1)</option>
                    @foreach(['A0', 'A1', 'A2', 'B1', 'B2', 'C1'] as $lvl)
                    <option value="{{ $lvl }}" {{ $level === $lvl ? 'selected' : '' }}>লেভেল {{ $lvl }}</option>
                    @endforeach
                </select>
            </div>

            <div class="sm:col-span-3 flex items-center gap-2">
                <button type="submit" class="flex-1 bg-slate-800 hover:bg-slate-700 text-white font-bold text-xs py-2.5 px-3 rounded-xl transition">
                    ফিল্টার করুন
                </button>
                @if($search || $level || $category)
                <a href="{{ route('admin.words.index') }}" class="bg-rose-950 hover:bg-rose-900 text-rose-300 text-xs px-2.5 py-2.5 rounded-xl transition" title="রিসেট">
                    <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
                </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Words Table -->
    <div class="bg-slate-950 border border-slate-800 rounded-3xl overflow-hidden shadow-xl">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead>
                    <tr class="bg-slate-900/80 border-b border-slate-800 text-slate-400 uppercase tracking-wider text-[10px]">
                        <th class="py-3 px-4">ইতালিয়ান শব্দ</th>
                        <th class="py-3 px-4">বাংলা অর্থ</th>
                        <th class="py-3 px-4">লেভেল</th>
                        <th class="py-3 px-4">ক্যাটাগরি</th>
                        <th class="py-3 px-4">উদাহরণ বাক্য</th>
                        <th class="py-3 px-4 text-right">অ্যাকশন</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60">
                    @forelse($words as $w)
                    <tr class="hover:bg-slate-900/60 transition">
                        <td class="py-3 px-4">
                            <span class="font-bold text-white font-outfit text-sm">{{ $w->italian }}</span>
                            @if($w->pronunciation)
                            <span class="text-[10px] text-slate-500 font-mono block">/{{ $w->pronunciation }}/</span>
                            @endif
                        </td>
                        <td class="py-3 px-4 font-bold text-emerald-400">{{ $w->bangla }}</td>
                        <td class="py-3 px-4">
                            <span class="bg-slate-800 text-slate-200 text-[10px] font-mono font-bold px-2 py-0.5 rounded">
                                {{ $w->level }}
                            </span>
                        </td>
                        <td class="py-3 px-4 text-slate-300 capitalize">{{ $w->category }}</td>
                        <td class="py-3 px-4 text-[11px] text-slate-400 max-w-xs truncate">
                            {{ $w->example_it ?? '—' }}
                        </td>
                        <td class="py-3 px-4 text-right whitespace-nowrap">
                            <div class="flex items-center justify-end gap-1.5">
                                <a href="{{ route('admin.words.edit', $w->id) }}" class="p-1.5 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-lg transition" title="এডিট">
                                    <i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
                                </a>
                                <form action="{{ route('admin.words.destroy', $w->id) }}" method="POST" onsubmit="return confirm('আপনি কি নিশ্চিত এই শব্দটি মুছে ফেলতে চান?');" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 bg-rose-950 hover:bg-rose-900 text-rose-400 rounded-lg transition" title="মুছে ফেলুন">
                                        <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="py-8 text-center text-slate-500">
                            কোনো শব্দ পাওয়া যায়নি।
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="p-4 border-t border-slate-800">
            {{ $words->links() }}
        </div>
    </div>

</div>
@endsection