/** @jsxRuntime classic */
/** @jsx React.createElement */
function CodeEditor(props) {
    var containerRef = React.useRef(null);
    var editorRef = React.useRef(null);
    var monacoRef = React.useRef(null);
    var disposablesRef = React.useRef([]);

    var height = props.height || 220;
    var language = props.language || "json";
    var value = typeof props.value === "string" ? props.value : "";

    var _useState = React.useState(false);
    var plainMode = _useState[0];
    var setPlainMode = _useState[1];

    var _useState2 = React.useState(false);
    var ready = _useState2[0];
    var setReady = _useState2[1];

    var _useState3 = React.useState({ count: 0, first: "" });
    var markerState = _useState3[0];
    var setMarkerState = _useState3[1];

    function ensureMonacoReady() {
        if (window.monaco && window.monaco.editor) {
            return Promise.resolve(window.monaco);
        }

        if (!window.require) {
            return Promise.reject(new Error("Monaco loader indisponible"));
        }

        if (!window.__tcMonacoPromise) {
            window.__tcMonacoPromise = new Promise(function (resolve, reject) {
                try {
                    if (!window.__tcMonacoConfigured) {
                        window.require.config({
                            paths: {
                                vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs"
                            }
                        });
                        window.__tcMonacoConfigured = true;
                    }

                    window.require(["vs/editor/editor.main"], function () {
                        if (window.monaco && window.monaco.editor) {
                            resolve(window.monaco);
                        } else {
                            reject(new Error("Monaco non initialise"));
                        }
                    }, function (err) {
                        reject(err || new Error("Chargement Monaco impossible"));
                    });
                } catch (e) {
                    reject(e);
                }
            });
        }

        return window.__tcMonacoPromise;
    }

    function disposeAll() {
        for (var i = 0; i < disposablesRef.current.length; i++) {
            try {
                disposablesRef.current[i].dispose();
            } catch (e) { }
        }
        disposablesRef.current = [];

        if (editorRef.current) {
            try {
                editorRef.current.dispose();
            } catch (e) { }
            editorRef.current = null;
        }
    }

    function publishMarkers(monaco, model) {
        if (!monaco || !model) return;
        var markers = monaco.editor.getModelMarkers({ resource: model.uri }) || [];
        setMarkerState({
            count: markers.length,
            first: markers.length ? String(markers[0].message || "") : ""
        });
        if (typeof props.onValidate === "function") {
            props.onValidate(markers);
        }
    }

    React.useEffect(function () {
        if (props.forcePlainText) {
            setPlainMode(true);
            return;
        }

        var cancelled = false;

        ensureMonacoReady().then(function (monaco) {
            if (cancelled || !containerRef.current) return;

            monacoRef.current = monaco;

            var editor = monaco.editor.create(containerRef.current, {
                value: value,
                language: language,
                theme: "vs",
                automaticLayout: true,
                minimap: { enabled: false },
                scrollBeyondLastLine: false,
                lineNumbers: "on",
                glyphMargin: true,
                folding: true,
                foldingStrategy: "auto",
                showFoldingControls: "always",
                wordWrap: "on",
                fontSize: 13,
                lineNumbersMinChars: 3,
                tabSize: 2
            });

            editorRef.current = editor;
            var model = editor.getModel();

            disposablesRef.current.push(editor.onDidChangeModelContent(function () {
                if (typeof props.onChange === "function") {
                    props.onChange(editor.getValue());
                }
            }));

            if (model) {
                publishMarkers(monaco, model);
                disposablesRef.current.push(monaco.editor.onDidChangeMarkers(function (uris) {
                    if (!editorRef.current || !editorRef.current.getModel()) return;
                    var current = editorRef.current.getModel().uri;
                    var touched = uris.some(function (uri) { return String(uri) === String(current); });
                    if (touched) publishMarkers(monaco, editorRef.current.getModel());
                }));
            }

            setReady(true);
        }).catch(function () {
            if (cancelled) return;
            setPlainMode(true);
        });

        return function () {
            cancelled = true;
            disposeAll();
        };
    }, []);

    React.useEffect(function () {
        if (!editorRef.current) return;

        var editor = editorRef.current;
        var current = editor.getValue();
        if (current === value) return;

        var selection = editor.getSelection();
        var position = editor.getPosition();
        editor.setValue(value);
        if (selection) editor.setSelection(selection);
        if (position) editor.setPosition(position);
    }, [value]);

    React.useEffect(function () {
        if (!editorRef.current || !monacoRef.current) return;
        var model = editorRef.current.getModel();
        if (!model) return;
        monacoRef.current.editor.setModelLanguage(model, language);
        publishMarkers(monacoRef.current, model);
    }, [language]);

    function runEditorAction(actionId) {
        if (!editorRef.current) return;
        var action = editorRef.current.getAction(actionId);
        if (!action || typeof action.run !== "function") return;
        action.run();
    }

    if (plainMode) {
        return (
            <textarea
                value={value}
                onChange={function (e) {
                    if (typeof props.onChange === "function") props.onChange(e.target.value);
                }}
                placeholder={props.placeholder || ""}
                style={{ minHeight: height + "px", fontFamily: "Consolas,Monaco,monospace", fontSize: "0.82rem" }}
            />
        );
    }

    return (
        <div className="code-editor-shell">
            {props.showToolbar !== false && (
                <div className="code-editor-toolbar">
                    <div className="code-editor-meta">
                        <span className="code-editor-chip">{language}</span>
                        {(language === "json" || language === "javascript") ? <span className="code-editor-chip">pliage local via fleches a gauche</span> : null}
                        {ready ? (
                            markerState.count > 0 ? (
                                <span className="code-editor-chip warn">{markerState.count} erreur(s): {markerState.first}</span>
                            ) : (
                                <span className="code-editor-chip ok">syntaxe OK</span>
                            )
                        ) : <span className="code-editor-chip">chargement...</span>}
                    </div>
                    <div className="actions" style={{ margin: 0 }}>
                        <button type="button" className="btn secondary" onClick={function () { runEditorAction("editor.action.formatDocument"); }}>Formatter</button>
                        <button type="button" className="btn secondary" onClick={function () { runEditorAction("editor.foldAll"); }}>Tout plier</button>
                        <button type="button" className="btn secondary" onClick={function () { runEditorAction("editor.unfoldAll"); }}>Tout deplier</button>
                    </div>
                </div>
            )}
            <div className="code-editor-surface" ref={containerRef} style={{ height: height + "px" }} />
        </div>
    );
}

