<template>
    <Head title="Audience Overview" />

    <AppLayout>

        <!-- ── Header ─────────────────────────────────────── -->
        <div class="ov-header">
            <div>
                <h1 class="ov-header__title">Audience Overview</h1>
                <p class="ov-header__sub">Subscriber health, growth, and engagement at a glance.</p>
            </div>
            <div class="ov-header__actions">
                <div class="ov-select-container">
                    <span class="ov-select-icon-wrap">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" style="width:16px; height:16px; color:#6b7280;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
                        </svg>
                    </span>
                    <CwSelect
                        v-model="dateRange"
                        :options="dateRangeOptions"
                        placeholder="Select range"
                        style="width: 150px;"
                    />
                </div>
            </div>
        </div>

        <!-- ── Stat cards ─────────────────────────────────── -->
        <div class="ov-stat-grid">
            <div v-for="stat in stats" :key="stat.label" class="ov-stat-card">
                <div class="ov-stat-top">
                    <div class="ov-stat-icon" :style="{ background: stat.bg }">
                        <!-- Total Contacts -->
                        <svg v-if="stat.label === 'Total Contacts'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" :style="{ color: stat.color }" style="width:18px; height:18px;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                        </svg>
                        <!-- Active Subscribers -->
                        <svg v-else-if="stat.label === 'Active Subscribers'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" :style="{ color: stat.color }" style="width:18px; height:18px;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.746 3.746 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
                        </svg>
                        <!-- Unsubscribed -->
                        <svg v-else-if="stat.label === 'Unsubscribed'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" :style="{ color: stat.color }" style="width:18px; height:18px;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
                        </svg>
                        <!-- Hard Bounced -->
                        <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" :style="{ color: stat.color }" style="width:18px; height:18px;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                        </svg>
                    </div>
                    <span class="ov-trend" :class="stat.trendUp ? 'ov-trend--up' : 'ov-trend--down'">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" style="width:9px; height:9px; margin-right: 2px;">
                            <path v-if="stat.trendUp" stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
                            <path v-else stroke-linecap="round" stroke-linejoin="round" d="M19.5 4.5l-15 15m0 0h11.25m-11.25 0V8.25" />
                        </svg>
                        {{ stat.trend }}
                    </span>
                </div>
                <div class="ov-stat-value">{{ stat.value }}</div>
                <div class="ov-stat-label">{{ stat.label }}</div>
                <div class="ov-stat-bar-wrap">
                    <div class="ov-stat-bar">
                        <div class="ov-stat-bar-fill" :style="{ width: stat.pct + '%', background: stat.color }"></div>
                    </div>
                    <span class="ov-stat-bar-note">{{ stat.note }}</span>
                </div>
            </div>
        </div>

        <!-- ── Main grid: chart + sidebar ────────────────── -->
        <div class="ov-main-grid">
            <!-- Growth line chart -->
            <div class="ov-chart-card">
                <div class="ov-chart-head">
                    <div>
                        <p class="ov-chart-title">Subscriber Growth</p>
                        <p class="ov-chart-sub">Monthly net, new &amp; churned - last 12 months</p>
                    </div>
                    <div class="ov-chart-legend">
                        <span v-for="leg in chartLegend" :key="leg.label" class="ov-legend-item">
                            <span class="ov-legend-dot" :style="{ background: leg.color }"></span>
                            {{ leg.label }}
                        </span>
                    </div>
                </div>
                <div class="ov-chart-content">
                    <Chart type="line" :data="growthChartData" :options="growthChartOptions" style="height:280px" />
                </div>
            </div>
        </div>

        <!-- ── Engagement row ─────────────────────────────── -->
        <div class="ov-engagement-card">
            <div class="ov-panel-head">
                <span class="ov-panel-title">Engagement Breakdown</span>
                <span class="ov-panel-sub">Last 30 days</span>
            </div>
            <div class="ov-engagement-grid">
                <div v-for="metric in engagementMetrics" :key="metric.label" class="ov-eng-item">
                    <div class="ov-eng-icon" :style="{ background: metric.bg }">
                        <!-- Emails Sent -->
                        <svg v-if="metric.label === 'Emails Sent'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-check" :style="{ color: metric.color }"><path d="M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/><path d="m16 19 2 2 4-4"/></svg>
                        <!-- Open Rate -->
                        <svg v-else-if="metric.label === 'Open Rate'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-open" :style="{ color: metric.color }"><path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"/><path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"/></svg>
                        <!-- Click Rate -->
                        <svg v-else-if="metric.label === 'Click Rate'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-mouse-pointer" :style="{ color: metric.color }"><path d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"/><path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"/></svg>
                        <!-- Unsubscribe Rate -->
                        <svg v-else-if="metric.label === 'Unsubscribe Rate'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-minus" :style="{ color: metric.color }"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
                        <!-- Spam Rate -->
                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-warning" :style="{ color: metric.color }"><path d="M22 10.5V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h12.5"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/><path d="M20 14v4"/><path d="M20 22v.01"/></svg>
                    </div>
                    <div class="ov-eng-value" :style="{ color: metric.color }">{{ metric.value }}</div>
                    <div class="ov-eng-label">{{ metric.label }}</div>
                    <span class="ov-trend ov-eng-change" :class="metric.up ? 'ov-trend--up' : 'ov-trend--down'">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" style="width:9px; height:9px; margin-right: 2px;">
                            <path v-if="metric.up" stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
                            <path v-else stroke-linecap="round" stroke-linejoin="round" d="M19.5 4.5l-15 15m0 0h11.25m-11.25 0V8.25" />
                        </svg>
                        {{ metric.change }}
                    </span>
                </div>
            </div>
        </div>

    </AppLayout>
