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

@*
    EN: Livechat Console — Real-time customer chat with 3-panel layout.
    VI: Livechat Console — Chat khách hàng thời gian thực với bố cục 3 panel.
    Design: pencil-design/src/pages/tMarketing/desktop/livechat-console.pen
*@

<PageTitle>Livechat — tMarketing</PageTitle>

<div class="mkt-chat-layout" style="height:calc(100vh - 0px);">
    @* ═══ LEFT: Conversation List ═══ *@
    <div class="mkt-chat-list" style="background:var(--mkt-bg-card);">
        @* Header *@
        <div style="padding:16px;border-bottom:1px solid var(--mkt-border);display:flex;align-items:center;justify-content:space-between;">
            <span style="font-size:13px;font-weight:700;color:var(--mkt-text-primary);letter-spacing:0.5px;">CONVERSATIONS</span>
            <div style="display:flex;gap:8px;">
                <span style="font-size:11px;font-weight:600;color:var(--mkt-yellow-primary);cursor:pointer;">ALL</span>
                <span style="font-size:11px;color:var(--mkt-text-tertiary);cursor:pointer;">UNREAD</span>
            </div>
        </div>

        @* Conversation items *@
        @foreach (var conv in _conversations)
        {
            <div class="mkt-chat-item @(conv.IsActive ? "mkt-chat-item--active" : "")" @onclick="@(() => SelectConversation(conv))">
                <div style="width:36px;height:36px;border-radius:50%;background:@conv.AvatarBg;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--mkt-text-primary);flex-shrink:0;">
                    @conv.Initials
                </div>
                <div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;">
                        <span style="font-size:13px;font-weight:600;color:var(--mkt-text-primary);">@conv.Name</span>
                        <span style="font-size:10px;color:var(--mkt-text-tertiary);">@conv.Time</span>
                    </div>
                    <span style="font-size:12px;color:var(--mkt-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">@conv.LastMessage</span>
                    <div style="display:flex;gap:4px;align-items:center;">
                        <span style="font-size:10px;padding:1px 5px;border-radius:3px;background:@conv.ChannelBg;color:@conv.ChannelColor;font-weight:600;">@conv.Channel</span>
                        @if (conv.Unread > 0)
                        {
                            <span style="font-size:9px;padding:1px 5px;border-radius:8px;background:var(--mkt-yellow-primary);color:var(--mkt-bg-card);font-weight:700;">@conv.Unread</span>
                        }
                    </div>
                </div>
            </div>
        }
    </div>

    @* ═══ CENTER: Chat Area ═══ *@
    <div class="mkt-chat-main" style="background:var(--mkt-bg-page);">
        @* Chat header *@
        <div style="padding:12px 20px;border-bottom:1px solid var(--mkt-border);display:flex;align-items:center;gap:12px;">
            <div style="width:40px;height:40px;border-radius:50%;background:var(--mkt-info);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:white;">NA</div>
            <div style="flex:1;display:flex;flex-direction:column;gap:2px;">
                <span style="font-size:14px;font-weight:600;color:var(--mkt-text-primary);">Nguyễn Văn A</span>
                <span style="font-size:11px;color:var(--mkt-success);">● Online</span>
            </div>
            <div style="display:flex;gap:8px;">
                <button class="mkt-btn-ghost" style="padding:6px;">
                    <i data-lucide="phone" style="width:14px;height:14px;"></i>
                </button>
                <button class="mkt-btn-ghost" style="padding:6px;">
                    <i data-lucide="more-vertical" style="width:14px;height:14px;"></i>
                </button>
            </div>
        </div>

        @* Chat messages *@
        <div style="flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;">
            @* Customer message *@
            <div style="display:flex;gap:8px;max-width:70%;">
                <div style="padding:10px 14px;background:var(--mkt-bg-card);border-radius:10px;border-top-left-radius:2px;">
                    <p style="margin:0;font-size:13px;color:var(--mkt-text-primary);">Xin chào, tôi muốn hỏi về sản phẩm mới ạ 🤗</p>
                    <span style="font-size:10px;color:var(--mkt-text-tertiary);margin-top:4px;display:block;">10:30 AM</span>
                </div>
            </div>

            @* Agent reply *@
            <div style="display:flex;justify-content:flex-end;">
                <div style="padding:10px 14px;background:var(--mkt-yellow-dim);border-radius:10px;border-top-right-radius:2px;max-width:70%;">
                    <p style="margin:0;font-size:13px;color:var(--mkt-text-primary);">Chào bạn! 👋 Cảm ơn bạn đã liên hệ. Bạn quan tâm đến sản phẩm nào ạ?</p>
                    <span style="font-size:10px;color:var(--mkt-text-tertiary);margin-top:4px;display:block;">10:31 AM</span>
                </div>
            </div>

            @* Customer message *@
            <div style="display:flex;gap:8px;max-width:70%;">
                <div style="padding:10px 14px;background:var(--mkt-bg-card);border-radius:10px;border-top-left-radius:2px;">
                    <p style="margin:0;font-size:13px;color:var(--mkt-text-primary);">Tôi muốn hỏi về sản phẩm coffee đặc biệt, giá bao nhiêu vậy shop?</p>
                    <span style="font-size:10px;color:var(--mkt-text-tertiary);margin-top:4px;display:block;">10:32 AM</span>
                </div>
            </div>

            @* Typing indicator *@
            <div style="display:flex;gap:4px;align-items:center;">
                <div style="width:6px;height:6px;border-radius:50%;background:var(--mkt-text-tertiary);animation:pulse 1.4s infinite;"></div>
                <div style="width:6px;height:6px;border-radius:50%;background:var(--mkt-text-tertiary);animation:pulse 1.4s infinite 0.2s;"></div>
                <div style="width:6px;height:6px;border-radius:50%;background:var(--mkt-text-tertiary);animation:pulse 1.4s infinite 0.4s;"></div>
                <span style="font-size:11px;color:var(--mkt-text-tertiary);margin-left:4px;">Customer is typing...</span>
            </div>
        </div>

        @* Quick replies *@
        <div style="padding:8px 20px;border-top:1px solid var(--mkt-border);display:flex;gap:8px;align-items:center;">
            <span style="font-size:11px;font-weight:600;color:var(--mkt-text-tertiary);">QUICK:</span>
            @foreach (var reply in _quickReplies)
            {
                <button style="padding:4px 10px;border-radius:12px;background:var(--mkt-bg-card);border:1px solid var(--mkt-border);color:var(--mkt-text-secondary);font-size:11px;cursor:pointer;">@reply</button>
            }
        </div>

        @* Message input *@
        <div style="padding:12px 20px;border-top:1px solid var(--mkt-border);display:flex;align-items:center;gap:8px;">
            <button style="width:40px;height:40px;border-radius:8px;background:var(--mkt-bg-card);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;">
                <i data-lucide="paperclip" style="width:16px;height:16px;color:var(--mkt-text-secondary);"></i>
            </button>
            <div style="flex:1;padding:10px 14px;background:var(--mkt-bg-card);border-radius:8px;border:1px solid var(--mkt-border);">
                <input type="text" placeholder="Type your message..." style="width:100%;background:none;border:none;outline:none;color:var(--mkt-text-primary);font-size:13px;" />
            </div>
            <button style="width:40px;height:40px;border-radius:8px;background:var(--mkt-yellow-primary);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;">
                <i data-lucide="send" style="width:16px;height:16px;color:var(--mkt-bg-card);"></i>
            </button>
        </div>
    </div>

    @* ═══ RIGHT: Customer Info ═══ *@
    <div class="mkt-chat-info" style="background:var(--mkt-bg-card);">
        <div style="padding:20px;text-align:center;border-bottom:1px solid var(--mkt-border);">
            <div style="width:56px;height:56px;border-radius:50%;background:var(--mkt-info);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:white;margin:0 auto 10px;">NA</div>
            <div style="font-size:14px;font-weight:600;color:var(--mkt-text-primary);">Nguyễn Văn A</div>
            <div style="font-size:11px;color:var(--mkt-text-secondary);margin-top:2px;">khách hàng VIP</div>
        </div>

        <div style="padding:16px;display:flex;flex-direction:column;gap:12px;">
            <div style="display:flex;justify-content:space-between;">
                <span style="font-size:11px;color:var(--mkt-text-tertiary);">PHONE</span>
                <span style="font-size:12px;color:var(--mkt-text-primary);">0912 xxx xxx</span>
            </div>
            <div style="display:flex;justify-content:space-between;">
                <span style="font-size:11px;color:var(--mkt-text-tertiary);">CHANNEL</span>
                <span class="mkt-badge mkt-badge--info">ZALO</span>
            </div>
            <div style="display:flex;justify-content:space-between;">
                <span style="font-size:11px;color:var(--mkt-text-tertiary);">SCORE</span>
                <span style="font-size:12px;color:var(--mkt-yellow-primary);">★★★★☆</span>
            </div>
            <div style="display:flex;justify-content:space-between;">
                <span style="font-size:11px;color:var(--mkt-text-tertiary);">ORDERS</span>
                <span style="font-size:12px;color:var(--mkt-text-primary);">12</span>
            </div>
            <div style="display:flex;justify-content:space-between;">
                <span style="font-size:11px;color:var(--mkt-text-tertiary);">TOTAL SPENT</span>
                <span style="font-size:12px;color:var(--mkt-text-primary);">2.4M</span>
            </div>
        </div>

        <div style="padding:0 16px;display:flex;flex-direction:column;gap:8px;">
            <span style="font-size:11px;font-weight:600;color:var(--mkt-text-tertiary);letter-spacing:0.5px;">TAGS</span>
            <div style="display:flex;gap:4px;flex-wrap:wrap;">
                <span class="mkt-badge mkt-badge--active">VIP</span>
                <span class="mkt-badge mkt-badge--training">COFFEE LOVER</span>
                <span class="mkt-badge mkt-badge--info">LOYAL</span>
            </div>
        </div>
    </div>
