@extends('layouts.app')

@section('title', 'النصوص الصوتية')

@section('content')
<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">النصوص الصوتية</h1>
        <p class="text-gray-500">معاينة النصوص التي يستخدمها المساعد الصوتي</p>
    </div>

    @php
        $scripts = $scripts ?? [];
        $scriptNames = [
            'cod_confirmation' => 'تأكيد الطلب النقدي',
            'abandoned_cart_first' => 'استرداد العربة - المكالمة الأولى',
            'abandoned_cart_followup' => 'استرداد العربة - متابعة',
            'shipping_notification' => 'إشعار الشحن',
            'delivery_confirmation' => 'تأكيد التوصيل',
            'review_request' => 'طلب تقييم',
        ];
        $scriptDescriptions = [
            'cod_confirmation' => 'يستخدم عند الاتصال بالعميل لتأكيد طلب الدفع عند الاستلام',
            'abandoned_cart_first' => 'أول اتصال مع عميل ترك العربة بدون إتمام الطلب',
            'abandoned_cart_followup' => 'مكالمة متابعة للعميل بعد التذكير الأول',
            'shipping_notification' => 'إبلاغ العميل بأن الطلب قد تم شحنه',
            'delivery_confirmation' => 'تأكيد استلام العميل للطلب بنجاح',
            'review_request' => 'طلب تقييم المنتج بعد التوصيل',
        ];
    @endphp

    @foreach($scripts as $type => $dialects)
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">{{ $scriptNames[$type] ?? $type }}</h2>
                    <p class="text-sm text-gray-500">{{ $scriptDescriptions[$type] ?? '' }}</p>
                </div>
            </div>
            <div class="bg-gray-50 rounded-lg p-4 relative">
                <pre class="text-sm text-gray-700 whitespace-pre-wrap font-sans leading-relaxed">{{ $dialects['ar-SA'] ?? 'نص غير متوفر' }}</pre>
                <button onclick="speakScript(this, '{{ $type }}', 'ar-SA')"
                        class="absolute top-2 left-2 p-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition text-xs flex items-center gap-1">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/>
                    </svg>
                    استمع
                </button>
            </div>
            @if(isset($dialects['ar-AE']) || isset($dialects['ar-EG']))
                <details class="mt-3">
                    <summary class="text-sm text-primary-600 cursor-pointer">عرض لهجات أخرى</summary>
                    <div class="mt-2 space-y-2">
                        @if(isset($dialects['ar-AE']))
                            <div class="bg-gray-50 rounded-lg p-3 relative">
                                <p class="text-xs font-medium text-gray-500 mb-1">اللهجة الإماراتية</p>
                                <pre class="text-sm text-gray-700 whitespace-pre-wrap font-sans">{{ $dialects['ar-AE'] }}</pre>
                                <button onclick="speakScript(this, '{{ $type }}', 'ar-AE')"
                                        class="absolute top-2 left-2 p-1.5 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition text-xs">
                                    ▶
                                </button>
                            </div>
                        @endif
                        @if(isset($dialects['ar-EG']))
                            <div class="bg-gray-50 rounded-lg p-3 relative">
                                <p class="text-xs font-medium text-gray-500 mb-1">اللهجة المصرية</p>
                                <pre class="text-sm text-gray-700 whitespace-pre-wrap font-sans">{{ $dialects['ar-EG'] }}</pre>
                                <button onclick="speakScript(this, '{{ $type }}', 'ar-EG')"
                                        class="absolute top-2 left-2 p-1.5 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition text-xs">
                                    ▶
                                </button>
                            </div>
                        @endif
                    </div>
                </details>
            @endif
        </div>
    @endforeach
</div>
@endsection

@push('scripts')
<script>
function speakScript(btn, type, dialect) {
    const pre = btn.parentElement.querySelector('pre');
    const text = pre ? pre.textContent.trim() : '';
    if (!text) return;

    if (window.speechSynthesis.speaking) {
        window.speechSynthesis.cancel();
    }

    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = dialect === 'ar-AE' ? 'ar-AE' : (dialect === 'ar-EG' ? 'ar-EG' : 'ar-SA');
    utterance.rate = 0.9;
    utterance.pitch = 1;
    utterance.volume = 1;

    const originalHtml = btn.innerHTML;
    btn.innerHTML = '⏹ إيقاف';
    btn.classList.add('bg-red-500', 'hover:bg-red-600');
    btn.classList.remove('bg-primary-500', 'hover:bg-primary-600');

    utterance.onend = function() {
        btn.innerHTML = originalHtml;
        btn.classList.remove('bg-red-500', 'hover:bg-red-600');
        btn.classList.add('bg-primary-500', 'hover:bg-primary-600');
    };

    window.speechSynthesis.speak(utterance);
}
</script>
@endpush