@extends('frontend.main_master')

@section('title', $title)
@section('meta_description', $meta_description)
@section('meta_keywords', $meta_keywords)
@section('og_title', $og_title)
@section('og_description', $og_description)

@push('styles')
    <link rel="stylesheet" href="{{ asset('frontend/css/api-products/api-products.css') }}">
@endpush

@section('content')
    <div class="api-page">
        <section class="api-hero api-hero--compact">
            <div class="container text-center">
                <span class="api-pill">
                    <i class="fa-solid fa-book" aria-hidden="true"></i> {{ t('api-docs-title') }}
                </span>
                <h1 class="api-hero__title mt-3 mb-3">{{ t('api-docs-' . $activePage . '-title') }}</h1>
                <p class="api-hero__subtitle mx-auto mb-0" style="max-width: 720px;">
                    {{ t('api-docs-' . $activePage . '-meta-description') }}
                </p>
            </div>
        </section>

        @include('frontend.api_products.partials.subnav')

        <section class="api-section">
            <div class="container">
                <div class="row g-4">
                    <div class="col-lg-3">
                        <nav class="api-docs-side" aria-label="{{ t('api-docs-nav-title') }}">
                            <h2 class="api-docs-side__title">{{ t('api-docs-nav-title') }}</h2>
                            <ul class="api-docs-side__list">
                                @foreach ($docsNav as $item)
                                    <li>
                                        <a href="{{ $item['url'] }}"
                                            class="api-docs-side__link {{ $item['active'] ? 'is-active' : '' }}"
                                            @if ($item['active']) aria-current="page" @endif>
                                            {{ $item['label'] }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </nav>
                    </div>

                    <div class="col-lg-9">
                        <article class="api-docs-body">
                            @if ($activePage === 'intro')
                                <p class="api-docs-lead">{{ t('api-docs-intro-lead') }}</p>

                                <div class="api-endpoint-box mb-4">
                                    <div class="api-endpoint-box__row">
                                        <span class="api-endpoint-box__label">{{ t('api-docs-intro-base-url-label') }}</span>
                                        <code>{{ $baseUrl }}</code>
                                    </div>
                                    <div class="api-endpoint-box__row">
                                        <span class="api-endpoint-box__label">{{ t('api-docs-intro-format-label') }}</span>
                                        <code>application/json; charset=utf-8</code>
                                    </div>
                                </div>

                                <h2 class="api-docs-h2">{{ t('api-docs-intro-steps-title') }}</h2>
                                <ol class="api-steps">
                                    @foreach (range(1, 4) as $i)
                                        <li>
                                            <strong>{{ t('api-docs-intro-step-' . $i . '-title') }}</strong>
                                            <span>{{ str_replace(':host', $panelHost, t('api-docs-intro-step-' . $i . '-text')) }}</span>
                                        </li>
                                    @endforeach
                                </ol>

                                <h2 class="api-docs-h2">{{ t('api-docs-intro-request-title') }}</h2>
                                <p>{{ t('api-docs-intro-request-text') }}</p>
<pre class="api-code api-code--light"><code>curl -X POST {{ $baseUrl }}/chart/natal \
  -H "Authorization: Bearer ab_live_xxxxxxxxxxxxxxxxxxxxxxxx" \
  -H "Content-Type: application/json" \
  -d '{
    "date": "1990-04-12",
    "time": "08:35",
    "lat": 41.0082,
    "lng": 28.9784,
    "timezone": "Europe/Istanbul"
  }'</code></pre>

                                <h2 class="api-docs-h2">{{ t('api-docs-intro-response-title') }}</h2>
                                <p>{{ t('api-docs-intro-response-text') }}</p>
