@extends('layouts.admin')

@section('title', 'الإعدادات')
@section('heading', 'إعدادات المنصة')
@section('subheading', 'الشعار، لقطات الشاشة، روابط المتاجر، والذكاء الاصطناعي')

@section('content')
    <div class="mx-auto max-w-3xl space-y-8">
        @if ($errors->any())
            <div class="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
                <ul class="list-inside list-disc space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="post" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data" class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
            @csrf
            @method('PUT')

            <div class="space-y-5">
                <div class="rounded-xl border border-violet-200 bg-gradient-to-br from-violet-50 to-teal-50/40 p-5">
                    <h3 class="mb-1 text-sm font-bold text-violet-900">هوية التطبيق — الشعار والأيقونة</h3>
                    <p class="mb-5 text-xs text-zinc-600">
                        تُستخدم في الموقع العام، صفحة الخصوصية، والفافيكون. PNG/WebP/JPG — الشعار حتى 2MB، الأيقونة حتى 1MB (مربعة 512×512 مثالي).
                        بعد الرفع على الاستضافة اضغط «تنظيف الكاش ومزامنة التخزين» أدناه لظهور الصور للجميع.
                    </p>
                    <div class="grid gap-6 sm:grid-cols-2">
                        <div class="rounded-xl border border-white/80 bg-white/90 p-4 shadow-sm">
                            <p class="mb-3 text-xs font-bold text-zinc-700">شعار التطبيق (Logo)</p>
                            <div class="mb-4 flex min-h-[88px] items-center justify-center rounded-lg border border-dashed border-zinc-200 bg-zinc-50 p-3">
                                <img src="{{ $logoUrl }}" alt="الشعار الحالي" class="max-h-20 w-auto max-w-full object-contain">
                            </div>
                            <input type="file" name="app_logo" accept="image/png,image/jpeg,image/webp,image/svg+xml"
                                   class="block w-full text-xs text-zinc-600 file:me-3 file:rounded-lg file:border-0 file:bg-violet-100 file:px-3 file:py-2 file:text-xs file:font-semibold file:text-violet-800 hover:file:bg-violet-200">
                            @if ($settings->app_logo_path)
                                <label class="mt-3 flex items-center gap-2 text-xs text-zinc-600">
                                    <input type="checkbox" name="remove_app_logo" value="1" class="size-4 rounded border-zinc-300 text-red-600">
                                    حذف الشعار المرفوع
                                </label>
                            @endif
                        </div>
                        <div class="rounded-xl border border-white/80 bg-white/90 p-4 shadow-sm">
                            <p class="mb-3 text-xs font-bold text-zinc-700">أيقونة التطبيق (Icon)</p>
                            <div class="mb-4 flex justify-center">
                                <img src="{{ $iconUrl }}" alt="الأيقونة الحالية" class="h-20 w-20 rounded-2xl object-cover shadow-md ring-2 ring-violet-100">
                            </div>
                            <input type="file" name="app_icon" accept="image/png,image/jpeg,image/webp"
                                   class="block w-full text-xs text-zinc-600 file:me-3 file:rounded-lg file:border-0 file:bg-teal-100 file:px-3 file:py-2 file:text-xs file:font-semibold file:text-teal-800 hover:file:bg-teal-200">
                            @if ($settings->app_icon_path)
                                <label class="mt-3 flex items-center gap-2 text-xs text-zinc-600">
                                    <input type="checkbox" name="remove_app_icon" value="1" class="size-4 rounded border-zinc-300 text-red-600">
                                    حذف الأيقونة المرفوعة
                                </label>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="rounded-xl border border-teal-200 bg-teal-50/40 p-5">
                    <h3 class="mb-1 text-sm font-bold text-teal-900">روابط المتاجر (Google Play & App Store)</h3>
                    <p class="mb-4 text-xs text-zinc-600">تظهر شارات التحميل في الصفحة الرئيسية. اترك الحقل فارغاً حتى يتوفر الرابط الرسمي.</p>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label for="google_play_url" class="mb-1 flex items-center gap-2 text-sm font-medium text-zinc-700">
                                <img src="{{ asset('images/badges/google-play.svg') }}" alt="" class="h-6 w-auto rounded"> Google Play
                            </label>
                            <input id="google_play_url" name="google_play_url" type="url" dir="ltr" value="{{ old('google_play_url', $settings->google_play_url) }}"
                                   placeholder="https://play.google.com/store/apps/details?id=..."
                                   class="w-full rounded-xl border border-zinc-300 px-4 py-2.5 text-sm">
                        </div>
                        <div>
                            <label for="apple_app_store_url" class="mb-1 flex items-center gap-2 text-sm font-medium text-zinc-700">
                                <img src="{{ asset('images/badges/app-store.svg') }}" alt="" class="h-6 w-auto rounded"> App Store
                            </label>
                            <input id="apple_app_store_url" name="apple_app_store_url" type="url" dir="ltr" value="{{ old('apple_app_store_url', $settings->apple_app_store_url) }}"
                                   placeholder="https://apps.apple.com/app/id..."
                                   class="w-full rounded-xl border border-zinc-300 px-4 py-2.5 text-sm">
                        </div>
                    </div>
                </div>

                <div>
                    <label for="platform_name" class="mb-1 block text-sm font-medium text-zinc-700">اسم المنصة</label>
                    <input id="platform_name" name="platform_name" type="text" value="{{ old('platform_name', $settings->platform_name) }}" required maxlength="255"
                           class="w-full rounded-xl border border-zinc-300 px-4 py-2.5 text-sm">
                </div>

                <div class="flex items-center gap-3 rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3">
                    <input type="hidden" name="ai_enabled" value="0">
                    <input id="ai_enabled" name="ai_enabled" type="checkbox" value="1" class="size-4 rounded border-zinc-300 text-teal-600 focus:ring-teal-500" @checked((string) old('ai_enabled', $settings->ai_enabled ? '1' : '0') === '1')>
                    <label for="ai_enabled" class="text-sm font-medium text-zinc-800">تفعيل خدمة الذكاء الاصطناعي (API)</label>
                </div>

                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="registration_bonus_points" class="mb-1 block text-sm font-medium text-zinc-700">نقاط التسجيل للمستخدم الجديد</label>
                        <input id="registration_bonus_points" name="registration_bonus_points" type="number" min="0" value="{{ old('registration_bonus_points', $settings->registration_bonus_points) }}" required
                               class="w-full rounded-xl border border-zinc-300 px-4 py-2.5 text-sm">
                    </div>
                    <div>
                        <label for="referral_bonus_points" class="mb-1 block text-sm font-medium text-zinc-700">نقاط الإحالة (للتوسعة لاحقاً)</label>
                        <input id="referral_bonus_points" name="referral_bonus_points" type="number" min="0" value="{{ old('referral_bonus_points', $settings->referral_bonus_points) }}" required
                               class="w-full rounded-xl border border-zinc-300 px-4 py-2.5 text-sm">
                    </div>
                </div>

                <div class="rounded-xl border border-violet-200 bg-violet-50/50 p-4">
                    <h3 class="mb-3 text-sm font-bold text-violet-900">توليد الصور (AI Studio)</h3>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label for="image_model" class="mb-1 block text-sm font-medium text-zinc-700">نموذج الصور</label>
                            <select id="image_model" name="image_model" class="w-full rounded-xl border border-zinc-300 px-4 py-2.5 text-sm">
                                <option value="gpt-image-1" @selected(old('image_model', $settings->image_model ?? 'gpt-image-1') === 'gpt-image-1')>gpt-image-1 (احترافي)</option>
                                <option value="gpt-image-1-mini" @selected(old('image_model', $settings->image_model ?? '') === 'gpt-image-1-mini')>gpt-image-1-mini (اقتصادي)</option>
                            </select>
                        </div>
                        <div>
                            <label for="image_default_quality" class="mb-1 block text-sm font-medium text-zinc-700">جودة افتراضية</label>
                            <select id="image_default_quality" name="image_default_quality" class="w-full rounded-xl border border-zinc-300 px-4 py-2.5 text-sm">
                                @foreach (['low' => 'منخفضة', 'medium' => 'متوسطة', 'high' => 'عالية'] as $q => $label)
                                    <option value="{{ $q }}" @selected(old('image_default_quality', $settings->image_default_quality ?? 'high') === $q)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="image_cost_per_generation" class="mb-1 block text-sm font-medium text-zinc-700">تكلفة التوليد (نقاط/وحدة)</label>
                            <input id="image_cost_per_generation" name="image_cost_per_generation" type="number" min="0"
                                   value="{{ old('image_cost_per_generation', $settings->image_cost_per_generation ?? 0) }}"
                                   class="w-full rounded-xl border border-zinc-300 px-4 py-2.5 text-sm">
                        </div>
                        <div class="flex items-center gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 sm:col-span-2">
                            <input type="hidden" name="image_prompt_enhancer_enabled" value="0">
                            <input id="image_prompt_enhancer_enabled" name="image_prompt_enhancer_enabled" type="checkbox" value="1"
                                   class="size-4 rounded border-zinc-300 text-violet-600 focus:ring-violet-500"
                                   @checked((string) old('image_prompt_enhancer_enabled', ($settings->image_prompt_enhancer_enabled ?? true) ? '1' : '0') === '1')>
                            <label for="image_prompt_enhancer_enabled" class="text-sm font-medium text-zinc-800">تفعيل تحسين الوصف تلقائياً (Prompt Enhancer)</label>
                        </div>
                    </div>
                </div>

                <div>
                    <label for="general_notes" class="mb-1 block text-sm font-medium text-zinc-700">ملاحظات عامة (داخلية)</label>
                    <textarea id="general_notes" name="general_notes" rows="4" maxlength="5000"
                              class="w-full rounded-xl border border-zinc-300 px-4 py-2.5 text-sm">{{ old('general_notes', $settings->general_notes) }}</textarea>
                </div>
            </div>

            <div class="mt-8 flex flex-wrap items-center gap-3">
                <button type="submit" class="rounded-xl bg-madar-950 px-6 py-2.5 text-sm font-bold text-white hover:bg-madar-900">حفظ الإعدادات</button>
            </div>
        </form>

        @include('admin.settings.partials.screenshots', [
            'screenshots' => $screenshots,
            'screenshotsMax' => $screenshotsMax,
        ])

        <div class="rounded-2xl border border-amber-200 bg-amber-50/60 p-6 shadow-sm">
            <h3 class="mb-2 font-bold text-amber-950">التحضير للنشر (متجر التطبيقات / الاستضافة)</h3>
            <p class="mb-4 text-sm text-amber-900/80">
                ينظّف كاش Laravel، يربط <code class="rounded bg-white/80 px-1">storage/app/public</code> بـ
                <code class="rounded bg-white/80 px-1">public/storage</code>، وينسخ الصور والملفات العامة
                حتى تظهر روابط AI والمدفوعات بعد الرفع.
            </p>
            <form method="post" action="{{ route('admin.settings.prepare-deploy') }}"
                  onsubmit="return confirm('تنفيذ تنظيف الكاش ومزامنة التخزين العام؟');">
                @csrf
                <button type="submit"
                        class="rounded-xl bg-amber-600 px-6 py-2.5 text-sm font-bold text-white hover:bg-amber-700">
                    تنظيف الكاش ومزامنة التخزين
                </button>
            </form>
            @if (session('deploy_prep'))
                @php $prep = session('deploy_prep'); @endphp
                <ul class="mt-4 space-y-1 text-xs text-amber-950/90">
                    <li>أوامر الكاش: {{ implode('، ', $prep['cleared'] ?? []) }}</li>
                    <li>{{ $prep['storage_link'] ?? '' }}</li>
                    <li>ملفات منسوخة: {{ $prep['files_copied'] ?? 0 }}</li>
                </ul>
            @endif
        </div>

        <div class="rounded-2xl border border-zinc-200 bg-white p-6 text-sm text-zinc-600 shadow-sm">
            <h3 class="mb-2 font-bold text-zinc-900">بيئة التشغيل</h3>
            <ul class="space-y-1">
                <li><span class="text-zinc-500">APP_URL:</span> <a href="{{ $appUrl }}" class="text-teal-700 hover:underline">{{ $appUrl }}</a></li>
                <li><span class="text-zinc-500">APP_ENV:</span> {{ $appEnv }}</li>
                <li><span class="text-zinc-500">PHP:</span> {{ $phpVersion }}</li>
            </ul>
        </div>
    </div>
@endsection