@extends('layouts.admin', ['title' => 'সেন্ট্রাল অ্যাডমিন ড্যাশবোর্ড'])

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

    <!-- Top Welcome Banner -->
    <div class="bg-gradient-to-r from-emerald-900 to-slate-900 border border-emerald-800/80 rounded-3xl p-6 shadow-xl flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <span class="text-xs font-bold text-emerald-400 uppercase tracking-wider font-mono">Central System</span>
            <h1 class="text-2xl sm:text-3xl font-black text-white font-outfit mt-1">সেন্ট্রাল কন্ট্রোল ড্যাশবোর্ড</h1>
            <p class="text-xs text-slate-300 mt-1">
                একই ডেটাবেজ ও অ্যাডমিন প্যানেল থেকে আপনার <strong class="text-emerald-400">ওয়েবসাইট</strong> এবং <strong class="text-emerald-400">প্লে-স্টোর অ্যাপ</strong> পরিচালিত হচ্ছে।
            </p>
        </div>

        <div class="flex items-center gap-2">
            <a href="{{ route('admin.ai_generator') }}" class="bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-slate-950 font-bold text-xs px-4 py-2.5 rounded-xl shadow transition flex items-center gap-1.5 font-outfit">
                <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-4 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>

    <!-- Stats 6 Grid -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
        <div class="bg-slate-950 border border-slate-800 p-4 rounded-2xl">
            <span class="text-[11px] text-slate-400 font-semibold block">মোট শব্দভাণ্ডার</span>
            <span class="text-2xl font-black text-emerald-400 font-outfit mt-1 block">{{ number_format($stats['total_words']) }}</span>
            <span class="text-[10px] text-slate-500">শব্দ সংরক্ষিত</span>
        </div>

        <div class="bg-slate-950 border border-slate-800 p-4 rounded-2xl">
            <span class="text-[11px] text-slate-400 font-semibold block">কোর্স লেভেল</span>
            <span class="text-2xl font-black text-amber-400 font-outfit mt-1 block">{{ $stats['total_courses'] }}টি</span>
            <span class="text-[10px] text-slate-500">A0 থেকে C1</span>
        </div>

        <div class="bg-slate-950 border border-slate-800 p-4 rounded-2xl">
            <span class="text-[11px] text-slate-400 font-semibold block">মোট পাঠ / অধ্যায়</span>
            <span class="text-2xl font-black text-blue-400 font-outfit mt-1 block">{{ $stats['total_chapters'] }}টি</span>
            <span class="text-[10px] text-slate-500">অধ্যায় ও রিভিশন</span>
        </div>

        <div class="bg-slate-950 border border-slate-800 p-4 rounded-2xl">
            <span class="text-[11px] text-slate-400 font-semibold block">বাস্তব কথোপকথন</span>
            <span class="text-2xl font-black text-purple-400 font-outfit mt-1 block">{{ $stats['total_conversations'] }}টি</span>
            <span class="text-[10px] text-slate-500">সিচুয়েশন ডায়ালগ</span>
        </div>

        <div class="bg-slate-950 border border-slate-800 p-4 rounded-2xl">
            <span class="text-[11px] text-slate-400 font-semibold block">কুইজ প্রশ্ন</span>
            <span class="text-2xl font-black text-rose-400 font-outfit mt-1 block">{{ $stats['total_quizzes'] }}টি</span>
            <span class="text-[10px] text-slate-500">ইন্টারেক্টিভ টেস্ট</span>
        </div>

        <div class="bg-slate-950 border border-slate-800 p-4 rounded-2xl">
            <span class="text-[11px] text-slate-400 font-semibold block">ব্যাকরণ নিয়ম</span>
            <span class="text-2xl font-black text-teal-400 font-outfit mt-1 block">{{ $stats['total_grammars'] }}টি</span>
            <span class="text-[10px] text-slate-500">টপিক গাইড</span>
        </div>
    </div>

    <!-- Courses & Chapters Summary -->
    <div class="bg-slate-950 border border-slate-800 rounded-3xl p-5">
        <h3 class="text-base font-bold text-white font-outfit mb-3 flex items-center gap-2">
            <i data-lucide="graduation-cap" class="w-4 h-4 text-emerald-400"></i>
            কোর্স ও কারিকুলাম স্ট্যাটাস
        </h3>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            @foreach($courses as $c)
            <div class="bg-slate-900 border border-slate-800 p-3.5 rounded-2xl flex items-center justify-between">
                <div>
                    <div class="flex items-center gap-2">
                        <span class="text-xs font-black px-2 py-0.5 rounded text-white font-outfit" style="background-color: {{ $c->badge_color }}">
                            {{ $c->level_code }}
                        </span>
                        <span class="font-bold text-xs text-white">{{ $c->title }}</span>
                    </div>
                    <span class="text-[11px] text-slate-400 block mt-1">{{ $c->subtitle }}</span>
                </div>
                <span class="text-xs font-bold text-emerald-400 bg-emerald-950 px-2.5 py-1 rounded-lg font-mono">
                    {{ $c->chapters_count }} পাঠ
                </span>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Recent Words Table Preview -->
    <div class="bg-slate-950 border border-slate-800 rounded-3xl p-5">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-base font-bold text-white font-outfit flex items-center gap-2">
                <i data-lucide="book-open" class="w-4 h-4 text-emerald-400"></i>
                সাম্প্রতিক শব্দাবলী
            </h3>
            <a href="{{ route('admin.words.index') }}" class="text-xs text-emerald-400 hover:text-emerald-300 font-semibold flex items-center gap-1">
                <span>সকল শব্দ দেখুন</span>
                <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
            </a>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead>
                    <tr class="border-b border-slate-800 text-slate-400 uppercase tracking-wider text-[10px]">
                        <th class="py-2 px-3">ইতালিয়ান</th>
                        <th class="py-2 px-3">বাংলা অর্থ</th>
                        <th class="py-2 px-3">লেভেল</th>
                        <th class="py-2 px-3">ক্যাটাগরি</th>
                        <th class="py-2 px-3 text-right">অ্যাকশন</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60">
                    @foreach($recentWords as $w)
                    <tr class="hover:bg-slate-900/60">
                        <td class="py-2.5 px-3 font-bold text-white font-outfit">{{ $w->italian }}</td>
                        <td class="py-2.5 px-3 text-emerald-300">{{ $w->bangla }}</td>
                        <td class="py-2.5 px-3 font-mono text-[11px]">{{ $w->level }}</td>
                        <td class="py-2.5 px-3 text-slate-400 capitalize">{{ $w->category }}</td>
                        <td class="py-2.5 px-3 text-right">
                            <a href="{{ route('admin.words.edit', $w->id) }}" class="text-slate-400 hover:text-white px-2 py-1 bg-slate-800 rounded font-semibold">
                                এডিট
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection