import { useState, useMemo, ReactNode } from 'react';
import { Head, router } from '@inertiajs/react';
import { useQuery } from '@tanstack/react-query';
import {
  format, subDays, startOfDay, endOfDay, eachDayOfInterval, isWithinInterval,
  startOfMonth, addDays,
} from 'date-fns';
import {
  CalendarIcon, TrendingUp, ShoppingCart, Users, Building2, BookOpen, PoundSterling,
  CreditCard, Award, UserCheck,
} from 'lucide-react';
import AdminLayout from '@/layouts/AdminLayout';
import DashboardNotifications from '@/components/admin/DashboardNotifications';
import CompanyManagerDashboard from '@/components/admin/CompanyManagerDashboard';
import { useAuth } from '@/hooks/useAuth';
import { cn } from '@/lib/utils';
import { grossCents } from '@/lib/vat';
import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
  PieChart, Pie, Cell,
} from 'recharts';

const presetRanges = [
  { label: 'Last 7 days', days: 7 },
  { label: 'Last 30 days', days: 30 },
  { label: 'Last 90 days', days: 90 },
  { label: 'This month', days: -1 },
];

// Statuses that count toward revenue. The rest of the codebase
// (StripeController, OrdersController, FunctionsController,
// DashboardApiController::counts, AnalyticsController) treats 'paid' and
// 'confirmed' as the canonical "booked, money received" statuses. 'complete'
// is what the admin mark-complete action writes for delivered orders
// (OrdersController::markComplete); 'completed' kept defensively, mirroring
// ReconciliationController.
const REVENUE_STATUSES = ['paid', 'confirmed', 'complete', 'completed'];

type Order = {
  id: string;
  course_id: string;
  company_id: string | null;
  status: string;
  payment_method: string;
  start_date: string;
  created_at: string;
  price_cents: number;
  refund_cents: number;
  num_delegates: number;
  course?: { title: string } | null;
  company?: { name: string } | null;
};

type Booking = {
  id: string;
  trainer_id: string;
  start_date: string;
  status: string;
  trainer?: { id: string; first_name: string; last_name: string } | null;
  course?: { title: string; days: number } | null;
};

type Trainer = { id: string; first_name: string; last_name: string };
type Counts = { trainers: number; companies: number; courses: number; bookings: number };

// When the order was placed. created_at arrives from the admin API as a UTC
// "yyyy-mm-dd hh:mm:ss" string; parse as UTC so it buckets/renders in the
// viewer's local day. Missing created_at yields an Invalid Date, which
// isWithinInterval treats as outside every range.
const orderPlacedAt = (o: Order) => new Date((o.created_at || '').replace(' ', 'T') + 'Z');

const apiGet = async <T,>(path: string): Promise<T> => {
  const res = await fetch(path);
  if (!res.ok) throw new Error('Request failed');
  return res.json();
};

function Dashboard() {
  const { hasRole, isSysLevel } = useAuth();

  // company_trainer + delegate are redirected at the route level (see web.php /admin handler)
  // so they never render here. company_manager renders inline.
  if (hasRole('company_manager') && !isSysLevel()) {
    return <CompanyManagerDashboard />;
  }

  return <SysAdminDashboard />;
}

