@extends('admin.layout')
@section('title', 'Prompt Ayarları')
@section('page-title', 'Prompt Ayarları')

@section('content')
<div class="container-fluid p-0">
    <div class="row mb-4 align-items-center">
        <div class="col">
            <h2 class="h4 mb-1">AI Prompt Yönetimi</h2>
            <p class="text-muted small mb-0">Rapor üretim süreçlerini optimize etmek için prompt şablonlarını düzenleyin.</p>
        </div>
    </div>

    <!-- Report Type Selection -->
    <div class="report-type-nav">
        <ul class="nav nav-pills" id="reportTypeTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="natal-report-tab" data-bs-toggle="pill" data-bs-target="#natal-pane" type="button" role="tab">
                    <i class="bi bi-person-badge me-2"></i>Natal Raporu
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="annual-report-tab" data-bs-toggle="pill" data-bs-target="#annual-pane" type="button" role="tab">
                    <i class="bi bi-calendar-check me-2"></i>Yıllık Öngörü Raporu
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="relationship-report-tab" data-bs-toggle="pill" data-bs-target="#relationship-pane" type="button" role="tab">
                    <i class="bi bi-people me-2"></i>İlişki Raporu
                </button>
            </li>
        </ul>
    </div>

    <div class="tab-content" id="reportTypeTabsContent">
        <!-- Natal Report Pane -->
        <div class="tab-pane fade show active" id="natal-pane" role="tabpanel">
            @include('admin.prompt-settings.partials.editor', [
                'type' => 'natal',
                'title' => 'Natal Rapor Prompt Şablonu',
                'template' => $natalPromptTemplate,
                'placeholders' => $natalPromptPlaceholders,
                'resetKey' => 'reset_natal_report_prompt',
                'templateKey' => 'natal_report_prompt_template'
            ])
        </div>

        <!-- Annual Report Pane -->
        <div class="tab-pane fade" id="annual-pane" role="tabpanel">
            @include('admin.prompt-settings.partials.editor', [
                'type' => 'annual',
                'title' => 'Yıllık Öngörü Raporu Prompt Şablonu',
                'template' => $annualPromptTemplate,
                'placeholders' => $annualPromptPlaceholders,
                'resetKey' => 'reset_annual_report_prompt',
                'templateKey' => 'annual_report_prompt_template'
            ])
        </div>

        <!-- Relationship Report Pane -->
        <div class="tab-pane fade" id="relationship-pane" role="tabpanel">
            @include('admin.prompt-settings.partials.editor', [
                'type' => 'relationship',
                'title' => 'İlişki Raporu Prompt Şablonu',
                'template' => $relationshipPromptTemplate,
                'placeholders' => $relationshipPromptPlaceholders,
                'resetKey' => 'reset_relationship_report_prompt',
                'templateKey' => 'relationship_report_prompt_template'
            ])
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Ortak scriptleri buraya alacağız, her iki form için de çalışacak.
    function initPromptEditor(type) {
        const textarea = document.getElementById(`${type}_report_prompt_template`);
        const charCounter = document.getElementById(`${type}CharCounter`);
        const livePreview = document.getElementById(`${type}LivePreview`);
        const previewTab = document.getElementById(`${type}-preview-tab`);
        const form = document.getElementById(`${type}PromptForm`);
        const loadingOverlay = document.getElementById(`${type}FormLoading`);

        if (!textarea) return;

        function updateCharCount() {
            charCounter.textContent = `${textarea.value.length} karakter`;
        }

        function updatePreview() {
            let content = textarea.value;
            
            // Farklı rapor tipleri için farklı mock veriler kullanılabilir
            const mockData = {
                '[name]': 'Ahmet Yılmaz',
                '[birth_date]': '23.03.1990',
                '[sun_sign]': 'Koç',
                '[year]': '2026',
                '@{{year}}': '2026',
                '@{{natal_core_matrix}}': 'Güneş Koç, Ay Yengeç, ASC Terazi...',
                '@{{firdaria_summary}}': 'Ana Dönem: Jüpiter, Alt Dönem: Venüs',
                '@{{json.neptune}}': '{"name":"Neptün","degree":"12° Balık","house":6}',
                '@{{neptune.degree}}': '12° Balık',
                '[report_type]': type === 'natal' ? 'Natal Raporu' : 'Yıllık Öngörü Raporu'
            };

            Object.keys(mockData).forEach(token => {
                const escapedToken = token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                const regex = new RegExp(escapedToken, 'g');
                content = content.replace(regex, `<span class="text-primary fw-bold">${mockData[token]}</span>`);
            });

            // Eşleşmeyen token'ları [veri_yok] yapmak yerine aynen bırak.
            // Böylece preview'de kullanıcı gerçek template token'ını görür.

            livePreview.innerHTML = content || '<em class="text-muted">Henüz metin girilmedi...</em>';
        }

        function insertToken(token) {
            const start = textarea.selectionStart;
            const end = textarea.selectionEnd;
            const value = textarea.value;
            textarea.value = value.slice(0, start) + token + value.slice(end);
            textarea.focus();
            const nextPos = start + token.length;
            textarea.setSelectionRange(nextPos, nextPos);
            updateCharCount();
            updatePreview();
        }

        textarea.addEventListener('input', updateCharCount);
        if (previewTab) previewTab.addEventListener('shown.bs.tab', updatePreview);

        document.querySelectorAll(`#${type}-pane .insert-placeholder-btn`).forEach(btn => {
            btn.addEventListener('click', () => {
                insertToken(btn.getAttribute('data-token'));
            });
        });

        if (form) {
            form.addEventListener('submit', () => {
                loadingOverlay.classList.add('active');
            });
        }

        const searchInput = document.getElementById(`${type}PlaceholderSearch`);
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                const q = this.value.toLowerCase().trim();
                const container = document.getElementById(`${type}-pane`);
                
                container.querySelectorAll('.placeholder-group').forEach(group => {
                    const summary = group.querySelector('summary').textContent.toLowerCase();
                    let hasMatch = false;

                    group.querySelectorAll('.placeholder-token-btn').forEach(btn => {
                        const txt = btn.textContent.toLowerCase();
                        const token = btn.getAttribute('data-token').toLowerCase();
                        const show = q === '' || txt.includes(q) || token.includes(q);
                        btn.style.display = show ? 'flex' : 'none';
                        if (show) hasMatch = true;
                    });

                    group.style.display = (q === '' || hasMatch || summary.includes(q)) ? 'block' : 'none';
                    if (q !== '' && hasMatch) group.open = true;
                });
            });
        }

        updateCharCount();
    }

    document.addEventListener('DOMContentLoaded', () => {
        initPromptEditor('natal');
        initPromptEditor('annual');
        initPromptEditor('relationship');
    });
</script>
@endpush