@extends('admin.layouts.app')

@section('title', 'RAG Index')

@section('breadcrumb')
<a href="{{ route('admin.ai.index') }}">AI Intelligence</a>
<span class="separator">/</span>
<span>RAG Index</span>
@endsection

@section('content')
<div style="padding: 24px;" x-data="ragManager()">

    @include('admin.ai._tabs')

    {{-- Header --}}
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
        <div>
            <h1 style="font-size:20px; font-weight:600; color:var(--vsc-text-active); margin-bottom:4px;">RAG Vector Index</h1>
            <p style="font-size:13px; color:var(--vsc-text-secondary);">Manage regulation embeddings for natural language queries</p>
        </div>
    </div>

    {{-- Stats --}}
    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin-bottom:24px;">
        <div class="stat-card">
            <div class="stat-value">{{ number_format($stats['total'] ?? 0) }}</div>
            <div class="stat-label">Total Embeddings</div>
        </div>
        @foreach(($stats['by_source'] ?? []) as $source => $count)
        <div class="stat-card">
            <div class="stat-value">{{ number_format($count) }}</div>
            <div class="stat-label">{{ ucfirst(str_replace('_', ' ', $source)) }}</div>
        </div>
        @endforeach
    </div>

    {{-- By State --}}
    @if(!empty($stats['by_state']))
    <div class="data-card" style="margin-bottom:24px;">
        <div class="data-card-header">
            <h3>Embeddings by State</h3>
        </div>
        <div class="data-card-body">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>State</th>
                        <th>Embeddings</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($stats['by_state'] as $state)
                    <tr>
                        <td>{{ $state->state?->name ?? 'Unknown' }}</td>
                        <td>{{ number_format($state->total) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    {{-- Rebuild Controls --}}
    <div class="data-card">
        <div class="data-card-header">
            <h3>Rebuild Index</h3>
        </div>
        <div class="data-card-body">
            <p style="font-size:13px; color:var(--vsc-text-secondary); margin-bottom:16px;">
                Re-embed regulation documents and zone rules into the vector store. This calls the OpenAI Embeddings API.
            </p>

            <div style="display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;">
                <div>
                    <label class="form-label">Scope</label>
                    <select class="form-control" x-model="rebuildType" style="width:200px;">
                        <option value="all">All (Documents + Rules)</option>
                        <option value="documents">Documents Only</option>
                        <option value="zone_rules">Zone Rules Only</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">State Filter (optional)</label>
                    <select class="form-control" x-model="rebuildState" style="width:200px;">
                        <option value="">All States</option>
                        @foreach($states as $state)
                            <option value="{{ $state->id }}">{{ $state->name }}</option>
                        @endforeach
                    </select>
                </div>
                <button class="btn btn-primary" @click="rebuild()" :disabled="rebuilding">
                    <span x-show="!rebuilding">
                        <i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Rebuild Index
                    </span>
                    <span x-show="rebuilding">Processing...</span>
                </button>
            </div>

            <div x-show="rebuildResult" x-text="rebuildResult"
                 style="margin-top:12px; padding:10px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); border-radius:6px; font-size:13px; color:#86efac;">
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
function ragManager() {
    return {
        rebuildType: 'all',
        rebuildState: '',
        rebuilding: false,
        rebuildResult: '',

        async rebuild() {
            this.rebuilding = true;
            this.rebuildResult = '';
            try {
                const res = await fetch('{{ route("admin.ai.rag.rebuild") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        type: this.rebuildType,
                        state_id: this.rebuildState || undefined,
                    })
                });
                const data = await res.json();
                this.rebuildResult = data.message || 'Done.';
            } catch(e) {
                this.rebuildResult = 'Error: ' + e.message;
            } finally {
                this.rebuilding = false;
            }
        }
    }
}
</script>
@endpush