function BackofficeSidebar(props) {
    var groups = [];
    var groupIndexById = {};

    props.menu.forEach(function (item) {
        var groupName = item.group || "Navigation";
        if (!(groupName in groupIndexById)) {
            groupIndexById[groupName] = groups.length;
            groups.push({ name: groupName, items: [] });
        }
        groups[groupIndexById[groupName]].items.push(item);
    });

    return (
        <aside className="sidebar">
            <div className="brand">tc2gtm</div>
            <div className="brand-sub">Back Office</div>
            {groups.map(function (group) {
                return (
                    <div key={group.name}>
                        <div className="menu-title">{group.name}</div>
                        <nav className="menu">
                            {group.items.map(function (item) {
                                return (
                                    <button
                                        key={item.id}
                                        className={"menu-btn " + (props.active === item.id ? "active" : "") + (item.enabled ? "" : " disabled")}
                                        onClick={function () { if (item.enabled) props.onSelect(item.id); }}
                                    >
                                        {item.label}
                                    </button>
                                );
                            })}
                        </nav>
                    </div>
                );
            })}
        </aside>
    );
}

function BackofficeHelpButton(props) {
    return (
        <button className="help-cta" onClick={props.onOpen} type="button">
            Comprendre les ecrans
        </button>
    );
}

