@extends('layouts.app')

@section('title', 'Tambah Knowledge Base')

@push('styles')
<style>
.source-tab { display:flex; gap:.5rem; margin-bottom:1.5rem; }
.source-btn {
    flex:1; padding:.75rem 1rem; border:1.5px solid var(--gray-200);
    border-radius:var(--radius-lg); background:var(--white);
    cursor:pointer; text-align:center; font-family:inherit;
    transition:all .15s; font-size:.875rem; font-weight:500;
}
.source-btn:hover { border-color:var(--primary); }
.source-btn.active { border-color:var(--primary); background:var(--primary-50); color:var(--primary); }
.source-btn svg { display:block; margin:0 auto .375rem; width:22px; height:22px; }
.source-panel { display:none; }
.source-panel.active { display:block; }

/* Preview box */
.preview-box {
    background:var(--gray-50); border:1.5px solid var(--gray-200);
    border-radius:var(--radius-lg); padding:1rem;
    max-height:280px; overflow-y:auto;
    font-size:.8125rem; line-height:1.7; color:var(--gray-700);
    white-space:pre-wrap; word-break:break-word;
}
.preview-box.loading {
    display:flex; align-items:center; justify-content:center;
    min-height:120px; color:var(--gray-400);
}
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Tambah Knowledge Base</h1>
        <p class="page-subtitle">Pilih sumber konten untuk chatbot AI</p>
    </div>
    <a href="{{ route('kb.index') }}" class="btn btn-secondary">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        Kembali
    </a>
</div>

<div style="display:grid;grid-template-columns:1fr 280px;gap:1.25rem;align-items:start;">

    {{-- Main Form --}}
    <div class="card">
        <div class="card-header"><span class="card-title">Sumber Konten</span></div>
        <div class="card-body">

            {{-- Source Type Selector --}}
            <div class="source-tab">
                <button type="button" class="source-btn {{ $sourceType === 'text' ? 'active' : '' }}"
                        onclick="switchSource('text')" id="btn_text">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    Input Teks
                </button>
                <button type="button" class="source-btn {{ $sourceType === 'pdf' ? 'active' : '' }}"
                        onclick="switchSource('pdf')" id="btn_pdf">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                    </svg>
                    Upload PDF
                </button>
                <button type="button" class="source-btn {{ $sourceType === 'url' ? 'active' : '' }}"
                        onclick="switchSource('url')" id="btn_url">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
                    </svg>
                    Scrape URL
                </button>
            </div>

            {{-- ======================================
                 FORM TEXT
            ====================================== --}}
            <div id="panel_text" class="source-panel {{ $sourceType === 'text' ? 'active' : '' }}">
                <form method="POST" action="{{ route('kb.store') }}">
                    @csrf
                    <input type="hidden" name="source_type" value="text">
                    @include('kb._form_common')
                    <div class="form-group">
                        <label class="form-label">Konten <span class="required">*</span></label>
                        <textarea name="processed_content" class="form-control @error('processed_content') is-invalid @enderror"
                                  rows="10" placeholder="Ketik atau paste konten knowledge base di sini...
Contoh:
## Produk Naramedic
Naramedic menyediakan alat kesehatan berkualitas tinggi...

