@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())

@section('content')
<div class="fixed inset-0 -z-10 h-full w-full bg-slate-900 bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:16px_16px]"></div>

<div class="mx-auto w-full max-w-6xl space-y-6">
    <!-- Header -->
    <header class="flex items-center justify-between border-b pb-4 border-slate-700">
        <h1 class="text-2xl font-bold text-slate-100">کلید هوش مصنوعی</h1>
    </header>

    @if(session('success'))
        <div class="bg-green-500/20 border border-green-500/30 text-green-400 px-4 py-3 rounded-xl">
            {{ session('success') }}
        </div>
    @endif

    <!-- API Key Setup -->
    <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700/50 p-6 shadow-xl mb-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-slate-100">تنظیم کلید API</h2>
            
            @php
                $activeKey = \App\Models\ApiKey::where('created_by', Auth::id())
                    ->where('is_active', true)
                    ->where('type', 'chatgpt')
                    ->orderBy('created_at', 'desc')
                    ->first();
            @endphp
            
            @if($activeKey)
                <!-- Connection Status -->
                <div class="flex items-center gap-3">
                    <div id="connectionStatus" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-700/50 border border-slate-600">
                        <div class="relative">
                            <div id="statusDot" class="w-2.5 h-2.5 rounded-full bg-green-500 animate-pulse"></div>
                            <div class="absolute inset-0 w-2.5 h-2.5 rounded-full bg-green-500 animate-ping opacity-75"></div>
                        </div>
                        <span id="statusText" class="text-sm font-medium text-green-400">اتصال برقرار</span>
                    </div>
                    
                    <form id="toggleForm" method="POST" action="{{ route('admin.api-settings.toggle', $activeKey) }}" class="inline">
                        @csrf
                        <button 
                            type="submit" 
                            id="toggleBtn"
                            class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $activeKey->is_active ? 'bg-red-600 hover:bg-red-700 text-white' : 'bg-green-600 hover:bg-green-700 text-white' }}"
                        >
                            {{ $activeKey->is_active ? 'غیرفعال‌سازی' : 'فعال‌سازی' }}
                        </button>
                    </form>
                </div>
            @endif
        </div>
        
        <form id="apiKeyForm" method="POST" action="{{ $activeKey ? route('admin.api-settings.update', $activeKey) : route('admin.api-settings.store') }}">
            @csrf
            @if($activeKey)
                @method('PUT')
                <input type="hidden" name="key_id" value="{{ $activeKey->id }}">
            @endif
            
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">کلید API گپ جی‌پی‌تی</label>
                    <div class="relative">
                        @if($activeKey)
                        <button 
                            type="button" 
                            id="toggle_api_key_visibility"
                            class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-200 transition-colors focus:outline-none z-10"
                            title="نمایش/مخفی کردن کلید"
                        >
                            <svg id="eye_icon" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                            </svg>
                            <svg id="eye_slash_icon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
                            </svg>
                        </button>
                        @endif
                        <input 
                            type="password" 
                            name="api_key" 
                            id="api_key_input"
                            value="{{ $activeKey ? str_repeat('*', 30) : '' }}" 
                            class="w-full rounded-lg bg-slate-700/50 border-slate-600 text-slate-200 py-2.5 {{ $activeKey ? 'pl-12 pr-4' : 'px-4' }}" 
                            placeholder="کلید API خود را وارد کنید"
                            {{ $activeKey ? '' : 'required' }}
                            data-actual-key="{{ $activeKey ? $activeKey->api_key : '' }}"
                            data-is-masked="{{ $activeKey ? 'true' : 'false' }}"
                        >
                    </div>
                    <p class="text-xs text-slate-400 mt-1">
                        @if($activeKey)
                            برای تغییر کلید، کلید جدید را وارد کنید
                        @else
                            کلید API خود را از پنل توسعه‌دهندگان دریافت کنید
                        @endif
                    </p>
                </div>
                
                <input type="hidden" name="name" value="کلید اصلی">
                <input type="hidden" name="type" value="chatgpt">
                <input type="hidden" name="base_url" value="https://api.gapgpt.app/v1">
                <input type="hidden" name="is_active" value="1">
            </div>
        </form>
        
        <div class="mt-6 pt-6 border-t border-slate-700">
            <label class="block text-sm font-medium text-slate-300 mb-3">مدل پیش‌فرض</label>
            <div class="relative">
                <div id="model-dropdown" class="relative">
                    <button 
                        type="button" 
                        id="model-select-btn"
                        class="w-full flex items-center justify-between px-4 py-2.5 rounded-lg bg-slate-700/50 border border-slate-600 text-slate-200 hover:bg-slate-700/70 transition-colors"
                    >
                        <span id="selected-model-text">{{ \App\Models\Setting::get('default_chat_model', 'انتخاب مدل...') }}</span>
                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div id="model-dropdown-menu" class="hidden absolute z-50 w-full mt-2 bg-slate-800 border border-slate-600 rounded-lg shadow-xl max-h-64 overflow-hidden">
                        <div class="p-2 border-b border-slate-700">
                            <input 
                                type="text" 
                                id="model-search-input"
                                placeholder="جستجو در مدل‌ها..."
                                class="w-full px-3 py-2 rounded-lg bg-slate-700/50 border border-slate-600 text-slate-200 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            >
                        </div>
                        <div id="model-list" class="overflow-y-auto max-h-48">
                            <div class="p-2 text-center text-slate-400 text-sm">
                                در حال بارگذاری مدل‌ها...
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="selected-model" name="default_chat_model" value="{{ \App\Models\Setting::get('default_chat_model', '') }}">
            </div>
            
            <button type="submit" form="apiKeyForm" class="w-full mt-4 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors font-medium">
                {{ $activeKey ? 'به‌روزرسانی کلید' : 'ذخیره کلید API' }}
            </button>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // Toggle API key visibility
    const toggleBtn = document.getElementById('toggle_api_key_visibility');
    const apiKeyInput = document.getElementById('api_key_input');
    const eyeIcon = document.getElementById('eye_icon');
    const eyeSlashIcon = document.getElementById('eye_slash_icon');
    
    if (toggleBtn && apiKeyInput) {
        const actualKey = apiKeyInput.getAttribute('data-actual-key');
        const isMasked = apiKeyInput.getAttribute('data-is-masked') === 'true';
        let isVisible = false;
        
        // Set initial state - always masked
        if (isMasked && actualKey) {
            apiKeyInput.value = '******************************';
            apiKeyInput.type = 'password';
        }
        
        toggleBtn.addEventListener('click', function() {
            if (!actualKey) return;
            
            if (isVisible) {
                // Hide the key
                apiKeyInput.value = '******************************';
                apiKeyInput.type = 'password';
                eyeIcon.classList.remove('hidden');
                eyeSlashIcon.classList.add('hidden');
                isVisible = false;
            } else {
                // Show the key
                apiKeyInput.value = actualKey;
                apiKeyInput.type = 'text';
                eyeIcon.classList.add('hidden');
                eyeSlashIcon.classList.remove('hidden');
                isVisible = true;
            }
        });
        
        // When user starts typing, remove the mask
        apiKeyInput.addEventListener('input', function() {
            if (this.value !== '******************************' && this.value !== actualKey) {
                // User is typing a new key, keep it visible
                this.type = 'text';
                eyeIcon.classList.add('hidden');
                eyeSlashIcon.classList.remove('hidden');
            }
        });
        
        // When user focuses on input and it's masked, show actual key if they want to edit
        apiKeyInput.addEventListener('focus', function() {
            if (this.value === '******************************' && actualKey) {
                // Don't auto-reveal, let user click the eye icon
            }
        });
        
        // Before form submission, clear the field if it's masked
        const apiKeyForm = document.getElementById('apiKeyForm');
        if (apiKeyForm) {
            apiKeyForm.addEventListener('submit', function(e) {
                if (apiKeyInput.value === '******************************' || 
                    apiKeyInput.value === actualKey || 
                    /^[*\s]+$/.test(apiKeyInput.value)) {
                    // User didn't enter a new key, clear the field so it won't be updated
                    apiKeyInput.value = '';
                    apiKeyInput.removeAttribute('required');
                }
            });
        }
    }
    
    // Check API connection status
    checkConnectionStatus();
    
    // Check connection every 30 seconds
    setInterval(checkConnectionStatus, 30000);
    
    // Handle toggle form submission
    const toggleForm = document.getElementById('toggleForm');
    if (toggleForm) {
        toggleForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const submitBtn = document.getElementById('toggleBtn');
            const originalText = submitBtn.textContent;
            
            submitBtn.disabled = true;
            submitBtn.textContent = 'در حال پردازش...';
            
            fetch(this.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': formData.get('_token'),
                    'Accept': 'application/json',
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Reload page to reflect changes
                    window.location.reload();
                }
            })
            .catch(error => {
                console.error('Error:', error);
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
            });
        });
    }

    // Model Dropdown
    const modelSelectBtn = document.getElementById('model-select-btn');
    const modelDropdownMenu = document.getElementById('model-dropdown-menu');
    const modelSearchInput = document.getElementById('model-search-input');
    const modelList = document.getElementById('model-list');
    const selectedModelInput = document.getElementById('selected-model');
    const selectedModelText = document.getElementById('selected-model-text');
    let allModels = [];
    let filteredModels = [];

    // Load models from API
    function loadModels() {
        if (!modelList) return;
        
        modelList.innerHTML = '<div class="p-2 text-center text-slate-400 text-sm">در حال بارگذاری مدل‌ها...</div>';
        
        fetch('{{ route("admin.api-settings.models") }}')
            .then(response => response.json())
            .then(data => {
                if (data.success && data.models) {
                    allModels = data.models;
                    filteredModels = allModels;
                    renderModels();
                } else {
                    modelList.innerHTML = `<div class="p-2 text-center text-red-400 text-sm">${data.error || 'خطا در دریافت مدل‌ها'}</div>`;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                modelList.innerHTML = '<div class="p-2 text-center text-red-400 text-sm">خطا در ارتباط با سرور</div>';
            });
    }

    // Render models list
    function renderModels() {
        if (!modelList) return;
        
        if (filteredModels.length === 0) {
            modelList.innerHTML = '<div class="p-2 text-center text-slate-400 text-sm">مدلی یافت نشد</div>';
            return;
        }

        const currentSelected = selectedModelInput ? selectedModelInput.value : '';
        modelList.innerHTML = filteredModels.map(model => {
            const isSelected = model.id === currentSelected;
            return `
                <button 
                    type="button"
                    class="w-full text-right px-4 py-2 hover:bg-slate-700/50 transition-colors ${isSelected ? 'bg-indigo-600/20 text-indigo-300' : 'text-slate-200'}"
                    data-model-id="${model.id}"
                >
                    <div class="flex items-center justify-between">
                        <span class="text-sm font-medium">${model.id}</span>
                        ${isSelected ? '<svg class="w-4 h-4 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>' : ''}
                    </div>
                </button>
            `;
        }).join('');

        // Add click handlers
        modelList.querySelectorAll('button[data-model-id]').forEach(btn => {
            btn.addEventListener('click', function() {
                const modelId = this.getAttribute('data-model-id');
                selectModel(modelId);
            });
        });
    }

    // Select a model
    function selectModel(modelId) {
        const model = allModels.find(m => m.id === modelId);
        if (model && selectedModelInput && selectedModelText) {
            selectedModelInput.value = modelId;
            selectedModelText.textContent = modelId;
            if (modelDropdownMenu) {
                modelDropdownMenu.classList.add('hidden');
            }
            
            // Save to server
            fetch('{{ route("admin.api-settings.save-default-model") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ default_chat_model: modelId })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Success - model saved
                }
            })
            .catch(error => {
                console.error('Error saving model:', error);
            });
        }
    }

    // Toggle dropdown
    if (modelSelectBtn && modelDropdownMenu) {
        modelSelectBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            modelDropdownMenu.classList.toggle('hidden');
            if (!modelDropdownMenu.classList.contains('hidden') && allModels.length === 0) {
                loadModels();
            }
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', function(e) {
            if (!modelSelectBtn.contains(e.target) && !modelDropdownMenu.contains(e.target)) {
                modelDropdownMenu.classList.add('hidden');
            }
        });

        // Search functionality
        if (modelSearchInput) {
            modelSearchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase().trim();
                if (searchTerm === '') {
                    filteredModels = allModels;
                } else {
                    filteredModels = allModels.filter(model => 
                        model.id.toLowerCase().includes(searchTerm)
                    );
                }
                renderModels();
            });
        }
    }

    // Load models on page load if active key exists
    @if($activeKey)
    if (modelList) {
        loadModels();
    }
    @endif
});

