@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>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="chat-prompts-tab" data-bs-toggle="pill" data-bs-target="#chat-prompts-pane" type="button" role="tab">
                    <i class="bi bi-chat-dots me-2"></i>Sohbet (Chat) Promptları
                </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>

        <!-- Chat Prompts Pane (canlı sohbette kullanılan 16 modül) -->
        <div class="tab-pane fade" id="chat-prompts-pane" role="tabpanel">
            <div class="alert alert-info mb-3">
                <i class="bi bi-info-circle me-1"></i>
                Bu 16 modül, canlı sohbet ekranındaki AI'nin sistem talimatını (kimlik, ton, kurallar vb.) oluşturur.
                Rapor promptlarının aksine değişken/token içermezler — doğrudan davranış talimatı metinleridir.
                Bir modülü boş bırakıp kaydederseniz veya "fabrika ayarına döndür"ü işaretlerseniz, kod içindeki
                varsayılan metne otomatik döner.
            </div>
            <div class="accordion" id="chatPromptsAccordion">
                @foreach ($chatPrompts as $key => $cp)
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chatPrompt-{{ $key }}">
                                {{ $cp['title'] }}
                                <code class="ms-2 text-muted small">{{ $key }}</code>
                                @if ($cp['is_overridden'])
                                    <span class="badge bg-warning text-dark ms-2">Özelleştirilmiş</span>
                                @else
                                    <span class="badge bg-light text-muted ms-2">Varsayılan</span>
                                @endif
                            </button>
                        </h2>
                        <div id="chatPrompt-{{ $key }}" class="accordion-collapse collapse" data-bs-parent="#chatPromptsAccordion">
                            <div class="accordion-body">
                                <form action="{{ route('admin.prompt-settings.update') }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <textarea
                                        name="{{ $cp['field'] }}"
                                        rows="14"
                                        class="form-control shadow-sm mb-2"
                                        spellcheck="false"
                                    >{{ old($cp['field'], $cp['content']) }}</textarea>
                                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                        <div class="form-check form-switch mb-0">
                                            <input class="form-check-input" type="checkbox" value="1" id="{{ $cp['reset_field'] }}" name="{{ $cp['reset_field'] }}">
                                            <label class="form-check-label" for="{{ $cp['reset_field'] }}">
                                                Fabrika ayarına (kod varsayılanına) döndür
                                            </label>
                                        </div>
                                        <button type="submit" class="btn btn-primary btn-sm px-3">
                                            <i class="bi bi-save me-1"></i> Kaydet
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </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