@page "/blocks/dashboard"
@namespace Lumeo.Docs.Pages.Patterns

<PageTitle>Dashboard Pattern — Lumeo</PageTitle>

<PageHeader Title="Dashboard" Description="A complete analytics dashboard built with Lumeo components. Includes a top bar, stats cards, revenue chart, activity feed, data table, and mini charts." />

<Stack Gap="6">

    <ComponentDemo Title="Analytics Dashboard" Code="@_dashboardCode">
        <Stack Gap="4" Class="w-full min-w-[700px]">

            <!-- Top Bar -->
            <Flex Class="items-center justify-between gap-4 rounded-[var(--radius-lg)] bg-card px-4 py-3 shadow-sm">
                <Flex Class="items-center gap-3">
                    <Flex Class="h-8 w-8 items-center justify-center rounded-md bg-primary shadow-sm">
                        <DynamicIcon Name="BarChart3" Class="h-4 w-4 text-primary-foreground" />
                    </Flex>
                    <Stack Gap="0">
                        <Lumeo.Text As="span" Class="text-sm font-semibold text-foreground leading-none">Nexara</Lumeo.Text>
                        <Lumeo.Text As="span" Class="text-[10px] text-muted-foreground">Analytics Platform</Lumeo.Text>
                    </Stack>
                </Flex>
                <Flex Class="flex-1 max-w-sm items-center gap-2 rounded-md border border-border/40 bg-background px-3 h-9">
                    <DynamicIcon Name="Search" Class="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                    <Input type="text" placeholder="Search users, reports, transactions…" Class="flex h-8 w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none border-0 shadow-none p-0 focus-visible:ring-0" />
                    <Lumeo.Text As="span" Class="text-[10px] text-muted-foreground border border-border/40 rounded px-1 py-0.5 shrink-0">⌘K</Lumeo.Text>
                </Flex>
                <Flex Class="items-center gap-1.5">
                    <div class="relative">
                        <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Icon" Class="h-8 w-8">
                            <DynamicIcon Name="Bell" Class="h-4 w-4" />
                        </Button>
                        <span class="absolute top-1 right-1 h-2 w-2 rounded-full bg-primary ring-2 ring-background"></span>
                    </div>
                    <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Icon" Class="h-8 w-8">
                        <DynamicIcon Name="Settings" Class="h-4 w-4" />
                    </Button>
                    <Separator Orientation="Separator.SeparatorOrientation.Vertical" Class="h-5 mx-1" />
                    <Flex Class="items-center gap-2 cursor-pointer rounded-md px-2 py-1 hover:bg-muted/50 transition-colors">
                        <Avatar Size="Avatar.AvatarSize.Sm">
                            <AvatarFallback Class="bg-primary/10 text-primary text-[10px] font-semibold">PK</AvatarFallback>
                        </Avatar>
                        <Stack Class="hidden sm:block" Gap="0">
                            <Lumeo.Text Class="text-xs font-medium text-foreground leading-none">Priya Kapoor</Lumeo.Text>
                            <Lumeo.Text Class="text-[10px] text-muted-foreground leading-none mt-0.5">Admin</Lumeo.Text>
                        </Stack>
                        <DynamicIcon Name="ChevronDown" Class="h-3.5 w-3.5 text-muted-foreground" />
                    </Flex>
                </Flex>
            </Flex>

            <!-- Stats Row -->
            <Grid Class="grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                @foreach (var stat in _stats)
                {
                    <Card Class="rounded-[var(--radius-lg)] border-border/40 shadow-sm overflow-hidden">
                        <CardHeader Class="pb-2">
                            <Flex Class="items-center justify-between">
                                <Lumeo.Text Class="text-xs font-medium text-muted-foreground uppercase tracking-wider">@stat.Label</Lumeo.Text>
                                <Flex Class="h-7 w-7 items-center justify-center rounded-md bg-muted/60">
                                    <DynamicIcon Name="@stat.IconName" Class="h-3.5 w-3.5 text-muted-foreground" />
                                </Flex>
                            </Flex>
                        </CardHeader>
                        <CardContent Class="pt-0">
                            <Lumeo.Text Class="text-2xl font-bold text-foreground tracking-tight">@stat.Value</Lumeo.Text>
                            <Flex Class="mt-1.5 items-center gap-1.5">
                                <Flex Class="items-center gap-0.5">
                                    <DynamicIcon Name="@(stat.IsPositive ? "TrendingUp" : "TrendingDown")" Class="@($"h-3.5 w-3.5 {(stat.IsPositive ? "text-emerald-500" : "text-rose-500")}")" />
                                    <Lumeo.Text As="span" Class="@($"text-xs font-semibold {(stat.IsPositive ? "text-emerald-600" : "text-rose-600")}")">@stat.Trend</Lumeo.Text>
                                </Flex>
                                <Lumeo.Text As="span" Class="text-xs text-muted-foreground">vs last month</Lumeo.Text>
                            </Flex>
                            <Progress Value="@stat.ProgressValue" Class="mt-3 h-1" Variant="@stat.ProgressVariant" />
                        </CardContent>
                    </Card>
                }
            </Grid>

            <!-- Main Chart + Activity Feed -->
            <Grid Class="grid-cols-1 lg:grid-cols-7 gap-4">

                <!-- Area Chart — Revenue -->
                <Card Class="lg:col-span-5 rounded-[var(--radius-lg)] border-border/40 shadow-sm">
                    <CardHeader Class="pb-3">
                        <Flex Class="items-start justify-between">
                            <Stack Gap="1">
                                <Heading Level="3" Class="text-base font-semibold leading-none tracking-tight">Revenue Overview</Heading>
                                <Lumeo.Text Class="text-sm text-muted-foreground">12-month revenue vs. expenses — FY 2025</Lumeo.Text>
                            </Stack>
                            <Flex Class="items-center gap-2">
                                <Flex Class="items-center gap-1.5">
                                    <span class="h-2.5 w-2.5 rounded-full bg-primary inline-block"></span>
                                    <Lumeo.Text As="span" Class="text-xs text-muted-foreground">Revenue</Lumeo.Text>
                                </Flex>
                                <Flex Class="items-center gap-1.5">
                                    <span class="h-2.5 w-2.5 rounded-full bg-muted-foreground/40 inline-block"></span>
                                    <Lumeo.Text As="span" Class="text-xs text-muted-foreground">Expenses</Lumeo.Text>
                                </Flex>
                                <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm" Class="h-7 text-xs ml-2">
                                    FY 2025
                                    <DynamicIcon Name="ChevronDown" Class="h-3 w-3 ml-1" />
                                </Button>
                            </Flex>
                        </Flex>
                    </CardHeader>
                    <CardContent Class="pt-0">
                        <AreaChart
                            Categories="@_areaCategories"
                            Series="@_areaSeries"
                            Smooth="true"
                            Gradient="true"
                            Height="340px" />
                    </CardContent>
                </Card>

                <!-- Recent Activity Feed -->
                <Card Class="lg:col-span-2 rounded-[var(--radius-lg)] border-border/40 shadow-sm">
                    <CardHeader Class="pb-3">
                        <Flex Class="items-center justify-between">
                            <Heading Level="3" Class="text-base font-semibold leading-none tracking-tight">Activity</Heading>
                            <Badge Variant="Badge.BadgeVariant.Secondary" Class="text-[10px]">Live</Badge>
                        </Flex>
                        <Lumeo.Text Class="text-xs text-muted-foreground mt-1">Real-time platform events</Lumeo.Text>
                    </CardHeader>
                    <CardContent Class="pt-0">
                        <Stack Gap="0">
                            @foreach (var activity in _activities)
                            {
                                <Flex Class="gap-2.5 py-2.5 border-b border-border/40 last:border-0 items-start hover:bg-muted/30 rounded-md px-1 -mx-1 transition-colors cursor-default">
                                    <Avatar Class="h-7 w-7 shrink-0 mt-0.5">
                                        <AvatarFallback Class="text-[9px] font-semibold">@activity.Initials</AvatarFallback>
                                    </Avatar>
                                    <Stack Class="flex-1 min-w-0" Gap="0">
                                        <Lumeo.Text Class="text-xs text-foreground leading-snug">@activity.Text</Lumeo.Text>
                                        <Flex Class="items-center gap-1.5 mt-0.5">
                                            <span class="@($"h-1.5 w-1.5 rounded-full {activity.DotClass} shrink-0")"></span>
                                            <Lumeo.Text Class="text-[10px] text-muted-foreground">@activity.Time</Lumeo.Text>
                                        </Flex>
                                    </Stack>
                                </Flex>
                            }
                        </Stack>
                        <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm" Class="w-full mt-3 h-7 text-xs text-muted-foreground">
                            View all events
                            <DynamicIcon Name="ArrowRight" Class="h-3 w-3 ml-1" />
                        </Button>
                    </CardContent>
                </Card>
            </Grid>


        </Stack>
    </ComponentDemo>

