@extends('layouts.app')

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

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Edit Knowledge Base</h1>
        <p class="page-subtitle">{{ $kb->title }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('kb.show', $kb) }}" 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>

<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">Edit Konten</span>
            <span class="badge badge-{{ $kb->source_color ?? 'gray' }}">{{ $kb->source_label }}</span>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('kb.update', $kb) }}">
                @csrf @method('PUT')

                {{-- Info source (readonly) --}}
                @if($kb->source_type === 'url' && $kb->source_url)
                <div style="background:var(--info-light);border:1px solid var(--info);border-radius:var(--radius);padding:.625rem .875rem;margin-bottom:1.25rem;font-size:.8125rem;color:#1e40af;display:flex;align-items:center;gap:.5rem;">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:14px;height:14px;flex-shrink:0;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Sumber URL: <a href="{{ $kb->source_url }}" target="_blank" style="color:var(--primary);">{{ Str::limit($kb->source_url, 60) }}</a>
                    — <a href="{{ route('kb.rescrape', $kb) }}" onclick="return confirm('Scrape ulang konten dari URL ini?')" style="color:var(--primary);">Scrape ulang →</a>
                </div>
                @elseif($kb->source_type === 'pdf' && $kb->source_file)
                <div style="background:var(--warning-light);border:1px solid var(--warning);border-radius:var(--radius);padding:.625rem .875rem;margin-bottom:1.25rem;font-size:.8125rem;color:#92400e;display:flex;align-items:center;gap:.5rem;">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:14px;height:14px;flex-shrink:0;"><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>
                    File PDF: {{ basename($kb->source_file) }} — Anda mengedit teks hasil ekstraksi
                </div>
                @endif

                {{-- Fields umum --}}
                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Judul <span class="required">*</span></label>
                        <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                               value="{{ old('title', $kb->title) }}" required>
                        @error('title')<p class="field-error">{{ $message }}</p>@enderror
                    </div>
                    <div class="form-group">
                        <label class="form-label">Kategori <span class="required">*</span></label>
                        <select name="category" class="form-control" required>
                            @foreach(\App\Models\KnowledgeBase::CATEGORY_LABELS as $val => $label)
                            <option value="{{ $val }}" {{ old('category', $kb->category) === $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Ringkasan Singkat</label>
                    <input type="text" name="summary" class="form-control"
                           value="{{ old('summary', $kb->summary) }}" maxlength="200"
                           placeholder="Deskripsi singkat konten ini">
                </div>

                <div class="form-group">
                    <label class="form-label">Tags</label>
                    <input type="text" name="tags" class="form-control"
                           value="{{ old('tags', implode(', ', $kb->tags ?? [])) }}"
                           placeholder="produk, harga, faq (pisahkan koma)">
                </div>

                <div style="height:1px;background:var(--gray-200);margin:1rem 0;"></div>

                <div class="form-group">
                    <label class="form-label" style="display:flex;align-items:center;justify-content:space-between;">
                        <span>Konten <span class="required">*</span></span>
                        <span id="editCharCount" style="font-size:.75rem;color:var(--gray-500);font-weight:normal;">
                            {{ $kb->formatted_char_count }} · ~{{ number_format($kb->token_estimate) }} token
                        </span>
                    </label>
                    <textarea name="processed_content" id="editContent"
                              class="form-control @error('processed_content') is-invalid @enderror"
                              rows="16" required>{{ old('processed_content', $kb->processed_content) }}</textarea>
                    <p class="field-hint">Edit konten yang akan digunakan oleh chatbot AI. Gunakan format Markdown jika perlu.</p>
                    @error('processed_content')<p class="field-error">{{ $message }}</p>@enderror
                </div>

                <div class="form-group">
                    <div style="display:flex;gap:1.5rem;">
                        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:var(--gray-700);">
                            <input type="checkbox" name="is_active" value="1"
                                   {{ old('is_active', $kb->is_active) ? 'checked' : '' }}
                                   style="accent-color:var(--primary);">
                            Aktif
                        </label>
                        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:var(--gray-700);">
                            <input type="checkbox" name="use_in_chatbot" value="1"
                                   {{ old('use_in_chatbot', $kb->use_in_chatbot) ? 'checked' : '' }}
                                   style="accent-color:var(--primary);">
                            Gunakan di Chatbot AI
                        </label>
                    </div>
                </div>

                <div style="display:flex;gap:.75rem;justify-content:flex-end;padding-top:.5rem;">
                    <a href="{{ route('kb.show', $kb) }}" 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 Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Sidebar --}}
    <div style="display:flex;flex-direction:column;gap:1rem;">
        <div class="card">
            <div class="card-header"><span class="card-title">Live Counter</span></div>
            <div class="card-body" style="text-align:center;">
                <div id="liveTokenEdit" style="font-size:2rem;font-weight:700;color:var(--primary);line-height:1;">0</div>
                <div style="font-size:.8125rem;color:var(--gray-500);margin-top:.25rem;">token estimasi</div>
                <div style="height:6px;background:var(--gray-200);border-radius:3px;margin:1rem 0;overflow:hidden;">
                    <div id="tokenBar" style="height:100%;background:var(--primary);border-radius:3px;width:0%;transition:width .3s;"></div>
                </div>
                <div style="font-size:.75rem;color:var(--gray-500);">Limit Groq: ~6.000 token/request</div>
                <div id="tokenWarning" style="display:none;margin-top:.625rem;font-size:.8125rem;color:var(--danger);">
                    ⚠ Konten sangat panjang, mungkin terpotong oleh AI
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><span class="card-title">Info Entri</span></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:.625rem;font-size:.8125rem;">
                <div>
                    <div class="text-muted" style="font-size:.75rem;">Dibuat</div>
                    <div style="color:var(--gray-700);">{{ $kb->created_at->locale('id')->isoFormat('D MMM YYYY') }}</div>
                </div>
                <div>
                    <div class="text-muted" style="font-size:.75rem;">Terakhir diperbarui</div>
                    <div style="color:var(--gray-700);">{{ $kb->updated_at->locale('id')->diffForHumans() }}</div>
                </div>
                @if($kb->updatedBy)
                <div>
                    <div class="text-muted" style="font-size:.75rem;">Diperbarui oleh</div>
                    <div style="color:var(--gray-700);">{{ $kb->updatedBy->name }}</div>
                </div>
                @endif
            </div>
        </div>

        <div class="card">
            <div class="card-header"><span class="card-title">Format Markdown</span></div>
            <div class="card-body" style="font-size:.8125rem;color:var(--gray-600);line-height:1.8;">
                <code style="background:var(--gray-100);padding:1px 5px;border-radius:3px;"># Judul H1</code><br>
                <code style="background:var(--gray-100);padding:1px 5px;border-radius:3px;">## Sub Judul</code><br>
                <code style="background:var(--gray-100);padding:1px 5px;border-radius:3px;">- Item list</code><br>
                <code style="background:var(--gray-100);padding:1px 5px;border-radius:3px;">**Tebal**</code><br>
                <code style="background:var(--gray-100);padding:1px 5px;border-radius:3px;">*Miring*</code><br>
                <div style="margin-top:.5rem;color:var(--gray-500);">AI akan memahami struktur ini dengan baik</div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