<pre class="api-code api-code--light"><code>{
  "success": true,
  "data": {
    "chart_type": "natal",
    "chart_key": "natal",
    "title": "Doğum Haritası (Natal)",
    "png_data_uri": "data:image/png;base64,iVBORw0KGgo..."
  },
  "meta": { "request_id": "5a1f2b3c-...", "credits_charged": 1, "credits_remaining": 97, "quota_remaining": 1000 }
}</code></pre>
                                <p class="api-docs-lead" style="font-size: 0.94rem;">{{ t('api-docs-intro-image-note') }}</p>
                                <p class="small text-muted">
                                    <a href="{{ route('api-services.docs', ['page' => app()->getLocale() === 'en' ? 'endpoint-reference' : 'endpoint-referansi']) }}#endpoint-chart-natal">
                                        {{ t('api-docs-intro-full-example-link') }}
                                    </a>
                                </p>
                            @elseif ($activePage === 'authentication')
                                <p class="api-docs-lead">{{ t('api-docs-authentication-lead') }}</p>

                                <h2 class="api-docs-h2">{{ t('api-docs-auth-header-title') }}</h2>
                                <p>{{ t('api-docs-auth-header-text') }}</p>
<pre class="api-code api-code--light"><code>Authorization: Bearer ab_live_xxxxxxxxxxxxxxxxxxxxxxxx</code></pre>

                                {{-- Anahtar yalnızca API müşteri panelinden (API paneli) alınır --}}
                                <div class="api-callout">
                                    <h2 class="api-callout__title">{{ t('api-docs-auth-panel-title') }}</h2>
                                    <p class="api-callout__text">
                                        {{ str_replace(':host', $panelHost, t('api-docs-auth-panel-text')) }}
                                    </p>
                                    <a href="{{ $panelUrl }}"
                                        class="btn btn-astro-gold btn-sm rounded-pill px-3 fw-semibold" rel="noopener">
                                        {{ t('api-pricing-cta-panel') }}
                                    </a>
                                </div>

                                <h2 class="api-docs-h2">{{ t('api-docs-auth-steps-title') }}</h2>
                                <ol class="api-steps">
                                    @foreach (range(1, 3) as $i)
                                        <li>
                                            <strong>{{ t('api-docs-auth-step-' . $i . '-title') }}</strong>
                                            <span>{{ t('api-docs-auth-step-' . $i . '-text') }}</span>
                                        </li>
                                    @endforeach
                                </ol>

                                <h2 class="api-docs-h2">{{ t('api-docs-auth-keyformat-title') }}</h2>
                                <p>{{ t('api-docs-auth-keyformat-text') }}</p>

                                <div class="api-callout api-callout--warning">
                                    <h3 class="api-callout__title">{{ t('api-docs-auth-security-title') }}</h3>
                                    <p class="api-callout__text mb-0">{{ t('api-docs-auth-security-text') }}</p>
                                </div>

                                <h2 class="api-docs-h2">{{ t('api-docs-auth-ratelimit-title') }}</h2>
                                <p>{{ t('api-docs-auth-ratelimit-text') }}</p>
<pre class="api-code api-code--light"><code>X-RateLimit-Limit: 60
X-RateLimit-Remaining: 58
Retry-After: 24</code></pre>
                            @elseif ($activePage === 'errors')
                                <p class="api-docs-lead">{{ t('api-docs-errors-lead') }}</p>

                                <h2 class="api-docs-h2">{{ t('api-docs-errors-shape-title') }}</h2>
                                <p>{{ t('api-docs-errors-shape-text') }}</p>