function BackofficeHelpModal(props) {
    if (!props.open) return null;

    var selectedScreen = props.selectedScreen || props.currentScreen || (props.screens && props.screens[0]) || null;

    return (
        <div className="help-modal-backdrop" onClick={props.onClose} role="presentation">
            <div
                className="help-modal"
                role="dialog"
                aria-modal="true"
                aria-labelledby="backoffice-help-title"
                onClick={function (event) { event.stopPropagation(); }}
            >
                <div className="help-modal-header">
                    <div>
                        <div className="help-eyebrow">Guide du backoffice</div>
                        <h2 id="backoffice-help-title">A quoi sert chaque ecran</h2>
                        <p className="subtitle compact">
                            Cette aide decrit l'objectif de chaque ecran, le type d'objet manipule et le bon ordre d'utilisation.
                        </p>
                    </div>
                    <button className="help-close" onClick={props.onClose} type="button" aria-label="Fermer l'aide">
                        Fermer
                    </button>
                </div>

                <div className="help-current-banner">
                    <strong>Ecran actif:</strong> {props.currentScreen ? props.currentScreen.label : "-"}
                </div>

                <div className="help-doc-layout">
                    <aside className="help-doc-nav">
                        <div className="help-label">Pages d'aide</div>
                        <div className="help-doc-nav-list">
                            {props.screens.map(function (screen) {
                                return (
                                    <button
                                        key={screen.id}
                                        type="button"
                                        className={"help-doc-link" + (selectedScreen && selectedScreen.id === screen.id ? " active" : "")}
                                        onClick={function () { props.onSelectScreen(screen.id); }}
                                    >
                                        <span>{screen.label}</span>
                                        {props.activeId === screen.id ? <span className="help-chip">Actuel</span> : null}
                                    </button>
                                );
                            })}
                        </div>
                    </aside>

                    {selectedScreen && (
                        <section className="help-doc-page help-section active">
                            <div className="help-section-head">
                                <h3>{selectedScreen.label}</h3>
                                {props.activeId === selectedScreen.id ? <span className="help-chip">Ecran ouvert</span> : null}
                            </div>
                            <p className="help-lead">{selectedScreen.description}</p>

                            <div className="help-block">
                                <div className="help-label">Objet manipule</div>
                                <p>{selectedScreen.objectFocus}</p>
                            </div>

                            <div className="help-block">
                                <div className="help-label">Quand l'utiliser</div>
                                <ul className="help-list">
                                    {selectedScreen.whenToUse.map(function (item, index) {
                                        return <li key={index}>{item}</li>;
                                    })}
                                </ul>
                            </div>

                            <div className="help-block">
                                <div className="help-label">Parcours recommande</div>
                                <ol className="help-list help-list-ordered">
                                    {selectedScreen.steps.map(function (item, index) {
                                        return <li key={index}>{item}</li>;
                                    })}
                                </ol>
                            </div>

                            {selectedScreen.fields && selectedScreen.fields.length ? (
                                <div className="help-block">
                                    <div className="help-label">Champs a renseigner</div>
                                    <div className="help-detail-list">
                                        {selectedScreen.fields.map(function (field, index) {
                                            return (
                                                <div key={index} className="help-detail-card">
                                                    <div className="help-detail-title">{field.name}</div>
                                                    <p>{field.description}</p>
                                                    {field.expected ? <div className="help-detail-meta"><strong>Attendu:</strong> {field.expected}</div> : null}
                                                    {field.example ? <div className="help-detail-meta"><strong>Exemple:</strong> {field.example}</div> : null}
                                                </div>
                                            );
                                        })}
                                    </div>
                                </div>
                            ) : null}

                            {selectedScreen.actions && selectedScreen.actions.length ? (
                                <div className="help-block">
                                    <div className="help-label">CTA et boutons</div>
                                    <div className="help-detail-list">
                                        {selectedScreen.actions.map(function (action, index) {
                                            return (
                                                <div key={index} className="help-detail-card">
                                                    <div className="help-detail-title">{action.name}</div>
                                                    <p>{action.description}</p>
                                                    {action.outcome ? <div className="help-detail-meta"><strong>Effet:</strong> {action.outcome}</div> : null}
                                                </div>
                                            );
                                        })}
                                    </div>
                                </div>
                            ) : null}

                            {selectedScreen.outputs && selectedScreen.outputs.length ? (
                                <div className="help-block">
                                    <div className="help-label">Ce qu'il faut lire a l'ecran</div>
                                    <ul className="help-list">
                                        {selectedScreen.outputs.map(function (item, index) {
                                            return <li key={index}>{item}</li>;
                                        })}
                                    </ul>
                                </div>
                            ) : null}

                            <div className="help-block">
                                <div className="help-label">A retenir</div>
                                <p>{selectedScreen.takeaway}</p>
                            </div>
                        </section>
                    )}
                </div>
            </div>
        </div>
    );
}

function UdlRuntimeStepCard(props) {
    return (
        <div className={"runtime-step-card" + (props.active ? " active" : "")}>
            <div className="runtime-step-index">{props.step}</div>
            <div>
                <div className="runtime-step-title">{props.title}</div>
                <div className="runtime-step-text">{props.text}</div>
            </div>
        </div>
    );
}

function FormHint(props) {
    return <div className="field-hint">{props.children}</div>;
}

