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

@*
    EN: AI Chatbot — Configure and manage AI-powered chatbot scenarios.
    VI: AI Chatbot — Cấu hình và quản lý kịch bản chatbot AI.
    Design: pencil-design/src/pages/tMarketing/desktop/ai-chatbot.pen
*@

<PageTitle>AI Chatbot — tMarketing</PageTitle>

<div class="mkt-aibot-layout" style="display:flex;flex:1;min-height:0;">
    @* ═══ LEFT: Scenario List ═══ *@
    <div class="mkt-scenario-list" style="width:260px;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="brain" 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;">SCENARIOS</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 scenario in _scenarios)
            {
                <div style="padding:12px;border-radius:8px;background:@(scenario.IsSelected ? "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);">@scenario.Name</span>
                        <span class="mkt-badge @scenario.BadgeClass">@scenario.Status</span>
                    </div>
                    <span style="font-size:11px;color:var(--mkt-text-secondary);">@scenario.Description</span>
                    <div style="display:flex;gap:8px;">
                        @if (!string.IsNullOrEmpty(scenario.Stat1))
                        {
                            <span style="font-size:10px;color:var(--mkt-text-tertiary);">@scenario.Stat1</span>
                        }
                        @if (!string.IsNullOrEmpty(scenario.Stat2))
                        {
                            <span style="font-size:10px;color:var(--mkt-text-tertiary);">@scenario.Stat2</span>
                        }
                    </div>
                </div>
            }
        </div>
    </div>

    @* ═══ CENTER: Scenario Detail ═══ *@
    <div class="mkt-aibot-main" 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);">Product Consultant</span>
                <span style="font-size:11px;color:var(--mkt-text-secondary);">Tư vấn sản phẩm tự động với AI</span>
            </div>
            <div style="display:flex;gap:8px;">
                <button class="mkt-btn-ghost">
                    <i data-lucide="settings"></i>
                    <span>SETTINGS</span>
                </button>
                <button class="mkt-btn-primary">
                    <i data-lucide="play"></i>
                    <span>ACTIVATE</span>
                </button>
            </div>
        </div>

        @* Scenario content *@
        <div class="mkt-aibot-panels" style="flex:1;display:flex;gap:20px;padding:20px;overflow-y:auto;">
            @* Training Data Panel *@
            <div class="mkt-panel" style="flex:1;">
                <div class="mkt-panel__header">
                    <h3 class="mkt-panel__title">
                        <i data-lucide="database"></i>
                        TRAINING DATA
                    </h3>
                    <button class="mkt-btn-ghost" style="padding:4px 8px;">
                        <i data-lucide="upload"></i>
                        <span style="font-size:10px;">UPLOAD</span>
                    </button>
                </div>
                <div class="mkt-panel__body" style="display:flex;flex-direction:column;gap:10px;">
                    @foreach (var ds in _dataSources)
                    {
                        <div style="display:flex;align-items:center;gap:10px;padding:10px;background:var(--mkt-bg-page);border-radius:6px;">
                            <i data-lucide="@ds.Icon" style="width:14px;height:14px;color:@ds.Color;"></i>
                            <div style="flex:1;display:flex;flex-direction:column;gap:1px;">
                                <span style="font-size:12px;font-weight:600;color:var(--mkt-text-primary);">@ds.Name</span>
                                <span style="font-size:10px;color:var(--mkt-text-tertiary);">@ds.Size • @ds.Updated</span>
                            </div>
                            <span class="mkt-badge mkt-badge--active">SYNCED</span>
                        </div>
                    }
                </div>
            </div>

            @* Performance Metrics *@
            <div class="mkt-panel" style="flex:1;">
                <div class="mkt-panel__header">
                    <h3 class="mkt-panel__title">
                        <i data-lucide="bar-chart-2"></i>
                        PERFORMANCE
                    </h3>
                </div>
                <div class="mkt-panel__body" style="display:flex;flex-direction:column;gap:14px;">
                    @foreach (var metric in _metrics)
                    {
                        <div style="display:flex;flex-direction:column;gap:4px;">
                            <div style="display:flex;justify-content:space-between;">
                                <span style="font-size:11px;color:var(--mkt-text-secondary);">@metric.Label</span>
                                <span style="font-size:12px;font-weight:700;color:var(--mkt-text-primary);">@metric.Value</span>
                            </div>
                            <div style="width:100%;height:4px;background:var(--mkt-border);border-radius:2px;overflow:hidden;">
                                <div style="width:@metric.FillPct;height:100%;background:@metric.Color;border-radius:2px;"></div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>

    @* ═══ RIGHT: Test Chat ═══ *@
    <div class="mkt-aibot-test-chat" style="width:280px;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="message-square" 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;">TEST CHAT</span>
        </div>

        @* Chat messages *@
        <div style="flex:1;padding:12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;">
            @* User message *@
            <div style="display:flex;justify-content:flex-end;">
                <div style="padding:8px 12px;background:var(--mkt-yellow-dim);border-radius:8px;border-top-right-radius:2px;max-width:85%;">
                    <p style="margin:0;font-size:12px;color:var(--mkt-text-primary);">Cho hỏi về sản phẩm coffee đặc biệt</p>
                </div>
            </div>

            @* AI response *@
            <div style="display:flex;gap:6px;">
                <div style="width:24px;height:24px;border-radius:50%;background:var(--mkt-yellow-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i data-lucide="bot" style="width:12px;height:12px;color:var(--mkt-yellow-primary);"></i>
                </div>
                <div style="padding:8px 12px;background:var(--mkt-bg-page);border-radius:8px;border-top-left-radius:2px;max-width:85%;">
                    <p style="margin:0;font-size:12px;color:var(--mkt-text-primary);">Xin chào! 🤖 Chúng tôi có các dòng coffee đặc biệt:</p>
                    <p style="margin:4px 0 0;font-size:11px;color:var(--mkt-text-secondary);">1. Specialty Blend — 89K<br>2. Single Origin — 120K<br>3. Cold Brew — 75K</p>
                </div>
            </div>

            @* User message *@
            <div style="display:flex;justify-content:flex-end;">
                <div style="padding:8px 12px;background:var(--mkt-yellow-dim);border-radius:8px;border-top-right-radius:2px;max-width:85%;">
                    <p style="margin:0;font-size:12px;color:var(--mkt-text-primary);">Specialty Blend có gì đặc biệt?</p>
                </div>
            </div>

            @* AI response *@
            <div style="display:flex;gap:6px;">
                <div style="width:24px;height:24px;border-radius:50%;background:var(--mkt-yellow-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i data-lucide="bot" style="width:12px;height:12px;color:var(--mkt-yellow-primary);"></i>
                </div>
                <div style="padding:8px 12px;background:var(--mkt-bg-page);border-radius:8px;border-top-left-radius:2px;max-width:85%;">
                    <p style="margin:0;font-size:12px;color:var(--mkt-text-primary);">Specialty Blend là hỗn hợp từ 3 nguồn Arabica chọn lọc, rang medium để giữ hương vị phong phú. Notes: chocolate, caramel, citrus 🍊</p>
                </div>
            </div>
        </div>

        @* Input *@
        <div style="padding:12px;border-top:1px solid var(--mkt-border);display:flex;gap:8px;">
            <div style="flex:1;padding:8px 12px;background:var(--mkt-bg-page);border-radius:6px;">
                <input type="text" placeholder="Type to test..." style="width:100%;background:none;border:none;outline:none;color:var(--mkt-text-primary);font-size:12px;" />
            </div>
            <div style="width:36px;height:36px;background:var(--mkt-yellow-primary);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;">
                <i data-lucide="send" style="width:14px;height:14px;color:var(--mkt-bg-card);"></i>
            </div>
        </div>
    </div>
</div>

@code {
    // EN: Demo scenario data / VI: Dữ liệu kịch bản demo
    private record ScenarioInfo(string Name, string Status, string BadgeClass, string Description, string Stat1, string Stat2, bool IsSelected);
    private record DataSource(string Name, string Icon, string Color, string Size, string Updated);
    private record MetricInfo(string Label, string Value, string FillPct, string Color);

    private readonly ScenarioInfo[] _scenarios = new[]
    {
        new ScenarioInfo("Product Consultant", "ACTIVE", "mkt-badge--active", "Tư vấn sản phẩm tự động với AI", "2.4K convos", "92% success", true),
        new ScenarioInfo("FAQ Handler", "ACTIVE", "mkt-badge--active", "Trả lời câu hỏi thường gặp", "5.1K convos", "88% success", false),
        new ScenarioInfo("Lead Generator", "TRAINING", "mkt-badge--training", "Thu thập thông tin khách hàng", "342 test runs", "", false),
        new ScenarioInfo("Promo Campaign", "DRAFT", "mkt-badge--draft", "Giới thiệu khuyến mãi mới", "", "", false),
    };

    private readonly DataSource[] _dataSources = new[]
    {
        new DataSource("Product Catalog", "package", "#FACC15", "2.4 MB", "Updated 2h ago"),
        new DataSource("FAQ Database", "help-circle", "#3B82F6", "892 KB", "Updated 1d ago"),
        new DataSource("Price List", "tag", "#22C55E", "156 KB", "Updated 6h ago"),
    };

    private readonly MetricInfo[] _metrics = new[]
    {
        new MetricInfo("Success Rate", "92%", "92%", "#22C55E"),
        new MetricInfo("Avg Response Time", "1.2s", "75%", "#3B82F6"),
        new MetricInfo("Customer Satisfaction", "4.5/5", "90%", "#FACC15"),
        new MetricInfo("Handoff Rate", "8%", "8%", "#EF4444"),
    };
}
