<?= $this->extend('layouts/dashboard') ?>

<?= $this->section('content') ?>
<?php $languages = ['curl' => 'cURL', 'javascript' => 'JavaScript', 'python' => 'Python', 'php' => 'PHP', 'java' => 'Java']; ?>
<section class="grid gap-4 xl:grid-cols-[minmax(0,1.15fr)_380px]">
    <article class="rounded-[30px] border border-white/10 bg-gradient-to-br from-sky-500/18 via-slate-900 to-cyan-500/10 p-6 shadow-glow">
        <div class="inline-flex rounded-full border border-sky-400/30 bg-sky-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-sky-100"><?= esc(lang('Backoffice.apiAreaBadge')) ?></div>
        <h1 class="mt-4 text-3xl font-semibold tracking-tight text-white sm:text-4xl"><?= esc(lang('Backoffice.apiDocsHeading')) ?></h1>
        <p class="mt-4 max-w-3xl text-sm leading-7 text-slate-300"><?= esc(lang('Backoffice.apiDocsIntro')) ?></p>

        <div class="mt-6 rounded-3xl border border-cyan-400/20 bg-cyan-400/10 p-5">
            <div class="text-xs uppercase tracking-[0.22em] text-cyan-100"><?= esc(lang('Backoffice.apiCurlExample')) ?></div>
            <div class="mt-4 space-y-4">
                <div class="flex flex-wrap gap-2">
                    <?php foreach ($languages as $key => $label): ?>
                        <button type="button" class="code-tab rounded-full border border-white/10 bg-white/5 px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-300 transition hover:bg-white/10 <?= $key === 'curl' ? 'is-active border-cyan-400/30 bg-cyan-400/10 text-white' : '' ?>" data-target="hero" data-lang="<?= esc($key) ?>">
                            <?= esc($label) ?>
                        </button>
                    <?php endforeach; ?>
                </div>
                <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4">
                    <?php foreach ($languages as $key => $label): ?>
                        <pre class="code-panel overflow-x-auto text-xs text-white <?= $key === 'curl' ? '' : 'hidden' ?>" data-panel="hero" data-lang="<?= esc($key) ?>"><code><?= esc($privateExample[$key]) ?></code></pre>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </article>

    <article class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
        <h2 class="text-xl font-semibold text-white"><?= esc(lang('Backoffice.apiAuthentication')) ?></h2>
        <p class="mt-2 text-sm leading-7 text-slate-400"><?= esc(lang('Backoffice.apiAuthenticationIntro')) ?></p>
        <div class="mt-5 rounded-3xl border border-white/10 bg-slate-950/40 p-5">
            <div class="text-xs uppercase tracking-[0.22em] text-slate-500">Base URL</div>
            <div class="mt-2 break-all font-mono text-sm text-white"><?= esc($baseApiUrl) ?></div>
        </div>
        <div class="mt-4 rounded-3xl border border-white/10 bg-slate-950/40 p-5">
            <div class="text-xs uppercase tracking-[0.22em] text-slate-500">Headers</div>
            <ul class="mt-3 space-y-2 text-sm text-slate-300">
                <?php foreach ($privateHeaders as $header): ?>
                    <li class="rounded-2xl border border-white/10 bg-white/5 px-3 py-2 font-mono"><?= esc($header) ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
        <div class="mt-4 rounded-3xl border border-amber-300/20 bg-amber-300/10 p-5">
            <div class="text-xs uppercase tracking-[0.22em] text-amber-100"><?= esc(lang('Backoffice.apiMintNoticeTitle')) ?></div>
            <p class="mt-2 text-sm leading-7 text-slate-300"><?= esc(lang('Backoffice.apiMintNoticeBody')) ?></p>
        </div>
    </article>
</section>

<section class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
    <h2 class="text-xl font-semibold text-white"><?= esc(lang('Backoffice.apiOnboardingTitle')) ?></h2>
    <p class="mt-1 text-sm text-slate-400"><?= esc(lang('Backoffice.apiOnboardingIntro')) ?></p>

    <div class="mt-5 space-y-4">
        <?php foreach ($onboardingSteps as $index => $step): ?>
            <?php $panelId = 'onboarding-' . $index; ?>
            <article class="rounded-[28px] border border-white/10 bg-slate-950/40 p-5">
                <div class="flex flex-wrap items-center gap-3">
                    <span class="inline-flex rounded-full border border-sky-400/20 bg-sky-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-sky-100"><?= esc($step['method']) ?></span>
                    <span class="text-lg font-semibold text-white"><?= esc($step['title']) ?></span>
                </div>
                <div class="mt-3 font-mono text-sm text-slate-200"><?= esc($step['path']) ?></div>
                <p class="mt-3 text-sm leading-7 text-slate-400"><?= esc($step['summary']) ?></p>
                <div class="mt-4 flex flex-wrap gap-2">
                    <?php foreach ($languages as $key => $label): ?>
                        <button type="button" class="code-tab rounded-full border border-white/10 bg-slate-950/40 px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-300 transition hover:bg-white/10 <?= $key === 'curl' ? 'is-active border-cyan-400/30 bg-cyan-400/10 text-white' : '' ?>" data-target="<?= esc($panelId) ?>" data-lang="<?= esc($key) ?>">
                            <?= esc($label) ?>
                        </button>
                    <?php endforeach; ?>
                </div>
                <div class="mt-4 rounded-2xl border border-white/10 bg-slate-950/60 p-4">
                    <?php foreach ($languages as $key => $label): ?>
                        <pre class="code-panel overflow-x-auto text-xs text-slate-200 <?= $key === 'curl' ? '' : 'hidden' ?>" data-panel="<?= esc($panelId) ?>" data-lang="<?= esc($key) ?>"><code><?= esc($step['code_samples'][$key]) ?></code></pre>
                    <?php endforeach; ?>
                </div>
            </article>
        <?php endforeach; ?>
    </div>