function UdlRuntimeBadges(props) {
    return (
        <div className="examples-inline" style={{ marginTop: "8px" }}>
            <span className={"status " + (props.depsReady ? "ok" : "error")} style={{ marginBottom: 0 }}>
                Config/dependances: {props.depsReady ? "chargees" : "non chargees"}
            </span>
            <span className={"status " + (props.runtimeReady ? "ok" : "error")} style={{ marginBottom: 0 }}>
                Runtime UDL: {props.runtimeReady ? "charge" : "non charge"}
            </span>
        </div>
    );
}

function UdlRuntimeDomainPanel(props) {
    return (
        <section className="panel runtime-step-panel domain-panel">
            <div className="panel-kicker">Etape 2</div>
            <h3>Contexte de test et configuration</h3>
            <p className="subtitle compact">
                Renseignez le contexte puis lancez `Dry run` et `Initialiser` depuis cette meme tuile. Le runtime utilisera le contenu courant de l'onglet d'edition.
            </p>

            <div className="tab-row" style={{ marginTop: "8px", marginBottom: "10px" }}>
                <button type="button" className={"tab-btn" + (props.contextTab === "form" ? " active" : "")} onClick={function () { props.setContextTab("form"); }}>
                    Formulaire
                </button>
                <button type="button" className={"tab-btn" + (props.contextTab === "config" ? " active" : "")} onClick={function () { props.setContextTab("config"); }}>
                    Editer udl_config.js
                </button>
            </div>

            {props.contextTab === "form" && (
                <>
                    <div className="examples-inline" style={{ marginTop: "8px" }}>
                        {props.domainPresets.map(function (preset, idx) {
                            return (
                                <button type="button" key={preset.label} className="btn secondary" onClick={function () { props.applyDomainPreset(idx); }}>
                                    {preset.label}
                                </button>
                            );
                        })}
                    </div>

                    <div className="field">
                        <label className="label">Host simule</label>
                        <input value={props.hostInput} onChange={function (e) { props.setHostInput(e.target.value); }} placeholder="ex: particulier.edf.fr" />
                        <FormHint>Nom de domaine a tester. Sert a appliquer les regles de selection de profil basees sur `host`.</FormHint>
                    </div>
                    <div className="field">
                        <label className="label">URL simulee (href)</label>
                        <input value={props.hrefInput} onChange={function (e) { props.setHrefInput(e.target.value); }} placeholder="ex: https://particulier.edf.fr/" />
                        <FormHint>URL complete utilisee quand certaines regles ciblent `href` ou quand vous voulez tester un chemin/page specifique.</FormHint>
                    </div>

                    <div className="actions">
                        <button type="button" className="btn" onClick={props.startForResolvedDomain} disabled={props.isStarting || props.isResolving}>
                            {props.isStarting ? "Initialisation..." : "Initialiser pour le domaine simule"}
                        </button>
                        <button type="button" className="btn secondary" onClick={props.runDomainResolution} disabled={props.isResolving || props.isStarting}>
                            {props.isResolving ? "Dry run..." : "Dry run"}
                        </button>
                    </div>
                    <FormHint>`Dry run` ne demarre pas le runtime: il montre seulement la config retenue. `Initialiser` lance `window.udl.start(...)` avec cette config.</FormHint>

                    {props.dryRunResult && (
                        <div className="trace-list" style={{ maxHeight: "190px" }}>
                            <div className="trace-item trace-profile">
                                <strong>Profil retenu:</strong> {props.dryRunResult.profile || "defaults"}
                            </div>
                            <div className="trace-item trace-tms">
                                <strong>Containers charges:</strong>
                                <div style={{ marginTop: "6px", whiteSpace: "pre-wrap" }}>
                                    {props.pretty(props.dryRunResult.config && props.dryRunResult.config.containers ? props.dryRunResult.config.containers : [])}
                                </div>
                            </div>
                        </div>
                    )}
                </>
            )}

            {props.contextTab === "config" && (
                <>
                    <div className="field">
                        <label className="label">Edition JavaScript de udl_config.js</label>
                        <CodeEditor
                            language="javascript"
                            value={props.activeConfigText}
                            onChange={props.onConfigEditorChange}
                            height={260}
                        />
                        <FormHint>Le contenu de cet editeur est pris en compte directement par `Dry run` et `Initialiser`.</FormHint>
                    </div>
                    <div className="actions">
                        <button className="btn secondary" onClick={props.reloadConfigFromRemote}>Recharger depuis le fichier distant</button>
                        <button className="btn secondary" onClick={props.undoConfigEdit} disabled={!props.canUndo}>Annuler la derniere modification</button>
                        <button className="btn secondary" onClick={props.redoConfigEdit} disabled={!props.canRedo}>Rejouer la derniere modification</button>
                    </div>
                    <FormHint>Ces actions n'ecrivent pas dans le fichier source distant. Elles pilotent seulement l'etat de l'editeur local du lab.</FormHint>
                </>
            )}
        </section>
    );
}

