@extends('layouts.app', ['title' => $conversation->title_it . ' — কথোপকথন'])

@section('content')
<div class="space-y-3.5 w-full">

    <!-- Top Hero Header (Exact view_conversation_hub.xml layout) -->
    <div class="glass-card rounded-3xl p-4 shadow-xl border border-white/40 bg-white/95">
        <div class="flex items-center justify-between gap-2 mb-3">
            <a href="{{ route('conversations.index') }}" class="w-9 h-9 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-800 flex items-center justify-center text-sm font-bold shadow-sm transition">
                ←
            </a>
            <span class="text-xs font-black bg-emerald-100 text-emerald-800 border border-emerald-300 px-3 py-1 rounded-full font-outfit uppercase">
                অধ্যায় {{ $conversation->chapter_number ?? 1 }}
            </span>
            <button onclick="toggleFav(this)" class="w-9 h-9 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-400 text-sm flex items-center justify-center shadow-sm transition">
                🤍
            </button>
        </div>

        <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-emerald-400 to-teal-200 flex items-center justify-center text-2xl shadow-md flex-shrink-0">
                {{ $conversation->category_icon ?? '💬' }}
            </div>
            <div class="min-w-0">
                <span class="text-[10px] font-extrabold text-emerald-800 uppercase block tracking-wider">{{ $conversation->category_name }}</span>
                <h2 class="text-lg sm:text-xl font-black text-slate-900 font-outfit truncate">{{ $conversation->title_it }}</h2>
                <p class="text-xs font-bold text-slate-700 truncate">{{ $conversation->title_bn }}</p>
            </div>
        </div>

        @if($conversation->situation_bn)
        <div class="mt-3 p-3 bg-emerald-50 border border-emerald-200 rounded-2xl text-xs text-emerald-950 font-medium leading-relaxed">
            <strong class="font-black text-emerald-900">বাস্তব পরিস্থিতি:</strong> {{ $conversation->situation_bn }}
        </div>
        @endif

        <!-- 4 Tab Switcher (App Exact) -->
        <div class="grid grid-cols-4 gap-1.5 mt-3 pt-3 border-t border-slate-100 text-center">
            <button onclick="switchTab('dialogue')" id="tab-btn-dialogue" class="tab-btn active py-2 px-1 rounded-xl text-xs font-black transition bg-emerald-700 text-white shadow">
                💬 সংলাপ
            </button>
            <button onclick="switchTab('sentences')" id="tab-btn-sentences" class="tab-btn py-2 px-1 rounded-xl text-xs font-bold text-slate-600 hover:bg-slate-100 transition">
                📝 বাক্য
            </button>
            <button onclick="switchTab('vocab')" id="tab-btn-vocab" class="tab-btn py-2 px-1 rounded-xl text-xs font-bold text-slate-600 hover:bg-slate-100 transition">
                📚 শব্দার্থ
            </button>
            <button onclick="switchTab('quiz')" id="tab-btn-quiz" class="tab-btn py-2 px-1 rounded-xl text-xs font-bold text-slate-600 hover:bg-slate-100 transition">
                🎯 কুইজ
            </button>
        </div>
    </div>

    @php
        $dialoguesList = is_array($conversation->dialogues) ? $conversation->dialogues : (json_decode($conversation->dialogues, true) ?? []);
    @endphp

    <!-- TAB 1: 💬 DIALOGUE (Dual-Speaker Chat Simulation item_conversation_chat_bubble.xml) -->
    <div id="tab-dialogue" class="tab-content space-y-3">
        @forelse($dialoguesList as $idx => $d)
        @php
            $isB = ($d['speaker'] ?? ($idx % 2 == 1 ? 'B' : 'A')) === 'B';
        @endphp
        <div class="flex items-start gap-2.5 {{ $isB ? 'flex-row-reverse' : '' }}">
            <!-- Speaker Avatar -->
            <div class="w-9 h-9 rounded-2xl flex-shrink-0 flex items-center justify-center font-black text-xs font-outfit shadow-md {{ $isB ? 'bg-amber-400 text-amber-950 border border-amber-300' : 'bg-emerald-600 text-white border border-emerald-500' }}">
                {{ $isB ? 'B' : 'A' }}
            </div>

            <!-- Chat Bubble -->
            <div class="max-w-[82%] rounded-3xl p-3.5 shadow-md border {{ $isB ? 'bg-amber-50/90 border-amber-200 text-right rounded-tr-xs' : 'bg-white border-slate-200 text-left rounded-tl-xs' }}">
                <div class="flex items-center gap-2 {{ $isB ? 'justify-end' : 'justify-start' }}">
                    <span class="text-[10px] font-black uppercase tracking-wider {{ $isB ? 'text-amber-900' : 'text-emerald-800' }}">
                        {{ $isB ? 'ব্যক্তি ২' : 'ব্যক্তি ১' }}
                    </span>
                    <button onclick="speakItalian('{{ addslashes($d['italian'] ?? '') }}')" class="w-6 h-6 rounded-full bg-white/80 hover:bg-white text-xs flex items-center justify-center shadow-2xs transition" title="শুনুন">
                        🔊
                    </button>
                </div>
                <h4 class="text-sm font-bold text-slate-900 font-outfit mt-1 leading-snug">
                    {{ $d['italian'] ?? '' }}
                </h4>
                <p class="text-xs font-semibold text-slate-600 mt-1 leading-relaxed">
                    {{ $d['bangla'] ?? '' }}
                </p>
            </div>
        </div>
        @empty
        <div class="glass-card rounded-2xl p-6 text-center text-slate-600">
            <p class="text-xs font-bold">কোনো সংলাপ পাওয়া যায়নি।</p>
        </div>
        @endforelse
    </div>

    <!-- TAB 2: 📝 SENTENCES LIST (view_conversation_sentences.xml) -->
    <div id="tab-sentences" class="tab-content hidden space-y-2">
        @foreach($dialoguesList as $idx => $d)
        <div class="bg-white rounded-2xl p-3 shadow-md border border-slate-200/80 flex items-center justify-between gap-2">
            <div class="min-w-0">
                <span class="text-xs font-black text-slate-900 font-outfit block">#{{ $idx + 1 }} {{ $d['italian'] ?? '' }}</span>
                <span class="text-[11px] text-slate-600 mt-0.5 block">{{ $d['bangla'] ?? '' }}</span>
            </div>
            <button onclick="speakItalian('{{ addslashes($d['italian'] ?? '') }}')" class="w-8 h-8 rounded-xl bg-emerald-100 hover:bg-emerald-200 text-emerald-900 flex items-center justify-center flex-shrink-0 transition">
                🔊
            </button>
        </div>
        @endforeach
    </div>

    <!-- TAB 3: 📚 VOCABULARY -->
    <div id="tab-vocab" class="tab-content hidden space-y-2">
        <div class="glass-card rounded-2xl p-4 text-center">
            <h4 class="text-xs font-bold text-slate-800">এই অধ্যায়ের গুরুত্বপূর্ণ শব্দসমূহ</h4>
            <div class="grid grid-cols-2 gap-2 mt-3 text-left">
                @foreach($dialoguesList as $d)
                @php
                    $words = explode(' ', $d['italian'] ?? '');
                    $firstWord = $words[0] ?? '';
                @endphp
                @if(!empty($firstWord) && strlen($firstWord) > 2)
                <div onclick="speakItalian('{{ addslashes($firstWord) }}')" class="p-2 bg-white rounded-xl border border-slate-200 shadow-2xs cursor-pointer hover:bg-emerald-50">
                    <span class="text-xs font-black text-[#1A237E] font-outfit block">{{ $firstWord }}</span>
                    <span class="text-[10px] text-slate-500">উচ্চারণ ও প্রয়োগ 🔊</span>
                </div>
                @endif
                @endforeach
            </div>
        </div>
    </div>

    <!-- TAB 4: 🎯 TOPIC QUIZ (view_conversation_quiz.xml) -->
    <div id="tab-quiz" class="tab-content hidden space-y-3">
        @if(!empty($dialoguesList[0]))
        <div class="glass-card rounded-3xl p-4 shadow-lg border border-white/40 bg-white text-center">
            <span class="text-[10px] bg-amber-100 text-amber-900 font-bold px-2 py-0.5 rounded-full uppercase">কুইজ টেস্ট</span>
            <h4 class="text-sm font-black text-slate-900 mt-2">"{{ $dialoguesList[0]['italian'] ?? '' }}"</h4>
            <p class="text-xs text-slate-600 mt-0.5">এই ইতালিয়ান বাক্যের সঠিক অর্থ কোনটি?</p>

            <div class="grid grid-cols-1 gap-2 mt-3 text-left">
                <button onclick="this.classList.add('bg-emerald-600','text-white'); alert('🎉 চমৎকার! সঠিক উত্তর!');" class="p-3 rounded-2xl bg-slate-50 hover:bg-emerald-50 border border-slate-200 text-xs font-bold">
                    A) {{ $dialoguesList[0]['bangla'] ?? '' }}
                </button>
                <button onclick="this.classList.add('bg-rose-500','text-white'); alert('❌ ভুল উত্তর, আবার চেষ্টা করুন!');" class="p-3 rounded-2xl bg-slate-50 hover:bg-rose-50 border border-slate-200 text-xs font-bold">
                    B) আমি ভালো নেই
                </button>
            </div>
        </div>
        @endif
    </div>

</div>

<script>
    function switchTab(tabId) {
        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
        document.querySelectorAll('.tab-btn').forEach(el => {
            el.classList.remove('bg-emerald-700', 'text-white', 'shadow');
            el.classList.add('text-slate-600');
        });
        
        document.getElementById('tab-' + tabId).classList.remove('hidden');
        const activeBtn = document.getElementById('tab-btn-' + tabId);
        activeBtn.classList.add('bg-emerald-700', 'text-white', 'shadow');
        activeBtn.classList.remove('text-slate-600');
    }

    function toggleFav(btn) {
        btn.innerText = (btn.innerText === '🤍') ? '❤️' : '🤍';
    }
</script>
@endsection