@props(['title', 'curl', 'raw'])

@php
    $id = Str::random(8);
@endphp

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-8">
    <!-- Header with Tabs -->
    <div class="bg-gray-50 border-b border-gray-100 flex flex-col md:flex-row justify-between items-center px-6 py-4">
        <h3 class="text-xl font-bold text-secondary mb-4 md:mb-0">{{ $title }}</h3>
        
        <div class="flex space-x-2 bg-white p-1 rounded-lg border border-gray-200">
            <button type="button" onclick="window.switchApiTab('ui-{{ $id }}', ['curl-{{ $id }}', 'json-{{ $id }}'], this)" class="px-4 py-2 text-sm font-medium rounded-md bg-primary text-white transition-colors">
                UI View
            </button>
            <button type="button" onclick="window.switchApiTab('curl-{{ $id }}', ['ui-{{ $id }}', 'json-{{ $id }}'], this)" class="px-4 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 transition-colors">
                Example Request
            </button>
            <button type="button" onclick="window.switchApiTab('json-{{ $id }}', ['ui-{{ $id }}', 'curl-{{ $id }}'], this)" class="px-4 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 transition-colors">
                Example Response
            </button>
        </div>

    <!-- UI View Content -->
    <div id="ui-{{ $id }}" class="p-6 block">
        {{ $slot }}
    </div>

    <!-- cURL View Content -->
    <div id="curl-{{ $id }}" class="hidden relative">
        <div class="bg-[#1e1e1e] p-6 text-sm">
            <div class="flex justify-between items-center mb-3">
                <span class="text-xs font-semibold text-gray-400 uppercase tracking-widest">Terminal / cURL</span>
                <button onclick="window.copyText('curl-text-{{ $id }}')" class="text-xs text-gray-400 hover:text-white flex items-center transition-colors">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                    Copy
                </button>
            </div>
            <pre class="font-mono overflow-x-auto whitespace-pre-wrap" style="color: #4ade80 !important;"><code id="curl-text-{{ $id }}" style="color: #4ade80 !important;">{{ $curl }}</code></pre>
        </div>

    <!-- JSON View Content -->
    <div id="json-{{ $id }}" class="hidden relative">
        <div class="bg-[#1e1e1e] p-6 text-sm border-t border-gray-800">
            <div class="flex justify-between items-center mb-3">
                <span class="text-xs font-semibold text-gray-400 uppercase tracking-widest">JSON Response</span>
                <button onclick="window.copyText('json-text-{{ $id }}')" class="text-xs text-gray-400 hover:text-white flex items-center transition-colors">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                    Copy
                </button>
            </div>
            <pre class="font-mono overflow-x-auto whitespace-pre-wrap" style="color: #93c5fd !important;"><code id="json-text-{{ $id }}" style="color: #93c5fd !important;">{{ $raw }}</code></pre>
        </div>
</div>

@once
<script>
    if (typeof window.switchApiTab !== 'function') {
        window.switchApiTab = function(showId, hideIdsArray, btn) {
            // Hide others
            hideIdsArray.forEach(id => {
                document.getElementById(id).classList.add('hidden');
                document.getElementById(id).classList.remove('block');
            });
            
            // Show target
            document.getElementById(showId).classList.add('block');
            document.getElementById(showId).classList.remove('hidden');

            // Reset buttons
            const container = btn.parentElement;
            const buttons = container.querySelectorAll('button');
            buttons.forEach(b => {
                b.classList.remove('bg-primary', 'text-white');
                b.classList.add('text-gray-600', 'hover:text-gray-900');
            });

            // Activate current button
            btn.classList.remove('text-gray-600', 'hover:text-gray-900');
            btn.classList.add('bg-primary', 'text-white');
        };

        window.copyText = function(elementId) {
            const text = document.getElementById(elementId).innerText;
            navigator.clipboard.writeText(text).then(() => {
                alert('Copied to clipboard!');
            });
        }
    }
</script>
@endonce