<pre class="api-code api-code--light"><code>{
  "success": false,
  "error": {
    "code": "insufficient_credits",
    "message": "Kredi bakiyeniz bu istek için yeterli değil.",
    "details": { "required": 20, "balance": 4 }
  }
}</code></pre>

                                <h2 class="api-docs-h2">{{ t('api-docs-errors-table-title') }}</h2>
                                <div class="table-responsive">
                                    <table class="table api-table align-middle">
                                        <thead>
                                            <tr>
                                                <th scope="col">{{ t('api-docs-errors-th-status') }}</th>
                                                <th scope="col">{{ t('api-docs-errors-th-code') }}</th>
                                                <th scope="col">{{ t('api-docs-errors-th-desc') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($errorCodes as $status => $code)
                                                <tr>
                                                    <td><span class="api-status api-status--{{ $status < 500 ? 'client' : 'server' }}">{{ $status }}</span></td>
                                                    <td><code>{{ $code }}</code></td>
                                                    <td>{{ t('api-docs-error-' . $status . '-desc') }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <div class="api-callout">
                                    <h3 class="api-callout__title">{{ t('api-docs-errors-retry-title') }}</h3>
                                    <p class="api-callout__text mb-0">{{ t('api-docs-errors-retry-text') }}</p>
                                </div>
                            @else
                                <p class="api-docs-lead">{{ t('api-docs-endpoints-lead') }}</p>

                                @foreach ($groups as $group)
                                    <h2 class="api-docs-h2" id="endpoints-{{ $group['key'] }}">
                                        <i class="{{ $group['icon'] }} me-2" aria-hidden="true"></i>
                                        {{ t('api-group-' . $group['key'] . '-name') }}
                                    </h2>
                                    <p>{{ t('api-group-' . $group['key'] . '-desc') }}</p>

                                    @if ($group['key'] === \App\Services\ApiPlatform\ApiCatalog::GROUP_AI)
                                        {{-- Rapor üretimi dakikalar sürer: 202 + report_id ile sonradan çekme akışı --}}
                                        <div class="api-callout mb-3">
                                            <h3 class="api-callout__title">{{ t('api-docs-ai-async-title') }}</h3>
                                            <p class="api-callout__text mb-0">{{ t('api-docs-ai-async-text') }}</p>
                                        </div>
                                    @endif

                                    <div class="table-responsive mb-3">
                                        <table class="table api-table align-middle">
                                            <thead>
                                                <tr>
                                                    <th scope="col">{{ t('api-docs-endpoints-th-endpoint') }}</th>
                                                    <th scope="col">{{ t('api-docs-endpoints-th-name') }}</th>
                                                    <th scope="col" class="text-nowrap">{{ t('api-docs-endpoints-th-credits') }}</th>
                                                    <th scope="col" class="text-nowrap">{{ t('api-docs-endpoints-th-cache') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($group['skus'] as $sku)
                                                    <tr>
                                                        <td>
                                                            <a href="#endpoint-{{ str_replace('.', '-', $sku['sku']) }}" class="api-endpoint-link">
                                                                <code class="api-endpoint">
                                                                    <span class="api-method api-method--{{ strtolower($sku['method']) }}">{{ $sku['method'] }}</span>
                                                                    {{ $sku['path'] }}
                                                                </code>
                                                            </a>
                                                        </td>
                                                        <td>
                                                            <strong>{{ t($sku['name_key']) }}</strong>
                                                            <span class="d-block small text-muted">{{ t($sku['description_key']) }}</span>
                                                        </td>
                                                        <td class="text-nowrap">
                                                            @if ($sku['credits'] > 0)
                                                                {{ $sku['credits'] }}
                                                            @else
                                                                <span class="api-tag">{{ t('api-services-free-label') }}</span>
                                                            @endif
                                                        </td>
                                                        <td class="text-nowrap">
                                                            {{ $sku['cacheable'] ? t('api-docs-endpoints-cache-yes') : t('api-docs-endpoints-cache-no') }}
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="accordion api-accordion mb-4" id="apiEndpointsAccordion-{{ $group['key'] }}">
                                        @foreach ($group['skus'] as $sku)
                                            @php $domId = str_replace('.', '-', $sku['sku']); @endphp
                                            <div class="accordion-item" id="endpoint-{{ $domId }}">
                                                <h3 class="accordion-header">
                                                    <button class="accordion-button collapsed" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#collapse-{{ $domId }}"
                                                        aria-expanded="false" aria-controls="collapse-{{ $domId }}">
                                                        <span class="api-method api-method--{{ strtolower($sku['method']) }} me-2">{{ $sku['method'] }}</span>
                                                        <code class="me-2">{{ $sku['path'] }}</code>
                                                        <span class="text-muted small">{{ t('api-docs-endpoints-details-toggle') }}</span>
                                                    </button>
                                                </h3>
                                                <div id="collapse-{{ $domId }}" class="accordion-collapse collapse"
                                                    data-bs-parent="#apiEndpointsAccordion-{{ $group['key'] }}">
                                                    <div class="accordion-body">
                                                        <h4 class="api-docs-h4">{{ t('api-docs-endpoints-params-title') }}</h4>
                                                        @if (count($sku['params']) > 0)
                                                            <div class="table-responsive mb-3">
                                                                <table class="table api-table api-table--params align-middle">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">{{ t('api-docs-endpoints-param-th-field') }}</th>
                                                                            <th scope="col">{{ t('api-docs-endpoints-param-th-type') }}</th>
                                                                            <th scope="col">{{ t('api-docs-endpoints-param-th-required') }}</th>
                                                                            <th scope="col">{{ t('api-docs-endpoints-param-th-desc') }}</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($sku['params'] as $param)
                                                                            <tr>
                                                                                <td><code>{{ $param['name'] }}</code></td>
                                                                                <td class="text-nowrap">{{ $param['type'] }}</td>
                                                                                <td class="text-nowrap">
                                                                                    @if ($param['required'])
                                                                                        <span class="api-tag api-tag--required">{{ t('api-docs-endpoints-required-yes') }}</span>
                                                                                    @else
                                                                                        <span class="text-muted">{{ t('api-docs-endpoints-required-no') }}</span>
                                                                                    @endif
                                                                                </td>
                                                                                <td>
                                                                                    {{ $param['description'] }}
                                                                                    @if ($param['notes'] !== '')
                                                                                        <span class="d-block small text-muted">{{ $param['notes'] }}</span>
                                                                                    @endif
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        @else
                                                            <p class="small text-muted">{{ t('api-docs-endpoints-no-params') }}</p>
                                                        @endif

                                                        <h4 class="api-docs-h4">{{ t('api-docs-endpoints-request-title') }}</h4>
                                                        <pre class="api-code api-code--light"><code>{{ $sku['curl'] }}</code></pre>

                                                        <h4 class="api-docs-h4">{{ t('api-docs-endpoints-response-title') }}</h4>
                                                        @if (!empty($sku['example_image_url']))
                                                            <div class="api-callout mb-3">
                                                                <p class="api-callout__text mb-0">{{ t('api-docs-endpoints-image-in-data-note') }}</p>
                                                            </div>
                                                        @endif
                                                        @if ($sku['example'] !== null)
                                                            <pre class="api-code api-code--light api-code--scroll"><code>{{ json_encode($sku['example'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</code></pre>
                                                            <p class="small text-muted mb-1">{{ t('api-docs-endpoints-response-note') }}</p>
                                                        @endif
                                                        @if (!empty($sku['example_download_url']))
                                                            <a href="{{ $sku['example_download_url'] }}" target="_blank" rel="noopener" class="small">
                                                                <i class="fa-solid fa-download me-1" aria-hidden="true"></i>{{ t('api-docs-endpoints-response-download') }}
                                                            </a>
                                                        @endif

                                                        @if (!empty($sku['example_image_url']))
                                                            <h4 class="api-docs-h4">{{ t('api-docs-endpoints-image-title') }}</h4>
                                                            <img src="{{ $sku['example_image_url'] }}" alt="{{ t($sku['name_key']) }}"
                                                                class="api-docs-example-image mb-3" loading="lazy">
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endforeach
                            @endif

                            <div class="api-docs-footer">
                                <a href="{{ $panelUrl }}" class="btn btn-astro-gold rounded-pill px-4 fw-semibold"
                                    rel="noopener">
                                    {{ t('api-pricing-cta-panel') }}
                                </a>
                                <a href="{{ route('api-services.pricing') }}"
                                    class="btn btn-outline-astro-wood rounded-pill px-4 fw-semibold">
                                    {{ t('api-docs-footer-pricing-cta') }}
                                </a>
                                <a href="{{ route('api-services.mcp') }}" class="btn btn-outline-astro-wood rounded-pill px-4 fw-semibold">
                                    {{ t('api-docs-footer-mcp-cta') }}
                                </a>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection