@extends('layouts.dash')
@section('title', $service->exists ? 'Edit API' : 'Add New API')
@section('content')
@php
$icons = ['fa-plug','fa-gamepad','fa-id-card','fa-mobile-screen','fa-money-bill-transfer','fa-user-check','fa-image','fa-message','fa-location-dot','fa-wallet','fa-shield-halved','fa-bolt','fa-robot','fa-credit-card','fa-qrcode'];
$pRows = $service->exists ? $service->paramList() : [];
$hdrLines = implode("\n", $service->headerList());
$exampleParams = $service->docs_example_params ?? [];
@endphp
<div class="page-head">
  <div><h1>{{ $service->exists ? 'Edit API' : 'Add New API' }}</h1><p>Connect any provider API in 1 minute — docs auto-generate code samples.</p></div>
  <div class="flex gap">
    @if($service->exists)<a class="btn btn-primary btn-sm" href="{{ route('admin.services.pricing', $service) }}"><i class="fa-solid fa-tags"></i>Price Management</a>@endif
    @if($service->exists)<a class="btn btn-ghost btn-sm" href="{{ route('admin.services.test', $service) }}"><i class="fa-solid fa-flask-vial"></i>Test</a>@endif
    <a class="btn btn-outline btn-sm" href="{{ route('admin.services') }}"><i class="fa-solid fa-arrow-left"></i>Back</a>
  </div>
