/**
 * Documentation Engine for Intaleq Dashboard
 */

const docs = {
    init: () => {
        console.log('📚 Initializing Documentation...');
        docs.bindEvents();
        docs.renderSection('getting-started');
    },

    bindEvents: () => {
        // Handle side-nav clicks
        document.querySelectorAll('.docs-nav-link').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const section = e.currentTarget.getAttribute('data-section');
                docs.renderSection(section);
                
                // Active state
                document.querySelectorAll('.docs-nav-link').forEach(l => l.classList.remove('active', 'bg-blue-500/10', 'text-blue-400'));
                e.currentTarget.classList.add('active', 'bg-blue-500/10', 'text-blue-400');
            });
        });
    },

    renderSection: (id) => {
        const container = document.getElementById('docs-content');
        if (!container) return;

        // Content repository
        const content = {
            'getting-started': `
                <div class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
                    <div>
                        <h3 class="text-3xl font-black mb-4">Getting Started</h3>
                        <p class="text-slate-400 leading-relaxed">Welcome to the Intaleq Map Platform. Our APIs allow you to integrate high-quality vector maps, geocoding, and routing into your web and mobile applications with ease.</p>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="glass p-6 rounded-2xl border-white/5">
                            <h4 class="font-bold mb-2 flex items-center gap-2">
                                <i data-lucide="key" class="w-4 h-4 text-blue-400"></i>
                                1. Get an API Key
                            </h4>
                            <p class="text-xs text-slate-500">Go to the Credentials page and create your first API key.</p>
                        </div>
                        <div class="glass p-6 rounded-2xl border-white/5">
                            <h4 class="font-bold mb-2 flex items-center gap-2">
                                <i data-lucide="code" class="w-4 h-4 text-emerald-400"></i>
                                2. Install SDK
                            </h4>
                            <p class="text-xs text-slate-500">Use our MapLibre wrappers for JavaScript or Flutter.</p>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <h4 class="text-lg font-bold">Base URL</h4>
                        <div class="bg-slate-900 rounded-xl p-4 font-mono text-sm border border-slate-800 text-blue-400">
                            https://map-dashbord.intaleqapp.com/api
                        </div>
                    </div>
                </div>
            `,
            'tiles-api': `
                <div class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
                    <div>
                        <h3 class="text-3xl font-black mb-2">Vector Tiles API</h3>
                        <p class="text-slate-400">Render high-performance vector maps from our global database.</p>
                    </div>

                    <div class="space-y-6">
                         <div class="endpoint-card glass rounded-2xl border-white/5 overflow-hidden">
                            <div class="p-4 bg-white/[0.02] border-b border-white/5 flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <span class="px-2 py-1 bg-green-500/20 text-green-400 text-[10px] font-black rounded uppercase">GET</span>
                                    <code class="text-xs font-bold">/maps/style.json</code>
                                </div>
                            </div>
                            <div class="p-6">
                                <p class="text-sm text-slate-400 mb-6">Returns the MapLibre-compatible style configuration. Use the <code>theme</code> parameter to switch between 'light' and 'obsidian'.</p>
                                
                                <h5 class="text-xs font-black uppercase tracking-widest text-slate-500 mb-4">Code Example</h5>
                                <div class="relative group">
                                    <pre class="bg-slate-950 p-4 rounded-xl text-xs font-mono text-slate-300 leading-relaxed overflow-x-auto">
// Initialize MapLibre with Intaleq Style
const map = new maplibregl.Map({
    container: 'map',
    style: 'https://map-dashbord.intaleqapp.com/api/maps/style.json?theme=obsidian',
    center: [35.9106, 31.9539], // Amman
    zoom: 12
});</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `,
            'geocoding-api': `
                <div class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
                    <div>
                        <h3 class="text-3xl font-black mb-2">Geocoding API</h3>
                        <p class="text-slate-400">Convert addresses to coordinates (Forward) or coordinates to addresses (Reverse).</p>
                    </div>

                    <div class="endpoint-card glass rounded-2xl border-white/5 overflow-hidden">
                        <div class="p-4 bg-white/[0.02] border-b border-white/5 flex items-center gap-3">
                             <span class="px-2 py-1 bg-green-500/20 text-green-400 text-[10px] font-black rounded uppercase">GET</span>
                             <code class="text-xs font-bold">/geocoding/search</code>
                        </div>
                        <div class="p-6">
                            <table class="w-full text-left text-xs mb-6">
                                <thead>
                                    <tr class="text-slate-500 uppercase tracking-widest font-black border-b border-white/5">
                                        <th class="pb-3">Parameter</th>
                                        <th class="pb-3">Type</th>
                                        <th class="pb-3">Description</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-white/[0.02]">
                                    <tr>
                                        <td class="py-3 font-bold text-blue-400 font-mono">q</td>
                                        <td class="py-3 text-slate-500">string</td>
                                        <td class="py-3">Search query (address, place, coordinates)</td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 font-bold text-blue-400 font-mono">limit</td>
                                        <td class="py-3 text-slate-500">number</td>
                                        <td class="py-3">Max results (default: 5)</td>
                                    </tr>
                                </tbody>
                            </table>

                            <h5 class="text-xs font-black uppercase tracking-widest text-slate-500 mb-4">Request</h5>
                            <pre class="bg-slate-950 p-4 rounded-xl text-xs font-mono text-blue-400 mb-4">curl "https://map-dashbord.intaleqapp.com/api/geocoding/search?q=Amman&limit=1" \\
     -H "x-api-key: YOUR_API_KEY"</pre>
                        </div>
                    </div>
                </div>
            `
        };

        container.innerHTML = content[id] || '<p class="text-slate-500">Documentation section coming soon...</p>';
        lucide.createIcons();
    }
};