@extends('Component.layout')

@section('title', 'Chatbot Intents Management')

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-bold text-slate-800">Chatbot AI Intents</h2>
            <p class="text-sm text-slate-500 mt-1">Manage training data and responses for the chatbot.</p>
        </div>
        <button onclick="window.dispatchEvent(new CustomEvent('open-create-modal'))" class="px-4 py-2 bg-emerald-600 text-white text-sm font-semibold rounded-xl hover:bg-emerald-700 transition-colors shadow-sm">
            + New Intent
        </button>
    </div>

    @if(session('success'))
        <div class="bg-emerald-50 border border-emerald-200 text-emerald-700 px-4 py-3 rounded-xl">
            {{ session('success') }}
        </div>
    @endif

    @foreach($errors->all() as $error)
        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl mb-2">
            {{ $error }}
        </div>
    @endforeach

    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
        @foreach($intents as $intent)
            <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow flex flex-col h-full">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="font-bold text-lg text-slate-800 break-all mr-2">#{{ $intent->tag }}</h3>
                    <div class="flex gap-2 flex-shrink-0">
                        <button onclick="window.dispatchEvent(new CustomEvent('open-edit-modal', { detail: { id: {{ $intent->id }}, tag: '{{ $intent->tag }}', patterns: {{ json_encode($intent->patterns) }}, responses: {{ json_encode($intent->responses) }} } }))" class="p-1.5 text-slate-400 hover:text-emerald-600 transition-colors rounded-lg hover:bg-emerald-50">
                            <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.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                        </button>
                        @php $deleteRoute = Auth::user()->role === 'super_admin' ? route('superadmin.cms.chatbot_intents.destroy', $intent) : route('admin.cms.chatbot_intents.destroy', $intent); @endphp
                        <form action="{{ $deleteRoute }}" method="POST" class="inline flex" onsubmit="return confirm('Are you sure you want to delete this intent?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="p-1.5 text-slate-400 hover:text-red-600 transition-colors rounded-lg hover:bg-red-50">
                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                            </button>
                        </form>
                    </div>
                </div>
                
                <div class="mt-4 space-y-3">
                    <div>
                        <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wide mb-1">Patterns</div>
                        <div class="text-xs text-slate-600 bg-slate-50 p-3 rounded-xl max-h-24 overflow-y-auto border border-slate-100">
                            <ul class="list-disc pl-4 space-y-1">
                                @foreach($intent->patterns ?? [] as $lang => $phrases)
                                    @if(!empty($phrases))
                                        <li><strong>{{ strtoupper($lang) }}:</strong> {{ implode(', ', $phrases) }}</li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div>
                        <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wide mb-1">Responses</div>
                        <div class="text-xs text-emerald-800 bg-emerald-50/50 p-3 rounded-xl max-h-24 overflow-y-auto border border-emerald-100/50">
                            <ul class="list-disc pl-4 space-y-1">
                                @foreach($intent->responses ?? [] as $lang => $phrases)
                                    @if(!empty($phrases))
                                        <li><strong>{{ strtoupper($lang) }}:</strong> {{ implode(', ', $phrases) }}</li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

