@extends('layouts.app')

@section('title', __('Knowledge assistant'))
@section('meta_description', __('Ask structured theological questions and browse related topics—answered from local references only.'))

@push('styles')
<style>
    .ka-shell {
        max-width: 820px;
        margin: 0 auto;
    }
    .ka-hero {
        border-radius: 16px;
        padding: 1.75rem 1.5rem;
        background: linear-gradient(135deg, var(--theme-primary) 0%, #24455f 100%);
        color: #fff;
        box-shadow: 0 12px 28px rgba(47, 95, 128, 0.35);
    }
    .ka-hero h1 {
        font-size: 1.65rem;
        font-weight: 600;
        margin-bottom: 0.35rem;
    }
    .ka-panel {
        border-radius: 14px;
        background: #fff;
        padding: 1.35rem 1.25rem;
        box-shadow: 0 4px 18px rgba(28, 39, 51, 0.08);
        margin-top: -2rem;
        position: relative;
    }
    .ka-input-wrap .input-group-lg .form-control {
        border: 1px solid rgba(47, 95, 128, 0.25);
    }
    .ka-input-wrap .input-group-lg .form-control:focus {
        z-index: 3;
    }
    .ka-highlight {
        background: linear-gradient(transparent 60%, rgba(224, 180, 84, 0.45) 60%);
        padding: 0 0.1em;
    }
    .ka-answer-body {
        font-size: 1.02rem;
    }
    .ka-tag {
        font-weight: 500;
        margin: 0.15rem 0.35rem 0.15rem 0;
    }
    .ka-similar-list .ka-similar-item,
    .ka-dym-item,
    .ka-rel-item {
        cursor: pointer;
    }
    #ka-status {
        min-height: 1.25rem;
    }
</style>
@endpush

@section('content')
<div class="container">
    <div class="ka-shell">
        <div class="ka-hero mb-5">
            <h1>{{ __('Knowledge assistant') }}</h1>
            <p class="mb-0 opacity-90">{{ __('Ask a theological question. Answers come from curated local references only.') }}</p>
        </div>

        <div
            id="ka-root"
            class="ka-panel"
            data-json-url="{{ $knowledgeJsonUrl }}"
            data-str-did-you-mean="{{ __('Did you mean?') }}"
            data-str-similar="{{ __('Similar questions') }}"
            data-str-related-questions="{{ __('Related questions') }}"
            data-str-related-topics-label="{{ __('Related topics') }}"
            data-str-type-question="{{ __('Type a question to search the knowledge base.') }}"
            data-str-empty="{{ __('Try keywords such as “Trinity”, “grace”, or “resurrection.”') }}"
            data-str-load-error="{{ __('Could not load the knowledge base. Please try again later.') }}"
            data-str-no-strong-match="{{ __('No close match was found. Try the suggestions below or rephrase your question.') }}"
            data-str-press-send="{{ __('Press Send to search.') }}"
            data-str-closest-match="{{ __('Closest match — this may not be the exact question you typed, but it matched your words best.') }}"
            data-str-source-label="{{ __('Source') }}"
            data-str-default-source="{{ __('Site knowledge base') }}"
            data-str-general-category="{{ __('General') }}"
            data-str-kb-loading="{{ __('Still loading the knowledge base. Wait a second, then press Send again.') }}"
        >
            <form id="ka-form" class="ka-input-wrap mb-3" action="#" novalidate>
                <label for="ka-input" class="form-label visually-hidden">{{ __('Your question') }}</label>
                <div class="input-group input-group-lg">
                    <input
                        id="ka-input"
                        type="search"
                        name="q"
                        class="form-control"
                        autocomplete="off"
                        placeholder="{{ __('e.g. What is the Trinity?') }}"
                        aria-describedby="ka-status"
                    >
                    <button type="submit" class="btn btn-primary px-4" id="ka-send">{{ __('Send') }}</button>
                </div>
            </form>
            <p id="ka-status" class="small text-muted mb-3"></p>
            <div id="ka-primary"></div>
            <div id="ka-did-you-mean"></div>
            <div id="ka-similar"></div>
            <div id="ka-related"></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/knowledge-assistant.js') }}"></script>
@endpush