</div>
<div class="alert alert-info"><i class="fa-solid fa-circle-info"></i><div><b>Provider URL template:</b> use <span class="mono">{param_name}</span> for user inputs and <span class="mono">{provider_key}</span> for the key. Example:<br><span class="mono">https://provider.com/api?uid={uid}&amp;key={provider_key}</span><br>Public endpoint becomes: <span class="mono">{{ url('/api') }}/<b>slug</b>?api_key=KEY&amp;...</span> — Docs auto-generate cURL/PHP/JS/Python/Node samples from your params & examples.</div></div>
<form method="POST" id="svcForm" action="{{ $service->exists ? route('admin.services.update', $service) : route('admin.services.store') }}">
@csrf
@if($service->exists) @method('PATCH') @endif
<div class="grid-2">
  <div class="card">
    <div class="card-title"><i class="fa-solid fa-circle-info"></i>Basic Info</div>
    <div class="form-group"><label>API Name <span class="req">*</span></label><input type="text" name="name" id="svcName" class="form-control" required value="{{ old('name', $service->name) }}" placeholder="e.g. Free Fire UID Check"></div>
    <div class="form-row">
      <div class="form-group"><label>Slug <span class="req">*</span></label><input type="text" name="slug" id="svcSlug" class="form-control mono" required value="{{ old('slug', $service->slug) }}" placeholder="ff-uid"><div class="form-hint">Endpoint: /api/<b>slug</b></div></div>
      <div class="form-group"><label>Icon</label><input type="text" name="icon" class="form-control mono" list="iconList" value="{{ old('icon', $service->icon ?? 'fa-plug') }}"><datalist id="iconList">@foreach($icons as $ic)<option value="{{ $ic }}">@endforeach</datalist></div>
    </div>
    <div class="form-group"><label>Short API Description</label><textarea name="description" class="form-control" style="min-height:70px" maxlength="255" placeholder="What does this API return and who is it for?">{{ old('description', $service->description) }}</textarea><div class="form-hint">This appears on API cards, the homepage, and the documentation header.</div></div>
    <div class="form-group"><label>Supported Use Cases / কাজের কারণ</label><textarea name="docs_use_cases" class="form-control" style="min-height:120px" placeholder="One supported use case per line&#10;• Check player name and account status from a UID&#10;• Validate a UID before top-up or account support&#10;• Show player information inside your own dashboard">{{ old('docs_use_cases', $service->docs_use_cases ?? '') }}</textarea><div class="form-hint">Write one reason/use case per line. These will appear as a clear “What this API can do” list in public docs.</div></div>
    <div class="form-row">
      <div class="form-group"><label>Credits / Hit <span class="req">*</span></label><input type="number" name="credits_per_hit" class="form-control" min="1" value="{{ old('credits_per_hit', $service->credits_per_hit ?? 1) }}"></div>
      <div class="form-group"><label>Price / Credit <span class="req">*</span></label><input type="number" name="credit_price" class="form-control" min="0.01" step="0.01" value="{{ old('credit_price', $service->credit_price ?? setting('credit_price_default',1)) }}"><div class="form-hint">Users can buy any quantity at this price.</div></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label>Free Quota (new keys)</label><input type="number" name="free_quota" class="form-control" min="0" value="{{ old('free_quota', $service->free_quota ?? 25) }}"></div>
      <div></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label>Status</label><select name="status" class="form-control"><option value="active" {{ old('status', $service->status ?? 'active') === 'active' ? 'selected' : '' }}>Active</option><option value="inactive" {{ old('status', $service->status) === 'inactive' ? 'selected' : '' }}>Inactive</option></select></div>
      <div class="form-group"><label>Sort Order</label><input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', $service->sort_order ?? 0) }}"></div>
    </div>
    <label class="checkbox-row"><input type="checkbox" name="show_on_home" value="1" {{ old('show_on_home', $service->show_on_home ?? true) ? 'checked' : '' }}> Show on homepage</label>
  </div>
  <div class="card api-connector-card">
    <div class="flex between center wrap-x gap"><div class="card-title" style="margin:0"><i class="fa-solid fa-plug-circle-bolt"></i>External API / File Manager Connection</div>@if($service->exists)<a class="btn btn-outline btn-xs" href="{{ route('admin.services.test', $service) }}"><i class="fa-solid fa-flask-vial"></i>Test Connection</a>@endif</div>
    <p class="card-sub">Connect this public API to a separate file-manager API file, subdomain endpoint, or any external provider. Each API keeps its own connection profile.</p>
    <div class="form-group"><label>Connection Source <span class="req">*</span></label><select name="provider_source" class="form-control"><option value="file_manager" {{ old('provider_source', $service->provider_source ?? 'external_api') === 'file_manager' ? 'selected' : '' }}>File Manager API file</option><option value="subdomain" {{ old('provider_source', $service->provider_source ?? 'external_api') === 'subdomain' ? 'selected' : '' }}>Subdomain API</option><option value="external_api" {{ old('provider_source', $service->provider_source ?? 'external_api') === 'external_api' ? 'selected' : '' }}>External API provider</option></select><div class="form-hint">This label is saved with the API so you can identify where the endpoint is hosted. It does not change your existing public /api/slug URL.</div></div>
    <div class="form-group"><label>Remote API File / Endpoint URL <span class="req">*</span></label><textarea name="provider_url" class="form-control mono" style="min-height:80px" required placeholder="https://files.example.com/api/ff-uid.php?uid={uid}&key={provider_key}">{{ old('provider_url', $service->provider_url) }}</textarea><div class="form-hint">Examples: <span class="mono">https://panel.example.com/api/uid.php?uid={uid}</span> or <span class="mono">https://api.example.com/v1/player/{uid}</span>. Use <span class="mono">{param_name}</span> and <span class="mono">{provider_key}</span> placeholders.</div></div>
    <div class="form-row">
      <div class="form-group"><label>HTTP Method</label><select name="method" class="form-control"><option {{ old('method', $service->method ?? 'GET') === 'GET' ? 'selected' : '' }}>GET</option><option {{ old('method', $service->method) === 'POST' ? 'selected' : '' }}>POST</option></select></div>
      <div class="form-group"><label>Provider Key (optional)</label><input type="text" name="provider_key" class="form-control mono" value="{{ old('provider_key', $service->provider_key) }}" placeholder="overrides global key"></div>
    </div>
    <div class="form-group"><label>Custom Headers (one per line)</label><textarea name="headers" class="form-control mono" style="min-height:64px" placeholder="Authorization: Bearer {provider_key}">{{ old('headers', $hdrLines) }}</textarea></div>
    <div class="form-group"><label>Sample Response (JSON)</label><textarea name="sample_response" class="form-control mono" style="min-height:90px">{{ old('sample_response', $service->sample_response) }}</textarea></div>
  </div>
</div>

