export const createModuleWorkflow = {
    id: "create_module",
    name: "Create Module",
    description: "Design and create an HTML module by writing project files directly, then compile it in the CMS.",
    steps: [
        {
            step: 1,
            action: "Understand the design",
            description: "Clarify with user: what does the module show? Is it a hero, grid, list, slider, CTA, form?",
            tool: null,
            critical: "Get clear requirements before writing code. Ask about: layout, colors, responsive behavior, editable fields."
        },
        {
            step: 2,
            action: "Review project styling and patterns",
            description: "Use the saved project styles and nearby modules as reference before writing code.",
            tool: "save_project_styles",
            critical: "Align typography, spacing, colors, and component patterns with the existing project."
        },
        {
            step: 3,
            action: "Create the module files",
            description: "Write index-base.tpl, style.css, script.js, and optional hook.php directly in the module folder.",
            tool: "acai-write",
            critical: "Use project-relative paths. Create complete files. Keep variable names lowercase, descriptive, and stable."
        },
        {
            step: 4,
            action: "Refine targeted blocks if needed",
            description: "Use incremental replacements for small fixes instead of rewriting whole files.",
            tool: "acai-line-replace",
            critical: "Prefer block edits for existing files to reduce token usage and avoid accidental rewrites."
        },
        {
            step: 5,
            action: "Compile the module",
            description: "Compile after editing index-base.tpl so the CMS syncs index.tpl and builder metadata.",
            tool: "compile_module",
            critical: "This is mandatory after every index-base.tpl change."
        },
        {
            step: 6,
            action: "Set example data",
            description: "Set example/static data for module preview. MUST call get_module first to discover the variable schema.",
            tool: "set_module_example_data",
            critical: "Call get_module first to get ALL variable names. Then fill EVERY variable with realistic example data. Missing variables = blank preview."
        },
        {
            step: 7,
            action: "Check module rendering",
            description: "Test the module with specific variable values to verify it renders correctly.",
            tool: "check_module",
            critical: "Test with realistic values. Check for Twig syntax errors, broken images, layout issues."
        }
    ],
    context: {
        builder_vars: "data-field-type attribute on elements creates editable fields. Types: textfield (single line text), headfield (heading), textbox (multiline), wysiwyg (rich HTML), link (URL), upload (single image), uploadBackground (background image), uploadMulti (gallery), list (dropdown options), multiv2 (repeatable block).",
        component_syntax: "c-if='varname' shows/hides element based on variable. c-for='item in items' loops over array. c-hidden='true' makes element invisible (for config vars). c-else after c-if for alternative content.",
        module_structure: "Create index-base.tpl, style.css, script.js, and optional hook.php in the module directory. Compile to generate builder.json and the public templates.",
        css_conventions: "Use TailwindCSS by default. For custom CSS: BEM naming with kebab-case. Root class should match module name. Avoid !important.",
        upload_in_modules: "Upload fields are arrays. Single image: {{ varname[0].urlPath | imagec(WIDTH) }}. Background: style=\"background-image: url('{{ varname[0].urlPath | imagec(1920) }}')\". Gallery: {% for img in varname %}{{ img.urlPath }}{% endfor %}."
    },
    rules: [
        "Variable names: lowercase, no spaces, no accents, no special characters",
        "Labels must be UNIQUE — duplicate labels create shared fields",
        "Upload fields are ALWAYS arrays — access with [0].urlPath",
        "Use ONLY Twig FILTERS (pipe syntax), not Twig functions",
        "c-if='varname' for conditional rendering of optional fields",
        "c-hidden='true' for configuration variables not shown to end user",
        "data-field-width on upload elements to set image optimization width",
        "For multiv2 (repeatable): parent element needs data-field-type='multiv2', children are the repeated fields"
    ],
    warnings: [
        "DO NOT use duplicate labels — they create shared/linked fields",
        "DO NOT forget to set example data — the module will appear blank in the editor",
        "DO NOT use Twig functions (range, random, etc.) — only filters work",
        "DO NOT access upload vars as strings — always use varname[0].urlPath (array)",
        "DO NOT mix React/Vue syntax — use Twig for templating, vanilla JS for interactivity"
    ],
    resources: [
        "acai://resources/guia-builder-vars",
        "acai://resources/guia-atributos-acai",
        "acai://resources/guia-programacion-acai"
    ]
};