</template>

<script setup>
import { ref } from 'vue';
import { Head } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';
import Chart     from 'primevue/chart';
import CwSelect  from '@/Components/CwSelect.vue';

const props = defineProps({
    stats: Array,
    healthMeters: Array,
    topLists: Array,
    engagementMetrics: Array,
    growthChartData: Object,
});

// ── Date range ─────────────────────────────────────────────
const dateRange = ref('30d');
const dateRangeOptions = [
    { label: 'Last 30 days',   value: '30d' },
    { label: 'Last 90 days',   value: '90d' },
    { label: 'Last 12 months', value: '12m' },
    { label: 'All time',       value: 'all' },
];

const growthChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    interaction: { mode: 'index', intersect: false },
    plugins: {
        legend: { display: false },
        tooltip: {
            backgroundColor: '#1e293b',
            titleColor: '#94a3b8',
            bodyColor: '#f1f5f9',
            padding: 12,
            cornerRadius: 8,
            usePointStyle: true,
        },
    },
    scales: {
        y: {
            beginAtZero: true,
            grid: { color: '#f1f5f9', drawBorder: false },
            border: { display: false, dash: [4, 4] },
            ticks: { color: '#9ca3af', font: { size: 11 }, maxTicksLimit: 6 },
        },
        x: {
            grid: { display: false },
            border: { display: false },
            ticks: { color: '#9ca3af', font: { size: 11 } },
        },
    },
};

const chartLegend = [
    { label: 'Net growth', color: '#4285F4' },
    { label: 'New adds',   color: '#16a34a' },
    { label: 'Churned',    color: '#ef4444' },
];
</script>

<style scoped>
/* ── Header ──────────────────────────────────────── */
.ov-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.ov-header__title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0 0 3px; }
.ov-header__sub   { font-size: 13px; color: var(--text-secondary); margin: 0; }
.ov-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* CwSelect wrapper container */
.ov-select-container {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ov-select-container:focus-within {
    border-color: var(--active-text);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.ov-select-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ov-select-container :deep(.cw-select-trigger) {
    border: none !important;
    padding: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ── Trend badge ─────────────────────────────────── */
.ov-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 99px;
}
.ov-trend--up   { background: var(--success-light); color: var(--success); }
.ov-trend--down { background: var(--danger-light); color: var(--danger); }

/* ── Stat grid ───────────────────────────────────── */
.ov-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 1024px) { .ov-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ov-stat-grid { grid-template-columns: 1fr; } }

.ov-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ov-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ov-stat-top   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ov-stat-icon  { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ov-stat-value { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 4px; }
.ov-stat-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.ov-stat-bar-wrap { display: flex; flex-direction: column; gap: 5px; }
.ov-stat-bar      { height: 5px; background: var(--gray-100); border-radius: 99px; overflow: hidden; }
.ov-stat-bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s ease; }
.ov-stat-bar-note { font-size: 11px; color: var(--text-muted); }

/* ── Main grid ───────────────────────────────────── */
.ov-main-grid {
    display: grid; 
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}

/* Chart card */
.ov-chart-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.ov-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 10px;
}
.ov-chart-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0 0 2px; }
.ov-chart-sub   { font-size: 12px; color: var(--text-muted); margin: 0; }

.ov-chart-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.ov-legend-item  { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.ov-legend-dot   { width: 10px; height: 3px; border-radius: 2px; }
.ov-chart-content { padding: 24px; }

/* ── Engagement row ─────────────────────────────── */
.ov-engagement-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    overflow: hidden;
}
.ov-panel-head  { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 0; }
.ov-panel-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.ov-panel-sub   { font-size: 12px; color: var(--text-muted); }

.ov-engagement-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    padding: 24px;
}
@media (max-width: 1024px) { .ov-engagement-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .ov-engagement-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .ov-engagement-grid { grid-template-columns: 1fr; } }

.ov-eng-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 14px 18px;
    border-radius: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ov-eng-item:hover { 
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); 
    border-color: var(--active-text); 
}
.ov-eng-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.ov-eng-value { font-size: 24px; font-weight: 700; line-height: 1; margin-bottom: 2px; }
.ov-eng-label { font-size: 12px; color: var(--text-secondary); }
.ov-eng-change { font-size: 11px; margin-top: 3px; }
</style>
