Analytics dashboard

"use client";

import {
  AppShell,
  Avatar,
  AvatarFallback,
  AvatarImage,
  Badge,
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  Metric,
  MetricDelta,
  MetricLabel,
  MetricValue,
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarSeparator,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@cooud-ui/ui";
import {
  Activity,
  Bell,
  ChartColumnIncreasing,
  DollarSign,
  FileText,
  LayoutDashboard,
  LineChart,
  Search,
  Settings,
  TrendingDown,
  Users,
} from "lucide-react";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";

const nav = [
  { id: "overview", label: "Overview", icon: LayoutDashboard },
  { id: "analytics", label: "Analytics", icon: LineChart },
  { id: "reports", label: "Reports", icon: FileText },
  { id: "settings", label: "Settings", icon: Settings },
];

const kpis = [
  { label: "Total revenue", value: "$84,210", delta: "+14.2%", trend: "up" as const, icon: DollarSign },
  { label: "Active users", value: "12,840", delta: "+6.8%", trend: "up" as const, icon: Users },
  { label: "Conversion", value: "4.21%", delta: "+0.9%", trend: "up" as const, icon: Activity },
  { label: "Churn", value: "1.64%", delta: "-0.4%", trend: "down" as const, icon: TrendingDown },
];

const revenueData = [
  { month: "Jan", revenue: 42100 },
  { month: "Feb", revenue: 48400 },
  { month: "Mar", revenue: 45900 },
  { month: "Apr", revenue: 56200 },
  { month: "May", revenue: 61800 },
  { month: "Jun", revenue: 72400 },
  { month: "Jul", revenue: 84210 },
];

const chartConfig = {
  revenue: { label: "Revenue", color: "var(--color-chart-1)" },
} satisfies ChartConfig;

const activity = [
  { id: "INV-2048", customer: "Mara Castillo", email: "mara@northwind.io", initials: "MC", avatar: "https://i.pravatar.cc/96?img=12", amount: "$1,290.00", status: "Paid", statusVariant: "success" as const },
  { id: "INV-2047", customer: "Devon Lane", email: "devon@acme.dev", initials: "DL", avatar: "https://i.pravatar.cc/96?img=33", amount: "$640.00", status: "Pending", statusVariant: "warning" as const },
  { id: "INV-2046", customer: "Priya Sharma", email: "priya@lumon.co", initials: "PS", amount: "$2,180.00", status: "Paid", statusVariant: "success" as const },
  { id: "INV-2045", customer: "Tobias Funke", email: "tobias@bluth.com", initials: "TF", avatar: "https://i.pravatar.cc/96?img=68", amount: "$320.00", status: "Refunded", statusVariant: "secondary" as const },
];

const topbar = [
  { id: "dashboard", label: "Dashboard", current: true },
  { id: "customers", label: "Customers", current: false },
  { id: "billing", label: "Billing", current: false },
];

export function DashboardAnalyticsBlock() {
  const sidebar = (
    <Sidebar collapsible="none" aria-label="Primary">
      <SidebarHeader>
        <div className="flex items-center gap-2 px-2 py-1.5">
          <span className="inline-flex size-8 items-center justify-center rounded-lg bg-gradient-primary text-primary-foreground shadow-glow">
            <ChartColumnIncreasing className="size-4" aria-hidden="true" />
          </span>
          <div className="flex min-w-0 flex-col">
            <span className="truncate text-sm font-semibold text-fg">Cooud Analytics</span>
            <span className="truncate text-xs text-fg-tertiary">Acme Inc.</span>
          </div>
        </div>
      </SidebarHeader>
      <SidebarSeparator />
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {nav.map((item, index) => (
                <SidebarMenuItem key={item.id}>
                  <SidebarMenuButton isActive={index === 1}>
                    <item.icon aria-hidden="true" />
                    <span>{item.label}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <div className="flex items-center gap-2 rounded-lg px-2 py-1.5">
          <Avatar className="size-8">
            <AvatarImage src="https://i.pravatar.cc/96?img=5" alt="Lena Park" />
            <AvatarFallback>LP</AvatarFallback>
          </Avatar>
          <div className="flex min-w-0 flex-col">
            <span className="truncate text-sm font-medium text-fg">Lena Park</span>
            <span className="truncate text-xs text-fg-tertiary">lena@acme.dev</span>
          </div>
        </div>
      </SidebarFooter>
    </Sidebar>
  );

  const header = (
    <div className="flex w-full items-center gap-3">
      <NavigationMenu aria-label="Primary" className="hidden md:flex">
        <NavigationMenuList>
          {topbar.map((item) => (
            <NavigationMenuItem key={item.id}>
              <NavigationMenuLink
                href={`#${item.id}`}
                active={item.current}
                aria-current={item.current ? "page" : undefined}
              >
                {item.label}
              </NavigationMenuLink>
            </NavigationMenuItem>
          ))}
        </NavigationMenuList>
      </NavigationMenu>
      <div className="ml-auto flex items-center gap-2">
        <label className="relative hidden sm:block">
          <span className="sr-only">Search</span>
          <Search
            className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-fg-tertiary"
            aria-hidden="true"
          />
          <input
            type="search"
            placeholder="Search…"
            className="h-9 w-48 rounded-lg border border-border bg-surface-inset pl-8 pr-3 text-sm text-fg outline-none placeholder:text-fg-tertiary focus-visible:ring-2 focus-visible:ring-ring"
          />
        </label>
        <Button variant="ghost" size="icon-sm" aria-label="Notifications">
          <Bell className="size-4" aria-hidden="true" />
        </Button>
        <Avatar className="size-8">
          <AvatarImage src="https://i.pravatar.cc/96?img=5" alt="Lena Park" />
          <AvatarFallback>LP</AvatarFallback>
        </Avatar>
      </div>
    </div>
  );

  return (
    <div className="h-[40rem] w-full overflow-hidden rounded-xl border border-border bg-surface-base">
      <AppShell sidebar={sidebar} header={header} className="h-full" providerProps={{ enableKeyboardShortcut: false }}>
        <div className="flex flex-col gap-6 p-6">
          <header className="flex flex-wrap items-end justify-between gap-3">
            <div className="flex flex-col gap-1">
              <h2 className="font-display text-2xl font-semibold tracking-tight text-fg">Analytics</h2>
              <p className="text-sm text-fg-secondary">Performance across your workspace, last 7 months.</p>
            </div>
            <Badge variant="success">Live</Badge>
          </header>

          <div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,12rem),1fr))] gap-4">
            {kpis.map(({ label, value, delta, trend, icon: Icon }) => (
              <Card key={label} className="gap-4 py-5">
                <CardContent className="flex flex-col gap-3">
                  <div className="flex items-center justify-between">
                    <span className="inline-flex size-9 items-center justify-center rounded-lg bg-surface-overlay text-fg-secondary">
                      <Icon className="size-4" aria-hidden="true" />
                    </span>
                    <MetricDelta trend={trend}>{delta}</MetricDelta>
                  </div>
                  <Metric className="gap-1.5">
                    <MetricLabel>{label}</MetricLabel>
                    <MetricValue className="text-3xl">{value}</MetricValue>
                  </Metric>
                </CardContent>
              </Card>
            ))}
          </div>

          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
            <Card>
              <CardHeader className="flex-row items-center justify-between gap-3">
                <div className="flex flex-col gap-1">
                  <CardTitle className="font-display text-base">Revenue trend</CardTitle>
                  <p className="text-sm text-fg-secondary">Monthly recurring revenue</p>
                </div>
                <MetricDelta trend="up">+99.8% YoY</MetricDelta>
              </CardHeader>
              <CardContent>
                <ChartContainer config={chartConfig} className="aspect-[16/9] w-full">
                  <BarChart accessibilityLayer data={revenueData} margin={{ left: 4, right: 4 }}>
                    <CartesianGrid vertical={false} />
                    <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} fontSize={12} />
                    <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
                    <Bar dataKey="revenue" fill="var(--color-chart-1)" radius={[6, 6, 0, 0]} />
                  </BarChart>
                </ChartContainer>
              </CardContent>
            </Card>

            <Card className="gap-0 py-0">
              <CardHeader className="px-6 py-5">
                <CardTitle className="font-display text-base">Recent activity</CardTitle>
                <p className="text-sm text-fg-secondary">Latest invoices and payments</p>
              </CardHeader>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Customer</TableHead>
                    <TableHead className="text-right">Amount</TableHead>
                    <TableHead>Status</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {activity.map((row) => (
                    <TableRow key={row.id}>
                      <TableCell>
                        <div className="flex items-center gap-3">
                          <Avatar className="size-8">
                            {row.avatar ? <AvatarImage src={row.avatar} alt={row.customer} /> : null}
                            <AvatarFallback>{row.initials}</AvatarFallback>
                          </Avatar>
                          <div className="flex min-w-0 flex-col">
                            <span className="truncate text-sm font-medium text-fg">{row.customer}</span>
                            <span className="truncate text-xs text-fg-tertiary">{row.email}</span>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell className="text-right font-medium tabular-nums text-fg">{row.amount}</TableCell>
                      <TableCell>
                        <Badge variant={row.statusVariant}>{row.status}</Badge>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Card>
          </div>
        </div>
      </AppShell>
    </div>
  );
}