HangmanLab.Frontend/src/components/Navigations/SideTabs/TemplateTab.js

import React, { useState } from "react";
import { useMarkdownTemplates } from "../../../utils/queries/markdown-template-queries";
import PermissionGuard from "../../PermissionGuard";
import { Link, useNavigate } from "react-router-dom";
import { Search, LayoutTemplate, Pencil, Braces } from "lucide-react";
import JsonSchemaModal from "../../Modals/JsonSchemaModal";
import { Input } from "../../ui/input";
import { Button } from "../../ui/button";
import { Spinner } from "../../ui/misc";

const TemplateTab = () => {
    const { data: templates, isLoading, error } = useMarkdownTemplates();
    const [keyword, setKeyword] = useState("");
    const [selectedSchema, setSelectedSchema] = useState(null);
    const navigate = useNavigate();

    const filteredTemplates = templates?.filter(template => 
        template.title.toLowerCase().includes(keyword.toLowerCase())
    );

    const handleTemplateClick = (templateId) => {
        navigate(`/template/edit/${templateId}`);
    };

    const generateJsonSchema = (template) => {
        const schema = {
            type: "object",
            properties: {},
            $defs: {}
        };

        const generateTypeSchema = (param, defName) => {
            switch (param.type.base_type) {
                case "string":
                    return {
                        type: "string"
                    };
                case "markdown":
                    return {
                        type: "string",
                        description: "Markdown content"
                    };
                case "enum":
                    return {
                        type: "string",
                        enum: param.type.definition.enums
                    };
                case "list":
                    if (param.type.extend_type.base_type === "string") {
                        return {
                            type: "array",
                            items: {
                                type: "string"
                            }
                        };
                    } else if (param.type.extend_type.base_type === "list" || 
                             param.type.extend_type.base_type === "template") {
                        const itemsDefName = `${defName}_items`;
                        schema.$defs[itemsDefName] = generateTypeSchema(
                            { type: param.type.extend_type },
                            itemsDefName
                        );
                        return {
                            type: "array",
                            items: {
                                $ref: `#/$defs/${itemsDefName}`
                            }
                        };
                    } else {
                        return {
                            type: "array",
                            items: generateTypeSchema(
                                { type: param.type.extend_type },
                                `${defName}_items`
                            )
                        };
                    }
                case "template":
                    const nestedTemplate = templates.find(t => t.id === param.type.definition.template.id);
                    if (nestedTemplate) {
                        const nestedSchema = {
                            type: "object",
                            properties: {}
                        };
                        nestedTemplate.parameters.forEach(nestedParam => {
                            nestedSchema.properties[nestedParam.name] = generateTypeSchema(
                                nestedParam,
                                `${defName}_${nestedParam.name}`
                            );
                        });
                        return nestedSchema;
                    } else {
                        return {
                            type: "object",
                            properties: {}
                        };
                    }
                default:
                    return {
                        type: "object",
                        properties: {}
                    };
            }
        };

        template.parameters.forEach(param => {
            const defName = `param_${param.name}`;
            schema.properties[param.name] = generateTypeSchema(param, defName);
        });

        if (Object.keys(schema.$defs).length === 0) {
            delete schema.$defs;
        }

        return schema;
    };

    if (isLoading) return <Spinner label="Loading templates" />;
    if (error)
        return (
            <p className="font-mono text-xs text-destructive">
                Error loading templates
            </p>
        );

    return (
        <div className="space-y-3">
            <div className="relative">
                <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                <Input
                    className="h-8 pl-8 text-xs"
                    type="text"
                    placeholder="Search templates…"
                    onChange={(e) => setKeyword(e.target.value)}
                />
            </div>
            <PermissionGuard rolesRequired={["admin", "creator"]}>
                <Button asChild size="sm" variant="outline" className="w-full">
                    <Link to="/template/create">
                        <LayoutTemplate className="h-4 w-4" /> New Template
                    </Link>
                </Button>
            </PermissionGuard>
            <ul className="space-y-0.5">
                {filteredTemplates?.map((template) => (
                    <li
                        key={template.id}
                        className="group flex items-center gap-1 rounded-md px-2 py-1.5 transition-colors hover:bg-accent/60"
                    >
                        <LayoutTemplate className="h-3.5 w-3.5 shrink-0 text-secondary/80" />
                        <span className="min-w-0 flex-1 truncate text-sm text-foreground/90">
                            {template.title}
                        </span>
                        <div className="flex shrink-0 items-center opacity-0 transition-opacity group-hover:opacity-100">
                            <button
                                type="button"
                                className="grid h-6 w-6 place-items-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-primary"
                                title="Edit"
                                onClick={() => handleTemplateClick(template.id)}
                            >
                                <Pencil className="h-3.5 w-3.5" />
                            </button>
                            <button
                                type="button"
                                className="grid h-6 w-6 place-items-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-primary"
                                title="JSON schema"
                                onClick={() => setSelectedSchema(generateJsonSchema(template))}
                            >
                                <Braces className="h-3.5 w-3.5" />
                            </button>
                        </div>
                    </li>
                ))}
            </ul>
            <JsonSchemaModal
                isActive={selectedSchema !== null}
                onClose={() => setSelectedSchema(null)}
                schema={selectedSchema}
            />
        </div>
    );
};

export default TemplateTab;