@extends('layouts.madar')

@section('title', 'لوحة التحكم')
@section('page_title', 'مرحباً، ' . ($overview['user']->full_name ?? $overview['user']->username))

@section('content')
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <x-madar.stat-card label="خطة الاشتراك" :value="$overview['subscription']['plan_name']" icon="⭐" />
    <x-madar.stat-card label="رسائل AI اليوم" :value="$overview['ai_messages']['remaining'] . ' / ' . $overview['ai_messages']['limit']" icon="💬" hint="متبقي من الحد اليومي" />
    <x-madar.stat-card label="رصيد المحفظة" :value="number_format($overview['wallet_balance'], 0) . ' د.ع'" icon="💰" />
    <x-madar.stat-card label="نقاط المكافآت" :value="number_format($overview['reward_points'])" icon="🎁" :hint="'المستوى ' . $overview['level']" />
</div>

<div class="mt-8 grid gap-6 lg:grid-cols-3">
    <div class="glass-card p-6 lg:col-span-2">
        <h2 class="mb-4 font-bold">ابدأ بسرعة</h2>
        <div class="grid gap-3 sm:grid-cols-2">
            <a href="{{ route('web.chat') }}" class="rounded-xl border border-white/10 bg-gradient-to-br from-violet-600/20 to-transparent p-4 hover:border-violet-500/30">
                <p class="font-bold">محادثة AI</p>
                <p class="mt-1 text-xs text-zinc-400">اسأل، اكتب، وابتكر</p>
            </a>
            <a href="{{ route('web.images') }}" class="rounded-xl border border-white/10 bg-gradient-to-br from-cyan-600/20 to-transparent p-4 hover:border-cyan-500/30">
                <p class="font-bold">توليد الصور</p>
                <p class="mt-1 text-xs text-zinc-400">استوديو صور احترافي</p>
            </a>
            <a href="{{ route('web.files') }}" class="rounded-xl border border-white/10 bg-white/5 p-4 hover:bg-white/10">
                <p class="font-bold">تحليل الملفات</p>
                <p class="mt-1 text-xs text-zinc-400">PDF و DOCX و صور</p>
            </a>
            <a href="{{ route('web.tools') }}" class="rounded-xl border border-white/10 bg-white/5 p-4 hover:bg-white/10">
                <p class="font-bold">أدوات AI</p>
                <p class="mt-1 text-xs text-zinc-400">قوالب جاهزة</p>
            </a>
        </div>
    </div>
    <div class="glass-card p-6">
        <h2 class="font-bold">ترقية الخطة</h2>
        <p class="mt-2 text-sm text-zinc-400">افتح ميزات Pro و Ultra: صور، ملفات، نسخ طويل، ومكافآت مضاعفة.</p>
        <a href="{{ route('web.pricing') }}" class="neon-btn mt-4 w-full">عرض الخطط</a>
    </div>
</div>

<div class="mt-8 grid gap-6 lg:grid-cols-3">
    <div class="glass-card p-6">
        <h3 class="mb-4 font-bold">آخر المحادثات</h3>
        @forelse ($overview['recent_chats'] as $chat)
            <a href="{{ route('web.chat') }}?c={{ $chat->id }}" class="mb-2 block rounded-lg px-3 py-2 text-sm hover:bg-white/5">
                <p class="truncate font-medium">{{ $chat->title ?: 'محادثة جديدة' }}</p>
                <p class="text-xs text-zinc-500">{{ $chat->last_message_at?->diffForHumans() }}</p>
            </a>
        @empty
            <p class="text-sm text-zinc-500">لا توجد محادثات بعد.</p>
        @endforelse
    </div>
    <div class="glass-card p-6">
        <h3 class="mb-4 font-bold">آخر الصور</h3>
        <div class="grid grid-cols-3 gap-2">
            @forelse ($overview['recent_images'] as $img)
                <a href="{{ route('web.images') }}" class="aspect-square overflow-hidden rounded-lg bg-white/5">
                    @if ($img->image_url)
                        <img src="{{ str_starts_with($img->image_url, 'http') ? $img->image_url : asset($img->image_url) }}" alt="" class="h-full w-full object-cover">
                    @endif
                </a>
            @empty
                <p class="col-span-3 text-sm text-zinc-500">لم تُولَّد صور بعد.</p>
            @endforelse
        </div>
    </div>
    <div class="glass-card p-6">
        <h3 class="mb-4 font-bold">آخر الملفات</h3>
        @forelse ($overview['recent_files'] as $file)
            <div class="mb-2 rounded-lg px-3 py-2 text-sm hover:bg-white/5">
                <p class="truncate font-medium">{{ $file->original_name }}</p>
                <p class="text-xs text-zinc-500">{{ $file->status }}</p>
            </div>
        @empty
            <p class="text-sm text-zinc-500">لا ملفات محللة بعد.</p>
        @endforelse
    </div>
</div>
@endsection