</section>

<section class="grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]">
    <article class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
        <h2 class="text-xl font-semibold text-white"><?= esc(lang('Backoffice.apiScopesTitle')) ?></h2>
        <p class="mt-1 text-sm text-slate-400"><?= esc(lang('Backoffice.apiScopesIntro')) ?></p>
        <div class="mt-5 space-y-3">
            <?php foreach ($availableScopes as $scope): ?>
                <div class="rounded-2xl border border-white/10 bg-slate-950/40 px-4 py-3">
                    <div class="font-mono text-sm text-white"><?= esc($scope) ?></div>
                </div>
            <?php endforeach; ?>
        </div>
    </article>

    <article class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <h2 class="text-xl font-semibold text-white"><?= esc(lang('Backoffice.apiEndpointsTitle')) ?></h2>
                <p class="mt-1 text-sm text-slate-400"><?= esc(lang('Backoffice.apiEndpointsIntro')) ?></p>
            </div>
            <a href="<?= site_url('api-playground') ?>" class="inline-flex items-center justify-center rounded-2xl border border-sky-400/30 bg-sky-400/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/20"><?= esc(lang('Backoffice.menuApiPlayground')) ?></a>
        </div>

        <div class="mt-5 space-y-4">
            <?php foreach ($endpoints as $index => $endpoint): ?>
                <?php $panelId = 'endpoint-' . $index; ?>
                <article class="rounded-[28px] border border-white/10 bg-slate-950/40 p-5">
                    <div class="flex flex-wrap items-start gap-3">
                        <span class="inline-flex rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] <?= $endpoint['method'] === 'GET' ? 'border-cyan-400/20 bg-cyan-400/10 text-cyan-100' : 'border-sky-400/20 bg-sky-400/10 text-sky-100' ?>">
                            <?= esc($endpoint['method']) ?>
                        </span>
                        <span class="inline-flex rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-slate-300"><?= esc($endpoint['visibility']) ?></span>
                        <span class="inline-flex rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-mono text-slate-300"><?= esc($endpoint['scope']) ?></span>
                    </div>
                    <div class="mt-4 font-mono text-sm text-white"><?= esc($endpoint['path']) ?></div>
                    <p class="mt-3 text-sm leading-7 text-slate-400"><?= esc($endpoint['summary']) ?></p>
                    <div class="mt-4 rounded-2xl border border-white/10 bg-white/5 px-4 py-3">
                        <div class="text-xs uppercase tracking-[0.22em] text-slate-500">URL</div>
                        <div class="mt-2 break-all font-mono text-sm text-slate-200"><?= esc($endpoint['example']) ?></div>
                    </div>
                    <?php if (! empty($endpoint['request_body'])): ?>
                        <div class="mt-4 rounded-2xl border border-white/10 bg-white/5 p-4">
                            <div class="text-xs uppercase tracking-[0.22em] text-slate-500"><?= esc(lang('Backoffice.apiRequestBody')) ?></div>
                            <pre class="mt-3 overflow-x-auto text-xs text-slate-200"><code><?= esc(json_encode($endpoint['request_body'], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)) ?></code></pre>
                        </div>
                    <?php endif; ?>
                    <div class="mt-4 rounded-2xl border border-white/10 bg-white/5 p-4">
                        <div class="text-xs uppercase tracking-[0.22em] text-slate-500"><?= esc(lang('Backoffice.apiCurlExample')) ?></div>
                        <div class="mt-3 flex flex-wrap gap-2">
                            <?php foreach ($languages as $key => $label): ?>
                                <button type="button" class="code-tab rounded-full border border-white/10 bg-slate-950/40 px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-300 transition hover:bg-white/10 <?= $key === 'curl' ? 'is-active border-cyan-400/30 bg-cyan-400/10 text-white' : '' ?>" data-target="<?= esc($panelId) ?>" data-lang="<?= esc($key) ?>">
                                    <?= esc($label) ?>
                                </button>
                            <?php endforeach; ?>
                        </div>
                        <div class="mt-4 rounded-2xl border border-white/10 bg-slate-950/60 p-4">
                            <?php foreach ($languages as $key => $label): ?>
                                <pre class="code-panel overflow-x-auto text-xs text-slate-200 <?= $key === 'curl' ? '' : 'hidden' ?>" data-panel="<?= esc($panelId) ?>" data-lang="<?= esc($key) ?>"><code><?= esc($endpoint['code_samples'][$key]) ?></code></pre>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </article>
            <?php endforeach; ?>
        </div>
    </article>
</section>

<script>
    (() => {
        const tabs = Array.from(document.querySelectorAll('.code-tab'));
        tabs.forEach((tab) => {
            tab.addEventListener('click', () => {
                const target = tab.dataset.target;
                const lang = tab.dataset.lang;

                document.querySelectorAll(`.code-tab[data-target="${target}"]`).forEach((item) => {
                    const active = item.dataset.lang === lang;
                    item.classList.toggle('is-active', active);
                    item.classList.toggle('border-cyan-400/30', active);
                    item.classList.toggle('bg-cyan-400/10', active);
                    item.classList.toggle('text-white', active);
                    item.classList.toggle('border-white/10', !active);
                    item.classList.toggle('text-slate-300', !active);
                });

                document.querySelectorAll(`.code-panel[data-panel="${target}"]`).forEach((panel) => {
                    panel.classList.toggle('hidden', panel.dataset.lang !== lang);
                });
            });
        });
    })();
</script>
<?= $this->endSection() ?>
