@extends('layouts.app')

@section('title', 'HalaVoice AI - إعداد المتجر')

@section('content')
<div class="max-w-3xl mx-auto">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
        <div class="text-center mb-8">
            <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
            </div>
            <h1 class="text-2xl font-bold text-gray-900">مرحباً بك في HalaVoice AI</h1>
            <p class="mt-2 text-gray-600">قم بإعداد المساعد الصوتي والذكاء الاصطناعي لمتجرك على سلة</p>
        </div>

        <div class="mb-8">
            <div class="flex items-center justify-between mb-2">
                @php $step = $step ?? 1; @endphp
                @foreach([1 => 'ربط المتجر', 2 => 'إعدادات الذكاء', 3 => 'قواعد الأتمتة', 4 => 'جاهز'] as $num => $label)
                    <div class="flex flex-col items-center">
                        <div class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold {{ $step >= $num ? 'bg-primary-500 text-white' : 'bg-gray-200 text-gray-500' }}">
                            {{ $num }}
                        </div>
                        <span class="text-xs mt-1 {{ $step >= $num ? 'text-primary-600 font-medium' : 'text-gray-400' }}">{{ $label }}</span>
                    </div>
                    @if($num < 4)
                        <div class="flex-1 h-0.5 mx-2 {{ $step > $num ? 'bg-primary-500' : 'bg-gray-200' }}"></div>
                    @endif
                @endforeach
            </div>
        </div>

        <div x-data="{ step: {{ $step }} }">
            {{-- Step 1: Connect Store --}}
            <div x-show="step === 1">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">ربط متجر سلة</h2>
                <p class="text-gray-600 mb-6">لبدء استخدام HalaVoice AI، قم بربط متجرك على سلة. سيتم توجيهك إلى صفحة تسجيل الدخول إلى سلة.</p>

                @if(!isset($store) || !$store)
                    <a href="{{ route('oauth.redirect') }}"
                       class="inline-flex items-center px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition font-medium">
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14"/>
                        </svg>
                        ربط المتجر بسلة
                    </a>
                @else
                    <div class="p-4 bg-green-50 border border-green-200 rounded-lg">
                        <p class="text-green-700 font-medium">✅ تم ربط المتجر {{ $store->store_name }} بنجاح</p>
                    </div>
                    <button @click="step = 2" class="mt-4 px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700">التالي</button>
                @endif
            </div>

            {{-- Step 2: AI Settings --}}
            <div x-show="step === 2" x-cloak>
                <h2 class="text-lg font-semibold text-gray-900 mb-4">إعدادات الذكاء الاصطناعي</h2>
                <form method="POST" action="{{ route('dashboard.settings.update') }}">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">اسم المساعد الصوتي</label>
                            <input type="text" name="assistant_name" value="سارة" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-primary-500 focus:border-primary-500">
                            <p class="text-xs text-gray-500 mt-1">الاسم الذي سيستخدمه المساعد الصوتي عند التحدث مع العملاء</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">لغة الذكاء الاصطناعي</label>
                            <select name="ai_language" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-primary-500 focus:border-primary-500">
                                <option value="ar-SA">العربية (السعودية)</option>
                                <option value="ar-AE">العربية (الإمارات)</option>
                                <option value="ar-EG">العربية (مصر)</option>
                                <option value="en">English</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">رقم الهاتف للتواصل</label>
                            <input type="text" name="business_phone" placeholder="+966500000000" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-primary-500 focus:border-primary-500">
                        </div>
                    </div>
                    <div class="mt-6 flex justify-between">
                        <button type="button" @click="step = 1" class="px-4 py-2 text-gray-600 hover:text-gray-900">السابق</button>
                        <button type="submit" class="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700">حفظ ومتابعة</button>
                    </div>
                </form>
            </div>

            {{-- Step 3: Automation Rules --}}
            <div x-show="step === 3" x-cloak>
                <h2 class="text-lg font-semibold text-gray-900 mb-4">قواعد الأتمتة</h2>
                <p class="text-gray-600 mb-6">اختر الميزات التي تريد تفعيلها لمتجرك:</p>

                <form method="POST" action="{{ route('dashboard.settings.update') }}">
                    @csrf
                    <div class="space-y-4">
                        <label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <input type="checkbox" name="cod_confirmation_enabled" value="1" checked class="w-5 h-5 text-primary-600 rounded">
                            <span class="mr-3">
                                <span class="font-medium text-gray-900">تأكيد الطلبات النقدية</span>
                                <span class="text-sm text-gray-500 block">اتصال تلقائي بالعملاء لتأكيد طلبات الدفع عند الاستلام</span>
                            </span>
                        </label>
                        <label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <input type="checkbox" name="abandoned_cart_enabled" value="1" checked class="w-5 h-5 text-primary-600 rounded">
                            <span class="mr-3">
                                <span class="font-medium text-gray-900">استرداد العربات المتروكة</span>
                                <span class="text-sm text-gray-500 block">إرسال تذكيرات واتساب ومكالمات للعملاء الذين تركوا العربة</span>
                            </span>
                        </label>
                        <label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <input type="checkbox" name="shipping_notifications_enabled" value="1" checked class="w-5 h-5 text-primary-600 rounded">
                            <span class="mr-3">
                                <span class="font-medium text-gray-900">إشعارات الشحن</span>
                                <span class="text-sm text-gray-500 block">إرسال تحديثات الشحن عبر واتساب</span>
                            </span>
                        </label>
                        <label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <input type="checkbox" name="review_request_enabled" value="1" checked class="w-5 h-5 text-primary-600 rounded">
                            <span class="mr-3">
                                <span class="font-medium text-gray-900">طلب تقييم</span>
                                <span class="text-sm text-gray-500 block">طلب تقييم المنتجات بعد التوصيل</span>
                            </span>
                        </label>
                        <label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <input type="checkbox" name="whatsapp_enabled" value="1" checked class="w-5 h-5 text-primary-600 rounded">
                            <span class="mr-3">
                                <span class="font-medium text-gray-900">واتساب</span>
                                <span class="text-sm text-gray-500 block">تفعيل التواصل عبر واتساب</span>
                            </span>
                        </label>
                        <label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <input type="checkbox" name="voice_calls_enabled" value="1" checked class="w-5 h-5 text-primary-600 rounded">
                            <span class="mr-3">
                                <span class="font-medium text-gray-900">المكالمات الصوتية</span>
                                <span class="text-sm text-gray-500 block">تفعيل المكالمات الصوتية الذكية</span>
                            </span>
                        </label>
                    </div>
                    <div class="mt-6 flex justify-between">
                        <button type="button" @click="step = 2" class="px-4 py-2 text-gray-600 hover:text-gray-900">السابق</button>
                        <button type="submit" class="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700">حفظ ومتابعة</button>
                    </div>
                </form>
            </div>

            {{-- Step 4: Ready --}}
            <div x-show="step === 4" x-cloak>
                <div class="text-center py-8">
                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                    <h2 class="text-xl font-bold text-gray-900 mb-2">تم الإعداد بنجاح! 🎉</h2>
                    <p class="text-gray-600 mb-6">متجرك الآن جاهز لاستخدام HalaVoice AI. يمكنك البدء في إدارة المكالمات والرسائل الذكية.</p>
                    <a href="{{ route('dashboard.overview') }}" class="inline-flex items-center px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 font-medium">
                        الذهاب إلى لوحة التحكم
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Demo Voice Widget Section --}}
    <div class="mt-8 bg-gradient-to-br from-primary-50 to-accent-50 rounded-2xl border border-primary-100 p-6">
        <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
                <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
                </svg>
            </div>
            <div>
                <h3 class="text-lg font-bold text-gray-900">جرّب المساعد الصوتي الآن</h3>
                <p class="mt-1 text-gray-600">اضغط على زر الميكروفون في الزاوية اليمنى السفلى لتجربة المساعد الصوتي الذكي HalaVoice مباشرة. يمكنك التحدث مع المساعد واختبار قدراته قبل تفعيل الخدمة.</p>
                <div class="mt-3 flex items-center gap-4 text-sm text-gray-500">
                    <span class="flex items-center gap-1">
                        <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        يدعم اللغة العربية
                    </span>
                    <span class="flex items-center gap-1">
                        <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        ردود ذكية فورية
                    </span>
                    <span class="flex items-center gap-1">
                        <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        متوفر 24/7
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>[x-cloak] { display: none !important; }</style>
@endpush