@page "/en/docs/n8n"
@model Nalu.Web.Pages.En.Docs.EnN8nModel
@{
    ViewData["LangPrefix"] = "/en";
    ViewData["PtUrl"] = "/docs/n8n";
    ViewData["Title"] = "N8N Integration — NaLU AI Docs";
    ViewData["Description"] = "How to use NaLU AI in N8N to validate name, email, postal code and more in chatbot flows without writing code.";
}

<section class="bg-gradient-to-b from-slate-50 to-white pt-16 pb-8">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <div class="text-xs font-semibold text-nalu-600 uppercase tracking-wide mb-3">
            <a href="/en/docs" class="hover:underline">Docs</a> / N8N
        </div>
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">N8N Integration</h1>
        <p class="text-gray-500">Add NaLU AI to any N8N flow in under 5 minutes — no code required.</p>
    </div>
</section>

<section class="py-10 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 space-y-10">

        <!-- Overview -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">Overview</h2>
            <p class="text-gray-600 mb-3">
                NaLU AI is a REST API. In N8N, you use an <strong>HTTP Request</strong> node to call it.
                The result comes back as JSON — use an <strong>IF</strong> or <strong>Switch</strong> node
                to branch your flow based on <code class="bg-slate-100 px-1.5 py-0.5 rounded text-xs">obtained</code>
                and <code class="bg-slate-100 px-1.5 py-0.5 rounded text-xs">extracted_value</code>.
            </p>
            <div class="bg-slate-50 rounded-xl p-4 font-mono text-sm text-gray-600">
<pre>Trigger → HTTP Request (NaLU) → IF (obtained?)
                                   ├─ true  → use extracted_value
                                   └─ false → re-ask (smart_suggestion)</pre>
            </div>
        </div>

        <!-- Step 1 -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">Step 1 — Add HTTP Request node</h2>
            <p class="text-gray-600 mb-3">In your workflow, add an <strong>HTTP Request</strong> node with:</p>
            <div class="bg-white border border-gray-100 rounded-xl overflow-hidden">
                <table class="w-full text-sm">
                    <tbody class="divide-y divide-gray-50">
                        <tr><td class="px-4 py-3 font-semibold text-gray-600 w-1/3">Method</td><td class="px-4 py-3 text-gray-700">POST</td></tr>
                        <tr><td class="px-4 py-3 font-semibold text-gray-600">URL</td><td class="px-4 py-3 font-mono text-xs text-gray-700">https://api.naluai.dev/v1/extract/name</td></tr>
                        <tr><td class="px-4 py-3 font-semibold text-gray-600">Auth</td><td class="px-4 py-3 text-gray-700">Header: <code class="bg-slate-100 px-1.5 py-0.5 rounded text-xs">Authorization: Bearer nalu_YOUR_KEY</code></td></tr>
                        <tr><td class="px-4 py-3 font-semibold text-gray-600">Body type</td><td class="px-4 py-3 text-gray-700">JSON</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Step 2 -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">Step 2 — Configure the body</h2>
            <div class="bg-slate-900 rounded-xl p-4 font-mono text-sm text-slate-300">
<pre>{
  "agent_input":  "{{ $json.agent_message }}",
  "user_input":   "{{ $json.user_message }}",
  "language":     "en",
  "agent_context": "You are a customer service agent."
}</pre>
            </div>
            <p class="text-gray-500 text-sm mt-2">Replace the <code>{{ }}</code> expressions with the fields from your previous node.</p>
        </div>

        <!-- Step 3 -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">Step 3 — IF node to branch on result</h2>
            <p class="text-gray-600 mb-3">Add an <strong>IF</strong> node after HTTP Request:</p>
            <div class="bg-white border border-gray-100 rounded-xl p-4 text-sm">
                <div class="font-semibold text-gray-700 mb-2">Condition:</div>
                <code class="bg-slate-100 px-2 py-1 rounded text-xs">{{ $json.obtained }}</code>
                <span class="text-gray-500 mx-2">equals</span>
                <code class="bg-slate-100 px-2 py-1 rounded text-xs">true</code>
            </div>
            <div class="mt-3 space-y-2 text-sm text-gray-600">
                <div>✅ <strong>true branch:</strong> use <code class="bg-slate-100 px-1.5 py-0.5 rounded text-xs">{{ $json.extracted_value }}</code></div>
                <div>❌ <strong>false branch:</strong> re-ask using <code class="bg-slate-100 px-1.5 py-0.5 rounded text-xs">{{ $json.smart_suggestion }}</code></div>
            </div>
        </div>

        <!-- validate_reply with Switch -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">Step 4 — validate_reply with Switch node</h2>
            <p class="text-gray-600 mb-3">For context analysis, use a <strong>Switch</strong> node on <code class="bg-slate-100 px-1.5 py-0.5 rounded text-xs">reply_type</code>:</p>
            <div class="bg-slate-50 rounded-xl p-4 font-mono text-sm text-gray-600">
<pre>Switch on: {{ $json.reply_type }}
  ├─ "confirmation"    → proceed with flow
  ├─ "rejection"       → offer alternative
  ├─ "counter_proposal"→ evaluate {{ $json.extracted_value }}
  ├─ "handoff"         → transfer to human
  └─ "cancel"          → trigger retention flow</pre>
            </div>
        </div>

        <!-- Body for reply -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">validate_reply body</h2>
            <div class="bg-slate-900 rounded-xl p-4 font-mono text-sm text-slate-300">
<pre>{
  "agent_message": "{{ $json.last_agent_message }}",
  "user_reply":    "{{ $json.user_message }}",
  "agent_context": "Negotiation agent for installment plans."
}</pre>
            </div>
            <p class="text-gray-500 text-sm mt-2">URL: <code class="bg-slate-100 px-1.5 py-0.5 rounded text-xs">https://api.naluai.dev/v1/extract/reply</code> — costs 5 credits.</p>
        </div>

        <!-- Practical tips -->
        <div class="bg-nalu-50 border border-nalu-100 rounded-2xl p-6">
            <div class="font-bold text-nalu-800 mb-3">💡 Practical tips</div>
            <ul class="text-sm text-nalu-700 space-y-2">
                <li>• Store your API key in N8N <strong>Credentials</strong> — don't hardcode it in nodes</li>
                <li>• Use <code class="bg-nalu-100 px-1.5 py-0.5 rounded text-xs">agent_context</code> to improve accuracy significantly</li>
                <li>• For yes/no: use IF on <code class="bg-nalu-100 px-1.5 py-0.5 rounded text-xs">extracted_value === "sim"</code> (or "yes" for <code>language: "en"</code>)</li>
                <li>• Set node timeout to 10s+ — NaLU usually responds in &lt;500ms but allow headroom</li>
                <li>• On 429: use N8N's built-in retry with 60s delay</li>
            </ul>
        </div>
    </div>
</section>
