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

@*
    EN: Social Hub — Manage all social media channels in one place.
    VI: Social Hub — Quản lý tất cả kênh mạng xã hội tại một nơi.
    Design: pencil-design/src/pages/tMarketing/desktop/social-hub.pen
*@

<PageTitle>Social Hub — tMarketing</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="mkt-topbar">
    <div class="mkt-topbar__left">
        <h1 class="mkt-topbar__title">SOCIAL HUB</h1>
        <p class="mkt-topbar__subtitle">Manage all your social media channels in one place</p>
    </div>
    <div class="mkt-topbar__right">
        <div class="mkt-search">
            <i data-lucide="search"></i>
            <input type="text" placeholder="SEARCH" @bind="SearchQuery" />
        </div>
        <button class="mkt-btn-primary">
            <i data-lucide="plus"></i>
            <span>NEW POST</span>
        </button>
    </div>
</div>

@* ═══ CONTENT ═══ *@
<div class="mkt-content">
    @* ── ROW 1: Platform Status + Quick Actions ── *@
    <div class="mkt-hub-columns" style="display:flex;gap:20px;">
        @* Platform Status *@
        <div class="mkt-panel" style="flex:1;">
            <div class="mkt-panel__header" style="border-bottom:none;padding-bottom:8px;">
                <h3 class="mkt-panel__title">
                    <i data-lucide="globe"></i>
                    PLATFORM STATUS
                </h3>
            </div>
            <div class="mkt-panel__body" style="display:flex;flex-direction:column;gap:12px;padding-top:0;">
                @foreach (var platform in _platforms)
                {
                    <div style="display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--mkt-bg-page);border-radius:6px;">
                        <div style="width:8px;height:8px;border-radius:50%;background:@platform.StatusColor;"></div>
                        <div style="display:flex;align-items:center;gap:8px;flex:1;">
                            <span style="font-size:12px;font-weight:600;color:@platform.Color;">@platform.Name</span>
                        </div>
                        <span class="mkt-badge @(platform.IsConnected ? "mkt-badge--active" : "mkt-badge--draft")">
                            @(platform.IsConnected ? "CONNECTED" : "DISCONNECTED")
                        </span>
                        <span style="font-size:11px;color:var(--mkt-text-secondary);">@platform.Followers followers</span>
                    </div>
                }
            </div>
        </div>

        @* Quick Actions *@
        <div class="mkt-panel" style="width:280px;">
            <div class="mkt-panel__header" style="border-bottom:none;padding-bottom:8px;">
                <h3 class="mkt-panel__title">
                    <i data-lucide="zap"></i>
                    QUICK ACTIONS
                </h3>
            </div>
            <div class="mkt-panel__body" style="display:flex;flex-direction:column;gap:10px;padding-top:0;">
                @foreach (var action in _quickActions)
                {
                    <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="@action.Icon" style="width:14px;height:14px;color:var(--mkt-yellow-primary);"></i>
                        <span style="font-size:12px;font-weight:500;color:var(--mkt-text-primary);">@action.Label</span>
                    </div>
                }
            </div>
        </div>
    </div>

    @* ── ROW 2: Unified Feed ── *@
    <div class="mkt-panel">
        <div class="mkt-panel__header">
            <h3 class="mkt-panel__title">
                <i data-lucide="rss"></i>
                UNIFIED FEED
            </h3>
            <div style="display:flex;gap:12px;">
                <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;">SCHEDULED</span>
            </div>
        </div>
        <div class="mkt-panel__body" style="display:flex;flex-direction:column;gap:12px;">
            @foreach (var post in _feedPosts)
            {
                <div style="display:flex;gap:12px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--mkt-border);">
                    <div style="width:3px;height:40px;border-radius:2px;background:@post.ChannelColor;flex-shrink:0;"></div>
                    <div style="flex:1;display:flex;flex-direction:column;gap:4px;">
                        <span style="font-size:13px;font-weight:500;color:var(--mkt-text-primary);">@post.Content</span>
                        <span style="font-size:11px;color:var(--mkt-text-secondary);">@post.Time • @post.Engagement</span>
                    </div>
                    <span style="font-size:10px;font-weight:700;color:@post.ChannelColor;padding:2px 6px;border-radius:3px;background:rgba(255,255,255,0.05);">@post.Channel</span>
                </div>
            }
        </div>
    </div>

    @* ── ROW 3: KPI Stats ── *@
    <div class="mkt-kpi-row">
        @foreach (var kpi in _kpis)
        {
            <div class="mkt-kpi-card">
                <span class="mkt-kpi-card__label">@kpi.Label</span>
                <span class="mkt-kpi-card__value">@kpi.Value</span>
                <div style="display:flex;align-items:center;gap:6px;">
                    <i data-lucide="arrow-up-right" style="width:12px;height:12px;color:var(--mkt-success);"></i>
                    <span style="font-size:12px;font-weight:600;color:var(--mkt-success);">@kpi.Change</span>
                </div>
            </div>
        }
    </div>
</div>

@code {
    // EN: Demo platform data / VI: Dữ liệu nền tảng demo
    private record PlatformInfo(string Name, string Color, string StatusColor, bool IsConnected, string Followers);
    private record ActionInfo(string Icon, string Label);
    private record FeedPost(string Content, string Time, string Engagement, string Channel, string ChannelColor);
    private record KpiInfo(string Label, string Value, string Change);

    private readonly PlatformInfo[] _platforms = new[]
    {
        new PlatformInfo("Facebook", "#3B82F6", "#22C55E", true, "12.5K"),
        new PlatformInfo("Instagram", "#E1306C", "#22C55E", true, "8.2K"),
        new PlatformInfo("Zalo OA", "#0068FF", "#22C55E", true, "15.1K"),
        new PlatformInfo("WhatsApp", "#25D366", "#22C55E", true, "3.4K"),
        new PlatformInfo("TikTok", "#FF0050", "#EF4444", false, "—"),
    };

    private readonly ActionInfo[] _quickActions = new[]
    {
        new ActionInfo("edit-3", "Create New Post"),
        new ActionInfo("calendar", "Schedule Content"),
        new ActionInfo("bar-chart-2", "View Analytics"),
        new ActionInfo("settings", "Channel Settings"),
    };

    private readonly FeedPost[] _feedPosts = new[]
    {
        new FeedPost("🎉 Spring Collection ra mắt — Giảm 20% tất cả sản phẩm mới!", "2 giờ trước", "234 likes • 45 comments", "FB", "#3B82F6"),
        new FeedPost("Behind the scenes — Quy trình sản xuất coffee đặc biệt", "4 giờ trước", "1.2K views • 89 likes", "IG", "#E1306C"),
        new FeedPost("Thông báo: Chương trình khách hàng thân thiết mới", "6 giờ trước", "567 reads", "ZALO", "#0068FF"),
        new FeedPost("Try our new seasonal drinks! 🍵 Limited time only", "8 giờ trước", "89 likes • 12 shares", "WA", "#25D366"),
    };

    private readonly KpiInfo[] _kpis = new[]
    {
        new KpiInfo("TOTAL REACH", "45.2K", "12.5%"),
        new KpiInfo("ENGAGEMENT", "12.8%", "8.2%"),
        new KpiInfo("NEW FOLLOWERS", "+1.2K", "24.1%"),
        new KpiInfo("MESSAGES", "234", "15.3%"),
    };
}