</Stack>

@code {
    // ── Stat cards ────────────────────────────────────────────────
    private record StatItem(
        string Label, string Value, string Trend, bool IsPositive,
        string IconName, int ProgressValue, Progress.ProgressVariant ProgressVariant);

    private List<StatItem> _stats = new()
    {
        new("Total Revenue",   "$284,729.41", "+18.3%", true,  "DollarSign",    76, Progress.ProgressVariant.Success),
        new("Subscriptions",   "3,847",       "+12.7%", true,  "Users",         83, Progress.ProgressVariant.Success),
        new("Total Sales",     "14,682",      "+9.4%",  true,  "ShoppingBag",   61, Progress.ProgressVariant.Default),
        new("Active Now",      "247",         "-3.1%",  false, "Activity",      34, Progress.ProgressVariant.Destructive),
    };

    // ── Area chart — 12 months ────────────────────────────────────
    private List<string> _areaCategories = new()
        { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };

    private List<AreaChart.ChartSeriesData> _areaSeries = new()
    {
        new AreaChart.ChartSeriesData
        {
            Name   = "Revenue",
            Values = new List<double> { 21400, 26800, 23700, 34200, 39100, 47800, 43500, 51200, 56400, 61900, 58300, 72100 }
        },
        new AreaChart.ChartSeriesData
        {
            Name   = "Expenses",
            Values = new List<double> { 14200, 16500, 15100, 19800, 21600, 25300, 22700, 26400, 28900, 31200, 29100, 34700 }
        }
    };

    // ── Activity feed ─────────────────────────────────────────────
    private record ActivityItem(string Text, string Time, string DotClass, string Initials);

    private List<ActivityItem> _activities = new()
    {
        new("Aisha Okonkwo upgraded to Enterprise plan",      "just now",    "bg-emerald-500",        "AO"),
        new("Payment of $4,299 from Stripe, Inc. cleared",    "4 min ago",   "bg-primary",            "SP"),
        new("Mateus Ferreira submitted refund request #8841", "22 min ago",  "bg-amber-500",          "MF"),
        new("API rate limit exceeded — workspace #2291",      "1 hr ago",    "bg-rose-500",           "SY"),
        new("Yuki Tanaka invited 3 team members",             "3 hrs ago",   "bg-primary",            "YT"),
        new("Weekly digest report generated",                 "Yesterday",   "bg-muted-foreground",   "SD"),
    };

    private string _dashboardCode = @"<!-- Top Bar -->
<Flex Class=""items-center justify-between gap-4 rounded-[var(--radius-lg)] bg-card px-4 py-3 shadow-sm"">
    <Flex Class=""items-center gap-3"">
        <Flex Class=""h-8 w-8 items-center justify-center rounded-md bg-primary"">
            <DynamicIcon Name=""BarChart3"" Class=""h-4 w-4 text-primary-foreground"" />
        </Flex>
        <Lumeo.Text As=""span"" Class=""text-sm font-semibold text-foreground"">Nexara</Lumeo.Text>
    </Flex>
    <Flex Class=""flex-1 max-w-sm items-center gap-2 rounded-md border border-border/40 bg-background px-3 h-9"">
        <DynamicIcon Name=""Search"" Class=""h-3.5 w-3.5 text-muted-foreground"" />
        <Input Placeholder=""Search..."" Class=""h-8 flex-1 bg-transparent border-0 shadow-none"" />
    </Flex>
    <Flex Class=""items-center gap-1.5"">
        <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Icon"" Class=""h-8 w-8"">
            <DynamicIcon Name=""Bell"" Class=""h-4 w-4"" />
        </Button>
        <Avatar Size=""Avatar.AvatarSize.Sm"">
            <AvatarFallback>PK</AvatarFallback>
        </Avatar>
        <DynamicIcon Name=""ChevronDown"" Class=""h-3.5 w-3.5 text-muted-foreground"" />
    </Flex>
</Flex>

<!-- Stats Row -->
<Grid Class=""grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"">
    @foreach (var stat in _stats)
    {
        <Card Class=""rounded-[var(--radius-lg)] border-border/40"">
            <CardHeader Class=""pb-2"">
                <Flex Class=""items-center justify-between"">
                    <Lumeo.Text Class=""text-xs font-medium text-muted-foreground uppercase tracking-wider"">@stat.Label</Lumeo.Text>
                    <DynamicIcon Name=""@stat.IconName"" Class=""h-3.5 w-3.5 text-muted-foreground"" />
                </Flex>
            </CardHeader>
            <CardContent Class=""pt-0"">
                <Lumeo.Text Class=""text-2xl font-bold text-foreground"">@stat.Value</Lumeo.Text>
                <Flex Class=""mt-1.5 items-center gap-1.5"">
                    <DynamicIcon Name=""@(stat.IsPositive ? ""TrendingUp"" : ""TrendingDown"")"" Class=""h-3.5 w-3.5"" />
                    <Lumeo.Text As=""span"" Class=""text-xs font-semibold"">@stat.Trend</Lumeo.Text>
                    <Lumeo.Text As=""span"" Class=""text-xs text-muted-foreground"">vs last month</Lumeo.Text>
                </Flex>
                <Progress Value=""@stat.ProgressValue"" Class=""mt-3 h-1"" Variant=""@stat.ProgressVariant"" />
            </CardContent>
        </Card>
    }
</Grid>

<!-- Revenue Chart + Activity -->
<Grid Class=""grid-cols-1 lg:grid-cols-7 gap-4"">
    <Card Class=""lg:col-span-5"">
        <CardHeader>
            <Heading Level=""3"">Revenue Overview</Heading>
            <Lumeo.Text Class=""text-sm text-muted-foreground"">12-month revenue vs. expenses</Lumeo.Text>
        </CardHeader>
        <CardContent>
            <AreaChart Categories=""@_areaCategories"" Series=""@_areaSeries"" Smooth=""true"" Gradient=""true"" Height=""340px"" />
        </CardContent>
    </Card>
    <Card Class=""lg:col-span-2"">
        <CardHeader>
            <Heading Level=""3"">Activity</Heading>
        </CardHeader>
        <CardContent>
            @foreach (var a in _activities)
            {
                <Flex Class=""gap-2.5 py-2.5 border-b border-border/40 last:border-0 items-start hover:bg-muted/30 transition-colors"">
                    <Avatar Class=""h-7 w-7 shrink-0""><AvatarFallback Class=""text-[9px]"">@a.Initials</AvatarFallback></Avatar>
                    <Stack Gap=""0"">
                        <Lumeo.Text Class=""text-xs"">@a.Text</Lumeo.Text>
                        <Lumeo.Text Class=""text-[10px] text-muted-foreground"">@a.Time</Lumeo.Text>
                    </Stack>
                </Flex>
            }
        </CardContent>
    </Card>
</Grid>

";
}
