import React, { useState } from "react";
import { useMarkdownTemplates } from "../../../utils/queries/markdown-template-queries";
import PermissionGuard from "../../PermissionGuard";
import { useNavigate } from "react-router-dom";
import JsonSchemaModal from "../../Modals/JsonSchemaModal";

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 <p>Loading...</p>;
    if (error) return <p>Error loading templates</p>;

    return (
        <aside className="menu">
            <div className="control is-expanded">
                <input
                    className="input is-small"
                    type="text"
                    placeholder="Search templates..."
                    onChange={(e) => setKeyword(e.target.value)}
                />
            </div>
            <PermissionGuard rolesRequired={["admin", "creator"]}>
                <a
                    href="/template/create"
                    className="button is-primary is-small is-fullwidth"
                    style={{ marginBottom: "10px" }}
                >
                    Create New Template
                </a>
            </PermissionGuard>
            <ul className="menu-list">
                {filteredTemplates?.map((template) => (
                    <li key={template.id}>
                        <div className="is-flex is-justify-content-space-between is-align-items-center">
                            <span>{template.title}</span>
                            <div className="field has-addons is-justify-content-flex-end">
                                <button
                                    className="button is-small control"
                                    onClick={() => handleTemplateClick(template.id)}
                                    type="button"
                                >
                                    <span className="icon">
                                        <i className="fas fa-edit"></i>
                                    </span>
                                </button>
                                <button
                                    className="button is-small control"
                                    onClick={() => setSelectedSchema(generateJsonSchema(template))}
                                    type="button"
                                >
                                    <span className="icon">
                                        <i className="fas fa-code"></i>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </li>
                ))}
            </ul>
            <JsonSchemaModal
                isActive={selectedSchema !== null}
                onClose={() => setSelectedSchema(null)}
                schema={selectedSchema}
            />
        </aside>
    );
};

export default TemplateTab;