@extends('layout.admin')

@section('title', 'GraphQL Read-Only')

@section('content')
@php
    $knowledgeCount = count($knowledgeDefinitions);
    $lookupCount = count($lookupDefinitions);
@endphp

<div class="container-fluid py-4">
    <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap mb-4">
        <div>
            <h4 class="fw-bold mb-1">GraphQL Read-Only Endpoint</h4>
            <div class="text-muted small">
                এই endpoint শুধু allow-listed query চালায়। mutation, subscription, introspection, password, token, secret, internal note type data বন্ধ রাখা হয়েছে।
            </div>
        </div>
        <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary">
            <i class="fa-solid fa-arrow-left me-1"></i> Dashboard
        </a>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="text-uppercase text-muted small fw-bold mb-2">Endpoint URL</div>
                    <div class="input-group">
                        <input type="text" class="form-control fw-semibold" value="{{ $endpointUrl }}" readonly>
                        <button type="button" class="btn btn-dark" data-copy="{{ $endpointUrl }}">Copy</button>
                    </div>
                    <div class="mt-3 small text-muted">
                        Method: <span class="fw-bold text-dark">POST</span>,
                        Content-Type: <span class="fw-bold text-dark">application/json</span>,
                        Result shape: <span class="fw-bold text-dark">{"data": {"queryName": ...}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="row text-center g-3">
                        <div class="col-6">
                            <div class="rounded border bg-light p-3">
                                <div class="display-6 fw-black">{{ $knowledgeCount }}</div>
                                <div class="small text-muted fw-semibold">Knowledge Sync</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="rounded border bg-light p-3">
                                <div class="display-6 fw-black">{{ $lookupCount }}</div>
                                <div class="small text-muted fw-semibold">Lookup Forms</div>
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-warning small mt-3 mb-0">
                        Endpoint URL admin page URL নয়। AI/Data Sources-এ exact API URL হিসেবে উপরের URL ব্যবহার করবেন।
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <h5 class="fw-bold mb-3">Usage Rules</h5>
            <div class="row g-3 small">
                <div class="col-md-6">
                    <div class="border rounded p-3 h-100">
                        <div class="fw-bold mb-1">Knowledge Sync</div>
                        <div class="text-muted">
                            General website info, product/course/service list, policy-type content, dashboard module summary এগুলো identifier ছাড়াই AI knowledge import করার জন্য।
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="border rounded p-3 h-100">
                        <div class="fw-bold mb-1">Lookup Forms</div>
                        <div class="text-muted">
                            Order, recharge, withdraw, payment, user, submission, claim, vendor, finance sheet ইত্যাদির জন্য আলাদা variable/query/result path ব্যবহার করবেন।
                        </div>
                    </div>
                </div>
            </div>
            <pre class="mt-3 mb-0 rounded bg-dark text-white p-3 small"><code>{
  "query": "query LookupRecharge($rechargeIdentifier: String!) { lookupRecharge(rechargeIdentifier: $rechargeIdentifier) { id status amount } }",
  "variables": {
    "rechargeIdentifier": "TRX-1001"
  }
}</code></pre>
        </div>
    </div>

    <div class="mb-4">
        <h5 class="fw-bold mb-3">Data Sources → GraphQL Knowledge Sync</h5>
        <div class="row g-3">
            @foreach($knowledgeDefinitions as $operation => $definition)
                @include('admin.graphql_read_only.partials.definition-card', [
                    'operation' => $operation,
                    'definition' => $definition,
                    'endpointUrl' => $endpointUrl,
                ])
            @endforeach
        </div>
    </div>

    <div>
        <h5 class="fw-bold mb-3">Lookup Forms</h5>
        <div class="row g-3">
            @foreach($lookupDefinitions as $operation => $definition)
                @include('admin.graphql_read_only.partials.definition-card', [
                    'operation' => $operation,
                    'definition' => $definition,
                    'endpointUrl' => $endpointUrl,
                ])
            @endforeach
        </div>
    </div>
</div>

@push('scripts')
<script>
  document.addEventListener('click', function (event) {
    const btn = event.target.closest('[data-copy]');
    if (!btn) return;

    navigator.clipboard?.writeText(btn.getAttribute('data-copy') || '').then(function () {
      const oldText = btn.textContent;
      btn.textContent = 'Copied';
      setTimeout(function () { btn.textContent = oldText; }, 1200);
    });
  });
</script>
@endpush
@endsection
