{{template "docs.html" .}}

{{define "title"}}Endpoints{{end}}

{{define "content"}}
<article class="space-y-12">
    <header>
        <div class="w-12 h-1 rounded-full bg-gradient-to-r from-violet-500 to-cyan-500 mb-6"></div>
        <h1 class="text-3xl font-bold text-white mb-3">Endpoints</h1>
        <p class="text-[#888] text-lg">Serverless Lua endpoints for custom API logic.</p>
    </header>

    <section class="space-y-6">
        <div>
            <h2 class="text-xl font-semibold text-white">What are endpoints?</h2>
            <p class="text-[#888] mt-2">Endpoints let you write custom server-side logic in Lua. Each endpoint gets a URL path and a Lua script that runs when the path is requested. Use them for webhooks, form handlers, redirects, or any custom API logic.</p>
        </div>

        <div class="grid sm:grid-cols-3 gap-4">
            <div class="border border-white/10 rounded-lg p-5">
                <div class="text-violet-400 font-medium mb-2">Serverless</div>
                <p class="text-sm text-[#888]">No infrastructure to manage. Write Lua, assign a path, and it's live.</p>
            </div>
            <div class="border border-white/10 rounded-lg p-5">
                <div class="text-cyan-400 font-medium mb-2">Sandboxed</div>
                <p class="text-sm text-[#888]">Scripts run in a secure sandbox with only base, string, table, and math libraries.</p>
            </div>
            <div class="border border-white/10 rounded-lg p-5">
                <div class="text-emerald-400 font-medium mb-2">Fast</div>
                <p class="text-sm text-[#888]">5-second execution timeout. Lua is lightweight and starts instantly.</p>
            </div>
        </div>
    </section>

    <section class="space-y-6">
        <h2 class="text-xl font-semibold text-white">Request object</h2>
        <p class="text-[#888]">Every endpoint receives a <code class="text-violet-400 bg-violet-400/10 px-1.5 py-0.5 rounded">request</code> global with details about the incoming HTTP request.</p>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-white/10">
                        <th class="text-left text-[#888] py-3 pr-4">Property</th>
                        <th class="text-left text-[#888] py-3 pr-4">Type</th>
                        <th class="text-left text-[#888] py-3">Description</th>
                    </tr>
                </thead>
                <tbody class="text-[#ccc]">
                    <tr class="border-b border-white/5">
                        <td class="py-3 pr-4"><code class="text-violet-400">request.method</code></td>
                        <td class="py-3 pr-4">string</td>
                        <td class="py-3">HTTP method (GET, POST, PUT, DELETE)</td>
                    </tr>
                    <tr class="border-b border-white/5">
                        <td class="py-3 pr-4"><code class="text-violet-400">request.path</code></td>
                        <td class="py-3 pr-4">string</td>
                        <td class="py-3">Request URL path</td>
                    </tr>
                    <tr class="border-b border-white/5">
                        <td class="py-3 pr-4"><code class="text-violet-400">request.query</code></td>
                        <td class="py-3 pr-4">table</td>
                        <td class="py-3">Query string parameters</td>
                    </tr>
                    <tr class="border-b border-white/5">
                        <td class="py-3 pr-4"><code class="text-violet-400">request.headers</code></td>
                        <td class="py-3 pr-4">table</td>
                        <td class="py-3">HTTP headers</td>
                    </tr>
                    <tr>
                        <td class="py-3 pr-4"><code class="text-violet-400">request.body</code></td>
                        <td class="py-3 pr-4">string</td>
                        <td class="py-3">Request body (for POST/PUT)</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <section class="space-y-6">
        <h2 class="text-xl font-semibold text-white">Response format</h2>
        <p class="text-[#888]">Return a table with <code class="text-violet-400 bg-violet-400/10 px-1.5 py-0.5 rounded">status</code>, <code class="text-violet-400 bg-violet-400/10 px-1.5 py-0.5 rounded">headers</code>, and <code class="text-violet-400 bg-violet-400/10 px-1.5 py-0.5 rounded">body</code>:</p>

        <div class="relative group">
            <pre class="bg-[#1a1a1a] border border-white/10 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-lua">return {
    status = 200,
    headers = {
        ["Content-Type"] = "application/json"
    },
    body = json_encode({ message = "Hello!" })
}</code></pre>
        </div>
    </section>

    <section class="space-y-6">
        <h2 class="text-xl font-semibold text-white">Built-in globals</h2>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-white/10">
                        <th class="text-left text-[#888] py-3 pr-4">Global</th>
                        <th class="text-left text-[#888] py-3">Description</th>
                    </tr>
                </thead>
                <tbody class="text-[#ccc]">
                    <tr class="border-b border-white/5">
                        <td class="py-3 pr-4"><code class="text-cyan-400">json_encode(value)</code></td>
                        <td class="py-3">Convert a Lua table or value to a JSON string</td>
                    </tr>
                    <tr class="border-b border-white/5">
                        <td class="py-3 pr-4"><code class="text-cyan-400">json_decode(string)</code></td>
                        <td class="py-3">Parse a JSON string into a Lua table</td>
                    </tr>
                    <tr class="border-b border-white/5">
                        <td class="py-3 pr-4"><code class="text-cyan-400">request</code></td>
                        <td class="py-3">The incoming HTTP request (see above)</td>
                    </tr>
                    <tr class="border-b border-white/5">
                        <td class="py-3 pr-4"><code class="text-cyan-400">string.*</code></td>
                        <td class="py-3">Lua string library</td>
                    </tr>
                    <tr class="border-b border-white/5">
                        <td class="py-3 pr-4"><code class="text-cyan-400">table.*</code></td>
                        <td class="py-3">Lua table library</td>
                    </tr>
                    <tr>
                        <td class="py-3 pr-4"><code class="text-cyan-400">math.*</code></td>
                        <td class="py-3">Lua math library</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <section class="space-y-6">
        <h2 class="text-xl font-semibold text-white">Example: JSON API endpoint</h2>

        <div class="border border-white/10 rounded-lg p-4">
            <div class="text-sm text-white font-medium mb-2">Path: <code class="text-violet-400 bg-violet-400/10 px-1.5 py-0.5 rounded">/api/greet</code></div>
            <pre class="bg-[#1a1a1a] border border-white/10 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-lua">local name = request.query.name or "World"

