@extends('layouts.app')

@section('title', 'Manage Report Prompt Config - Admin Panel')
@section('page_title', 'Report Prompt Config')

@section('styles')
<style>
    .prompt-nav-pills .nav-link {
        border-radius: 8px;
        color: #495057;
        padding: 14px 18px;
        margin-bottom: 10px;
        transition: all 0.25s ease-in-out;
        border: 1px solid #e9ecef;
        background-color: #fff;
        display: flex;
        align-items: center;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }
    .prompt-nav-pills .nav-link:hover {
        background-color: #f8f9fa;
        color: #212529;
        border-color: #dee2e6;
        transform: translateY(-1px);
    }
    .prompt-nav-pills .nav-link.active {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
        font-weight: 600;
        box-shadow: 0 4px 6px rgba(0, 123, 255, 0.15);
    }
    .prompt-nav-pills .nav-link.active:hover {
        background-color: #0069d9;
        color: #fff;
    }
    .badge-premium {
        background-color: #f1c40f;
        color: #2c3e50;
        font-weight: 700;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .badge-free {
        background-color: #2ecc71;
        color: #fff;
        font-weight: 700;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .variable-btn {
        transition: all 0.2s ease;
        border: 1px dashed transparent;
    }
    .variable-btn:hover {
        transform: scale(1.03);
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }
    .tab-content-card {
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .section-card {
        border-radius: 10px;
        transition: all 0.2s ease;
    }
    .section-card:hover {
        box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-sm-12">
        <input type="hidden" name="active_tab_session" id="active_tab_session" value="{{ old('active_tab', session('active_tab')) }}">
        
        <div class="row">
            <!-- Left Side: Vertical Navigation Tabs -->
            <div class="col-md-4 col-xl-3">
                <div class="card card-body p-3 bg-light border-0 shadow-none">
                    <h6 class="text-uppercase text-muted font-weight-bold mb-3" style="font-size: 11px; letter-spacing: 1px;">Report Categories</h6>
                    <div class="nav flex-column nav-pills prompt-nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                        @foreach($categories as $category)
                            <a class="nav-link @if($loop->first) active @endif" 
                               id="v-pills-{{ $category->id }}-tab" 
                               data-toggle="pill" 
                               href="#v-pills-{{ $category->id }}" 
                               role="tab" 
                               aria-controls="v-pills-{{ $category->id }}" 
                               aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                                
                                @if($category->icon_name)
                                    <iconify-icon icon="{{ $category->icon_name }}" class="mr-2" style="color: @if($loop->first) #fff @else {{ $category->icon_color ?? '#FF6B00' }} @endif; font-size: 20px;" data-active-color="#fff" data-default-color="{{ $category->icon_color ?? '#FF6B00' }}"></iconify-icon>
                                @endif
                                
                                <span class="text-wrap text-left mr-2" style="line-height: 1.3;">{{ $category->title }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Right Side: Category Section Config Forms -->
            <div class="col-md-8 col-xl-9">
                <div class="tab-content" id="v-pills-tabContent">
                    @foreach($categories as $category)
                        <div class="tab-pane fade @if($loop->first) show active @endif" 
                             id="v-pills-{{ $category->id }}" 
                             role="tabpanel" 
                             aria-labelledby="v-pills-{{ $category->id }}-tab">
                            
                            <form action="{{ route('report-categories.update-sections-config') }}" method="POST" class="sections-form">
                                @csrf
                                <input type="hidden" name="category_id" value="{{ $category->id }}">
                                <input type="hidden" name="active_tab" value="v-pills-{{ $category->id }}">
                                
                                <div class="card tab-content-card">
                                    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                                        <div class="d-flex align-items-center">
                                            @if($category->icon_name)
                                                <div class="p-2 rounded bg-light mr-3 d-inline-flex">
                                                    <iconify-icon icon="{{ $category->icon_name }}" style="color: {{ $category->icon_color ?? '#FF6B00' }}; font-size: 32px;"></iconify-icon>
                                                </div>
                                            @endif
                                            <div>
                                                <h5 class="mb-1 font-weight-bold text-dark">{{ $category->title }} Sections</h5>
                                                <p class="text-muted mb-0 small">{{ $category->description ?: 'Configure prompt sections for this report.' }}</p>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-primary shadow-sm px-4">
                                            <i class="feather icon-save mr-1"></i> Save Config
                                        </button>
                                    </div>
                                    <div class="card-body">
                                        <!-- Helper panel for variables -->
                                        <div class="mb-4 bg-light p-3 rounded border">
                                            <span class="text-muted small d-block mb-2 font-weight-bold"><i class="feather icon-info mr-1 text-info"></i>Insert dynamic variables at cursor position:</span>
                                            <div class="d-flex flex-wrap">
                                                <button type="button" class="btn btn-sm btn-info mr-2 mb-2 variable-btn insert-var" data-var="{report_name}">{report_name}</button>
                                                <button type="button" class="btn btn-sm btn-info mr-2 mb-2 variable-btn insert-var" data-var="{report_language}">{report_language}</button>
                                                <button type="button" class="btn btn-sm btn-info mr-2 mb-2 variable-btn insert-var" data-var="{user_profile_details}">{user_profile_details}</button>
                                                <button type="button" class="btn btn-sm btn-info mr-2 mb-2 variable-btn insert-var" data-var="{general_instructions}">{general_instructions}</button>
                                                <button type="button" class="btn btn-sm btn-info mr-2 mb-2 variable-btn insert-var" data-var="{palm_reading_json}">{palm_reading_json}</button>
                                                <button type="button" class="btn btn-sm btn-info mr-2 mb-2 variable-btn insert-var" data-var="{output_json_format}">{output_json_format}</button>
                                            </div>
                                        </div>

                                        <div class="sections-container" id="sections-container-{{ $category->id }}">
                                            @forelse($category->sections as $index => $section)
                                                <div class="card section-card mb-4 border shadow-none" data-index="{{ $index }}">
                                                    <div class="card-header bg-light d-flex justify-content-between align-items-center py-2">
                                                        <span class="font-weight-bold text-secondary">Section #{{ $index + 1 }}: {{ $section->title }}</span>
                                                        <button type="button" class="btn btn-sm btn-outline-danger remove-section-btn">
                                                            <i class="feather icon-trash-2"></i> Remove
                                                        </button>
                                                    </div>
                                                    <div class="card-body">
                                                        <input type="hidden" name="sections[{{ $index }}][id]" value="{{ $section->id }}">
                                                        <div class="row">
                                                            <div class="col-md-6 form-group">
                                                                <label class="small font-weight-bold text-muted">Section Title <span class="text-danger">*</span></label>
                                                                <input type="text" name="sections[{{ $index }}][title]" class="form-control section-title-input" value="{{ $section->title }}" placeholder="e.g. Life Line Analysis" required>
                                                            </div>
                                                            <div class="col-md-3 form-group">
                                                                <label class="small font-weight-bold text-muted">Icon Name (Iconify)</label>
                                                                <input type="text" name="sections[{{ $index }}][icon_name]" class="form-control" value="{{ $section->icon_name }}" placeholder="e.g. lucide:activity">
                                                            </div>
                                                            <div class="col-md-3 form-group">
                                                                <label class="small font-weight-bold text-muted">Icon Color</label>
                                                                <div class="input-group">
                                                                    <input type="text" name="sections[{{ $index }}][icon_color]" class="form-control hex-color-input" value="{{ $section->icon_color ?: '#FF6B00' }}">
                                                                    <div class="input-group-append">
                                                                        <span class="input-group-text p-1">
                                                                            <input type="color" class="color-picker-sync" value="{{ $section->icon_color ?: '#FF6B00' }}" style="width: 30px; height: 100%; border: none; padding: 0; background: none;">
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group mb-3">
                                                            <label class="small font-weight-bold text-muted">Short Description</label>
                                                            <textarea name="sections[{{ $index }}][description]" rows="2" class="form-control" placeholder="Short 2-4 line description of this section...">{{ $section->description }}</textarea>
                                                        </div>
                                                        <div class="form-group mb-0">
                                                            <label class="small font-weight-bold text-muted">Prompt/Instructions <span class="text-danger">*</span></label>
                                                            <textarea name="sections[{{ $index }}][prompt]" rows="6" class="form-control prompt-textarea" placeholder="Write system instructions or prompt here..." required>{{ $section->prompt }}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            @empty
                                                <div class="text-center py-4 text-muted no-sections-alert">
                                                    <i class="feather icon-alert-circle mr-2" style="font-size: 24px;"></i>
                                                    <p class="mb-0 mt-2">No sections defined yet. Add a section below to get started.</p>
                                                </div>
                                            @endforelse
                                        </div>

                                        <div class="text-center">
                                            <button type="button" class="btn btn-outline-primary px-4 add-section-btn" data-category-id="{{ $category->id }}">
                                                <i class="feather icon-plus mr-1"></i> Add New Section
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-light text-right py-3">
                                        <button type="submit" class="btn btn-primary shadow-sm px-4">
                                            <i class="feather icon-save mr-1"></i> Save Config
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let lastFocusedTextarea = null;

        // Keep track of the last focused textarea
        document.addEventListener('focusin', function(e) {
            if (e.target.classList.contains('prompt-textarea')) {
                lastFocusedTextarea = e.target;
            }
        });

        // Sync Hex Text inputs with Color pickers
        function initColorSyncers(context = document) {
            context.querySelectorAll('.color-picker-sync').forEach(picker => {
                picker.addEventListener('input', function() {
                    const textInput = this.closest('.input-group').querySelector('.hex-color-input');
                    if (textInput) textInput.value = this.value.toUpperCase();
                });
            });

            context.querySelectorAll('.hex-color-input').forEach(input => {
                input.addEventListener('input', function() {
                    const picker = this.closest('.input-group').querySelector('.color-picker-sync');
                    if (picker && /^#[0-9A-Fa-f]{6}$/.test(this.value)) {
                        picker.value = this.value;
                    }
                });
            });
        }
        
        initColorSyncers();

        // Variable Insertion Helper
        const insertButtons = document.querySelectorAll('.insert-var');
        insertButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const varToInsert = this.getAttribute('data-var');
                
                const activePane = document.querySelector('.tab-pane.active');
                if (!activePane) return;
                
                const textarea = lastFocusedTextarea || activePane.querySelector('.prompt-textarea');
                if (!textarea) return;
                
                const startPos = textarea.selectionStart;
                const endPos = textarea.selectionEnd;
                const textBefore = textarea.value.substring(0, startPos);
                const textAfter = textarea.value.substring(endPos, textarea.value.length);
                
                textarea.value = textBefore + varToInsert + textAfter;
                
                const newCursorPos = startPos + varToInsert.length;
                textarea.selectionStart = newCursorPos;
                textarea.selectionEnd = newCursorPos;
                textarea.focus();
            });
        });

        // Add Section logic
        document.querySelectorAll('.add-section-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const categoryId = this.getAttribute('data-category-id');
                const container = document.getElementById(`sections-container-${categoryId}`);
                
                // Hide empty state if visible
                const noSectionsAlert = container.querySelector('.no-sections-alert');
                if (noSectionsAlert) {
                    noSectionsAlert.style.display = 'none';
                }

                const index = container.querySelectorAll('.section-card').length;
                
                const cardHtml = `
                    <div class="card section-card mb-4 border shadow-none" data-index="${index}">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center py-2">
                            <span class="font-weight-bold text-secondary">Section #${index + 1}: New Section</span>
                            <button type="button" class="btn btn-sm btn-outline-danger remove-section-btn">
                                <i class="feather icon-trash-2"></i> Remove
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label class="small font-weight-bold text-muted">Section Title <span class="text-danger">*</span></label>
                                    <input type="text" name="sections[${index}][title]" class="form-control section-title-input" placeholder="e.g. Heart Line Analysis" required>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label class="small font-weight-bold text-muted">Icon Name (Iconify)</label>
                                    <input type="text" name="sections[${index}][icon_name]" class="form-control" placeholder="e.g. lucide:heart">
                                </div>
                                <div class="col-md-3 form-group">
                                    <label class="small font-weight-bold text-muted">Icon Color</label>
                                    <div class="input-group">
                                        <input type="text" name="sections[${index}][icon_color]" class="form-control hex-color-input" value="#FF6B00">
                                        <div class="input-group-append">
                                            <span class="input-group-text p-1">
                                                <input type="color" class="color-picker-sync" value="#FF6B00" style="width: 30px; height: 100%; border: none; padding: 0; background: none;">
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label class="small font-weight-bold text-muted">Short Description</label>
                                <textarea name="sections[${index}][description]" rows="2" class="form-control" placeholder="Short 2-4 line description of this section..."></textarea>
                            </div>
                            <div class="form-group mb-0">
                                <label class="small font-weight-bold text-muted">Prompt/Instructions <span class="text-danger">*</span></label>
                                <textarea name="sections[${index}][prompt]" rows="6" class="form-control prompt-textarea" placeholder="Write system instructions or prompt here..." required></textarea>
                            </div>
                        </div>
                    </div>
                `;
                
                container.insertAdjacentHTML('beforeend', cardHtml);
                const newCard = container.lastElementChild;
                initColorSyncers(newCard);
                initCardHeaderSync(newCard);
            });
        });

        // Title Header sync logic
        function initCardHeaderSync(card) {
            const titleInput = card.querySelector('.section-title-input');
            const headerSpan = card.querySelector('.card-header span');
            if (titleInput && headerSpan) {
                titleInput.addEventListener('input', function() {
                    const idx = parseInt(card.getAttribute('data-index')) + 1;
                    headerSpan.textContent = `Section #${idx}: ${this.value || 'New Section'}`;
                });
            }
        }

        document.querySelectorAll('.section-card').forEach(initCardHeaderSync);

        // Remove Section logic (delegated)
        document.addEventListener('click', function(e) {
            const removeBtn = e.target.closest('.remove-section-btn');
            if (removeBtn) {
                const card = removeBtn.closest('.section-card');
                const container = card.closest('.sections-container');
                const categoryId = container.id.replace('sections-container-', '');
                
                card.remove();
                
                // Re-index remaining sections
                const remainingCards = container.querySelectorAll('.section-card');
                if (remainingCards.length === 0) {
                    const noSectionsAlert = container.querySelector('.no-sections-alert');
                    if (noSectionsAlert) {
                        noSectionsAlert.style.display = 'block';
                    } else {
                        container.insertAdjacentHTML('afterbegin', `
                            <div class="text-center py-4 text-muted no-sections-alert">
                                <i class="feather icon-alert-circle mr-2" style="font-size: 24px;"></i>
                                <p class="mb-0 mt-2">No sections defined yet. Add a section below to get started.</p>
                            </div>
                        `);
                    }
                } else {
                    remainingCards.forEach((rc, newIdx) => {
                        rc.setAttribute('data-index', newIdx);
                        const titleVal = rc.querySelector('.section-title-input').value;
                        rc.querySelector('.card-header span').textContent = `Section #${newIdx + 1}: ${titleVal || 'New Section'}`;
                        
                        rc.querySelectorAll('[name^="sections["]').forEach(input => {
                            const name = input.getAttribute('name');
                            const updatedName = name.replace(/sections\[\d+\]/, `sections[${newIdx}]`);
                            input.setAttribute('name', updatedName);
                        });
                    });
                }
            }
        });

        // Restore active tab if specified in session
        const activeTabInput = document.getElementById('active_tab_session');
        if (activeTabInput && activeTabInput.value) {
            $('#v-pills-tab a[href="#' + activeTabInput.value + '"]').tab('show');
        }

        // Change icon color dynamically when switching active tabs
        $('#v-pills-tab a[data-toggle="pill"]').on('shown.bs.tab', function(e) {
            const tabId = e.target.getAttribute('href').substring(1);
            
            // Sync session active tab
            document.querySelectorAll('.sections-form [name="active_tab"]').forEach(input => {
                input.value = tabId;
            });

            const prevTab = e.relatedTarget;
            if (prevTab) {
                const prevIcon = prevTab.querySelector('iconify-icon');
                if (prevIcon) {
                    const defaultColor = prevIcon.getAttribute('data-default-color');
                    prevIcon.style.color = defaultColor;
                }
            }

            const activeTab = e.target;
            if (activeTab) {
                const activeIcon = activeTab.querySelector('iconify-icon');
                if (activeIcon) {
                    activeIcon.style.color = '#ffffff';
                }
            }
        });
    });
</script>
@endsection