function checkConnectionStatus() {
    const statusDot = document.getElementById('statusDot');
    const statusText = document.getElementById('statusText');
    const connectionStatus = document.getElementById('connectionStatus');
    
    if (!statusDot || !statusText) return;
    
    // Show checking state
    statusDot.className = 'w-2.5 h-2.5 rounded-full bg-yellow-500 animate-pulse';
    statusText.textContent = 'در حال بررسی...';
    statusText.className = 'text-sm font-medium text-yellow-400';
    connectionStatus.className = 'flex items-center gap-2 px-4 py-2 rounded-lg bg-yellow-500/10 border border-yellow-500/30';
    
    // Test connection
    fetch('{{ route("admin.api-settings.check-connection") }}', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.connected) {
            // Connection is working
            statusDot.className = 'w-2.5 h-2.5 rounded-full bg-green-500';
            statusText.textContent = 'اتصال برقرار';
            statusText.className = 'text-sm font-medium text-green-400';
            connectionStatus.className = 'flex items-center gap-2 px-4 py-2 rounded-lg bg-green-500/10 border border-green-500/30';
        } else {
            // Connection failed
            statusDot.className = 'w-2.5 h-2.5 rounded-full bg-red-500';
            statusText.textContent = data.error || 'اتصال قطع';
            statusText.className = 'text-sm font-medium text-red-400';
            connectionStatus.className = 'flex items-center gap-2 px-4 py-2 rounded-lg bg-red-500/10 border border-red-500/30';
        }
    })
    .catch(error => {
        // Connection error
        statusDot.className = 'w-2.5 h-2.5 rounded-full bg-red-500';
        statusText.textContent = 'اتصال قطع';
        statusText.className = 'text-sm font-medium text-red-400';
        connectionStatus.className = 'flex items-center gap-2 px-4 py-2 rounded-lg bg-red-500/10 border border-red-500/30';
    });
}
</script>
@endsection