@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'إدارة نماذج الذكاء الاصطناعي' : 'AI Model Management')
@section('skip_page_hero', true)

@php
    $isArabic = app()->getLocale() === 'ar';
    $filtersOpen = request()->hasAny(['search', 'provider', 'type', 'active', 'status', 'default_type']);

    $typeLabels = [
        'language' => $isArabic ? 'لغوي' : 'Language',
        'image' => $isArabic ? 'صور' : 'Image',
        'video' => $isArabic ? 'فيديو' : 'Video',
        'multimodal' => $isArabic ? 'متعدد الوسائط' : 'Multimodal',
    ];
@endphp

@section('content')
<div class="space-y-6" x-data="{ filtersOpen: {{ $filtersOpen ? 'true' : 'false' }} }">
    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div class="max-w-3xl">
                <h1 class="text-3xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'إدارة نماذج الذكاء الاصطناعي' : 'AI Model Management' }}</h1>
                <p class="mt-3 text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'إدارة النماذج المعتمدة، وحالات الاختبار، والتفعيل، والافتراضيات حسب النوع من صفحة أوضح وأهدأ.' : 'Manage approved models, test states, activation, and per-type defaults from a clearer, calmer interface.' }}</p>
            </div>

            <div class="flex flex-wrap gap-3">
                <button type="button" @click="filtersOpen = !filtersOpen" class="inline-flex h-11 items-center rounded-xl border border-surface-200 px-4 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:text-surface-200 dark:hover:bg-surface-800">
                    {{ $isArabic ? 'إدارة الفلتر' : 'Manage Filters' }}
                </button>
                <form method="POST" action="{{ route('admin.ai-models.test-all') }}">
                    @csrf
                    <button type="submit" class="inline-flex h-11 items-center rounded-xl bg-brand-600 px-4 text-sm font-bold text-white transition hover:bg-brand-700">
                        {{ $isArabic ? 'اختبار جميع النماذج' : 'Test All Models' }}
                    </button>
                </form>
            </div>
        </div>
    </section>

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ $isArabic ? 'إجمالي النماذج' : 'Total Models' }}</p>
            <p class="mt-3 text-2xl font-black text-surface-900 dark:text-white">{{ $models->total() }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ $isArabic ? 'النماذج النشطة' : 'Active Models' }}</p>
            <p class="mt-3 text-2xl font-black text-surface-900 dark:text-white">{{ $models->getCollection()->where('is_active', true)->count() }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ $isArabic ? 'اختبارات ناجحة' : 'Successful Tests' }}</p>
            <p class="mt-3 text-2xl font-black text-surface-900 dark:text-white">{{ $models->getCollection()->where('last_test_status', 'success')->count() }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ $isArabic ? 'أنواع افتراضية' : 'Default Types' }}</p>
            <p class="mt-3 text-2xl font-black text-surface-900 dark:text-white">{{ $defaults->count() }}/{{ count($typeLabels) }}</p>
        </article>
    </section>

    <section x-show="filtersOpen" x-collapse class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <form action="{{ route('admin.ai-models.index') }}" method="GET" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            <input type="text" name="search" value="{{ request('search') }}" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" placeholder="{{ $isArabic ? 'ابحث باسم النموذج أو المزود أو المفتاح' : 'Search by model, provider, or key' }}">

            <select name="provider" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                <option value="">{{ $isArabic ? 'كل المزودين' : 'All Providers' }}</option>
                @foreach($providers as $provider)
                    <option value="{{ $provider['key'] }}" @selected(request('provider') === $provider['key'])>{{ $provider['label'] }}</option>
                @endforeach
            </select>

            <select name="type" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                <option value="">{{ $isArabic ? 'كل الأنواع' : 'All Types' }}</option>
                @foreach($typeLabels as $typeKey => $typeLabel)
                    <option value="{{ $typeKey }}" @selected(request('type') === $typeKey)>{{ $typeLabel }}</option>
                @endforeach
            </select>

            <select name="active" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                <option value="">{{ $isArabic ? 'كل حالات التفعيل' : 'All Activation States' }}</option>
                <option value="1" @selected(request('active') === '1')>{{ $isArabic ? 'مفعّل' : 'Active' }}</option>
                <option value="0" @selected(request('active') === '0')>{{ $isArabic ? 'غير مفعّل' : 'Inactive' }}</option>
            </select>

            <select name="status" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                <option value="">{{ $isArabic ? 'كل نتائج الاختبار' : 'All Test States' }}</option>
                <option value="success" @selected(request('status') === 'success')>{{ $isArabic ? 'نجح' : 'Success' }}</option>
                <option value="failed" @selected(request('status') === 'failed')>{{ $isArabic ? 'فشل' : 'Failed' }}</option>
                <option value="untested" @selected(request('status') === 'untested')>{{ $isArabic ? 'غير مختبر' : 'Untested' }}</option>
                <option value="tested" @selected(request('status') === 'tested')>{{ $isArabic ? 'تم اختباره' : 'Tested' }}</option>
            </select>

            <select name="default_type" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                <option value="">{{ $isArabic ? 'كل الأنواع الافتراضية' : 'All Default Types' }}</option>
                @foreach($typeLabels as $typeKey => $typeLabel)
                    <option value="{{ $typeKey }}" @selected(request('default_type') === $typeKey)>{{ $typeLabel }}</option>
                @endforeach
            </select>

            <div class="flex gap-3 xl:col-span-3">
                <button type="submit" class="inline-flex h-11 flex-1 items-center justify-center rounded-xl bg-surface-900 px-4 text-sm font-bold text-white transition hover:bg-surface-800 dark:bg-brand-600 dark:hover:bg-brand-700">
                    {{ $isArabic ? 'تطبيق الفلاتر' : 'Apply Filters' }}
                </button>
                <a href="{{ route('admin.ai-models.index') }}" class="inline-flex h-11 flex-1 items-center justify-center rounded-xl border border-surface-200 px-4 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:text-surface-200 dark:hover:bg-surface-800">
                    {{ $isArabic ? 'إعادة تعيين' : 'Reset' }}
                </a>
            </div>
        </form>
    </section>

    <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="border-b border-surface-200 px-6 py-5 dark:border-surface-800">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'قائمة النماذج' : 'Models List' }}</h2>
        </div>

        @if($models->isEmpty())
            <div class="px-6 py-16 text-center">
                <h3 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'لا توجد نماذج مطابقة' : 'No matching models' }}</h3>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-surface-200 dark:divide-surface-800">
                    <thead class="bg-surface-50/80 dark:bg-surface-800/40">
                        <tr class="text-right text-xs font-black uppercase tracking-[0.2em] text-surface-500 dark:text-surface-400">
                            <th class="px-6 py-4">{{ $isArabic ? 'النموذج' : 'Model' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'الأنواع' : 'Types' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'التفعيل' : 'Activation' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'نتيجة الاختبار' : 'Test Status' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'آخر فحص' : 'Last Checked' }}</th>
                            <th class="px-6 py-4">{{ __('dashboard.Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-surface-200 dark:divide-surface-800">
                        @foreach($models as $model)
                            <tr class="align-top transition hover:bg-surface-50/80 dark:hover:bg-surface-800/20">
                                <td class="px-6 py-5">
                                    <div class="max-w-sm">
                                        <p class="text-sm font-black text-surface-900 dark:text-white">{{ $model->display_name }}</p>
                                        <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $model->provider_name }} / {{ $model->model_key }}</p>
                                        @if($model->description)
                                            <p class="mt-2 text-sm leading-6 text-surface-500 dark:text-surface-400">{{ \Illuminate\Support\Str::limit($model->description, 90) }}</p>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <div class="flex max-w-xs flex-wrap gap-2">
                                        @foreach($model->supported_types ?? [] as $supportedType)
                                            <span class="rounded-full border px-3 py-1 text-xs font-bold {{ $defaults->get($supportedType) === $model->id ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'border-surface-200 text-surface-600 dark:border-surface-700 dark:text-surface-300' }}">
                                                {{ $typeLabels[$supportedType] ?? $supportedType }}
                                                @if($defaults->get($supportedType) === $model->id)
                                                    {{ $isArabic ? 'افتراضي' : 'Default' }}
                                                @endif
                                            </span>
                                        @endforeach
                                    </div>
                                </td>
                                <td class="px-6 py-5 text-sm font-bold {{ $model->is_active ? 'text-emerald-600 dark:text-emerald-300' : 'text-surface-500 dark:text-surface-400' }}">
                                    {{ $model->is_active ? ($isArabic ? 'مفعّل' : 'Active') : ($isArabic ? 'غير مفعّل' : 'Inactive') }}
                                </td>
                                <td class="px-6 py-5 text-sm font-bold {{ $model->last_test_status === 'success' ? 'text-emerald-600 dark:text-emerald-300' : ($model->last_test_status === 'failed' ? 'text-red-600 dark:text-red-300' : 'text-surface-500 dark:text-surface-400') }}">
                                    {{ $model->last_test_status === 'success' ? ($isArabic ? 'نجح' : 'Success') : ($model->last_test_status === 'failed' ? ($isArabic ? 'فشل' : 'Failed') : ($isArabic ? 'غير مختبر' : 'Untested')) }}
                                </td>
                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $model->last_tested_at?->diffForHumans() ?? ($isArabic ? 'لم يتم' : 'Never') }}</td>
                                <td class="px-6 py-5">
                                    <div class="flex min-w-[260px] flex-col gap-3">
                                        <form method="POST" action="{{ route('admin.ai-models.test', $model) }}" class="flex gap-2">
                                            @csrf
                                            <select name="type" class="min-w-0 flex-1 rounded-xl border border-surface-200 bg-white px-3 py-2 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                                                @foreach($model->supported_types ?? [] as $supportedType)
                                                    <option value="{{ $supportedType }}">{{ $typeLabels[$supportedType] ?? $supportedType }}</option>
                                                @endforeach
                                            </select>
                                            <button type="submit" class="rounded-xl bg-surface-900 px-4 py-2 text-sm font-bold text-white transition hover:bg-surface-800 dark:bg-brand-600 dark:hover:bg-brand-700">
                                                {{ $isArabic ? 'اختبار' : 'Test' }}
                                            </button>
                                        </form>

                                        <div class="flex gap-2">
                                            <form method="POST" action="{{ route('admin.ai-models.activation', $model) }}" class="flex-1">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit" class="w-full rounded-xl border px-4 py-2 text-sm font-bold transition {{ $model->is_active ? 'border-red-300 text-red-700 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-500/10' : 'border-emerald-300 text-emerald-700 hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-500/10' }}">
                                                    {{ $model->is_active ? ($isArabic ? 'إيقاف' : 'Deactivate') : ($isArabic ? 'تفعيل' : 'Activate') }}
                                                </button>
                                            </form>

                                            <form method="POST" action="{{ route('admin.ai-models.default', $model) }}" class="flex flex-[1.3] gap-2">
                                                @csrf
                                                <select name="type" class="min-w-0 flex-1 rounded-xl border border-surface-200 bg-white px-3 py-2 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                                                    @foreach($model->supported_types ?? [] as $supportedType)
                                                        <option value="{{ $supportedType }}">{{ $typeLabels[$supportedType] ?? $supportedType }}</option>
                                                    @endforeach
                                                </select>
                                                <button type="submit" class="rounded-xl border border-surface-200 px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:text-surface-200 dark:hover:bg-surface-800">
                                                    {{ $isArabic ? 'افتراضي' : 'Default' }}
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="border-t border-surface-200 px-6 py-5 dark:border-surface-800">
                {{ $models->links('pagination::simple-tailwind') }}
            </div>
        @endif
    </section>
</div>
@endsection