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

@*
    EN: Customer CRM — Manage customer profiles for re-marketing campaigns.
    VI: Customer CRM — Quản lý hồ sơ khách hàng cho chiến dịch re-marketing.
    Design: pencil-design/src/pages/tMarketing/desktop/customer-crm.pen
*@

<PageTitle>Customers — tMarketing</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="mkt-topbar">
    <div class="mkt-topbar__left">
        <h1 class="mkt-topbar__title">CUSTOMERS</h1>
        <p class="mkt-topbar__subtitle">Manage customer profiles for re-marketing campaigns</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-ghost">
            <i data-lucide="download"></i>
            <span>EXPORT</span>
        </button>
        <button class="mkt-btn-primary">
            <i data-lucide="user-plus"></i>
            <span>ADD</span>
        </button>
    </div>
</div>

@* ═══ CONTENT ═══ *@
<div class="mkt-content">
    @* ── KPI Row ── *@
    <div class="mkt-kpi-row">
        <div class="mkt-kpi-card">
            <span class="mkt-kpi-card__label">TOTAL CUSTOMERS</span>
            <div style="display:flex;align-items:center;gap:8px;">
                <span class="mkt-kpi-card__value">12,456</span>
                <div class="mkt-kpi-card__badge mkt-kpi-card__badge--up">
                    <i data-lucide="arrow-up"></i>
                    +8.2%
                </div>
            </div>
        </div>
        <div class="mkt-kpi-card">
            <span class="mkt-kpi-card__label">ACTIVE</span>
            <div style="display:flex;align-items:center;gap:8px;">
                <span class="mkt-kpi-card__value">4,892</span>
                <div class="mkt-kpi-card__badge mkt-kpi-card__badge--up">
                    <i data-lucide="arrow-up"></i>
                    +12.1%
                </div>
            </div>
        </div>
        <div class="mkt-kpi-card">
            <span class="mkt-kpi-card__label">NEW TODAY</span>
            <div style="display:flex;align-items:center;gap:8px;">
                <span class="mkt-kpi-card__value">+342</span>
                <span class="mkt-badge mkt-badge--active">NEW</span>
            </div>
        </div>
        <div class="mkt-kpi-card">
            <span class="mkt-kpi-card__label">SEGMENTS</span>
            <div style="display:flex;align-items:center;gap:8px;">
                <span class="mkt-kpi-card__value">8</span>
                <span class="mkt-badge mkt-badge--draft">GROUPS</span>
            </div>
        </div>
    </div>

    @* ── Customer Table ── *@
    <div class="mkt-panel" style="flex:1;">
        <div class="mkt-panel__header">
            <h3 class="mkt-panel__title">
                <i data-lucide="users"></i>
                CUSTOMER LIST
            </h3>
            <div style="display:flex;gap:8px;">
                <button class="mkt-btn-ghost" style="padding:4px 8px;">
                    <span style="font-size:11px;">ALL</span>
                </button>
                <button class="mkt-btn-ghost" style="padding:4px 8px;">
                    <span style="font-size:11px;">VIP</span>
                </button>
                <button class="mkt-btn-ghost" style="padding:4px 8px;">
                    <span style="font-size:11px;">NEW</span>
                </button>
            </div>
        </div>
        <div class="mkt-panel__body" style="padding:0;">
            <table class="mkt-table">
                <thead>
                    <tr>
                        <th style="width:32px;"></th>
                        <th>NAME</th>
                        <th>PHONE</th>
                        <th>CHANNEL</th>
                        <th>SCORE</th>
                        <th style="width:80px;">ACTIONS</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var customer in _customers)
                    {
                        <tr>
                            <td>
                                <div style="width:32px;height:32px;border-radius:50%;background:@customer.AvatarBg;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--mkt-text-primary);">@customer.Initials</div>
                            </td>
                            <td style="font-weight:600;">@customer.Name</td>
                            <td style="color:var(--mkt-text-secondary);font-size:12px;">@customer.Phone</td>
                            <td><span class="mkt-badge mkt-badge--info">@customer.Channel</span></td>
                            <td style="color:var(--mkt-yellow-primary);">@customer.Score</td>
                            <td>
                                <div style="display:flex;gap:4px;">
                                    <button style="width:28px;height:28px;border-radius:4px;background:var(--mkt-bg-page);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;">
                                        <i data-lucide="message-circle" style="width:12px;height:12px;color:var(--mkt-text-secondary);"></i>
                                    </button>
                                    <button style="width:28px;height:28px;border-radius:4px;background:var(--mkt-bg-page);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;">
                                        <i data-lucide="more-horizontal" style="width:12px;height:12px;color:var(--mkt-text-secondary);"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>

    @* ── Bottom Actions + Pagination ── *@
    <div class="mkt-crm-actions" style="display:flex;justify-content:space-between;align-items:center;">
        <div style="display:flex;gap:8px;">
            <button class="mkt-btn-ghost">
                <i data-lucide="mail"></i>
                <span>EMAIL</span>
            </button>
            <button class="mkt-btn-ghost">
                <i data-lucide="smartphone"></i>
                <span>SMS</span>
            </button>
            <button class="mkt-btn-ghost">
                <i data-lucide="target"></i>
                <span>CAMPAIGN</span>
            </button>
            <button class="mkt-btn-primary">
                <i data-lucide="download"></i>
                <span>EXPORT ALL</span>
            </button>
        </div>
        <div style="display:flex;gap:4px;">
            <div style="width:32px;height:32px;border-radius:6px;background:var(--mkt-yellow-primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--mkt-bg-card);cursor:pointer;">01</div>
            <div style="width:32px;height:32px;border-radius:6px;background:var(--mkt-bg-card);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--mkt-text-secondary);cursor:pointer;">02</div>
            <div style="width:32px;height:32px;border-radius:6px;background:var(--mkt-bg-card);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--mkt-text-secondary);cursor:pointer;">03</div>
        </div>
    </div>
</div>

@code {
    // EN: Demo customer data / VI: Dữ liệu khách hàng demo
    private record CustomerInfo(string Name, string Initials, string Phone, string Channel, string Score, string AvatarBg);

    private readonly CustomerInfo[] _customers = new[]
    {
        new CustomerInfo("Nguyễn Văn A", "NA", "0912 xxx xxx", "ZALO", "★★★★☆", "#3B82F6"),
        new CustomerInfo("Trần Thị B", "TB", "0987 xxx xxx", "FB", "★★★☆☆", "#8B5CF6"),
        new CustomerInfo("Lê Văn C", "LC", "0909 xxx xxx", "IG", "★★★★★", "#EC4899"),
        new CustomerInfo("Phạm Thị D", "PD", "0888 xxx xxx", "WA", "★★☆☆☆", "#22C55E"),
    };
}