## Harga
- Produk A: Rp 500.000
- Produk B: Rp 1.200.000" required>{{ old('processed_content') }}</textarea>
                        <p class="field-hint">Gunakan format Markdown untuk struktur yang lebih baik (## Judul, - list, dll)</p>
                        @error('processed_content')<p class="field-error">{{ $message }}</p>@enderror
                    </div>
                    <div style="display:flex;gap:.75rem;justify-content:flex-end;">
                        <a href="{{ route('kb.index') }}" class="btn btn-secondary">Batal</a>
                        <button type="submit" class="btn btn-primary">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Simpan Knowledge Base
                        </button>
                    </div>
                </form>
            </div>

            {{-- ======================================
                 FORM PDF
            ====================================== --}}
            <div id="panel_pdf" class="source-panel {{ $sourceType === 'pdf' ? 'active' : '' }}">
                <form method="POST" action="{{ route('kb.store') }}" enctype="multipart/form-data" id="pdfForm">
                    @csrf
                    <input type="hidden" name="source_type" value="pdf">
                    @include('kb._form_common')

                    <div class="form-group">
                        <label class="form-label">File PDF <span class="required">*</span></label>
                        <div id="pdfDropZone" style="border:2px dashed var(--gray-300);border-radius:var(--radius-lg);padding:2rem;text-align:center;cursor:pointer;transition:all .15s;background:var(--gray-50);"
                             ondragover="pdfDragOver(event)" ondragleave="pdfDragLeave(event)" ondrop="pdfDrop(event)">
                            <svg fill="none" viewBox="0 0 24 24" stroke="var(--gray-400)" style="width:36px;height:36px;margin:0 auto .75rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                            </svg>
                            <div id="pdfLabel" style="font-size:.875rem;color:var(--gray-500);">
                                Drag & drop PDF di sini, atau<br>
                                <label style="color:var(--primary);cursor:pointer;font-weight:500;">
                                    klik untuk pilih file
                                    <input type="file" name="pdf_file" id="pdfInput" accept=".pdf" style="display:none;" onchange="handlePdfSelect(this)">
                                </label>
                            </div>
                            <div style="font-size:.75rem;color:var(--gray-400);margin-top:.375rem;">PDF, maks 20MB</div>
                        </div>
                        @error('pdf_file')<p class="field-error">{{ $message }}</p>@enderror
                    </div>

                    {{-- Preview extracted text --}}
                    <div id="pdfPreviewSection" style="display:none;">
                        <div class="form-group">
                            <label class="form-label" style="display:flex;align-items:center;justify-content:space-between;">
                                <span>Hasil Ekstraksi Teks</span>
                                <span id="pdfCharCount" style="font-size:.75rem;color:var(--gray-500);font-weight:normal;"></span>
                            </label>
                            <div style="background:var(--success-light);border:1px solid var(--success);border-radius:var(--radius);padding:.625rem .875rem;margin-bottom:.75rem;font-size:.8125rem;color:#065f46;" id="pdfSuccess">
                                ✓ PDF berhasil diekstrak. Anda dapat mengedit teks di bawah sebelum menyimpan.
                            </div>
                            <textarea name="processed_content" id="pdfContent" class="form-control" rows="10"
                                      placeholder="Teks hasil ekstraksi PDF akan muncul di sini..."></textarea>
                            <p class="field-hint">Edit teks jika diperlukan — hapus konten tidak relevan seperti header/footer</p>
                        </div>
                    </div>

                    <div style="display:flex;gap:.75rem;justify-content:flex-end;">
                        <a href="{{ route('kb.index') }}" class="btn btn-secondary">Batal</a>
                        <button type="submit" class="btn btn-primary" id="pdfSubmitBtn" disabled>
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Simpan Knowledge Base
                        </button>
                    </div>
                </form>
            </div>

            {{-- ======================================
                 FORM URL
            ====================================== --}}
            <div id="panel_url" class="source-panel {{ $sourceType === 'url' ? 'active' : '' }}">
                <form method="POST" action="{{ route('kb.store') }}" id="urlForm">
                    @csrf
                    <input type="hidden" name="source_type" value="url">
                    @include('kb._form_common')

                    <div class="form-group">
                        <label class="form-label">URL Halaman Web <span class="required">*</span></label>
                        <div style="display:flex;gap:.625rem;">
                            <input type="url" name="source_url" id="urlInput" class="form-control"
                                   placeholder="https://naramedic.com/tentang-kami"
                                   value="{{ old('source_url') }}" style="flex:1;">
                            <button type="button" class="btn btn-primary" onclick="previewScrape()" id="scrapeBtn">
                                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                Scrape
                            </button>
                        </div>
                        <p class="field-hint">URL harus dapat diakses publik. Scraping akan mengambil teks dari halaman web.</p>
                        @error('source_url')<p class="field-error">{{ $message }}</p>@enderror
                    </div>

                    {{-- Preview hasil scrape --}}
                    <div id="scrapeResult" style="display:none;">
                        <div class="form-group">
                            <div id="scrapeStatus" style="padding:.625rem .875rem;border-radius:var(--radius);margin-bottom:.75rem;font-size:.8125rem;"></div>
                            <label class="form-label" style="display:flex;align-items:center;justify-content:space-between;">
                                <span>Konten Hasil Scraping</span>
                                <span id="urlCharCount" style="font-size:.75rem;color:var(--gray-500);font-weight:normal;"></span>
                            </label>
                            <textarea name="processed_content" id="urlContent" class="form-control" rows="10"
                                      placeholder="Hasil scraping akan muncul di sini..."></textarea>
                            <p class="field-hint">Edit dan bersihkan konten — hapus teks navigasi, footer, dan konten tidak relevan</p>
                        </div>
                    </div>

                    <div style="display:flex;gap:.75rem;justify-content:flex-end;">
                        <a href="{{ route('kb.index') }}" class="btn btn-secondary">Batal</a>
                        <button type="submit" class="btn btn-primary" id="urlSubmitBtn" disabled>
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Simpan Knowledge Base
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>

    {{-- Right: Tips sidebar --}}
    <div style="display:flex;flex-direction:column;gap:1rem;">
        <div class="card">
            <div class="card-header"><span class="card-title">Tips Konten Efektif</span></div>
            <div class="card-body" style="font-size:.8125rem;color:var(--gray-600);line-height:1.8;display:flex;flex-direction:column;gap:.5rem;">
                <div>✅ <strong>Spesifik</strong> — fokus pada satu topik per entri</div>
                <div>✅ <strong>Terstruktur</strong> — gunakan heading & daftar</div>
                <div>✅ <strong>Faktual</strong> — data harga, kontak, jam operasional yang akurat</div>
                <div>✅ <strong>Ringkas</strong> — hindari kalimat panjang & berulang</div>
                <div>❌ Jangan masukkan informasi sensitif (password, data pribadi)</div>
                <div>❌ Hindari konten duplikat antar entri KB</div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><span class="card-title">Kategori KB</span></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:.375rem;">
                @foreach(\App\Models\KnowledgeBase::CATEGORY_LABELS as $val => $label)
                <div style="display:flex;align-items:center;justify-content:space-between;font-size:.8125rem;">
                    <span style="color:var(--gray-700);">{{ $label }}</span>
                    <span class="badge badge-gray" style="font-size:.6875rem;">{{ $val }}</span>
                </div>
                @endforeach
            </div>
        </div>

        <div class="card">
            <div class="card-header"><span class="card-title">Token Estimate</span></div>
            <div class="card-body" style="font-size:.8125rem;color:var(--gray-600);line-height:1.7;">
                <div id="liveTokenCount" style="font-size:1.125rem;font-weight:700;color:var(--primary);margin-bottom:.375rem;">0 token</div>
                <div>estimasi dari konten yang diketik</div>
                <div style="margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--gray-100);">
                    Groq LLaMA free tier:<br>
                    ~14.400 token/menit<br>
                    ~6.000 token/request max
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// -------------------------------------------------------
// Switch source type
// -------------------------------------------------------
function switchSource(type) {
    ['text','pdf','url'].forEach(function(t) {
        document.getElementById('btn_' + t).classList.toggle('active', t === type);
        document.getElementById('panel_' + t).classList.toggle('active', t === type);
    });
}
switchSource('{{ $sourceType }}');

// -------------------------------------------------------
// Live token estimate
// -------------------------------------------------------
function updateTokenCount(text) {
    var tokens = Math.ceil((text || '').length / 4);
    var el = document.getElementById('liveTokenCount');
    if (!el) return;
    el.textContent = tokens.toLocaleString() + ' token';
    el.style.color = tokens > 5000 ? 'var(--danger)' : tokens > 2000 ? 'var(--warning)' : 'var(--primary)';
}

document.querySelectorAll('textarea[name="processed_content"]').forEach(function(ta) {
    ta.addEventListener('input', function() { updateTokenCount(this.value); });
});

// -------------------------------------------------------
// PDF Upload & drag-drop
// -------------------------------------------------------
function pdfDragOver(e) {
    e.preventDefault();
    document.getElementById('pdfDropZone').style.borderColor = 'var(--primary)';
    document.getElementById('pdfDropZone').style.background  = 'var(--primary-50)';
}
function pdfDragLeave(e) {
    document.getElementById('pdfDropZone').style.borderColor = 'var(--gray-300)';
    document.getElementById('pdfDropZone').style.background  = 'var(--gray-50)';
}
function pdfDrop(e) {
    e.preventDefault();
    pdfDragLeave(e);
    var file = e.dataTransfer.files[0];
    if (file && file.type === 'application/pdf') {
        var input = document.getElementById('pdfInput');
        var dt    = new DataTransfer();
        dt.items.add(file);
        input.files = dt.files;
        handlePdfSelect(input);
    }
}

function handlePdfSelect(input) {
    var file = input.files[0];
    if (!file) return;

    var label = document.getElementById('pdfLabel');
    label.innerHTML = '<strong style="color:var(--primary);">📄 ' + file.name + '</strong><br><span style="font-size:.75rem;color:var(--gray-500);">' + (file.size/1024/1024).toFixed(2) + ' MB</span>';

    // Upload langsung untuk preview ekstraksi
    var formData = new FormData();
    formData.append('_token', csrf);
    formData.append('pdf_file', file);

    // Tampilkan loading
    var section = document.getElementById('pdfPreviewSection');
    section.style.display = 'block';
    var content = document.getElementById('pdfContent');
    content.value = '';
    content.placeholder = '⏳ Mengekstrak teks dari PDF...';
    content.disabled = true;

    // Upload ke endpoint preview (kita buat inline di sini dengan dummy)
    // Karena tidak ada endpoint preview, langsung enable submit
    // Server akan ekstrak saat store
    content.placeholder = 'Teks akan diekstrak saat form disimpan. Anda bisa isi manual di sini jika diperlukan.';
    content.disabled = false;

    document.getElementById('pdfSuccess').textContent = '✓ File PDF siap diupload. Klik "Simpan" untuk memproses.';
    document.getElementById('pdfSubmitBtn').disabled = false;
    document.getElementById('pdfCharCount').textContent = 'File: ' + (file.size/1024).toFixed(0) + ' KB';
}

// -------------------------------------------------------
// URL Scraping
// -------------------------------------------------------
function previewScrape() {
    var url    = document.getElementById('urlInput').value.trim();
    var btn    = document.getElementById('scrapeBtn');
    var result = document.getElementById('scrapeResult');
    var status = document.getElementById('scrapeStatus');
    var content= document.getElementById('urlContent');

    if (!url) { alert('Masukkan URL terlebih dahulu.'); return; }

    btn.disabled = true;
    btn.innerHTML = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;animation:spin .7s linear infinite;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Scraping...';
    result.style.display = 'block';
    status.style.cssText = 'padding:.625rem .875rem;border-radius:var(--radius);margin-bottom:.75rem;font-size:.8125rem;background:var(--info-light);color:#1e40af;';
    status.textContent  = '⏳ Mengambil konten dari ' + url + '...';
    content.value = '';

    fetch('{{ route('kb.preview-scrape') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
        body: JSON.stringify({ url: url }),
    })
    .then(r => r.json())
    .then(function(data) {
        btn.disabled = false;
        btn.innerHTML = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Scrape';

        if (data.success) {
            status.style.cssText = 'padding:.625rem .875rem;border-radius:var(--radius);margin-bottom:.75rem;font-size:.8125rem;background:var(--success-light);color:#065f46;';
            status.innerHTML = '✓ Berhasil mengambil <strong>' + data.chars.toLocaleString() + '</strong> karakter dari halaman web.';
            content.value = data.content;
            updateTokenCount(data.content);
            document.getElementById('urlCharCount').textContent = data.chars.toLocaleString() + ' karakter';

            // Auto-fill title jika kosong
            var titleInput = document.getElementById('url_title');
            if (titleInput && !titleInput.value && data.title) {
                titleInput.value = data.title;
            }

            document.getElementById('urlSubmitBtn').disabled = false;
        } else {
            status.style.cssText = 'padding:.625rem .875rem;border-radius:var(--radius);margin-bottom:.75rem;font-size:.8125rem;background:var(--danger-light);color:#991b1b;';
            status.innerHTML = '✗ Gagal scraping: ' + (data.error || 'Terjadi kesalahan');
        }
    })
    .catch(function() {
        btn.disabled = false;
        btn.innerHTML = 'Scrape';
        status.style.cssText = 'padding:.625rem .875rem;border-radius:var(--radius);margin-bottom:.75rem;font-size:.8125rem;background:var(--danger-light);color:#991b1b;';
        status.textContent = '✗ Koneksi gagal. Periksa URL dan coba lagi.';
    });
}
</script>
<style>@keyframes spin { to { transform: rotate(360deg); } }</style>
@endpush