function UdlRuntimeLoadPanel(props) {
    return (
        <section className="panel runtime-step-panel runtime-panel">
            <div className="panel-kicker">Etape 1</div>
            <h3>Charger le runtime</h3>
            <p className="subtitle compact">
                Choisissez les versions de `udl`, `ad_lib` et `udl_config` a tester, puis chargez-les dans la page. Cette etape rend `window.udl` disponible, sans encore lancer `start()`.
            </p>

            <div className="field" style={{ marginTop: "8px" }}>
                <label className="label">Version udl</label>
                <select value={props.selectedUdlVersionId} onChange={function (e) { props.setSelectedUdlVersionId(e.target.value); }}>
                    {props.udlVersionOptions.map(function (opt) {
                        return <option key={opt.id} value={opt.id}>{opt.display}</option>;
                    })}
                </select>
            </div>

            <div className="field" style={{ marginTop: "8px" }}>
                <label className="label">Version ad_lib</label>
                <select value={props.selectedAdLibVersionId} onChange={function (e) { props.setSelectedAdLibVersionId(e.target.value); }}>
                    {props.adLibVersionOptions.map(function (opt) {
                        return <option key={opt.id} value={opt.id}>{opt.display}</option>;
                    })}
                </select>
            </div>

            <div className="field" style={{ marginTop: "8px" }}>
                <label className="label">Version udl_config</label>
                <select value={props.selectedConfigVersionId} onChange={function (e) { props.setSelectedConfigVersionId(e.target.value); }}>
                    {props.configVersionOptions.map(function (opt) {
                        return <option key={opt.id} value={opt.id}>{opt.display}</option>;
                    })}
                </select>
                <FormHint>Par defaut, chaque select pointe vers `active` pour tester l'etat courant du workspace.</FormHint>
            </div>

            <div className="actions">
                <button className="btn" onClick={props.loadUdlFile}>Charger runtime UDL</button>
            </div>
            <FormHint>`Charger runtime UDL` applique d'abord `ad_lib` + `udl_config` selectionnes, puis le `udl` selectionne. A ce stade, le runtime est present mais il n'a pas encore resout ni applique la configuration du domaine.</FormHint>

            <div className="status-inline-list">
                <span className={"status " + (props.runtimeReady ? "ok" : "error")} style={{ marginBottom: 0 }}>
                    Runtime: {props.runtimeReady ? "charge" : "non charge"}
                </span>
            </div>
        </section>
    );
}

function UdlRuntimeEventPanel(props) {
    return (
        <section className="panel runtime-step-panel event-panel">
            <div className="panel-kicker">Etape 3</div>
            <h3>Emettre un evenement integrateur</h3>
            <p className="subtitle compact">
                Quand le runtime est charge et initialise, choisissez un exemple ou saisissez votre propre JSON, puis poussez-le dans `dataLayer`.
            </p>

            <div className="field">
                <label className="label">Template objet integrateur</label>
                <select value={props.selectedTemplateId} onChange={function (e) { props.loadTemplate(e.target.value); }}>
                    {props.eventTemplates.map(function (tpl) {
                        return <option key={tpl.id} value={tpl.id}>{tpl.label}</option>;
                    })}
                </select>
                <FormHint>Charge un exemple de payload dans l'editeur JSON pour partir d'un cas courant: `screen_view`, clic, navigation ou autopromo.</FormHint>
            </div>

            <div className="field">
                <label className="label">Objet pousse dans dataLayer (JSON)</label>
                <CodeEditor
                    language="json"
                    value={props.eventPayloadText}
                    onChange={props.setEventPayloadText}
                    height={220}
                />
                <FormHint>JSON brut envoye dans `window.dataLayer.push(...)`. Le champ `event` est la cle principale pour le mapping UDL vers TC.</FormHint>
            </div>

            <div className="actions">
                <button className="btn" onClick={props.pushIntegratorEvent}>Pousser dans dataLayer</button>
            </div>
            <FormHint>Ce bouton simule l'integrateur. Il pousse le payload dans `dataLayer`, puis UDL decide si un mapping doit remplir `tc_vars` et appeler `cact`.</FormHint>
            <div className={"status " + props.statusType}>{props.status}</div>
        </section>
    );
}