</div>

@code {
    // EN: Demo conversation data / VI: Dữ liệu hội thoại demo
    private record ConversationInfo(string Name, string Initials, string LastMessage, string Time, string Channel, string ChannelColor, string ChannelBg, string AvatarBg, int Unread, bool IsActive);

    private ConversationInfo _selectedConversation = null!;

    private readonly string[] _quickReplies = new[]
    {
        "Xin chào!", "Cảm ơn", "Đang kiểm tra", "Liên hệ CSKH"
    };

    private readonly ConversationInfo[] _conversations = new[]
    {
        new ConversationInfo("Nguyễn Văn A", "NA", "Tôi muốn hỏi về sản phẩm...", "10:32", "ZALO", "#0068FF", "rgba(0,104,255,0.12)", "#3B82F6", 2, true),
        new ConversationInfo("Trần Thị B", "TB", "Giá bao nhiêu vậy shop?", "10:15", "FB", "#3B82F6", "rgba(59,130,246,0.12)", "#8B5CF6", 1, false),
        new ConversationInfo("Lê Văn C", "LC", "Cảm ơn shop nhé!", "09:45", "IG", "#E1306C", "rgba(225,48,108,0.12)", "#EC4899", 0, false),
        new ConversationInfo("David Chen", "DC", "Hi, I want to order...", "09:20", "WA", "#25D366", "rgba(37,211,102,0.12)", "#22C55E", 0, false),
    };

    private void SelectConversation(ConversationInfo conv)
    {
        _selectedConversation = conv;
    }
}