<!-- Alpine.js Modals Data Component -->
<div x-data="intentManager()">
    <!-- Create Modal -->
    <div x-show="isCreateOpen" style="display: none;" class="fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center p-4">
        @php $storeRoute = Auth::user()->role === 'super_admin' ? route('superadmin.cms.chatbot_intents.store') : route('admin.cms.chatbot_intents.store'); @endphp
        <form action="{{ $storeRoute }}" method="POST" @submit="prepareSubmit" class="bg-white rounded-2xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col shadow-2xl" @click.away="isCreateOpen = false">
            @csrf
            <!-- Hidden inputs to hold stringified JSON -->
            <input type="hidden" name="patterns" :value="JSON.stringify(patterns)">
            <input type="hidden" name="responses" :value="JSON.stringify(responses)">
            
            <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
                <h3 class="font-bold text-lg text-slate-800">Add New Intent</h3>
                <button type="button" @click="isCreateOpen = false" class="text-slate-400 hover:text-slate-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            
            <div class="p-6 overflow-y-auto flex-grow flex flex-col gap-6">
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Tag Name</label>
                    <input type="text" name="tag" placeholder="e.g. greeting" class="w-full -3 py-2 border-slate-200 rounded-xl text-sm focus:border-emerald-500 focus:ring-emerald-500 shadow-sm" required>
                </div>
                
                <!-- Language Tabs -->
                <div class="flex border-b border-slate-200">
                    <template x-for="lang in ['en', 'hi', 'gu']" :key="lang">
                        <button type="button" @click="activeLang = lang"
                                :class="activeLang === lang ? 'border-emerald-500 text-emerald-600' : 'border-transparent text-slate-500 hover:text-slate-700'"
                                class="w-1/3 py-2 text-sm font-semibold border-b-2 text-center transition-colors">
                            <span x-text="lang === 'en' ? 'English' : (lang === 'hi' ? 'Hindi' : 'Gujarati')"></span>
                        </button>
                    </template>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Patterns Editor -->
                    <div class="bg-slate-50 rounded-xl p-4 border border-slate-100">
                        <label class="block text-xs font-bold text-slate-700 mb-3 uppercase tracking-wide">User Questions (Patterns)</label>
                        <div class="flex gap-2 mb-3">
                            <input type="text" x-model="newPattern" @keydown.enter.prevent="addPattern" placeholder="Add a phrase..." class="w-full border-slate-200 rounded-lg text-sm shadow-sm py-1.5 focus:border-emerald-500 focus:ring-emerald-500">
                            <button type="button" @click="addPattern" class="bg-slate-800 text-white px-3 py-1.5 rounded-lg text-sm font-semibold hover:bg-slate-700">+</button>
                        </div>
                        <ul class="space-y-2">
                            <template x-for="(phrase, index) in patterns[activeLang]" :key="index">
                                <li class="flex items-center justify-between bg-white px-3 py-2 border border-slate-200 rounded-lg text-sm shadow-sm">
                                    <span x-text="phrase" class="text-slate-700 truncate mr-2"></span>
                                    <button type="button" @click="removePattern(index)" class="text-red-500 hover:text-red-700 flex-shrink-0">
                                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                    </button>
                                </li>
                            </template>
                            <li x-show="!patterns[activeLang] || patterns[activeLang].length === 0" class="text-xs text-slate-400 italic text-center py-2">No phrases added yet.</li>
                        </ul>
                    </div>
                    
                    <!-- Responses Editor -->
                    <div class="bg-emerald-50/50 rounded-xl p-4 border border-emerald-100/50">
                        <label class="block text-xs font-bold text-slate-700 mb-3 uppercase tracking-wide">Bot Answers (Responses)</label>
                        <div class="flex gap-2 mb-3">
                            <input type="text" x-model="newResponse" @keydown.enter.prevent="addResponse" placeholder="Add a response..." class="w-full border-emerald-200 rounded-lg text-sm shadow-sm py-1.5 focus:border-emerald-500 focus:ring-emerald-500">
                            <button type="button" @click="addResponse" class="bg-emerald-600 text-white px-3 py-1.5 rounded-lg text-sm font-semibold hover:bg-emerald-700">+</button>
                        </div>
                        <ul class="space-y-2">
                            <template x-for="(phrase, index) in responses[activeLang]" :key="index">
                                <li class="flex items-center justify-between bg-white px-3 py-2 border border-emerald-200 rounded-lg text-sm shadow-sm">
                                    <span x-text="phrase" class="text-slate-700 truncate mr-2"></span>
                                    <button type="button" @click="removeResponse(index)" class="text-red-500 hover:text-red-700 flex-shrink-0">
                                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                    </button>
                                </li>
                            </template>
                            <li x-show="!responses[activeLang] || responses[activeLang].length === 0" class="text-xs text-slate-400 italic text-center py-2">No responses added yet.</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="p-4 border-t border-slate-100 bg-slate-50/50 flex justify-end gap-3">
                <button type="button" @click="isCreateOpen = false" class="px-4 py-2 text-slate-600 font-medium text-sm hover:bg-slate-100 rounded-xl transition-colors">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-emerald-600 text-white font-medium text-sm hover:bg-emerald-700 rounded-xl transition-colors shadow-sm">Save Intent</button>
            </div>
        </form>
    </div>

    <!-- Edit Modal -->
    <div x-show="isEditOpen" style="display: none;" class="fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center p-4">
        <form :action="editUrl" method="POST" @submit="prepareSubmit" class="bg-white rounded-2xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col shadow-2xl" @click.away="isEditOpen = false">
            @csrf
            @method('PUT')
            <!-- Hidden inputs to hold stringified JSON -->
            <input type="hidden" name="patterns" :value="JSON.stringify(patterns)">
            <input type="hidden" name="responses" :value="JSON.stringify(responses)">
            
            <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
                <h3 class="font-bold text-lg text-slate-800">Edit Intent</h3>
                <button type="button" @click="isEditOpen = false" class="text-slate-400 hover:text-slate-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            
            <div class="p-6 overflow-y-auto flex-grow flex flex-col gap-6">
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Tag Name</label>
                    <input type="text" name="tag" x-model="editTag" class="w-full border-slate-200 rounded-xl text-sm focus:border-emerald-500 focus:ring-emerald-500 shadow-sm" required>
                </div>
                
                <!-- Language Tabs -->
                <div class="flex border-b border-slate-200">
                    <template x-for="lang in ['en', 'hi', 'gu']" :key="lang">
                        <button type="button" @click="activeLang = lang"
                                :class="activeLang === lang ? 'border-emerald-500 text-emerald-600' : 'border-transparent text-slate-500 hover:text-slate-700'"
                                class="w-1/3 py-2 text-sm font-semibold border-b-2 text-center transition-colors">
                            <span x-text="lang === 'en' ? 'English' : (lang === 'hi' ? 'Hindi' : 'Gujarati')"></span>
                        </button>
                    </template>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Patterns Editor -->
                    <div class="bg-slate-50 rounded-xl p-4 border border-slate-100">
                        <label class="block text-xs font-bold text-slate-700 mb-3 uppercase tracking-wide">User Questions (Patterns)</label>
                        <div class="flex gap-2 mb-3">
                            <input type="text" x-model="newPattern" @keydown.enter.prevent="addPattern" placeholder="Add a phrase..." class="w-full border-slate-200 rounded-lg text-sm shadow-sm py-1.5 focus:border-emerald-500 focus:ring-emerald-500">
                            <button type="button" @click="addPattern" class="bg-slate-800 text-white px-3 py-1.5 rounded-lg text-sm font-semibold hover:bg-slate-700">+</button>
                        </div>
                        <ul class="space-y-2">
                            <template x-for="(phrase, index) in (patterns[activeLang] || [])" :key="index">
                                <li class="flex items-center justify-between bg-white px-3 py-2 border border-slate-200 rounded-lg text-sm shadow-sm">
                                    <span x-text="phrase" class="text-slate-700 truncate mr-2"></span>
                                    <button type="button" @click="removePattern(index)" class="text-red-500 hover:text-red-700 flex-shrink-0">
                                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                    </button>
                                </li>
                            </template>
                            <li x-show="!patterns[activeLang] || patterns[activeLang].length === 0" class="text-xs text-slate-400 italic text-center py-2">No phrases added yet.</li>
                        </ul>
                    </div>
                    
                    <!-- Responses Editor -->
                    <div class="bg-emerald-50/50 rounded-xl p-4 border border-emerald-100/50">
                        <label class="block text-xs font-bold text-slate-700 mb-3 uppercase tracking-wide">Bot Answers (Responses)</label>
                        <div class="flex gap-2 mb-3">
                            <input type="text" x-model="newResponse" @keydown.enter.prevent="addResponse" placeholder="Add a response..." class="w-full border-emerald-200 rounded-lg text-sm shadow-sm py-1.5 focus:border-emerald-500 focus:ring-emerald-500">
                            <button type="button" @click="addResponse" class="bg-emerald-600 text-white px-3 py-1.5 rounded-lg text-sm font-semibold hover:bg-emerald-700">+</button>
                        </div>
                        <ul class="space-y-2">
                            <template x-for="(phrase, index) in (responses[activeLang] || [])" :key="index">
                                <li class="flex items-center justify-between bg-white px-3 py-2 border border-emerald-200 rounded-lg text-sm shadow-sm">
                                    <span x-text="phrase" class="text-slate-700 truncate mr-2"></span>
                                    <button type="button" @click="removeResponse(index)" class="text-red-500 hover:text-red-700 flex-shrink-0">
                                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                    </button>
                                </li>
                            </template>
                            <li x-show="!responses[activeLang] || responses[activeLang].length === 0" class="text-xs text-slate-400 italic text-center py-2">No responses added yet.</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="p-4 border-t border-slate-100 bg-slate-50/50 flex justify-end gap-3">
                <button type="button" @click="isEditOpen = false" class="px-4 py-2 text-slate-600 font-medium text-sm hover:bg-slate-100 rounded-xl transition-colors">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-emerald-600 text-white font-medium text-sm hover:bg-emerald-700 rounded-xl transition-colors shadow-sm">Update Intent</button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('intentManager', () => ({
            isCreateOpen: false,
            isEditOpen: false,
            activeLang: 'en',
            editUrl: '',
            editTag: '',
            
            patterns: { en: [], hi: [], gu: [] },
            responses: { en: [], hi: [], gu: [] },
            
            newPattern: '',
            newResponse: '',

            init() {
                // Listen to window events to open modals
                window.addEventListener('open-create-modal', () => {
                    this.resetForm();
                    this.isCreateOpen = true;
                });
                
                window.addEventListener('open-edit-modal', (e) => {
                    this.resetForm();
                    
                    const data = e.detail;
                    this.editTag = data.tag;
                    
                    // Merge existing data with empty language arrays to prevent undefined errors
                    this.patterns = Object.assign({ en: [], hi: [], gu: [] }, data.patterns || {});
                    this.responses = Object.assign({ en: [], hi: [], gu: [] }, data.responses || {});
                    
                    const isAdmin = {{ Auth::user()->role === 'admin' ? 'true' : 'false' }};
                    const baseUrl = isAdmin ? '/admin/cms/chatbot-intents/' : '/superadmin/cms/chatbot-intents/';
                    this.editUrl = baseUrl + data.id;
                    
                    this.isEditOpen = true;
                });
            },

            resetForm() {
                this.activeLang = 'en';
                this.patterns = { en: [], hi: [], gu: [] };
                this.responses = { en: [], hi: [], gu: [] };
                this.newPattern = '';
                this.newResponse = '';
                this.editTag = '';
            },

            addPattern() {
                if (this.newPattern.trim()) {
                    if (!this.patterns[this.activeLang]) this.patterns[this.activeLang] = [];
                    this.patterns[this.activeLang].push(this.newPattern.trim());
                    this.newPattern = '';
                }
            },

            removePattern(index) {
                this.patterns[this.activeLang].splice(index, 1);
            },
            
            addResponse() {
                if (this.newResponse.trim()) {
                    if (!this.responses[this.activeLang]) this.responses[this.activeLang] = [];
                    this.responses[this.activeLang].push(this.newResponse.trim());
                    this.newResponse = '';
                }
            },

            removeResponse(index) {
                this.responses[this.activeLang].splice(index, 1);
            },
            
            prepareSubmit() {
                // Alpine automatically syncs the hidden inputs via :value
                // before the form submits.
            }
        }));
    });
</script>
@endsection