var editContent = document.getElementById('editContent');
var tokenDisplay = document.getElementById('liveTokenEdit');
var tokenBar     = document.getElementById('tokenBar');
var tokenWarning = document.getElementById('tokenWarning');
var editCharCount= document.getElementById('editCharCount');
var MAX_TOKENS   = 6000;

function updateCounter(text) {
    var chars  = (text || '').length;
    var tokens = Math.ceil(chars / 4);
    var pct    = Math.min((tokens / MAX_TOKENS) * 100, 100);

    tokenDisplay.textContent = tokens.toLocaleString();
    tokenDisplay.style.color = tokens > MAX_TOKENS ? 'var(--danger)' : tokens > 3000 ? 'var(--warning)' : 'var(--primary)';
    tokenBar.style.width     = pct + '%';
    tokenBar.style.background= tokens > MAX_TOKENS ? 'var(--danger)' : tokens > 3000 ? 'var(--warning)' : 'var(--primary)';
    tokenWarning.style.display = tokens > 4000 ? 'block' : 'none';
    editCharCount.textContent  = chars.toLocaleString() + ' karakter · ~' + tokens.toLocaleString() + ' token';
}

editContent.addEventListener('input', function() { updateCounter(this.value); });
updateCounter(editContent.value);
</script>
@endpush