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

@*
    EN: Analytics Dashboard — AI-powered insights and performance metrics.
    VI: Analytics Dashboard — Phân tích thông minh và chỉ số hiệu suất.
    Design: pencil-design/src/pages/tMarketing/desktop/analytics-dashboard.pen
*@

<PageTitle>Analytics — tMarketing</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="mkt-topbar">
    <div class="mkt-topbar__left">
        <h1 class="mkt-topbar__title">ANALYTICS</h1>
        <p class="mkt-topbar__subtitle">AI-powered insights and performance metrics</p>
    </div>
    <div class="mkt-topbar__right">
        <button class="mkt-btn-ghost">
            <i data-lucide="calendar"></i>
            <span>LAST 7 DAYS</span>
            <i data-lucide="chevron-down" style="width:12px;height:12px;"></i>
        </button>
        <button class="mkt-btn-primary">
            <i data-lucide="download"></i>
            <span>EXPORT</span>
        </button>
    </div>
</div>

@* ═══ CONTENT ═══ *@
<div class="mkt-content">
    @* ── KPI Row ── *@
    <div class="mkt-kpi-row">
        @foreach (var kpi in _kpis)
        {
            <div class="mkt-kpi-card">
                <div class="mkt-kpi-card__header">
                    <div class="mkt-kpi-card__icon" style="background:@kpi.IconBg;">
                        <i data-lucide="@kpi.Icon" style="color:@kpi.IconColor;"></i>
                    </div>
                    <span class="mkt-kpi-card__label">@kpi.Label</span>
                </div>
                <span class="mkt-kpi-card__value">@kpi.Value</span>
                <div class="mkt-kpi-card__badge mkt-kpi-card__badge--up">
                    <i data-lucide="arrow-up"></i>
                    @kpi.Change
                </div>
            </div>
        }
    </div>

    @* ── ROW 2: Engagement Chart + Top Content ── *@
    <div class="mkt-analytics-row" style="display:flex;gap:20px;">
        @* Engagement Chart (placeholder) *@
        <div class="mkt-panel" style="flex:1;">
            <div class="mkt-panel__header">
                <h3 class="mkt-panel__title">
                    <i data-lucide="trending-up"></i>
                    ENGAGEMENT OVERVIEW
                </h3>
                <div style="display:flex;gap:8px;">
                    <span style="font-size:11px;font-weight:600;color:var(--mkt-yellow-primary);cursor:pointer;">WEEK</span>
                    <span style="font-size:11px;color:var(--mkt-text-tertiary);cursor:pointer;">MONTH</span>
                    <span style="font-size:11px;color:var(--mkt-text-tertiary);cursor:pointer;">YEAR</span>
                </div>
            </div>
            <div class="mkt-panel__body" style="height:200px;display:flex;align-items:flex-end;gap:12px;padding-top:20px;">
                @* Mini chart bars *@
                @foreach (var bar in _chartBars)
                {
                    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;">
                        <div style="width:100%;height:@(bar.Height)px;background:linear-gradient(to top, var(--mkt-yellow-primary), rgba(250,204,21,0.3));border-radius:4px 4px 0 0;"></div>
                        <span style="font-size:10px;color:var(--mkt-text-tertiary);">@bar.Day</span>
                    </div>
                }
            </div>
        </div>

        @* Top Content *@
        <div class="mkt-panel" style="width:320px;">
            <div class="mkt-panel__header">
                <h3 class="mkt-panel__title">
                    <i data-lucide="star"></i>
                    TOP CONTENT
                </h3>
            </div>
            <div class="mkt-panel__body" style="display:flex;flex-direction:column;gap:12px;">
                @foreach (var content in _topContent)
                {
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--mkt-border);">
                        <div style="display:flex;flex-direction:column;gap:2px;">
                            <span style="font-size:12px;font-weight:600;color:var(--mkt-text-primary);">@content.Title</span>
                            <span style="font-size:10px;color:var(--mkt-text-tertiary);">@content.Channel • @content.Time</span>
                        </div>
                        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:2px;">
                            <span style="font-size:13px;font-weight:700;color:var(--mkt-yellow-primary);">@content.Reach</span>
                            <span style="font-size:10px;color:var(--mkt-success);">@content.Engagement</span>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>

    @* ── ROW 3: Channel Performance ── *@
    <div class="mkt-panel">
        <div class="mkt-panel__header">
            <h3 class="mkt-panel__title">
                <i data-lucide="bar-chart-2"></i>
                CHANNEL PERFORMANCE
            </h3>
        </div>
        <div class="mkt-panel__body">
            <div class="mkt-channel-cards" style="display:flex;gap:16px;">
                @foreach (var channel in _channelPerf)
                {
                    <div style="flex:1;display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--mkt-bg-page);border-radius:8px;">
                        <div style="display:flex;align-items:center;gap:8px;">
                            <div style="width:10px;height:10px;border-radius:50%;background:@channel.Color;"></div>
                            <span style="font-size:12px;font-weight:600;color:var(--mkt-text-primary);">@channel.Name</span>
                        </div>
                        <div style="display:flex;justify-content:space-between;">
                            <div>
                                <div style="font-size:10px;color:var(--mkt-text-tertiary);">Reach</div>
                                <div style="font-size:16px;font-weight:700;color:var(--mkt-text-primary);">@channel.Reach</div>
                            </div>
                            <div>
                                <div style="font-size:10px;color:var(--mkt-text-tertiary);">Engagement</div>
                                <div style="font-size:16px;font-weight:700;color:var(--mkt-text-primary);">@channel.Engagement</div>
                            </div>
                        </div>
                        @* Progress bar *@
                        <div style="width:100%;height:4px;background:var(--mkt-border);border-radius:2px;overflow:hidden;">
                            <div style="width:@channel.FillPct;height:100%;background:@channel.Color;border-radius:2px;"></div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

@code {
    // EN: Demo analytics data / VI: Dữ liệu phân tích demo
    private record KpiData(string Label, string Value, string Change, string Icon, string IconColor, string IconBg);
    private record ChartBar(string Day, int Height);
    private record TopContentItem(string Title, string Channel, string Time, string Reach, string Engagement);
    private record ChannelPerf(string Name, string Color, string Reach, string Engagement, string FillPct);

    private readonly KpiData[] _kpis = new[]
    {
        new KpiData("TOTAL REACH", "245.8K", "+18.5%", "eye", "#22C55E", "rgba(34,197,94,0.12)"),
        new KpiData("ENGAGEMENT", "14.2%", "+5.3%", "heart", "#EC4899", "rgba(236,72,153,0.12)"),
        new KpiData("CONVERSIONS", "1,842", "+22.1%", "target", "#3B82F6", "rgba(59,130,246,0.12)"),
        new KpiData("ROI", "324%", "+45.2%", "trending-up", "#FACC15", "rgba(250,204,21,0.12)"),
    };

    private readonly ChartBar[] _chartBars = new[]
    {
        new ChartBar("Mon", 80), new ChartBar("Tue", 120), new ChartBar("Wed", 95),
        new ChartBar("Thu", 150), new ChartBar("Fri", 130), new ChartBar("Sat", 170), new ChartBar("Sun", 110),
    };

    private readonly TopContentItem[] _topContent = new[]
    {
        new TopContentItem("Spring Collection Ad", "FB", "2 days ago", "45.2K", "+24%"),
        new TopContentItem("Behind the Scenes", "IG", "3 days ago", "32.1K", "+18%"),
        new TopContentItem("Promo Announcement", "ZALO", "5 days ago", "28.4K", "+15%"),
    };

    private readonly ChannelPerf[] _channelPerf = new[]
    {
        new ChannelPerf("Facebook", "#3B82F6", "125K", "12.4%", "75%"),
        new ChannelPerf("Instagram", "#E1306C", "85K", "18.2%", "65%"),
        new ChannelPerf("Zalo OA", "#0068FF", "45K", "22.1%", "55%"),
        new ChannelPerf("WhatsApp", "#25D366", "15K", "8.5%", "35%"),
    };
}