return {
    status = 200,
    headers = {
        ["Content-Type"] = "application/json"
    },
    body = json_encode({
        greeting = "Hello, " .. name .. "!",
        method = request.method
    })
}</code></pre>
        </div>

        <div class="bg-[#1a1a1a] border border-white/10 rounded-lg p-4 text-sm">
            <p class="text-white font-medium mb-2">Try it:</p>
            <pre class="text-[#888]"><code>GET /api/greet?name=Alice</code></pre>
            <pre class="text-emerald-400 mt-2"><code>{"greeting": "Hello, Alice!", "method": "GET"}</code></pre>
        </div>
    </section>

    <section class="space-y-6">
        <h2 class="text-xl font-semibold text-white">Example: Webhook handler</h2>

        <div class="border border-white/10 rounded-lg p-4">
            <div class="text-sm text-white font-medium mb-2">Path: <code class="text-violet-400 bg-violet-400/10 px-1.5 py-0.5 rounded">/api/webhook</code></div>
            <pre class="bg-[#1a1a1a] border border-white/10 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-lua">if request.method ~= "POST" then
    return {
        status = 405,
        body = json_encode({ error = "Method not allowed" })
    }
end

local data = json_decode(request.body)

-- Process webhook payload
local event = data.event or "unknown"

return {
    status = 200,
    headers = {
        ["Content-Type"] = "application/json"
    },
    body = json_encode({
        received = true,
        event = event
    })
}</code></pre>
        </div>
    </section>

    <section class="space-y-4">
        <h2 class="text-xl font-semibold text-white">Constraints</h2>
        <div class="flex gap-3 p-4 rounded-lg border border-amber-400/20 bg-amber-400/[0.03]">
            <svg class="w-5 h-5 text-amber-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
            <div>
                <span class="text-amber-400 font-medium text-sm">Warning</span>
                <ul class="space-y-2 mt-2">
                    <li class="text-sm text-[#888]"><span class="text-white">5-second timeout.</span> Scripts that exceed the timeout are terminated.</li>
                    <li class="text-sm text-[#888]"><span class="text-white">Sandboxed.</span> Only base, string, table, and math libraries are available. No file system, network, or OS access.</li>
                    <li class="text-sm text-[#888]"><span class="text-white">No database access.</span> Endpoints cannot read or write to collections directly. For CRUD operations, use the <a href="/docs/api" class="text-violet-400 hover:text-violet-300">REST API</a> from your client code instead.</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- What's Next -->
    <section class="border-t border-white/10 pt-12 space-y-4">
        <h2 class="text-xl font-semibold text-white">What's next?</h2>
        <div class="grid sm:grid-cols-2 gap-4">
            <a href="/docs/api" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
                <div class="text-cyan-400 font-medium mb-1">API Reference</div>
                <p class="text-sm text-[#888]">Full REST API documentation for records, auth, and real-time events.</p>
            </a>
            <a href="/docs/templates" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
                <div class="text-emerald-400 font-medium mb-1">Templates</div>
                <p class="text-sm text-[#888]">Use template functions to display dynamic data on your pages.</p>
            </a>
            <a href="/docs/collections" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
                <div class="text-cyan-400 font-medium mb-1">Collections</div>
                <p class="text-sm text-[#888]">Store and query structured content like blog posts or products.</p>
            </a>
        </div>
    </section>
</article>
{{end}}