const SysAdminDashboard = () => {
  const [dateRange, setDateRange] = useState<{ from: Date; to: Date }>({
    from: subDays(new Date(), 90),
    to: new Date(),
  });

  const applyPreset = (days: number) => {
    if (days === -1) {
      setDateRange({ from: startOfMonth(new Date()), to: new Date() });
    } else {
      setDateRange({ from: subDays(new Date(), days), to: new Date() });
    }
  };

  const { data: counts } = useQuery({
    queryKey: ['dashboard-counts'],
    queryFn: () => apiGet<Counts>('/api/admin/dashboard/counts'),
  });

  const { data: allOrders } = useQuery({
    queryKey: ['dashboard-orders'],
    queryFn: () => apiGet<Order[]>('/api/admin/dashboard/orders'),
  });

  const { data: allBookings } = useQuery({
    queryKey: ['dashboard-bookings'],
    queryFn: () => apiGet<Booking[]>('/api/admin/dashboard/bookings'),
  });

  const { data: allTrainers } = useQuery({
    queryKey: ['dashboard-trainers'],
    queryFn: () => apiGet<Trainer[]>('/api/admin/dashboard/trainers'),
  });

  const filteredOrders = useMemo(() => {
    if (!allOrders) return [];
    const interval = { start: startOfDay(dateRange.from), end: endOfDay(dateRange.to) };
    // Date basis is when the order was placed (created_at), not the course
    // start date — the dashboard reports sales taken in the period. This also
    // brings VT e-learning orders (which have no scheduled date) into the
    // stats; they were previously excluded.
    return allOrders.filter((o) => isWithinInterval(orderPlacedAt(o), interval));
  }, [allOrders, dateRange]);

  const kpis = useMemo(() => {
    const confirmed = filteredOrders.filter((o) => REVENUE_STATUSES.includes(o.status));
    const cancelled = filteredOrders.filter((o) => o.status === 'cancelled');
    // Revenue / refunds shown in gross (incl-VAT) — matches what the customer
    // actually paid us / what we sent back to them.
    const totalRevenue = confirmed.reduce((s, o) => s + grossCents(o.price_cents), 0);
    const totalRefunds = filteredOrders.reduce((s, o) => s + grossCents(o.refund_cents || 0), 0);
    const netRevenue = totalRevenue - totalRefunds;
    const totalDelegates = confirmed.reduce((s, o) => s + o.num_delegates, 0);
    const invoiceOrders = confirmed.filter((o) => o.payment_method === 'invoice' || o.payment_method === 'credit');
    const stripeOrders = confirmed.filter((o) => o.payment_method === 'stripe');
    const invoiceRevenue = invoiceOrders.reduce((s, o) => s + grossCents(o.price_cents), 0);
    const stripeRevenue = stripeOrders.reduce((s, o) => s + grossCents(o.price_cents), 0);

    return {
      totalOrders: filteredOrders.length,
      confirmedOrders: confirmed.length,
      cancelledOrders: cancelled.length,
      totalRevenue,
      totalRefunds,
      netRevenue,
      totalDelegates,
      invoiceRevenue,
      stripeRevenue,
    };
  }, [filteredOrders]);

  const chartData = useMemo(() => {
    if (!filteredOrders.length) return [];
    // Bucket revenue by the (viewer-local) day the order was placed.
    const byDay = new Map<string, { revenue: number; orders: number }>();
    filteredOrders.forEach((o) => {
      if (!REVENUE_STATUSES.includes(o.status)) return;
      const key = format(orderPlacedAt(o), 'yyyy-MM-dd');
      const bucket = byDay.get(key) || { revenue: 0, orders: 0 };
      bucket.revenue += grossCents(o.price_cents);
      bucket.orders += 1;
      byDay.set(key, bucket);
    });
    const days = eachDayOfInterval({ start: dateRange.from, end: dateRange.to });
    return days.map((day) => {
      const bucket = byDay.get(format(day, 'yyyy-MM-dd'));
      return {
        date: format(day, 'dd MMM'),
        revenue: (bucket?.revenue ?? 0) / 100,
        orders: bucket?.orders ?? 0,
      };
    });
  }, [filteredOrders, dateRange]);

  // "Successful" = booked + not refunded/cancelled. Covers paid Stripe orders,
  // confirmed invoice orders, and orders that have already completed — all of
  // which represent real money / real attendance.
  const successfulOrders = useMemo(
    () => filteredOrders.filter((o) => !['cancelled', 'refunded'].includes(o.status)),
    [filteredOrders],
  );

  const topCompanies = useMemo(() => {
    const map: Record<string, { name: string; spend: number; orders: number }> = {};
    successfulOrders
      .filter((o) => o.company_id)
      .forEach((o) => {
        const cid = o.company_id!;
        if (!map[cid]) map[cid] = { name: o.company?.name || 'Unknown', spend: 0, orders: 0 };
        map[cid].spend += grossCents(o.price_cents);
        map[cid].orders += 1;
      });
    return Object.values(map).sort((a, b) => b.spend - a.spend).slice(0, 5);
  }, [successfulOrders]);

  const coursePopularity = useMemo(() => {
    const map: Record<string, { name: string; bookings: number; delegates: number; revenue: number }> = {};
    successfulOrders.forEach((o) => {
      const cid = o.course_id;
      const title = o.course?.title || 'Unknown';
      if (!map[cid]) map[cid] = { name: title, bookings: 0, delegates: 0, revenue: 0 };
      map[cid].bookings += 1;
      map[cid].delegates += o.num_delegates;
      map[cid].revenue += grossCents(o.price_cents);
    });
    return Object.values(map).sort((a, b) => b.bookings - a.bookings);
  }, [successfulOrders]);

  const periodLabel = `${format(dateRange.from, 'dd MMM')} – ${format(dateRange.to, 'dd MMM yyyy')}`;

  const CHART_COLORS = [
    'hsl(var(--primary))',
    'hsl(24 95% 40%)',
    'hsl(24 70% 60%)',
    'hsl(200 70% 50%)',
    'hsl(150 60% 45%)',
    'hsl(280 60% 55%)',
    'hsl(340 70% 55%)',
    'hsl(45 90% 50%)',
  ];

  const trainerUtilisation = useMemo(() => {
    if (!allTrainers || !allBookings) return [];
    const interval = { start: startOfDay(dateRange.from), end: endOfDay(dateRange.to) };
    const allDays = eachDayOfInterval({ start: dateRange.from, end: dateRange.to });
    const weekdays = allDays.filter((d) => d.getDay() !== 0 && d.getDay() !== 6).length;

    return allTrainers
      .map((t) => {
        const trainerBookings = allBookings.filter((b) => {
          if (b.trainer?.id !== t.id) return false;
          const bookingStart = new Date(b.start_date);
          const courseDays = b.course?.days || 1;
          const bookingEnd = addDays(bookingStart, courseDays - 1);
          return bookingStart <= interval.end && bookingEnd >= interval.start;
        });

        const busyDates = new Set<string>();
        trainerBookings.forEach((b) => {
          const start = new Date(b.start_date);
          const days = b.course?.days || 1;
          for (let i = 0; i < days; i++) {
            const d = addDays(start, i);
            if (d.getDay() !== 0 && d.getDay() !== 6 && isWithinInterval(d, interval)) {
              busyDates.add(format(d, 'yyyy-MM-dd'));
            }
          }
        });

        const busyDays = busyDates.size;
        const utilPercent = weekdays > 0 ? Math.round((busyDays / weekdays) * 100) : 0;

        return {
          id: t.id,
          name: `${t.first_name} ${t.last_name}`,
          busyDays,
          totalDays: weekdays,
          utilPercent,
          courseCount: trainerBookings.length,
        };
      })
      .sort((a, b) => b.utilPercent - a.utilPercent);
  }, [allTrainers, allBookings, dateRange]);

  const recentOrders = [...filteredOrders]
    // Abandoned (pending) bookings are excluded from recent bookings.
    .filter((o) => o.status !== "pending")
    // Most recently placed first. UTC timestamp strings sort chronologically.
    .sort((a, b) => (b.created_at || '').localeCompare(a.created_at || ''))
    .slice(0, 10);

  const fmtGBP = (cents: number) =>
    `£${(cents / 100).toLocaleString('en-GB', { minimumFractionDigits: 2 })}`;

  return (
    <>
      <Head title="Dashboard" />
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
          <h1 className="text-2xl font-bold text-foreground">Dashboard</h1>
          <div className="flex items-center gap-2 flex-wrap">
            {presetRanges.map((p) => (
              <Button key={p.label} variant="outline" size="sm" onClick={() => applyPreset(p.days)}>
                {p.label}
              </Button>
            ))}
            <Popover>
              <PopoverTrigger asChild>
                <Button variant="outline" size="sm" className="gap-1.5">
                  <CalendarIcon className="h-4 w-4" />
                  {format(dateRange.from, 'dd MMM')} – {format(dateRange.to, 'dd MMM yyyy')}
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0" align="end">
                <Calendar
                  mode="range"
                  selected={{ from: dateRange.from, to: dateRange.to }}
                  onSelect={(range) => {
                    if (range?.from) setDateRange({ from: range.from, to: range.to || range.from });
                  }}
                  numberOfMonths={2}
                  className={cn('p-3 pointer-events-auto')}
                />
              </PopoverContent>
            </Popover>
          </div>
        </div>

        <DashboardNotifications />

        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          <StatCard icon={Users} label="Trainers" value={counts?.trainers ?? 0} href="/admin/trainers" />
          <StatCard icon={Building2} label="Companies" value={counts?.companies ?? 0} href="/admin/companies" />
          <StatCard icon={BookOpen} label="Courses" value={counts?.courses ?? 0} href="/admin/courses" />
          <StatCard icon={CalendarIcon} label="Active Bookings" value={counts?.bookings ?? 0} href="/admin/orders?status=confirmed" />
        </div>

        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          <KPICard
            icon={ShoppingCart}
            label="Bookings"
            value={String(kpis.totalOrders)}
            sub={`${kpis.confirmedOrders} confirmed · ${kpis.cancelledOrders} cancelled`}
          />
          <KPICard
            icon={PoundSterling}
            label="Gross Revenue"
            value={fmtGBP(kpis.totalRevenue)}
            sub={`Net: ${fmtGBP(kpis.netRevenue)}`}
            accent
          />
          <KPICard
            icon={CreditCard}
            label="By Payment"
            value={fmtGBP(kpis.stripeRevenue)}
            sub={`Invoice: ${fmtGBP(kpis.invoiceRevenue)}`}
          />
          <KPICard
            icon={Users}
            label="Delegates Booked"
            value={String(kpis.totalDelegates)}
            sub={`Refunds: ${fmtGBP(kpis.totalRefunds)}`}
          />
        </div>

        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg flex items-center gap-2">
              <TrendingUp className="h-5 w-5 text-primary" /> Revenue Over Time
              <span className="text-xs font-normal text-muted-foreground">by order date</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            {chartData.length > 0 ? (
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={chartData}>
                  <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
                  <XAxis
                    dataKey="date"
                    tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
                    interval={Math.max(0, Math.floor(chartData.length / 10))}
                  />
                  <YAxis
                    tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
                    tickFormatter={(v) => `£${v}`}
                  />
                  <Tooltip
                    contentStyle={{
                      background: 'hsl(var(--card))',
                      border: '1px solid hsl(var(--border))',
                      borderRadius: 8,
                      color: 'hsl(var(--foreground))',
                    }}
                    formatter={(value: number) => [`£${value.toFixed(2)}`, 'Revenue']}
                  />
                  <Bar dataKey="revenue" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            ) : (
              <p className="text-muted-foreground text-center py-12">
                No revenue data for this period.
              </p>
            )}
          </CardContent>
        </Card>

        <div className="grid lg:grid-cols-2 gap-6">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-lg flex items-center justify-between gap-3 flex-wrap">
                <span>Recent Orders</span>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => router.visit('/admin/orders')}
                >
                  View all bookings
                </Button>
              </CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Booked</TableHead>
                    <TableHead>Course</TableHead>
                    <TableHead>Amount</TableHead>
                    <TableHead>Status</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {recentOrders.map((o) => (
                    <TableRow key={o.id}>
                      <TableCell className="text-sm">
                        {o.created_at ? format(orderPlacedAt(o), 'dd MMM') : '—'}
                      </TableCell>
                      <TableCell className="font-medium text-sm truncate max-w-[160px]">
                        {o.course?.title || '—'}
                      </TableCell>
                      <TableCell className="text-sm">{fmtGBP(grossCents(o.price_cents))}</TableCell>
                      <TableCell>
                        <Badge
                          variant={
                            REVENUE_STATUSES.includes(o.status)
                              ? 'default'
                              : o.status === 'cancelled'
                              ? 'destructive'
                              : 'secondary'
                          }
                          className="capitalize text-xs"
                        >
                          {o.status}
                        </Badge>
                      </TableCell>
                    </TableRow>
                  ))}
                  {recentOrders.length === 0 && (
                    <TableRow>
                      <TableCell colSpan={4} className="text-center text-muted-foreground py-6">
                        No orders in this period.
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-lg flex items-center justify-between gap-3 flex-wrap">
                <span>Top Companies by Spend</span>
                <span className="text-xs font-normal text-muted-foreground">{periodLabel}</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Company</TableHead>
                    <TableHead>Orders</TableHead>
                    <TableHead>Total Spend</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {topCompanies.map((c, i) => (
                    <TableRow key={i}>
                      <TableCell className="font-medium">{c.name}</TableCell>
                      <TableCell>{c.orders}</TableCell>
                      <TableCell>{fmtGBP(c.spend)}</TableCell>
                    </TableRow>
                  ))}
                  {topCompanies.length === 0 && (
                    <TableRow>
                      <TableCell colSpan={3} className="text-center text-muted-foreground py-6">
                        No company orders in this period.
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </div>

        <div className="grid lg:grid-cols-2 gap-6">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-lg flex items-center justify-between gap-3 flex-wrap">
                <span className="flex items-center gap-2">
                  <Award className="h-5 w-5 text-primary" /> Course Popularity
                </span>
                <span className="text-xs font-normal text-muted-foreground">{periodLabel}</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              {coursePopularity.length > 0 ? (
                <div className="flex gap-6">
                  <div className="w-1/2">
                    <ResponsiveContainer width="100%" height={220}>
                      <PieChart>
                        <Pie
                          data={coursePopularity.slice(0, 8)}
                          dataKey="bookings"
                          nameKey="name"
                          cx="50%"
                          cy="50%"
                          outerRadius={90}
                          innerRadius={50}
                          strokeWidth={2}
                          stroke="hsl(var(--card))"
                        >
                          {coursePopularity.slice(0, 8).map((_, i) => (
                            <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
                          ))}
                        </Pie>
                        <Tooltip
                          contentStyle={{
                            background: 'hsl(var(--card))',
                            border: '1px solid hsl(var(--border))',
                            borderRadius: 8,
                            color: 'hsl(var(--foreground))',
                          }}
                          formatter={(value: number, name: string) => [value, name]}
                        />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                  <div className="w-1/2 space-y-2 flex flex-col justify-center">
                    {coursePopularity.slice(0, 6).map((c, i) => (
                      <div key={i} className="flex items-center gap-2">
                        <div
                          className="w-3 h-3 rounded-full flex-shrink-0"
                          style={{ background: CHART_COLORS[i % CHART_COLORS.length] }}
                        />
                        <span className="text-sm truncate flex-1">{c.name}</span>
                        <span className="text-sm font-semibold text-foreground">{c.bookings}</span>
                      </div>
                    ))}
                  </div>
                </div>
              ) : (
                <p className="text-muted-foreground text-center py-12">
                  No bookings in this period.
                </p>
              )}
              {coursePopularity.length > 0 && (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Course</TableHead>
                      <TableHead className="text-right">Bookings</TableHead>
                      <TableHead className="text-right">Delegates</TableHead>
                      <TableHead className="text-right">Revenue</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {coursePopularity.map((c, i) => (
                      <TableRow key={i}>
                        <TableCell className="font-medium text-sm">{c.name}</TableCell>
                        <TableCell className="text-right">{c.bookings}</TableCell>
                        <TableCell className="text-right">{c.delegates}</TableCell>
                        <TableCell className="text-right">{fmtGBP(c.revenue)}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-lg flex items-center gap-2">
                <UserCheck className="h-5 w-5 text-primary" /> Trainer Utilisation
              </CardTitle>
              <p className="text-xs text-muted-foreground">
                Based on {trainerUtilisation[0]?.totalDays || 0} weekdays in selected range
              </p>
            </CardHeader>
            <CardContent>
              {trainerUtilisation.length > 0 ? (
                <div className="space-y-4">
                  {trainerUtilisation.map((t) => (
                    <div key={t.id} className="space-y-1.5">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium text-foreground">{t.name}</span>
                        <div className="flex items-center gap-2">
                          <span className="text-xs text-muted-foreground">
                            {t.busyDays}/{t.totalDays} days · {t.courseCount} courses
                          </span>
                          <Badge
                            variant={
                              t.utilPercent >= 80
                                ? 'default'
                                : t.utilPercent >= 40
                                ? 'secondary'
                                : 'outline'
                            }
                            className="text-xs min-w-[48px] justify-center"
                          >
                            {t.utilPercent}%
                          </Badge>
                        </div>
                      </div>
                      <Progress value={t.utilPercent} className="h-2" />
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-muted-foreground text-center py-12">
                  No trainer data available.
                </p>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  );
};

const StatCard = ({ icon: Icon, label, value, href }: { icon: any; label: string; value: number; href?: string }) => {
  const inner = (
    <div className="flex items-center gap-3">
      <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
        <Icon className="w-5 h-5 text-primary" />
      </div>
      <div>
        <p className="text-xl font-bold text-foreground">{value}</p>
        <p className="text-xs text-muted-foreground">{label}</p>
      </div>
    </div>
  );
  if (!href) return <div className="bg-card border border-border rounded-xl p-4">{inner}</div>;
  return (
    <button
      type="button"
      onClick={() => router.visit(href)}
      className="bg-card border border-border rounded-xl p-4 text-left w-full hover:border-primary/40 hover:bg-muted/30 transition-colors"
    >
      {inner}
    </button>
  );
};

const KPICard = ({
  icon: Icon,
  label,
  value,
  sub,
  accent,
}: {
  icon: any;
  label: string;
  value: string;
  sub: string;
  accent?: boolean;
}) => (
  <div
    className={`border rounded-xl p-4 ${
      accent ? 'bg-primary/5 border-primary/20' : 'bg-card border-border'
    }`}
  >
    <div className="flex items-center gap-2 mb-1">
      <Icon className={`h-4 w-4 ${accent ? 'text-primary' : 'text-muted-foreground'}`} />
      <p className="text-sm text-muted-foreground">{label}</p>
    </div>
    <p className={`text-2xl font-bold ${accent ? 'text-primary' : 'text-foreground'}`}>{value}</p>
    <p className="text-xs text-muted-foreground mt-1">{sub}</p>
  </div>
);

Dashboard.layout = (page: ReactNode) => <AdminLayout>{page}</AdminLayout>;

export default Dashboard;