import type React from 'react'

export type NodeType = 'config' | 'render' | 'variable' | 'function'

export type NodeHelpEntry = {
    title: string
    content: React.ReactNode
}

const Code = ({ children }: { children: React.ReactNode }) => (
    <code className="rounded bg-muted px-1 py-0.5 text-xs font-mono">{children}</code>
)

const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
    <div className="mt-3 first:mt-0">
        <h4 className="text-xs font-semibold text-foreground">{title}</h4>
        <div className="mt-1 text-xs text-muted-foreground">{children}</div>
    </div>
)

export const NODE_HELP: Record<NodeType, NodeHelpEntry> = {
    config: {
        title: 'Config node',
        content: (
            <>
                <Section title="How to use">
                    <p>Config nodes hold PlantUML + Nunjucks template content. Connect one config to a Render node to display the diagram. Use the editor to write <Code>@startuml</Code> blocks and Nunjucks tags (<Code>{'{{ }}'}</Code>, <Code>{'{% %}'}</Code>).</p>
                </Section>
                <Section title="Using in another node">
                    <p>From another config, reference this template:</p>
                    <ul className="list-disc pl-4 mt-1 space-y-0.5">
                        <li><Code>{'{% extends "configId" %}'}</Code> — inherit layout</li>
                        <li><Code>{'{% include "configId" %}'}</Code> — inline content</li>
                        <li><Code>{'{% import "configId" as alias %}'}</Code> — use as macro namespace</li>
                    </ul>
                    <p className="mt-2">Replace <Code>configId</Code> with this node’s id or its title. Connect variables/functions to this config; they are available as <Code>{'{{ varId }}'}</Code> and <Code>{'{{ x | fnId }}'}</Code> in the template.</p>
                </Section>
            </>
        ),
    },
    render: {
        title: 'Renderer node',
        content: (
            <>
                <Section title="How to use">
                    <p>Connect a single Config node (input) to this Render node. It resolves the config’s PlantUML + Nunjucks (variables, function filters, extends/include), sends the result to the diagram service, and shows the SVG here.</p>
                </Section>
                <Section title="Using in another node">
                    <p>Renderer nodes are terminal: they only consume configs. They are not referenced from other nodes. To reuse a diagram, reference the Config node from another Config (extends/include), then connect that config to a Render node.</p>
                </Section>
            </>
        ),
    },
    variable: {
        title: 'Variable node',
        content: (
            <>
                <Section title="How to use">
                    <p>Variables hold a value (string, number, or boolean). Connect a Variable node to a Config node to expose it in that config’s template.</p>
                </Section>
                <Section title="Using in another node">
                    <p>In a Config template connected to this variable, use <Code>{'{{ '}<em>nodeId</em>{' }}'}</Code> where <em>nodeId</em> is this node’s id. Example: if the variable node id is <Code>var_001</Code>, write <Code>{'{{ var_001 }}'}</Code> in the config.</p>
                </Section>
            </>
        ),
    },
    function: {
        title: 'Function node',
        content: (
            <>
                <Section title="How to use">
                    <p>Functions are Nunjucks custom filters. Write a body using either named parameters (<Code>function(num, x, kwargs) &#123; ... &#125;</Code>) or the <Code>args</Code> array. Connect this node to a Config to use the filter in that config’s template.</p>
                </Section>
                <Section title="Using in another node">
                    <p>In a Config template, use the filter syntax: <Code>{'{{ value | '}<em>nodeId</em>{' }}'}</Code> or <Code>{'{{ value | '}<em>nodeId</em>{'(arg1, key=val) }}'}</Code>. The first argument is the value before <Code>|</Code>; extra arguments and keyword args are passed as in Nunjucks. Return a value or a Promise for async filters.</p>
                </Section>
            </>
        ),
    },
}

export function getNodeHelp(nodeType: NodeType): NodeHelpEntry {
    return NODE_HELP[nodeType] ?? { title: nodeType, content: null }
}