@extends('layouts.app')

@section('title', $kb->title)

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">{{ $kb->title }}</h1>
        <p class="page-subtitle">
            <span class="badge badge-blue">{{ $kb->category_label }}</span>
            <span class="badge badge-gray" style="margin-left:.25rem;">{{ $kb->source_label }}</span>
            <span class="badge badge-{{ $kb->status_color }}" style="margin-left:.25rem;">{{ $kb->status_label }}</span>
        </p>
    </div>
    <div class="page-actions">
        <a href="{{ route('kb.index') }}" class="btn btn-ghost btn-sm">← Kembali</a>
        @if($kb->source_type === 'url')
        <form method="POST" action="{{ route('kb.rescrape', $kb) }}" style="display:inline;">
            @csrf
            <button type="submit" 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="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 Ulang
            </button>
        </form>
        @endif
        @can('edit kb')
        <a href="{{ route('kb.edit', $kb) }}" class="btn btn-primary">
            <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>
            Edit
        </a>
        @endcan
    </div>
</div>

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

    {{-- Konten --}}
    <div class="card">
        <div class="card-header">
            <span class="card-title">Konten Knowledge Base</span>
            <div style="display:flex;gap:.5rem;align-items:center;">
                <span style="font-size:.8125rem;color:var(--gray-500);">{{ $kb->formatted_char_count }}</span>
                <span style="font-size:.8125rem;color:var(--gray-400);">·</span>
                <span style="font-size:.8125rem;color:var(--gray-500);">~{{ number_format($kb->token_estimate) }} token</span>
            </div>
        </div>
        <div class="card-body" style="padding:0;">
            <div style="padding:1.25rem;background:var(--gray-50);font-size:.875rem;line-height:1.75;color:var(--gray-700);white-space:pre-wrap;word-break:break-word;max-height:500px;overflow-y:auto;border-radius:0 0 var(--radius-lg) var(--radius-lg);">{{ $kb->processed_content }}</div>
        </div>
        @if($kb->source_type === 'url' && $kb->source_url)
        <div class="card-footer">
            <div style="font-size:.8125rem;color:var(--gray-500);">
                Sumber:
                <a href="{{ $kb->source_url }}" target="_blank" style="color:var(--primary);">{{ Str::limit($kb->source_url, 80) }}</a>
            </div>
        </div>
        @endif
    </div>

    {{-- Info panel --}}
    <div style="display:flex;flex-direction:column;gap:1rem;">

        <div class="card">
            <div class="card-header"><span class="card-title">Informasi</span></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:.875rem;">

                @if($kb->summary)
                <div>
                    <div class="text-small text-muted">Ringkasan</div>
                    <div style="font-size:.875rem;color:var(--gray-700);margin-top:.25rem;">{{ $kb->summary }}</div>
                </div>
                @endif

                <div>
                    <div class="text-small text-muted">Sumber</div>
                    <div style="margin-top:.25rem;">
                        @if($kb->source_type === 'pdf')
                        <div style="display:flex;align-items:center;gap:.5rem;">
                            <svg fill="none" viewBox="0 0 24 24" stroke="var(--danger)" style="width:16px;height:16px;"><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>
                            <span style="font-size:.875rem;color:var(--gray-700);">{{ basename($kb->source_file ?? 'PDF') }}</span>
                        </div>
                        @elseif($kb->source_type === 'url')
                        <a href="{{ $kb->source_url }}" target="_blank" style="font-size:.875rem;color:var(--primary);word-break:break-all;">{{ Str::limit($kb->source_url, 50) }}</a>
                        @else
                        <span class="badge badge-gray">Input Manual</span>
                        @endif
                    </div>
                </div>

                <div>
                    <div class="text-small text-muted">Kategori</div>
                    <span class="badge badge-blue" style="margin-top:.25rem;">{{ $kb->category_label }}</span>
                </div>

                @if($kb->tags && count($kb->tags))
                <div>
                    <div class="text-small text-muted">Tags</div>
                    <div style="display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.375rem;">
                        @foreach($kb->tags as $tag)
                        <span style="background:var(--gray-100);color:var(--gray-600);padding:2px 8px;border-radius:20px;font-size:.75rem;">{{ $tag }}</span>
                        @endforeach
                    </div>
                </div>
                @endif

                <div>
                    <div class="text-small text-muted">Ukuran Konten</div>
                    <div style="font-size:.875rem;color:var(--gray-800);margin-top:.25rem;">
                        {{ $kb->formatted_char_count }}<br>
                        <span style="font-size:.75rem;color:var(--gray-500);">~{{ number_format($kb->token_estimate) }} token estimasi</span>
                    </div>
                </div>

                <div>
                    <div class="text-small text-muted">Status</div>
                    <div style="display:flex;gap:.375rem;flex-wrap:wrap;margin-top:.375rem;">
                        <span class="badge badge-{{ $kb->is_active ? 'green' : 'gray' }}">
                            {{ $kb->is_active ? 'Aktif' : 'Nonaktif' }}
                        </span>
                        <span class="badge badge-{{ $kb->use_in_chatbot ? 'green' : 'gray' }}">
                            {{ $kb->use_in_chatbot ? '🤖 Di Chatbot' : 'Tidak di Chatbot' }}
                        </span>
                    </div>
                </div>

                @if($kb->last_scraped_at)
                <div>
                    <div class="text-small text-muted">Terakhir Discrape</div>
                    <div style="font-size:.875rem;color:var(--gray-700);margin-top:.25rem;">
                        {{ $kb->last_scraped_at->locale('id')->isoFormat('D MMM YYYY, HH:mm') }}
                    </div>
                </div>
                @endif

                <div>
                    <div class="text-small text-muted">Dibuat</div>
                    <div style="font-size:.875rem;color:var(--gray-700);margin-top:.25rem;">
                        {{ $kb->created_at->locale('id')->isoFormat('D MMM YYYY') }}
                        @if($kb->createdBy) · {{ $kb->createdBy->name }} @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Quick actions --}}
        <div class="card">
            <div class="card-header"><span class="card-title">Aksi</span></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:.5rem;">
                <form method="POST" action="{{ route('kb.toggle', $kb) }}">
                    @csrf
                    <input type="hidden" name="field" value="active">
                    <button type="submit" class="btn btn-secondary w-100" style="justify-content:center;">
                        {{ $kb->is_active ? 'Nonaktifkan' : 'Aktifkan' }}
                    </button>
                </form>
                <form method="POST" action="{{ route('kb.toggle', $kb) }}">
                    @csrf
                    <input type="hidden" name="field" value="chatbot">
                    <button type="submit" class="btn btn-secondary w-100" style="justify-content:center;">
                        {{ $kb->use_in_chatbot ? 'Keluarkan dari Chatbot' : 'Masukkan ke Chatbot' }}
                    </button>
                </form>
                @can('delete kb')
                <form method="POST" action="{{ route('kb.destroy', $kb) }}"
                      onsubmit="return confirm('Hapus knowledge base ini permanen?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-danger w-100" style="justify-content:center;">
                        Hapus Permanen
                    </button>
                </form>
                @endcan
            </div>
        </div>

    </div>
</div>

@endsection