@page "/marketing/chatbot"
@layout MarketingLayout
@inherits MarketingBase

@*
    EN: Chatbot Automation — Build automation flows for customer engagement.
    VI: Chatbot Automation — Xây dựng luồng tự động hóa tương tác khách hàng.
    Design: pencil-design/src/pages/tMarketing/desktop/chatbot-automation.pen
*@

<PageTitle>Chatbot Automation — tMarketing</PageTitle>

<div class="mkt-chatbot-layout" style="display:flex;flex:1;min-height:0;">
    @* ═══ LEFT: Flow List ═══ *@
    <div class="mkt-flow-list" style="width:280px;background:var(--mkt-bg-card);border-right:1px solid var(--mkt-border);display:flex;flex-direction:column;">
        <div style="padding:16px;border-bottom:1px solid var(--mkt-border);display:flex;align-items:center;justify-content:space-between;">
            <div style="display:flex;align-items:center;gap:8px;">
                <i data-lucide="git-branch" style="width:16px;height:16px;color:var(--mkt-yellow-primary);"></i>
                <span style="font-size:13px;font-weight:700;color:var(--mkt-text-primary);letter-spacing:0.5px;">FLOWS</span>
            </div>
            <div style="width:28px;height:28px;background:var(--mkt-yellow-primary);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;">
                <i data-lucide="plus" style="width:14px;height:14px;color:var(--mkt-bg-card);"></i>
            </div>
        </div>

        <div style="flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:8px;">
            @foreach (var flow in _flows)
            {
                <div style="padding:12px;border-radius:8px;background:@(flow.IsActive ? "rgba(250,204,21,0.06)" : "transparent");cursor:pointer;display:flex;flex-direction:column;gap:6px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;">
                        <span style="font-size:13px;font-weight:600;color:var(--mkt-text-primary);">@flow.Name</span>
                    </div>
                    <span style="font-size:11px;color:var(--mkt-text-secondary);">@flow.Description</span>
                    <div style="display:flex;gap:8px;">
                        <span style="font-size:10px;color:var(--mkt-text-tertiary);">@flow.Stat1</span>
                        <span style="font-size:10px;color:var(--mkt-text-tertiary);">@flow.Stat2</span>
                    </div>
                </div>
            }
        </div>
    </div>

    @* ═══ CENTER: Flow Builder Canvas ═══ *@
    <div class="mkt-flow-canvas" style="flex:1;display:flex;flex-direction:column;background:var(--mkt-bg-page);">
        @* Header *@
        <div style="padding:16px 20px;background:var(--mkt-bg-card);border-bottom:1px solid var(--mkt-border);display:flex;align-items:center;justify-content:space-between;">
            <div style="display:flex;flex-direction:column;gap:2px;">
                <span style="font-size:15px;font-weight:700;color:var(--mkt-text-primary);">Welcome Message</span>
                <span style="font-size:11px;color:var(--mkt-text-secondary);">Greet new customers automatically</span>
            </div>
            <div style="display:flex;gap:8px;">
                <button class="mkt-btn-ghost">
                    <i data-lucide="play"></i>
                    <span>TEST</span>
                </button>
                <button class="mkt-btn-primary">
                    <i data-lucide="check"></i>
                    <span>PUBLISH</span>
                </button>
            </div>
        </div>

        @* Flow canvas *@
        <div class="mkt-flow-canvas-nodes" style="flex:1;display:flex;align-items:center;justify-content:center;gap:0;padding:40px;">
            @* Trigger Node *@
            <div style="width:280px;padding:16px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);border-radius:10px;display:flex;flex-direction:column;gap:8px;">
                <div style="display:flex;align-items:center;gap:8px;">
                    <i data-lucide="zap" style="width:14px;height:14px;color:var(--mkt-success);"></i>
                    <span style="font-size:12px;font-weight:700;color:var(--mkt-success);letter-spacing:0.5px;">TRIGGER</span>
                </div>
                <span style="font-size:13px;font-weight:600;color:var(--mkt-text-primary);">New Customer Message</span>
                <span style="font-size:11px;color:var(--mkt-text-secondary);">When customer sends first message</span>
            </div>

            @* Connector *@
            <div class="mkt-flow-connector" style="width:40px;height:2px;background:var(--mkt-border);"></div>

            @* Action Node *@
            <div style="width:280px;padding:16px;background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);border-radius:10px;display:flex;flex-direction:column;gap:8px;">
                <div style="display:flex;align-items:center;gap:8px;">
                    <i data-lucide="message-circle" style="width:14px;height:14px;color:var(--mkt-info);"></i>
                    <span style="font-size:12px;font-weight:700;color:var(--mkt-info);letter-spacing:0.5px;">ACTION</span>
                </div>
                <span style="font-size:13px;font-weight:600;color:var(--mkt-text-primary);">Send Welcome Reply</span>
                <span style="font-size:11px;color:var(--mkt-text-secondary);">Auto-reply with greeting template</span>
            </div>

            @* Connector *@
            <div class="mkt-flow-connector" style="width:40px;height:2px;background:var(--mkt-border);"></div>

            @* Condition Node *@
            <div style="width:280px;padding:16px;background:rgba(250,204,21,0.08);border:1px solid rgba(250,204,21,0.2);border-radius:10px;display:flex;flex-direction:column;gap:8px;">
                <div style="display:flex;align-items:center;gap:8px;">
                    <i data-lucide="git-branch" style="width:14px;height:14px;color:var(--mkt-yellow-primary);"></i>
                    <span style="font-size:12px;font-weight:700;color:var(--mkt-yellow-primary);letter-spacing:0.5px;">CONDITION</span>
                </div>
                <span style="font-size:13px;font-weight:600;color:var(--mkt-text-primary);">Check Customer Type</span>
                <span style="font-size:11px;color:var(--mkt-text-secondary);">Route VIP vs standard customers</span>
            </div>
        </div>
    </div>

    @* ═══ RIGHT: Node Palette ═══ *@
    <div class="mkt-node-palette" style="width:260px;background:var(--mkt-bg-card);border-left:1px solid var(--mkt-border);display:flex;flex-direction:column;">
        <div style="padding:16px;border-bottom:1px solid var(--mkt-border);display:flex;align-items:center;gap:8px;">
            <i data-lucide="box" style="width:16px;height:16px;color:var(--mkt-yellow-primary);"></i>
            <span style="font-size:13px;font-weight:700;color:var(--mkt-text-primary);letter-spacing:0.5px;">ADD NODE</span>
        </div>
        <div style="flex:1;padding:8px;display:flex;flex-direction:column;gap:6px;">
            @foreach (var node in _nodeTypes)
            {
                <div style="display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--mkt-bg-page);border-radius:6px;cursor:pointer;">
                    <i data-lucide="@node.Icon" style="width:14px;height:14px;color:@node.Color;"></i>
                    <div style="display:flex;flex-direction:column;gap:1px;">
                        <span style="font-size:12px;font-weight:600;color:var(--mkt-text-primary);">@node.Name</span>
                        <span style="font-size:10px;color:var(--mkt-text-tertiary);">@node.Desc</span>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

@code {
    // EN: Demo flow data / VI: Dữ liệu luồng demo
    private record FlowInfo(string Name, string Description, string Stat1, string Stat2, bool IsActive);
    private record NodeType(string Name, string Desc, string Icon, string Color);

    private readonly FlowInfo[] _flows = new[]
    {
        new FlowInfo("Welcome Message", "Greet new customers", "1.2K sent", "85% open", true),
        new FlowInfo("Product Inquiry", "Handle product questions", "890 sent", "72% open", false),
        new FlowInfo("Abandoned Cart", "Recover lost sales", "456 sent", "28% conv", false),
        new FlowInfo("Order Update", "Shipping notifications", "Draft", "", false),
    };

    private readonly NodeType[] _nodeTypes = new[]
    {
        new NodeType("Trigger", "Start automation", "zap", "#22C55E"),
        new NodeType("Message", "Send a message", "message-circle", "#3B82F6"),
        new NodeType("Condition", "Branch logic", "git-branch", "#FACC15"),
        new NodeType("Delay", "Wait before next", "clock", "#8B5CF6"),
        new NodeType("AI Response", "Gemini auto-reply", "sparkles", "#EC4899"),
    };
}
