@extends('layouts.dashboard')

@section('title', trans('dashboard.api_docs_title') . ' | ' . config('app.name', 'EMZatca'))
@section('header_title', trans('dashboard.api_docs_header'))

@section('content')
<div x-data="apiDocsApp()" class="space-y-8 text-xs pb-16">

    <!-- Top Hero Card: Intro & Base URL -->
    <div class="bg-white dark:bg-gradient-to-br dark:from-navy-900 dark:via-navy-900 dark:to-navy-950 border border-slate-200 dark:border-slate-800 rounded-3xl p-6 sm:p-8 relative overflow-hidden shadow-sm dark:shadow-xl">
        <div class="absolute -top-24 -end-24 w-72 h-72 bg-brand-500/10 rounded-full blur-3xl pointer-events-none"></div>

        <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6 relative z-10">
            <div class="space-y-2 max-w-2xl">
                <div class="flex items-center gap-2">
                    <span class="px-2.5 py-1 rounded-full text-[10px] font-extrabold uppercase tracking-wider bg-brand-500/15 text-brand-700 dark:text-brand-400 border border-brand-500/30">
                        {{ trans('dashboard.api_docs_phase2_badge') }}
                    </span>
                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold {{ $tenant->is_sandbox ? 'bg-amber-500/15 text-amber-700 dark:text-amber-300 border border-amber-500/30' : 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30' }}">
                        {{ $tenant->is_sandbox ? trans('dashboard.env_sandbox_name') : trans('dashboard.env_production_name') }}
                    </span>
                </div>
                <h2 class="text-xl sm:text-2xl font-black text-slate-900 dark:text-white">
                    {{ trans('dashboard.api_docs_header') }}
                </h2>
                <p class="text-slate-600 dark:text-slate-400 leading-relaxed text-xs">
                    {{ trans('dashboard.api_docs_subtitle') }}
                </p>
            </div>

            <!-- Quick Action Links -->
            <div class="flex flex-wrap items-center gap-3 w-full lg:w-auto">
                <a href="{{ route('dashboard.apikeys.index') }}" class="px-4 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 font-bold border border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-600 transition flex items-center gap-2">
                    <i class="fa-solid fa-key text-brand-600 dark:text-brand-400"></i>
                    <span>{{ trans('dashboard.api_keys') }}</span>
                </a>
                <a href="#test-console" @click="scrollToRunner()" class="px-4 py-2.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold transition flex items-center gap-2 shadow-lg shadow-brand-500/20 force-white">
                    <i class="fa-solid fa-play text-xs"></i>
                    <span>{{ trans('dashboard.api_docs_test_console_title') }}</span>
                </a>
            </div>
        </div>

        <!-- Quick Base URL & Auth Info Bar -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6 pt-6 border-t border-slate-100 dark:border-slate-800/80">
            <div class="p-4 rounded-xl bg-slate-50 dark:bg-navy-950/70 border border-slate-200 dark:border-slate-800/80 flex items-center justify-between gap-3">
                <div class="min-w-0">
                    <div class="text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1">{{ trans('dashboard.api_docs_base_url') }}</div>
                    <div class="font-mono text-slate-900 dark:text-slate-200 text-xs truncate" dir="ltr" id="baseUrlText">{{ url('/api/v1') }}</div>
                </div>
                <button type="button" @click="copyText('{{ url('/api/v1') }}')" class="p-2 rounded-lg bg-slate-200/80 hover:bg-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition" title="{{ trans('dashboard.api_docs_copy_response') }}">
                    <i class="fa-regular fa-copy"></i>
                </button>
            </div>

            <div class="p-4 rounded-xl bg-slate-50 dark:bg-navy-950/70 border border-slate-200 dark:border-slate-800/80 flex items-center justify-between gap-3">
                <div class="min-w-0">
                    <div class="text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1">{{ trans('dashboard.api_docs_auth_required') }} {{ trans('dashboard.api_docs_header_tag') }}</div>
                    <div class="font-mono text-brand-600 dark:text-brand-400 text-xs truncate" dir="ltr">X-API-Key: sk_live_...</div>
                </div>
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-brand-500/10 text-brand-700 dark:text-brand-400 border border-brand-500/20">{{ trans('dashboard.api_docs_https_required') }}</span>
            </div>
        </div>
    </div>

    <!-- Interactive Test Console (Runner Section) -->
    <div id="test-console" class="bg-white dark:bg-navy-900 border-2 border-brand-500/30 rounded-3xl p-6 sm:p-8 shadow-md dark:shadow-2xl relative scroll-mt-24">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-slate-200 dark:border-slate-800">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-brand-500/10 dark:bg-brand-500/20 border border-brand-500/30 flex items-center justify-center text-brand-600 dark:text-brand-400 text-lg">
                    <i class="fa-solid fa-bolt"></i>
                </div>
                <div>
                    <h3 class="text-base font-extrabold text-slate-900 dark:text-white flex items-center gap-2">
                        <span>{{ trans('dashboard.api_docs_test_console_title') }}</span>
                        <span class="px-2 py-0.5 rounded-full text-[10px] bg-brand-500/15 text-brand-700 dark:text-brand-300 font-bold">{{ trans('dashboard.api_docs_interactive_badge') }}</span>
                    </h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs mt-0.5">{{ trans('dashboard.api_docs_test_console_desc') }}</p>
                </div>
            </div>

            <!-- Active Endpoint Indicator Pill -->
            <div class="flex items-center gap-2 font-mono">
                <span :class="currentEndpoint.method === 'POST' ? 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/30' : 'bg-sky-500/15 text-sky-700 dark:text-sky-400 border-sky-500/30'" class="px-2.5 py-1 rounded-lg font-black border text-xs" x-text="currentEndpoint.method"></span>
                <span class="text-slate-800 dark:text-slate-300 font-bold text-xs" x-text="currentEndpoint.path"></span>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 mt-6">

            <!-- Request Configuration Panel (7 Cols) -->
            <div class="lg:col-span-7 space-y-5">
                <!-- Endpoint Selector -->
                <div>
                    <label class="block font-bold text-slate-700 dark:text-slate-300 mb-1.5">{{ trans('dashboard.api_docs_select_endpoint') }}</label>
                    <select x-model="selectedEndpointId" @change="onSelectEndpoint()" class="w-full rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100 p-3 focus:border-brand-500 focus:outline-none transition font-sans">
                        <template x-for="ep in endpoints" :key="ep.id">
                            <option :value="ep.id" x-text="ep.method + ' ' + ep.path + ' - ' + (isAr ? ep.title_ar : ep.title_en)"></option>
                        </template>
                    </select>
                </div>

                <!-- Auth Selector -->
                <div class="p-4 rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-200 dark:border-slate-800 space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="font-bold text-slate-700 dark:text-slate-300 text-xs">{{ trans('dashboard.api_docs_auth_mode') }}</span>
                        <template x-if="!currentEndpoint.auth">
                            <span class="text-emerald-600 dark:text-emerald-400 text-[11px] font-bold flex items-center gap-1">
                                <i class="fa-solid fa-circle-check"></i> {{ trans('dashboard.api_docs_auth_public') }}
                            </span>
                        </template>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs">
                        <label class="flex items-center gap-2 p-2.5 rounded-lg border cursor-pointer transition" :class="authMode === 'session' ? 'bg-brand-50 dark:bg-brand-500/10 border-brand-500 text-brand-800 dark:text-brand-300 font-bold' : 'bg-white dark:bg-navy-900 border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-700'">
                            <input type="radio" value="session" x-model="authMode" class="text-brand-500 focus:ring-0">
                            <span>{{ trans('dashboard.api_docs_auth_mode_session') }}</span>
                        </label>
                        <label class="flex items-center gap-2 p-2.5 rounded-lg border cursor-pointer transition" :class="authMode === 'key' ? 'bg-brand-50 dark:bg-brand-500/10 border-brand-500 text-brand-800 dark:text-brand-300 font-bold' : 'bg-white dark:bg-navy-900 border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-700'">
                            <input type="radio" value="key" x-model="authMode" class="text-brand-500 focus:ring-0">
                            <span>{{ trans('dashboard.api_docs_auth_mode_key') }}</span>
                        </label>
                    </div>

                    <div x-show="authMode === 'key'" x-transition class="pt-2">
                        <label class="block text-slate-600 dark:text-slate-400 text-[11px] mb-1">{{ trans('dashboard.api_docs_enter_api_key') }}</label>
                        <input type="text" x-model="customApiKey" placeholder="sk_test_... or sk_live_..." class="w-full rounded-lg bg-white dark:bg-navy-900 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-200 px-3 py-2 text-xs font-mono focus:border-brand-500 focus:outline-none">
                        @if($apiKeys->count() > 0)
                            <div class="mt-2 text-[10px] text-slate-500 flex flex-wrap items-center gap-1.5">
                                <span>{{ trans('dashboard.th_prefix') }}:</span>
                                @foreach($apiKeys as $key)
                                    <span class="px-1.5 py-0.5 rounded bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-400 font-mono">{{ $key->key_prefix }} ({{ $key->environment }})</span>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Path Parameter input if endpoint contains {uuid} -->
                <template x-if="currentEndpoint.path.includes('{uuid}')">
                    <div class="p-4 rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-200 dark:border-slate-800">
                        <label class="block font-bold text-slate-700 dark:text-slate-300 text-xs mb-1">
                            {{ trans('dashboard.api_docs_url_param') }} <code class="text-brand-600 dark:text-brand-400">{uuid}</code>
                        </label>
                        <input type="text" x-model="pathUuid" placeholder="e.g. 550e8400-e29b-41d4-a716-446655440000" class="w-full rounded-lg bg-white dark:bg-navy-900 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-200 px-3 py-2 font-mono text-xs focus:border-brand-500 focus:outline-none">
                    </div>
                </template>

                <!-- Request Payload (JSON) for POST / PUT / GET -->
                <div>
                    <div class="flex items-center justify-between mb-1.5">
                        <label class="font-bold text-slate-700 dark:text-slate-300">{{ trans('dashboard.api_docs_request_payload') }}</label>
                        <div class="flex items-center gap-2">
                            <button type="button" @click="formatJson()" class="text-[11px] text-brand-600 dark:text-brand-400 hover:text-brand-500 font-bold transition">
                                <i class="fa-solid fa-code"></i> {{ trans('dashboard.api_docs_format_json') }}
                            </button>
                            <span class="text-slate-300 dark:text-slate-600">|</span>
                            <button type="button" @click="resetSamplePayload()" class="text-[11px] text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-white transition">
                                <i class="fa-solid fa-rotate-left"></i> {{ trans('dashboard.api_docs_reset_sample') }}
                            </button>
                        </div>
                    </div>

                    <textarea x-model="requestPayload" rows="9" class="w-full rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100 p-3 font-mono text-[11px] focus:border-brand-500 focus:outline-none leading-relaxed transition resize-y" dir="ltr" spellcheck="false"></textarea>
                </div>

                <!-- Execute Button -->
                <button type="button" @click="runApiTest()" :disabled="isLoading" class="w-full py-3.5 px-6 rounded-xl bg-gradient-to-r from-brand-600 to-emerald-500 hover:from-brand-500 hover:to-emerald-400 disabled:opacity-50 text-white font-extrabold text-xs shadow-xl shadow-brand-500/25 flex items-center justify-center gap-2 transition cursor-pointer force-white">
                    <template x-if="isLoading">
                        <div class="flex items-center gap-2">
                            <i class="fa-solid fa-circle-notch fa-spin"></i>
                            <span>{{ trans('dashboard.api_docs_sending') }}</span>
                        </div>
                    </template>
                    <template x-if="!isLoading">
                        <div class="flex items-center gap-2">
                            <i class="fa-solid fa-paper-plane"></i>
                            <span>{{ trans('dashboard.api_docs_send_request_btn') }}</span>
                        </div>
                    </template>
                </button>
            </div>

            <!-- Live Response Panel (5 Cols) -->
            <div class="lg:col-span-5 flex flex-col justify-between rounded-2xl bg-slate-50 dark:bg-navy-950 border border-slate-200 dark:border-slate-800 p-4 sm:p-5 overflow-hidden">
                <div class="space-y-3">
                    <div class="flex items-center justify-between pb-3 border-b border-slate-200 dark:border-slate-800">
                        <span class="font-bold text-slate-800 dark:text-slate-200 text-xs">{{ trans('dashboard.api_docs_response_title') }}</span>
                        <div class="flex items-center gap-2">
                            <template x-if="responseStatus">
                                <span :class="responseStatus >= 200 && responseStatus < 300 ? 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/30' : (responseStatus >= 400 && responseStatus < 500 ? 'bg-amber-500/15 text-amber-700 dark:text-amber-300 border-amber-500/30' : 'bg-rose-500/15 text-rose-700 dark:text-rose-300 border-rose-500/30')" class="px-2.5 py-0.5 rounded-full font-mono font-bold text-[11px] border" x-text="responseStatus + ' ' + (responseStatusText || '')"></span>
                            </template>
                            <template x-if="responseLatency">
                                <span class="px-2 py-0.5 rounded bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-400 font-mono text-[10px]" x-text="responseLatency + ' ms'"></span>
                            </template>
                        </div>
                    </div>

                    <!-- Response Headers Pill if available -->
                    <template x-if="Object.keys(responseHeaders).length > 0">
                        <div class="p-2.5 rounded-lg bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800/80 text-[10px] font-mono text-slate-600 dark:text-slate-400 space-y-1" dir="ltr">
                            <template x-for="(val, header) in responseHeaders" :key="header">
                                <div class="truncate"><span class="text-slate-400 dark:text-slate-500" x-text="header + ':'"></span> <span class="text-slate-700 dark:text-slate-300" x-text="val"></span></div>
                            </template>
                        </div>
                    </template>

                    <!-- Response Body Viewer -->
                    <div class="relative">
                        <button type="button" @click="copyResponse()" x-show="responseBody" class="absolute top-2 end-2 px-2.5 py-1 rounded-lg bg-slate-200/90 hover:bg-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 text-[10px] font-semibold transition z-10 flex items-center gap-1 border border-slate-300 dark:border-slate-700">
                            <i class="fa-regular fa-copy"></i>
                            <span x-text="copiedResponse ? '{{ trans('dashboard.api_docs_copied') }}' : '{{ trans('dashboard.api_docs_copy_response') }}'"></span>
                        </button>

                        <div class="p-3.5 rounded-xl bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 font-mono text-[11px] text-slate-800 dark:text-slate-200 overflow-x-auto max-h-[380px] overflow-y-auto leading-relaxed whitespace-pre shadow-inner" dir="ltr">
                            <template x-if="!responseBody && !isLoading">
                                <div class="text-slate-400 dark:text-slate-500 py-16 text-center italic">
                                    <i class="fa-solid fa-terminal text-2xl mb-2 block text-slate-300 dark:text-slate-600"></i>
                                    {{ trans('dashboard.api_docs_click_run_hint') }}
                                </div>
                            </template>
                            <template x-if="isLoading">
                                <div class="py-16 text-center text-slate-500 dark:text-slate-400">
                                    <i class="fa-solid fa-circle-notch fa-spin text-2xl text-brand-500 dark:text-brand-400 mb-2 block"></i>
                                    <span>{{ trans('dashboard.api_docs_sending') }}</span>
                                </div>
                            </template>
                            <template x-if="responseBody">
                                <div x-text="responseBody"></div>
                            </template>
                        </div>
                    </div>
                </div>

                <div class="pt-3 text-[10px] text-slate-500 text-center">
                    {{ trans('dashboard.api_docs_sandbox_notice') }}
                </div>
            </div>

        </div>
    </div>

    <!-- Filter & Category Bar -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-4">
        <!-- Category Pills -->
        <div class="flex flex-wrap items-center gap-2">
            <button type="button" @click="activeCategory = 'all'" :class="activeCategory === 'all' ? 'bg-brand-500 text-white font-bold shadow-md shadow-brand-500/20 force-white' : 'bg-white dark:bg-navy-900 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 border border-slate-200 dark:border-slate-800'" class="px-3.5 py-2 rounded-xl transition text-xs">
                {{ trans('dashboard.api_docs_category_all') }}
            </button>
            <button type="button" @click="activeCategory = 'invoices'" :class="activeCategory === 'invoices' ? 'bg-brand-500 text-white font-bold shadow-md shadow-brand-500/20 force-white' : 'bg-white dark:bg-navy-900 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 border border-slate-200 dark:border-slate-800'" class="px-3.5 py-2 rounded-xl transition text-xs flex items-center gap-1.5">
                <i class="fa-solid fa-file-invoice"></i>
                <span>{{ trans('dashboard.api_docs_category_invoices') }}</span>
            </button>
            <button type="button" @click="activeCategory = 'devices'" :class="activeCategory === 'devices' ? 'bg-brand-500 text-white font-bold shadow-md shadow-brand-500/20 force-white' : 'bg-white dark:bg-navy-900 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 border border-slate-200 dark:border-slate-800'" class="px-3.5 py-2 rounded-xl transition text-xs flex items-center gap-1.5">
                <i class="fa-solid fa-microchip"></i>
                <span>{{ trans('dashboard.api_docs_category_devices') }}</span>
            </button>
            <button type="button" @click="activeCategory = 'tools'" :class="activeCategory === 'tools' ? 'bg-brand-500 text-white font-bold shadow-md shadow-brand-500/20 force-white' : 'bg-white dark:bg-navy-900 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 border border-slate-200 dark:border-slate-800'" class="px-3.5 py-2 rounded-xl transition text-xs flex items-center gap-1.5">
                <i class="fa-solid fa-screwdriver-wrench"></i>
                <span>{{ trans('dashboard.api_docs_category_tools') }}</span>
            </button>
        </div>

        <!-- Search Bar -->
        <div class="w-full sm:w-72 relative">
            <input type="text" x-model="searchQuery" placeholder="{{ trans('dashboard.api_docs_search_placeholder') }}" class="w-full rounded-xl bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 text-slate-900 dark:text-slate-200 ps-9 pe-4 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
            <i class="fa-solid fa-magnifying-glass absolute start-3 top-3 text-slate-400 dark:text-slate-500"></i>
        </div>
    </div>

    <!-- Complete Endpoints Catalog Cards -->
    <div class="space-y-6">
        <template x-for="ep in filteredEndpoints" :key="ep.id">
            <div class="bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 rounded-3xl p-6 sm:p-8 space-y-6 transition hover:border-slate-300 dark:hover:border-slate-700/80 shadow-sm dark:shadow-lg">

                <!-- Card Header -->
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4 border-b border-slate-100 dark:border-slate-800/80">
                    <div class="space-y-1">
                        <div class="flex flex-wrap items-center gap-2.5">
                            <span :class="ep.method === 'POST' ? 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/30' : 'bg-sky-500/15 text-sky-700 dark:text-sky-400 border-sky-500/30'" class="px-3 py-1 rounded-xl font-mono font-black text-xs border tracking-wider" x-text="ep.method"></span>
                            <span class="font-mono text-slate-900 dark:text-white text-sm font-bold" dir="ltr" x-text="ep.path"></span>
                            <template x-if="ep.auth">
                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-500/15 text-amber-700 dark:text-amber-300 border border-amber-500/30">
                                    <i class="fa-solid fa-lock text-[9px]"></i> {{ trans('dashboard.api_docs_auth_required') }}
                                </span>
                            </template>
                            <template x-if="!ep.auth">
                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30">
                                    <i class="fa-solid fa-globe text-[9px]"></i> {{ trans('dashboard.api_docs_auth_public') }}
                                </span>
                            </template>
                        </div>
                        <h4 class="text-base font-extrabold text-slate-900 dark:text-white pt-1" x-text="isAr ? ep.title_ar : ep.title_en"></h4>
                    </div>

                    <!-- Run to Test Trigger Button -->
                    <button type="button" @click="loadEndpointToTester(ep)" class="px-4 py-2.5 rounded-xl bg-brand-50 hover:bg-brand-500 text-brand-700 hover:text-white dark:bg-brand-500/15 dark:hover:bg-brand-500 dark:text-brand-400 dark:hover:text-white border border-brand-200 dark:border-brand-500/30 font-bold transition flex items-center gap-2 whitespace-nowrap shadow-xs">
                        <i class="fa-solid fa-play text-[10px]"></i>
                        <span>{{ trans('dashboard.api_docs_run_test_btn') }}</span>
                    </button>
                </div>

                <!-- Explanation / Description -->
                <p class="text-slate-600 dark:text-slate-300 text-xs leading-relaxed" x-text="isAr ? ep.desc_ar : ep.desc_en"></p>

                <!-- Parameters Table -->
                <template x-if="ep.parameters && ep.parameters.length > 0">
                    <div class="space-y-2">
                        <h5 class="font-bold text-slate-800 dark:text-slate-200 text-xs flex items-center gap-2">
                            <i class="fa-solid fa-list-check text-brand-600 dark:text-brand-400"></i>
                            <span>{{ trans('dashboard.api_docs_parameters_heading') }}</span>
                        </h5>

                        <div class="overflow-x-auto rounded-xl border border-slate-200 dark:border-slate-800">
                            <table class="w-full text-start text-xs">
                                <thead class="bg-slate-50 dark:bg-navy-950 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-800">
                                    <tr>
                                        <th class="py-2.5 px-3 text-start">{{ trans('dashboard.api_docs_param_name') }}</th>
                                        <th class="py-2.5 px-3 text-start">{{ trans('dashboard.api_docs_param_type') }}</th>
                                        <th class="py-2.5 px-3 text-start">{{ trans('dashboard.api_docs_param_required') }}</th>
                                        <th class="py-2.5 px-3 text-start">{{ trans('dashboard.api_docs_param_desc') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 dark:divide-slate-800/60 text-slate-700 dark:text-slate-300 bg-white dark:bg-navy-900/50">
                                    <template x-for="param in ep.parameters" :key="param.name">
                                        <tr>
                                            <td class="py-2.5 px-3 font-mono font-bold text-slate-900 dark:text-slate-200" dir="ltr" x-text="param.name"></td>
                                            <td class="py-2.5 px-3 font-mono text-[11px] text-brand-600 dark:text-brand-400" x-text="param.type"></td>
                                            <td class="py-2.5 px-3">
                                                <span :class="param.required === true ? 'bg-rose-500/10 text-rose-700 dark:text-rose-300 border-rose-500/20' : 'bg-slate-100 text-slate-600 border-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700'" class="px-2 py-0.5 rounded text-[10px] font-bold border" x-text="param.required === true ? '{{ trans('dashboard.api_docs_required') }}' : (param.required === false ? '{{ trans('dashboard.api_docs_optional') }}' : (isAr ? (param.required_ar || param.required) : (param.required_en || param.required)))"></span>
                                            </td>
                                            <td class="py-2.5 px-3 text-slate-600 dark:text-slate-300 text-[11px]" x-text="isAr ? (param.desc_ar || param.desc) : (param.desc_en || param.desc)"></td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </template>

                <!-- Code Snippets Tabs (cURL / PHP / JS / Python) -->
                <div x-data="{ tab: 'curl', copiedSnippet: false }" class="space-y-2">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-1 bg-slate-100 dark:bg-navy-950 p-1 rounded-xl border border-slate-200 dark:border-slate-800 text-[11px]">
                            <button type="button" @click="tab = 'curl'" :class="tab === 'curl' ? 'bg-white text-slate-900 shadow-xs dark:bg-slate-800 dark:text-white font-bold' : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white'" class="px-3 py-1 rounded-lg transition">{{ trans('dashboard.api_docs_tab_curl') }}</button>
                            <button type="button" @click="tab = 'php'" :class="tab === 'php' ? 'bg-white text-slate-900 shadow-xs dark:bg-slate-800 dark:text-white font-bold' : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white'" class="px-3 py-1 rounded-lg transition">{{ trans('dashboard.api_docs_tab_php') }}</button>
                            <button type="button" @click="tab = 'js'" :class="tab === 'js' ? 'bg-white text-slate-900 shadow-xs dark:bg-slate-800 dark:text-white font-bold' : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white'" class="px-3 py-1 rounded-lg transition">{{ trans('dashboard.api_docs_tab_js') }}</button>
                            <button type="button" @click="tab = 'python'" :class="tab === 'python' ? 'bg-white text-slate-900 shadow-xs dark:bg-slate-800 dark:text-white font-bold' : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white'" class="px-3 py-1 rounded-lg transition">{{ trans('dashboard.api_docs_tab_python') }}</button>
                        </div>

                        <button type="button" @click="copyText(generateSnippet(ep, tab)); copiedSnippet = true; setTimeout(() => copiedSnippet = false, 2000)" class="text-[11px] text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white font-semibold transition flex items-center gap-1">
                            <i class="fa-regular" :class="copiedSnippet ? 'fa-circle-check text-emerald-500' : 'fa-copy'"></i>
                            <span x-text="copiedSnippet ? '{{ trans('dashboard.api_docs_copied') }}' : '{{ trans('dashboard.api_docs_copy_code') }}'"></span>
                        </button>
                    </div>

                    <div class="p-4 rounded-2xl bg-slate-50 text-slate-900 border border-slate-200 dark:bg-navy-950 dark:text-slate-200 dark:border-slate-800 font-mono text-[11px] overflow-x-auto leading-relaxed whitespace-pre shadow-xs" dir="ltr" x-text="generateSnippet(ep, tab)"></div>
                </div>

            </div>
        </template>
    </div>

</div>

<script>
function apiDocsApp() {
    return {
        isAr: {{ app()->getLocale() === 'ar' ? 'true' : 'false' }},
        baseUrl: '{{ url('/api/v1') }}',
        activeCategory: 'all',
        searchQuery: '',
        authMode: 'session',
        customApiKey: '',
        pathUuid: '{{ $readyDevice?->uuid ?? '550e8400-e29b-41d4-a716-446655440000' }}',
        selectedEndpointId: 'invoice-store',
        endpoints: {!! json_encode($endpoints, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!},
        requestPayload: '',
        isLoading: false,
        responseStatus: null,
        responseStatusText: '',
        responseLatency: null,
        responseHeaders: {},
        responseBody: '',
        copiedResponse: false,

        init() {
            this.onSelectEndpoint();
        },

        get currentEndpoint() {
            return this.endpoints.find(e => e.id === this.selectedEndpointId) || this.endpoints[0];
        },

        get filteredEndpoints() {
            let list = this.endpoints;
            if (this.activeCategory !== 'all') {
                list = list.filter(e => e.category === this.activeCategory);
            }
            if (this.searchQuery.trim() !== '') {
                const q = this.searchQuery.toLowerCase();
                list = list.filter(e =>
                    e.path.toLowerCase().includes(q) ||
                    e.method.toLowerCase().includes(q) ||
                    (e.title_ar && e.title_ar.toLowerCase().includes(q)) ||
                    (e.title_en && e.title_en.toLowerCase().includes(q)) ||
                    (e.desc_ar && e.desc_ar.toLowerCase().includes(q)) ||
                    (e.desc_en && e.desc_en.toLowerCase().includes(q))
                );
            }
            return list;
        },

        onSelectEndpoint() {
            const ep = this.currentEndpoint;
            if (ep.default_body !== null && ep.default_body !== undefined) {
                this.requestPayload = JSON.stringify(ep.default_body, null, 2);
            } else {
                this.requestPayload = '';
            }
        },

        resetSamplePayload() {
            this.onSelectEndpoint();
        },

        formatJson() {
            try {
                if (this.requestPayload.trim() !== '') {
                    const parsed = JSON.parse(this.requestPayload);
                    this.requestPayload = JSON.stringify(parsed, null, 2);
                }
            } catch (e) {
                alert('{{ trans('dashboard.api_docs_invalid_json') }} ' + e.message);
            }
        },

        loadEndpointToTester(ep) {
            this.selectedEndpointId = ep.id;
            this.onSelectEndpoint();
            this.scrollToRunner();
        },

        scrollToRunner() {
            const el = document.getElementById('test-console');
            if (el) {
                el.scrollIntoView({ behavior: 'smooth' });
            }
        },

        async runApiTest() {
            this.isLoading = true;
            this.responseBody = '';
            this.responseStatus = null;
            this.responseStatusText = '';
            this.responseLatency = null;
            this.responseHeaders = {};

            const ep = this.currentEndpoint;
            let targetPath = ep.path;
            if (targetPath.includes('{uuid}')) {
                const uuid = this.pathUuid.trim() || '550e8400-e29b-41d4-a716-446655440000';
                targetPath = targetPath.replace('{uuid}', uuid);
            }

            let parsedBody = null;
            if (this.requestPayload.trim() !== '') {
                try {
                    parsedBody = JSON.parse(this.requestPayload);
                } catch (err) {
                    alert('{{ trans('dashboard.api_docs_invalid_payload_json') }} ' + err.message);
                    this.isLoading = false;
                    return;
                }
            }

            const postData = {
                endpoint: targetPath,
                method: ep.method,
                api_key: this.authMode === 'key' ? this.customApiKey : null,
                use_tenant_auth: this.authMode === 'session',
                body: parsedBody
            };

            try {
                const res = await fetch('{{ route('dashboard.docs.execute') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(postData)
                });

                const result = await res.json();
                this.responseStatus = result.status;
                this.responseStatusText = result.status_text;
                this.responseLatency = result.duration_ms;
                this.responseHeaders = result.headers || {};

                if (typeof result.data === 'object') {
                    this.responseBody = JSON.stringify(result.data, null, 2);
                } else {
                    this.responseBody = result.data || result.raw_body || '';
                }
            } catch (e) {
                this.responseStatus = 500;
                this.responseStatusText = 'Error';
                this.responseBody = JSON.stringify({ error: '{{ trans('dashboard.api_docs_network_error') }} ' + e.message }, null, 2);
            } finally {
                this.isLoading = false;
            }
        },

        generateSnippet(ep, lang) {
            let path = ep.path;
            if (path.includes('{uuid}')) {
                path = path.replace('{uuid}', this.pathUuid);
            }
            const fullUrl = this.baseUrl.replace(/\/api\/v1$/, '') + path;
            const hasAuth = ep.auth;
            const methodLower = (ep.method || 'get').toLowerCase();
            const isJson = ep.method === 'POST' || ep.method === 'PUT';
            const sampleJson = ep.default_body ? JSON.stringify(ep.default_body, null, 2) : '{}';

            if (lang === 'curl') {
                let code = `curl --request ${ep.method} \\\n  --url '${fullUrl}' \\\n  --header 'Accept: application/json'`;
                if (hasAuth) {
                    code += ` \\\n  --header 'X-API-Key: YOUR_API_KEY'`;
                }
                if (isJson && ep.default_body) {
                    code += ` \\\n  --header 'Content-Type: application/json' \\\n  --data '${JSON.stringify(ep.default_body)}'`;
                }
                return code;
            }

            if (lang === 'php') {
                if (isJson && ep.default_body) {
                    return `use Illuminate\\Support\\Facades\\Http;

$response = Http::withHeaders([
    'Accept' => 'application/json',${hasAuth ? "\n    'X-API-Key' => 'YOUR_API_KEY'," : ""}
])->${methodLower}('${fullUrl}', ${sampleJson});

$data = $response->json();`;
                } else {
                    return `use Illuminate\\Support\\Facades\\Http;

$response = Http::withHeaders([
    'Accept' => 'application/json',${hasAuth ? "\n    'X-API-Key' => 'YOUR_API_KEY'," : ""}
])->${methodLower}('${fullUrl}');

$data = $response->json();`;
                }
            }

            if (lang === 'js') {
                const headersObj = { 'Accept': 'application/json' };
                if (hasAuth) headersObj['X-API-Key'] = 'YOUR_API_KEY';
                if (isJson && ep.default_body) headersObj['Content-Type'] = 'application/json';

                if (isJson && ep.default_body) {
                    return `const payload = ${sampleJson};

const response = await fetch('${fullUrl}', {
  method: '${ep.method}',
  headers: ${JSON.stringify(headersObj, null, 2)},
  body: JSON.stringify(payload)
});

const data = await response.json();
console.log(data);`;
                } else {
                    return `const response = await fetch('${fullUrl}', {
  method: '${ep.method}',
  headers: ${JSON.stringify(headersObj, null, 2)}
});

const data = await response.json();
console.log(data);`;
                }
            }

            if (lang === 'python') {
                return `import requests

url = "${fullUrl}"
headers = {
    "Accept": "application/json",${hasAuth ? '\n    "X-API-Key": "YOUR_API_KEY",' : ''}${isJson && ep.default_body ? '\n    "Content-Type": "application/json",' : ''}
}
${isJson && ep.default_body ? "payload = " + sampleJson + "\n\nresponse = requests." + methodLower + "(url, json=payload, headers=headers)" : "response = requests." + methodLower + "(url, headers=headers)"}

print(response.status_code)
print(response.json())`;
            }

            return '';
        },

        copySnippet(ep, lang) {
            const text = this.generateSnippet(ep, lang);
            this.copyText(text);
        },

        copyResponse() {
            if (this.responseBody) {
                this.copyText(this.responseBody);
                this.copiedResponse = true;
                setTimeout(() => { this.copiedResponse = false; }, 2000);
            }
        },

        copyText(text) {
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(text);
            } else {
                const ta = document.createElement('textarea');
                ta.value = text;
                ta.style.position = 'fixed';
                ta.style.opacity = '0';
                document.body.appendChild(ta);
                ta.select();
                document.execCommand('copy');
                document.body.removeChild(ta);
            }
        }
    };
}
</script>
@endsection