<template>
    <div class="gw-admin-dashboard">
        <!-- Top Filter & Command Bar -->
        <div class="card gw-filter-bar mb-4">
            <div class="card-body p-3">
                <form @submit.prevent="loadDashboardData" class="row g-2 align-items-center">
                    <div class="col-lg-3 col-md-4">
                        <label class="gw-label"><i class="fa fa-user text-primary me-1"></i> Account</label>
                        <select v-model="formFilter.user_id" class="form-select form-select-sm gw-input">
                            <option value="">All Accounts / Users</option>
                            <option v-for="(user, uIndex) in requiredData.users" :key="uIndex" :value="user.id">{{ user.name }}</option>
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-3">
                        <label class="gw-label"><i class="fa fa-calendar text-info me-1"></i> From Date</label>
                        <datepicker v-model="formFilter.from_date" class="form-control form-control-sm gw-input" placeholder="Start Date"></datepicker>
                    </div>
                    <div class="col-lg-3 col-md-3">
                        <label class="gw-label"><i class="fa fa-calendar text-info me-1"></i> To Date</label>
                        <datepicker v-model="formFilter.to_date" class="form-control form-control-sm gw-input" placeholder="End Date"></datepicker>
                    </div>
                    <div class="col-lg-3 col-md-2 d-flex align-items-end gap-2 mt-auto">
                        <button type="submit" class="btn btn-primary btn-sm w-100 gw-btn-filter">
                            <i class="fa fa-filter me-1"></i> Apply Filter
                        </button>
                        <button type="button" @click="resetFilter" class="btn btn-light btn-sm gw-btn-reset" title="Reset Filters">
                            <i class="fa fa-rotate-left"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Metric Cards (6-Grid) -->
        <div class="row g-3 mb-4">
            <!-- Balance Card -->
            <div class="col-xl-2 col-lg-4 col-md-6">
                <div class="card gw-stat-card border-primary">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="gw-stat-title">Current Balance</span>
                            <span class="gw-icon-pill bg-primary-subtle text-primary"><i class="fa-solid fa-bangladeshi-taka-sign"></i></span>
                        </div>
                        <h3 class="gw-stat-num">৳ {{ Math.round(dataList.current_balance || 0) }}</h3>
                        <div class="gw-stat-footer text-muted">
                            <span>Spent: ৳{{ dataList.total_spent || '0.00' }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Delivered (sms_messages & sms_counts) -->
            <div class="col-xl-2 col-lg-4 col-md-6">
                <div class="card gw-stat-card border-success">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="gw-stat-title">Total Delivered</span>
                            <span class="gw-icon-pill bg-success-subtle text-success"><i class="fa-solid fa-check-circle"></i></span>
                        </div>
                        <h3 class="gw-stat-num text-success">{{ Number(dataList.success_sms || 0).toLocaleString() }}</h3>
                        <div class="gw-stat-footer text-success">
                            <i class="fa fa-chart-line me-1"></i> Success Rate: {{ dataList.success_rate || 0 }}%
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Failed (sms_messages & sms_counts) -->
            <div class="col-xl-2 col-lg-4 col-md-6">
                <div class="card gw-stat-card border-danger">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="gw-stat-title">Total Failed</span>
                            <span class="gw-icon-pill bg-danger-subtle text-danger"><i class="fa-solid fa-triangle-exclamation"></i></span>
                        </div>
                        <h3 class="gw-stat-num text-danger">{{ Number(dataList.failed_sms || 0).toLocaleString() }}</h3>
                        <div class="gw-stat-footer text-danger">
                            <span>Dispatched & Failed</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pending in Queue (sms_messages) -->
            <div class="col-xl-2 col-lg-4 col-md-6">
                <div class="card gw-stat-card border-warning">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="gw-stat-title">Queue Pending</span>
                            <span class="gw-icon-pill bg-warning-subtle text-warning"><i class="fa fa-hourglass-half" :class="{'fa-spin': (dataList.pending_sms || 0) > 0}"></i></span>
                        </div>
                        <h3 class="gw-stat-num text-warning">{{ Number(dataList.pending_sms || 0).toLocaleString() }}</h3>
                        <div class="gw-stat-footer text-muted">
                            <span>Processing: {{ Number(dataList.processing_sms || 0).toLocaleString() }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Phonebook Contacts (numbers table) -->
            <div class="col-xl-2 col-lg-4 col-md-6">
                <div class="card gw-stat-card border-info">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="gw-stat-title">Audience Contacts</span>
                            <span class="gw-icon-pill bg-info-subtle text-info"><i class="fa-solid fa-address-book"></i></span>
                        </div>
                        <h3 class="gw-stat-num text-info">{{ Number(dataList.total_numbers || dataList.group_numbers || 0).toLocaleString() }}</h3>
                        <div class="gw-stat-footer text-muted">
                            <span>Phonebook Numbers</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Groups (groups table) -->
            <div class="col-xl-2 col-lg-4 col-md-6">
                <div class="card gw-stat-card border-secondary">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="gw-stat-title">Contact Groups</span>
                            <span class="gw-icon-pill bg-secondary-subtle text-secondary"><i class="fa-solid fa-layer-group"></i></span>
                        </div>
                        <h3 class="gw-stat-num">{{ Number(dataList.total_groups || 0).toLocaleString() }}</h3>
                        <div class="gw-stat-footer text-muted">
                            <span>Active Audiences</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Analytics & Charts Grid -->
        <div class="row g-4 mb-4">
            <!-- Left: 4 Analytics Charts -->
            <div class="col-xl-9 col-lg-8">
                <!-- 2 Top Charts Row: Donut + Group Distribution -->
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <div class="card gw-chart-card h-100">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <h5 class="gw-card-title"><i class="fa fa-chart-pie text-primary me-2"></i> SMS Delivery & Queue Health</h5>
                                <span class="badge bg-primary-subtle text-primary small">sms_messages</span>
                            </div>
                            <div class="card-body p-3 text-center" style="min-height: 280px; position: relative;">
                                <apexchart 
                                    v-if="smsRequestStatus.series && smsRequestStatus.series.length > 0" 
                                    :key="'req_' + chartKey"
                                    type="donut"
                                    width="100%" 
                                    height="260" 
                                    :options="smsRequestStatus.chartOptions" 
                                    :series="smsRequestStatus.series"
                                />
                                <div v-else class="text-muted small py-5">
                                    <i class="fa fa-chart-pie fa-2x mb-2 text-muted opacity-50 d-block"></i>
                                    Loading SMS status health...
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="card gw-chart-card h-100">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <h5 class="gw-card-title"><i class="fa fa-users text-info me-2"></i> Audience Numbers by Group</h5>
                                <span class="badge bg-info-subtle text-info small">groups & numbers</span>
                            </div>
                            <div class="card-body p-3 text-center" style="min-height: 280px; position: relative;">
                                <apexchart 
                                    v-if="groupDistributionChart.series && groupDistributionChart.series.length > 0" 
                                    :key="'grp_' + chartKey"
                                    type="bar"
                                    width="100%" 
                                    height="260" 
                                    :options="groupDistributionChart.chartOptions" 
                                    :series="groupDistributionChart.series"
                                />
                                <div v-else class="text-muted small py-5">
                                    <i class="fa fa-chart-bar fa-2x mb-2 text-muted opacity-50 d-block"></i>
                                    Loading group distribution...
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2 Bottom Trend Charts Row: 12-Month Traffic + Cost -->
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="card gw-chart-card h-100">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <h5 class="gw-card-title"><i class="fa fa-chart-column text-success me-2"></i> 12-Month SMS Dispatch Volume</h5>
                                <span class="badge bg-success-subtle text-success small">Delivered vs Failed</span>
                            </div>
                            <div class="card-body p-3" style="min-height: 280px; position: relative;">
                                <apexchart 
                                    v-if="monthlySmsRequestStatus.series && monthlySmsRequestStatus.series.length > 0" 
                                    :key="'vol_' + chartKey"
                                    type="bar"
                                    width="100%" 
                                    height="260" 
                                    :options="monthlySmsRequestStatus.chartOptions" 
                                    :series="monthlySmsRequestStatus.series"
                                />
                                <div v-else class="text-muted small py-5 text-center">
                                    <i class="fa fa-chart-line fa-2x mb-2 text-muted opacity-50 d-block"></i>
                                    Loading volume trends...
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="card gw-chart-card h-100">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <h5 class="gw-card-title"><i class="fa fa-chart-column text-warning me-2"></i> Monthly Expense Breakdown (৳)</h5>
                                <span class="badge bg-warning-subtle text-warning small">Billing Trend</span>
                            </div>
                            <div class="card-body p-3" style="min-height: 280px; position: relative;">
                                <apexchart 
                                    v-if="monthlyChargeStatus.series && monthlyChargeStatus.series.length > 0" 
                                    :key="'chg_' + chartKey"
                                    type="bar"
                                    width="100%" 
                                    height="260" 
                                    :options="monthlyChargeStatus.chartOptions" 
                                    :series="monthlyChargeStatus.series"
                                />
                                <div v-else class="text-muted small py-5 text-center">
                                    <i class="fa fa-file-invoice-dollar fa-2x mb-2 text-muted opacity-50 d-block"></i>
                                    Loading expense trends...
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right: Account Overview & Quick Action Launchpad -->
            <div class="col-xl-3 col-lg-4">
                <!-- Account Specs Card -->
                <div class="card gw-account-card mb-3">
                    <div class="card-header">
                        <h5 class="gw-card-title"><i class="fa fa-shield-halved text-primary me-2"></i> Account Overview</h5>
                    </div>
                    <div class="card-body p-3">
                        <div class="gw-meta-list">
                            <div class="gw-meta-row">
                                <span class="text-muted"><i class="fa fa-wallet me-2"></i> Available Balance:</span>
                                <strong>৳ {{ Math.round(dataList.current_balance || 0) }}</strong>
                            </div>
                            <div class="gw-meta-row">
                                <span class="text-muted"><i class="fa fa-money-bill-transfer me-2"></i> Total Recharge:</span>
                                <span>৳ {{ dataList.total_recharge || 0 }}</span>
                            </div>
                            <div class="gw-meta-row">
                                <span class="text-muted"><i class="fa fa-calendar-plus me-2"></i> Registered:</span>
                                <span>{{ dataList.user_create_date || 'N/A' }}</span>
                            </div>
                            <div class="gw-meta-row">
                                <span class="text-muted"><i class="fa fa-network-wired me-2"></i> Client IP:</span>
                                <code class="gw-code">{{ dataList.login_ip || '127.0.0.1' }}</code>
                            </div>
                            <div class="gw-meta-row">
                                <span class="text-muted"><i class="fa fa-hourglass-end me-2"></i> Validity Expiry:</span>
                                <span class="badge bg-primary-subtle text-primary">{{ dataList.expired_date || 'Unlimited' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Action Launchpad -->
                <div class="card gw-launchpad-card">
                    <div class="card-header">
                        <h5 class="gw-card-title"><i class="fa fa-bolt text-warning me-2"></i> Quick Actions</h5>
                    </div>
                    <div class="card-body p-3">
                        <div class="row g-2">
                            <div class="col-6">
                                <router-link to="/admin/sms_messages" class="gw-action-btn">
                                    <div class="gw-action-icon bg-primary-subtle text-primary">
                                        <i class="fa fa-paper-plane"></i>
                                    </div>
                                    <span>Quick SMS</span>
                                </router-link>
                            </div>

                            <div class="col-6">
                                <router-link to="/admin/group_sms" class="gw-action-btn">
                                    <div class="gw-action-icon bg-success-subtle text-success">
                                        <i class="fa fa-comments"></i>
                                    </div>
                                    <span>Group SMS</span>
                                </router-link>
                            </div>

                            <div class="col-6">
                                <router-link to="/admin/campaign_sms" class="gw-action-btn">
                                    <div class="gw-action-icon bg-info-subtle text-info">
                                        <i class="fa fa-bullhorn"></i>
                                    </div>
                                    <span>Campaign</span>
                                </router-link>
                            </div>

                            <div class="col-6">
                                <router-link to="/admin/file2_sms" class="gw-action-btn">
                                    <div class="gw-action-icon bg-warning-subtle text-warning">
                                        <i class="fa fa-file-excel"></i>
                                    </div>
                                    <span>File to SMS</span>
                                </router-link>
                            </div>

                            <div class="col-6">
                                <router-link to="/admin/groups" class="gw-action-btn">
                                    <div class="gw-action-icon bg-secondary-subtle text-secondary">
                                        <i class="fa fa-address-book"></i>
                                    </div>
                                    <span>Groups</span>
                                </router-link>
                            </div>

                            <div class="col-6">
                                <router-link to="/admin/numbers" class="gw-action-btn">
                                    <div class="gw-action-icon bg-danger-subtle text-danger">
                                        <i class="fa fa-users"></i>
                                    </div>
                                    <span>Contacts</span>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Information Panels: sms_counts + groups + numbers -->
        <div class="row g-4 mb-4">
            <!-- SIM & API Dispatch Nodes (sms_counts table) -->
            <div class="col-xl-6">
                <div class="card gw-data-card h-100">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="gw-card-title">
                            <i class="fa fa-sim-card text-primary me-2"></i> Gateway Dispatch Channels & Nodes
                        </h5>
                        <span class="badge bg-primary-subtle text-primary">sms_counts</span>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0 gw-table">
                                <thead>
                                    <tr>
                                        <th>Channel / Slot</th>
                                        <th>Month</th>
                                        <th>Type</th>
                                        <th class="text-center">Total Req</th>
                                        <th class="text-center">Sent</th>
                                        <th class="text-center">Failed</th>
                                        <th>Last Update</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(node, nIdx) in (dataList.sms_counts_list || [])" :key="'node_' + nIdx">
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <span class="gw-node-icon" :class="node.type === 2 ? 'bg-info-subtle text-info' : 'bg-primary-subtle text-primary'">
                                                    <i :class="node.type === 2 ? 'fa fa-server' : 'fa fa-mobile-screen'"></i>
                                                </span>
                                                <div>
                                                    <div class="fw-bold">{{ node.operator_name || (node.type === 2 ? 'API Gateway' : 'SIM Node') }}</div>
                                                    <small class="text-muted" v-if="node.sim_slot >= 0">Slot {{ node.sim_slot }}</small>
                                                    <small class="text-muted" v-else>{{ node.operator_number || 'Default Gateway' }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td><span class="badge bg-light text-dark">{{ node.month }}</span></td>
                                        <td>
                                            <span class="badge" :class="node.type === 2 ? 'bg-info-subtle text-info' : 'bg-primary-subtle text-primary'">
                                                {{ node.type_label }}
                                            </span>
                                        </td>
                                        <td class="text-center fw-semibold">{{ Number(node.total_request).toLocaleString() }}</td>
                                        <td class="text-center text-success fw-semibold">{{ Number(node.total_sent).toLocaleString() }}</td>
                                        <td class="text-center text-danger fw-semibold">{{ Number(node.total_failed).toLocaleString() }}</td>
                                        <td><small class="text-muted">{{ node.last_update }}</small></td>
                                    </tr>
                                    <tr v-if="!dataList.sms_counts_list || dataList.sms_counts_list.length === 0">
                                        <td colspan="7" class="text-center text-muted py-3">No gateway dispatch nodes registered yet.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Groups & Audience Breakdown (groups & numbers tables) -->
            <div class="col-xl-6">
                <div class="card gw-data-card h-100">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="gw-card-title">
                            <i class="fa fa-layer-group text-success me-2"></i> Phonebook Groups & Contact Numbers
                        </h5>
                        <router-link to="/admin/groups" class="btn btn-sm btn-outline-success">Manage Groups</router-link>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0 gw-table">
                                <thead>
                                    <tr>
                                        <th>Group Name</th>
                                        <th>Description</th>
                                        <th class="text-center">Numbers Count</th>
                                        <th>Created</th>
                                        <th class="text-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(group, gIdx) in (dataList.groups_summary || [])" :key="'grp_' + gIdx">
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <span class="gw-group-dot" :style="{ backgroundColor: group.color || '#246bfd' }"></span>
                                                <span class="fw-bold">{{ group.name }}</span>
                                            </div>
                                        </td>
                                        <td><small class="text-muted text-truncate d-inline-block" style="max-width: 180px;">{{ group.description }}</small></td>
                                        <td class="text-center">
                                            <span class="badge bg-secondary-subtle text-secondary fw-bold px-2 py-1">
                                                {{ Number(group.numbers_count).toLocaleString() }} Contacts
                                            </span>
                                        </td>
                                        <td><small class="text-muted">{{ group.created_at }}</small></td>
                                        <td class="text-end">
                                            <router-link :to="'/admin/numbers?group_id=' + group.id" class="btn btn-xs btn-light" title="View Numbers">
                                                <i class="fa fa-eye text-primary"></i>
                                            </router-link>
                                        </td>
                                    </tr>
                                    <tr v-if="!dataList.groups_summary || dataList.groups_summary.length === 0">
                                        <td colspan="5" class="text-center text-muted py-3">No contact groups created yet.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent SMS Messages Stream (sms_messages table) -->
        <div class="row">
            <div class="col-12">
                <div class="card gw-data-card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="gw-card-title">
                            <i class="fa fa-paper-plane text-primary me-2"></i> Recent SMS Message Dispatches
                        </h5>
                        <router-link to="/admin/sms_messages" class="btn btn-sm btn-primary">
                            <i class="fa fa-list me-1"></i> View All Messages
                        </router-link>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0 gw-table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Recipient</th>
                                        <th>Message Content</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center">Attempts</th>
                                        <th>Error Reason / Info</th>
                                        <th>Created Time</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(msg, mIdx) in (dataList.recent_messages || [])" :key="'msg_' + mIdx">
                                        <td><code>#{{ msg.id }}</code></td>
                                        <td>
                                            <span class="fw-bold text-dark"><i class="fa fa-phone text-muted me-1 small"></i> {{ msg.recipient }}</span>
                                        </td>
                                        <td>
                                            <span class="gw-msg-snippet" :title="msg.full_message">{{ msg.message }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge" :class="getStatusBadgeClass(msg.status)">
                                                {{ msg.status }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-light text-dark">{{ msg.attempts || 0 }}</span>
                                        </td>
                                        <td>
                                            <small class="text-danger" v-if="msg.last_error">{{ msg.last_error }}</small>
                                            <small class="text-muted" v-else>-</small>
                                        </td>
                                        <td><small class="text-muted">{{ msg.created_at }}</small></td>
                                    </tr>
                                    <tr v-if="!dataList.recent_messages || dataList.recent_messages.length === 0">
                                        <td colspan="7" class="text-center text-muted py-4">No recent SMS messages found.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "dashboardPage",
    data() {
        return {
            chartKey: 0,
            smsRequestStatus: {
                series: [],
                chartOptions: {
                    chart: { type: 'donut', foreColor: '#64748b' },
                    colors: ['#10b981', '#ef4444', '#f59e0b'],
                    labels: ['Delivered', 'Failed', 'In Queue'],
                    legend: { position: 'bottom' },
                    dataLabels: { enabled: true },
                    stroke: { width: 2, colors: ['#ffffff'] }
                }
            },
            groupDistributionChart: {
                series: [],
                chartOptions: {
                    chart: { type: 'bar', foreColor: '#64748b', toolbar: { show: false } },
                    colors: ['#246bfd'],
                    plotOptions: { bar: { horizontal: true, distributed: true, barHeight: '65%', borderRadius: 4 } },
                    dataLabels: { enabled: true },
                    xaxis: { categories: [] },
                    legend: { show: false },
                    tooltip: { theme: 'dark' }
                }
            },
            monthlySmsRequestStatus: {
                series: [],
                chartOptions: {
                    chart: { type: 'bar', stacked: true, foreColor: '#64748b', toolbar: { show: false } },
                    colors: ['#10b981', '#ef4444'],
                    plotOptions: { bar: { horizontal: false, columnWidth: '45%', borderRadius: 4 } },
                    dataLabels: { enabled: false },
                    xaxis: { categories: [] },
                    legend: { position: 'top', horizontalAlign: 'right' },
                    tooltip: { theme: 'dark' }
                }
            },
            monthlyChargeStatus: {
                series: [],
                chartOptions: {
                    chart: { type: 'bar', stacked: false, foreColor: '#64748b', toolbar: { show: false } },
                    colors: ['#f59e0b'],
                    plotOptions: { bar: { horizontal: false, columnWidth: '45%', borderRadius: 6 } },
                    dataLabels: { enabled: false },
                    xaxis: { categories: [] },
                    tooltip: { theme: 'dark' }
                }
            }
        };
    },
    methods: {
        loadDashboardData: function() {
            const _this = this;
            _this.getDataList(1, function(retData) {
                if (!retData) return;
                if (retData.smsRequestStatus && retData.smsRequestStatus.series) {
                    _this.$set(_this, 'smsRequestStatus', JSON.parse(JSON.stringify(retData.smsRequestStatus)));
                }
                if (retData.groupDistributionChart && retData.groupDistributionChart.series) {
                    _this.$set(_this, 'groupDistributionChart', JSON.parse(JSON.stringify(retData.groupDistributionChart)));
                }
                if (retData.monthlySmsRequestStatus && retData.monthlySmsRequestStatus.series) {
                    _this.$set(_this, 'monthlySmsRequestStatus', JSON.parse(JSON.stringify(retData.monthlySmsRequestStatus)));
                }
                if (retData.monthlyChargeStatus && retData.monthlyChargeStatus.series) {
                    _this.$set(_this, 'monthlyChargeStatus', JSON.parse(JSON.stringify(retData.monthlyChargeStatus)));
                }
                _this.chartKey++;
            });
        },
        resetFilter: function() {
            this.$set(this.formFilter, 'from_date', '');
            this.$set(this.formFilter, 'to_date', '');
            this.loadDashboardData();
        },
        getStatusBadgeClass: function(status) {
            switch (status) {
                case 'sent':
                    return 'bg-success-subtle text-success';
                case 'failed':
                    return 'bg-danger-subtle text-danger';
                case 'processing':
                    return 'bg-info-subtle text-info';
                case 'pending':
                default:
                    return 'bg-warning-subtle text-warning';
            }
        }
    },
    mounted() {
        const _this = this;
        _this.$set(_this.formFilter, 'from_date', '');
        _this.$set(_this.formFilter, 'to_date', '');

        _this.getGeneralData(['users', 'user'], function(retData) {
            if (retData && retData.user) {
                _this.$set(_this.formFilter, 'user_id', retData.user.id);
            }
            _this.loadDashboardData();
        });
    }
};
</script>

<style scoped>
.gw-admin-dashboard {
    padding: 10px 0 30px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.gw-filter-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.gw-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    margin-bottom: 4px;
    display: block;
}

.gw-input {
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
}

.gw-btn-filter {
    border-radius: 8px;
    font-weight: 700;
    padding: 7px 14px;
}

.gw-btn-reset {
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    padding: 7px 10px;
}

/* Stat Cards */
.gw-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gw-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.gw-stat-title {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.gw-icon-pill {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 14px;
}

.gw-stat-num {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    margin-bottom: 4px;
}

.gw-stat-footer {
    font-size: 11px;
    font-weight: 600;
}

/* Chart Cards & Data Cards */
.gw-chart-card, .gw-data-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.gw-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.card-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 18px;
}

/* Tables */
.gw-table {
    font-size: 13px;
}

.gw-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 16px;
}

.gw-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.gw-group-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.gw-node-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 12px;
}

.gw-msg-snippet {
    max-width: 240px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #334155;
}

/* Account Overview & Launchpad */
.gw-account-card, .gw-launchpad-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.gw-meta-list {
    display: grid;
    gap: 12px;
}

.gw-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
}

.gw-code {
    font-family: monospace;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

/* Launchpad Buttons */
.gw-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    color: #1e293b;
    font-size: 11.5px;
    font-weight: 700;
    transition: all 0.15s ease;
    text-align: center;
}

.gw-action-btn:hover {
    background: #ffffff;
    border-color: #2563eb;
    color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.1);
}

.gw-action-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 15px;
    margin-bottom: 6px;
}

.btn-xs {
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 6px;
}

.gw-chart-card .card-body {
    min-height: 280px;
    width: 100%;
    position: relative;
}

::v-deep .vue-apexcharts {
    width: 100% !important;
}

::v-deep .apexcharts-canvas {
    margin: 0 auto !important;
    max-width: 100% !important;
}
</style>