<div class="card mt">
  <div class="card-title"><i class="fa-solid fa-book"></i>Documentation — Marketplace-Style</div>
  <p class="card-sub">Rich docs shown on API page & docs. Code samples auto-generate from params + examples — no need to hand-write.</p>
  <div class="form-group"><label>Docs — Markdown / Rich Text</label><textarea name="docs_markdown" class="form-control" style="min-height:110px" placeholder="Explain what this API does, auth, response format, tips... Markdown supported ( **bold**, `code` , - list )">{{ old('docs_markdown', $service->docs_markdown ?? $service->docs_text) }}</textarea><div class="form-hint">Shown on service page & docs. Supports markdown-like: **bold**, `code`, line breaks. Auto code samples appear below.</div></div>
  <div class="form-row">
    <div class="form-group"><label>Rate Limit Info (shown on docs)</label><input type="text" name="docs_rate_limit" class="form-control" value="{{ old('docs_rate_limit', $service->docs_rate_limit ?? (setting('api_rate_limit',60).' req/min per key')) }}" placeholder="e.g. 60 req/min per key, 2 credit/hit"></div>
    <div class="form-group"><label>Legacy Docs Text (fallback)</label><textarea name="docs_text" class="form-control" style="min-height:60px">{{ old('docs_text', $service->docs_text) }}</textarea></div>
  </div>
  <div class="form-group"><label>Error Codes</label><textarea name="docs_error_codes" class="form-control mono" style="min-height:90px" placeholder="One per line: code|message|description OR JSON array">{{ old('docs_error_codes', is_array($service->docs_error_codes) ? json_encode($service->docs_error_codes, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE) : $service->docs_error_codes) }}</textarea><div class="form-hint">Example: <span class="mono">401|Invalid API key|The X-API-KEY header is missing</span> or JSON array. Defaults auto-filled if empty.</div></div>
</div>

<div class="card mt">
  <div class="flex between center wrap-x"><div class="card-title" style="margin:0"><i class="fa-solid fa-list-check"></i>Input Parameters</div><button type="button" class="btn btn-ghost btn-sm" onclick="addParam()"><i class="fa-solid fa-plus"></i>Add Param</button></div>
  <p class="card-sub">These become <span class="mono">{name}</span> placeholders + docs table + test fields + code sample values. Add an <b>Example value</b> per param — code samples use it.</p>
  <div id="paramList"></div>
</div>
<div class="flex gap mt">
  <button class="btn btn-primary btn-lg" type="submit" style="flex:1"><i class="fa-solid fa-check"></i>{{ $service->exists ? 'Save Changes' : 'Create API' }}</button>
  <a class="btn btn-outline btn-lg" href="{{ route('admin.services') }}">Cancel</a>
</div>
</form>
@push('scripts')
<script>
var existing = @json($pRows);
var examples = @json($exampleParams);
function addParam(d) {
  d = d || { name: '', label: '', required: 1, placeholder: '', example: '' };
  // example fallback
  if (!d.example && d.placeholder) d.example = d.placeholder;
  if (!d.example && examples[d.name]) d.example = examples[d.name];
  var box = document.getElementById('paramList');
  var row = document.createElement('div');
  row.className = 'param-row';
  row.style.display='grid';
  row.style.gridTemplateColumns='1fr 1fr auto auto';
  row.style.gap='8px';
  row.style.alignItems='center';
  row.style.marginBottom='8px';
  row.innerHTML =
    '<input type="text" name="p_name[]" class="form-control mono" placeholder="name (e.g. uid)" value="' + esc(d.name) + '">' +
    '<input type="text" name="p_label[]" class="form-control" placeholder="Label (e.g. Player UID)" value="' + esc(d.label) + '">' +
    '<label class="checkbox-row" style="font-size:13px;margin:0"><input type="checkbox" value="1"' + (d.required ? ' checked' : '') + '> Required</label>' +
    '<button type="button" class="btn btn-danger btn-xs" onclick="this.parentElement.remove()"><i class="fa-solid fa-trash"></i></button>' +
    '<input type="text" name="p_ph[]" class="form-control mono" placeholder="Placeholder" value="' + esc(d.placeholder) + '" style="grid-column:1/2">' +
    '<input type="text" name="p_example[]" class="form-control mono" placeholder="Example value for code samples" value="' + esc(d.example || d.placeholder || '') + '" style="grid-column:2/-1">';
  box.appendChild(row);
}
function esc(s) { return String(s == null ? '' : s).replace(/[&<>\"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', "'": '&#39;' }[c]; }); }
if (existing.length) {
  existing.forEach(function(p){
    p.example = examples[p.name] || p.placeholder || '';
    addParam(p);
  });
} else addParam();
document.getElementById('svcForm').addEventListener('submit', function () {
  document.querySelectorAll('#paramList .param-row').forEach(function (row, i) {
    var cb = row.querySelector('input[type="checkbox"]');
    if (cb) cb.name = 'p_req[' + i + ']';
  });
});
document.getElementById('svcName').addEventListener('input', function () {
  @if($service->exists) return; @endif
  document.getElementById('svcSlug').value = this.value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
});
</script>
@endpush
@endsection