import { Link } from 'react-router-dom';
import { AdminLayout } from '@/components/admin/AdminLayout';
import { AdminPageHeader } from '@/components/admin/AdminPageHeader';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  useAnalyticsSummary,
  useLeadsBySource,
  useLeadsByStatus,
  useDealsByStage,
  useNewsletterPerformance,
  useTimeSeriesData,
  useMonthlyComparison,
  usePageViewsByPage,
  usePageViewsTimeSeries,
  useVisitorsByCountry,
} from '@/hooks/useAnalytics';
import { useBookingStats } from '@/hooks/useBookings';
import { useIsModuleEnabled } from '@/hooks/useModules';
import {
  Users,
  Briefcase,
  Mail,
  FileText,
  Inbox,
  BookOpen,
  ArrowUpRight,
  ArrowDownRight,
  CalendarDays,
  Settings,
  BarChart3,
  Eye,
  TrendingUp,
  Globe,
} from 'lucide-react';
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  BarChart,
  Bar,
  Legend,
} from 'recharts';

const SOURCE_LABELS: Record<string, string> = {
  form: 'Form',
  newsletter: 'Newsletter',
  chat: 'Chat',
  manual: 'Manual',
  import: 'Import',
  unknown: 'Unknown',
};

const STATUS_LABELS: Record<string, string> = {
  lead: 'Lead',
  opportunity: 'Opportunity',
  customer: 'Customer',
  lost: 'Lost',
};

const STAGE_LABELS: Record<string, string> = {
  proposal: 'Proposal',
  negotiation: 'Negotiation',
  closed_won: 'Closed Won',
  closed_lost: 'Closed Lost',
};

const COLORS = ['hsl(var(--primary))', 'hsl(var(--chart-2))', 'hsl(var(--chart-3))', 'hsl(var(--chart-4))', 'hsl(var(--chart-5))'];

function formatCurrency(cents: number): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(cents / 100);
}

function SummaryCard({
  title,
  value,
  icon: Icon,
  description,
  change,
  isLoading,
}: {
  title: string;
  value: string | number;
  icon: React.ComponentType<{ className?: string }>;
  description?: string;
  change?: number;
  isLoading?: boolean;
}) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
        <Icon className="h-4 w-4 text-muted-foreground" />
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <Skeleton className="h-8 w-24" />
        ) : (
          <>
            <div className="text-2xl font-bold">{value}</div>
            {description && <p className="text-xs text-muted-foreground mt-1">{description}</p>}
            {change !== undefined && (
              <div className={`flex items-center gap-1 text-xs mt-1 ${change >= 0 ? 'text-green-600' : 'text-red-600'}`}>
                {change >= 0 ? <ArrowUpRight className="h-3 w-3" /> : <ArrowDownRight className="h-3 w-3" />}
                <span>{Math.abs(change)}% from last month</span>
              </div>
            )}
          </>
        )}
      </CardContent>
    </Card>
  );
}

function EmptyState() {
  return (
    <Card className="border-dashed">
      <CardContent className="py-16 text-center">
        <BarChart3 className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
        <h3 className="text-lg font-medium mb-2">No active data sources</h3>
        <p className="text-sm text-muted-foreground mb-6 max-w-md mx-auto">
          Enable modules like Leads, Deals or Newsletter to see statistics and insights here.
        </p>
        <Button asChild>
          <Link to="/admin/settings/modules">
            <Settings className="h-4 w-4 mr-2" />
            Manage modules
          </Link>
        </Button>
      </CardContent>
    </Card>
  );
}

function ModulePrompt({ 
  icon: Icon, 
  title, 
  description 
}: { 
  icon: React.ComponentType<{ className?: string }>; 
  title: string; 
  description: string;
}) {
  return (
    <Card className="border-dashed">
      <CardContent className="py-8 text-center">
        <Icon className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
        <p className="text-sm text-muted-foreground mb-3">{description}</p>
        <Button variant="outline" size="sm" asChild>
          <Link to="/admin/settings/modules">{title}</Link>
        </Button>
      </CardContent>
    </Card>
  );
}

export default function AnalyticsDashboardPage() {
  // Module states
  const leadsEnabled = useIsModuleEnabled('leads');
  const dealsEnabled = useIsModuleEnabled('deals');
  const newsletterEnabled = useIsModuleEnabled('newsletter');
  const formsEnabled = useIsModuleEnabled('forms');
  const blogEnabled = useIsModuleEnabled('blog');
  const bookingsEnabled = useIsModuleEnabled('bookings');
  
  // Check if any data modules are enabled
  const hasActiveModules = leadsEnabled || dealsEnabled || newsletterEnabled || formsEnabled || bookingsEnabled;

  // Data hooks - only fetch if module is enabled
  const { data: summary, isLoading: summaryLoading } = useAnalyticsSummary();
  const { data: leadsBySource, isLoading: sourceLoading } = useLeadsBySource();
  const { data: leadsByStatus } = useLeadsByStatus();
  const { data: dealsByStage, isLoading: stageLoading } = useDealsByStage();
  const { data: newsletters, isLoading: newsletterLoading } = useNewsletterPerformance();
  const { data: timeSeries, isLoading: timeSeriesLoading } = useTimeSeriesData(30);
  const { data: comparison } = useMonthlyComparison();
  const { data: bookingStats, isLoading: bookingsLoading } = useBookingStats();
  const { data: topPages, isLoading: topPagesLoading } = usePageViewsByPage(10);
  const { data: pageViewsTimeSeries, isLoading: pageViewsTimeSeriesLoading } = usePageViewsTimeSeries(30);
  const { data: visitorsByCountry, isLoading: countryLoading } = useVisitorsByCountry(10);

  // Build dynamic summary cards
  const summaryCards = [
    leadsEnabled && {
      title: 'Total Leads',
      value: summary?.totalLeads || 0,
      icon: Users,
      change: comparison?.leads.change,
    },
    dealsEnabled && {
      title: 'Pipeline Value',
      value: formatCurrency(summary?.dealsPipelineValue || 0),
      icon: Briefcase,
      description: `${summary?.totalDeals || 0} active deals`,
      change: comparison?.dealValue.change,
    },
    newsletterEnabled && {
      title: 'Newsletter Subscribers',
      value: summary?.newsletterSubscribers || 0,
      icon: Mail,
    },
    formsEnabled && {
      title: 'Form Submissions',
      value: summary?.formSubmissions || 0,
      icon: Inbox,
    },
    bookingsEnabled && {
      title: 'Bookings this month',
      value: bookingStats?.total || 0,
      icon: CalendarDays,
      description: `${bookingStats?.upcoming || 0} upcoming`,
    },
  ].filter(Boolean) as Array<{
    title: string;
    value: string | number;
    icon: React.ComponentType<{ className?: string }>;
    description?: string;
    change?: number;
  }>;

  return (
    <AdminLayout>
      <div className="space-y-6">
        <AdminPageHeader
          title="Analytics"
          description="Overview of leads, deals, newsletter and content"
        />

        {/* Empty State if no modules */}
        {!hasActiveModules && <EmptyState />}

        {/* Summary Cards - Dynamic based on enabled modules */}
        {summaryCards.length > 0 && (
          <div className={`grid gap-4 md:grid-cols-2 ${summaryCards.length >= 4 ? 'lg:grid-cols-4' : summaryCards.length === 3 ? 'lg:grid-cols-3' : ''}`}>
            {summaryCards.map((card) => (
              <SummaryCard
                key={card.title}
                title={card.title}
                value={card.value}
                icon={card.icon}
                description={card.description}
                change={card.change}
                isLoading={summaryLoading || bookingsLoading}
              />
            ))}
          </div>
        )}

        {/* Content & Page Views Stats */}
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <SummaryCard
            title="Published Pages"
            value={summary?.publishedPages || 0}
            icon={FileText}
            isLoading={summaryLoading}
          />
          {blogEnabled && (
            <SummaryCard
              title="Published Posts"
              value={summary?.publishedPosts || 0}
              icon={BookOpen}
              isLoading={summaryLoading}
            />
          )}
          <SummaryCard
            title="Page Views"
            value={summary?.totalPageViews || 0}
            icon={Eye}
            description={`${summary?.uniqueVisitors || 0} unique visitors`}
            isLoading={summaryLoading}
          />
        </div>

        {/* Page Views Section */}
        <div className="grid gap-6 lg:grid-cols-2">
          {/* Page Views Time Series */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <TrendingUp className="h-5 w-5" />
                Page Views (30 days)
              </CardTitle>
              <CardDescription>Daily traffic and unique visitors</CardDescription>
            </CardHeader>
            <CardContent>
              {pageViewsTimeSeriesLoading ? (
                <Skeleton className="h-[250px] w-full" />
              ) : pageViewsTimeSeries && pageViewsTimeSeries.some(d => d.views > 0) ? (
                <ResponsiveContainer width="100%" height={250}>
                  <AreaChart data={pageViewsTimeSeries}>
                    <defs>
                      <linearGradient id="colorViews" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor="hsl(var(--chart-3))" stopOpacity={0.3} />
                        <stop offset="95%" stopColor="hsl(var(--chart-3))" stopOpacity={0} />
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                    <XAxis dataKey="date" className="text-xs" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
                    <YAxis className="text-xs" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
                    <Tooltip
                      contentStyle={{
                        backgroundColor: 'hsl(var(--card))',
                        border: '1px solid hsl(var(--border))',
                        borderRadius: '8px',
                      }}
                    />
                    <Legend />
                    <Area
                      type="monotone"
                      dataKey="views"
                      name="Views"
                      stroke="hsl(var(--chart-3))"
                      fillOpacity={1}
                      fill="url(#colorViews)"
                    />
                    <Area
                      type="monotone"
                      dataKey="unique_visitors"
                      name="Unique Visitors"
                      stroke="hsl(var(--chart-4))"
                      fillOpacity={0.5}
                      fill="hsl(var(--chart-4))"
                    />
                  </AreaChart>
                </ResponsiveContainer>
              ) : (
                <div className="h-[250px] flex items-center justify-center text-muted-foreground">
                  <div className="text-center">
                    <Eye className="h-8 w-8 mx-auto mb-2 opacity-50" />
                    <p>No traffic data yet</p>
                    <p className="text-xs mt-1">Page views are recorded when visitors view your published pages</p>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

          {/* Top Pages */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Eye className="h-5 w-5" />
                Most Popular Pages
              </CardTitle>
              <CardDescription>Top 10 most visited pages</CardDescription>
            </CardHeader>
            <CardContent>
              {topPagesLoading ? (
                <Skeleton className="h-[250px] w-full" />
              ) : topPages && topPages.length > 0 ? (
                <div className="space-y-3 max-h-[250px] overflow-y-auto">
                  {topPages.map((page, index) => (
                    <div key={page.page_slug} className="flex items-center gap-3">
                      <span className="text-sm font-medium text-muted-foreground w-6">{index + 1}.</span>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium truncate">
                          {page.page_title || page.page_slug}
                        </p>
                        <p className="text-xs text-muted-foreground truncate">/{page.page_slug}</p>
                      </div>
                      <div className="text-right">
                        <p className="text-sm font-medium">{page.views.toLocaleString()}</p>
                        <p className="text-xs text-muted-foreground">{page.unique_visitors} unique</p>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="h-[250px] flex items-center justify-center text-muted-foreground">
                  <div className="text-center">
                    <Eye className="h-8 w-8 mx-auto mb-2 opacity-50" />
                    <p>No page views yet</p>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

          {/* Visitors by Country */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Globe className="h-5 w-5" />
                Visitors by Country
              </CardTitle>
              <CardDescription>Geographic distribution of traffic</CardDescription>
            </CardHeader>
            <CardContent>
              {countryLoading ? (
                <Skeleton className="h-[250px] w-full" />
              ) : visitorsByCountry && visitorsByCountry.length > 0 && visitorsByCountry.some(c => c.country !== 'Unknown') ? (
                <div className="space-y-3 max-h-[250px] overflow-y-auto">
                  {visitorsByCountry.map((country, index) => (
                    <div key={country.country} className="flex items-center gap-3">
                      <span className="text-sm font-medium text-muted-foreground w-6">{index + 1}.</span>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium">{country.country}</p>
                      </div>
                      <div className="text-right">
                        <p className="text-sm font-medium">{country.views.toLocaleString()}</p>
                        <p className="text-xs text-muted-foreground">{country.unique_visitors} unique</p>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="h-[250px] flex items-center justify-center text-muted-foreground">
                  <div className="text-center">
                    <Globe className="h-8 w-8 mx-auto mb-2 opacity-50" />
                    <p>No geographic data yet</p>
                    <p className="text-xs mt-1">Country data is collected from visitor IPs</p>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </div>

        {/* Charts Row - Only show if leads or forms enabled */}
        {(leadsEnabled || formsEnabled) && (
          <div className="grid gap-6 lg:grid-cols-2">
            {/* Time Series Chart */}
            <Card className="lg:col-span-2">
              <CardHeader>
                <CardTitle>
                  {leadsEnabled && formsEnabled
                    ? 'Leads & Forms (30 days)'
                    : leadsEnabled
                      ? 'Leads (30 days)'
                      : 'Forms (30 days)'}
                </CardTitle>
                <CardDescription>Daily trend</CardDescription>
              </CardHeader>
              <CardContent>
                {timeSeriesLoading ? (
                  <Skeleton className="h-[300px] w-full" />
                ) : (
                  <ResponsiveContainer width="100%" height={300}>
                    <AreaChart data={timeSeries}>
                      <defs>
                        <linearGradient id="colorLeads" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.3} />
                          <stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0} />
                        </linearGradient>
                        <linearGradient id="colorForms" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="5%" stopColor="hsl(var(--chart-2))" stopOpacity={0.3} />
                          <stop offset="95%" stopColor="hsl(var(--chart-2))" stopOpacity={0} />
                        </linearGradient>
                      </defs>
                      <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                      <XAxis dataKey="date" className="text-xs" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
                      <YAxis className="text-xs" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
                      <Tooltip
                        contentStyle={{
                          backgroundColor: 'hsl(var(--card))',
                          border: '1px solid hsl(var(--border))',
                          borderRadius: '8px',
                        }}
                      />
                      <Legend />
                      {leadsEnabled && (
                        <Area
                          type="monotone"
                          dataKey="leads"
                          name="Leads"
                          stroke="hsl(var(--primary))"
                          fillOpacity={1}
                          fill="url(#colorLeads)"
                        />
                      )}
                      {formsEnabled && (
                        <Area
                          type="monotone"
                          dataKey="formSubmissions"
                          name="Forms"
                          stroke="hsl(var(--chart-2))"
                          fillOpacity={1}
                          fill="url(#colorForms)"
                        />
                      )}
                    </AreaChart>
                  </ResponsiveContainer>
                )}
              </CardContent>
            </Card>

            {/* Leads by Source */}
            {leadsEnabled ? (
              <Card>
                <CardHeader>
                  <CardTitle>Leads by source</CardTitle>
                  <CardDescription>Distribution of leads by origin</CardDescription>
                </CardHeader>
                <CardContent>
                  {sourceLoading ? (
                    <Skeleton className="h-[250px] w-full" />
                  ) : leadsBySource && leadsBySource.length > 0 ? (
                    <ResponsiveContainer width="100%" height={250}>
                      <PieChart>
                        <Pie
                          data={leadsBySource.map(item => ({
                            ...item,
                            name: SOURCE_LABELS[item.source] || item.source,
                          }))}
                          cx="50%"
                          cy="50%"
                          innerRadius={60}
                          outerRadius={80}
                          paddingAngle={5}
                          dataKey="count"
                          nameKey="name"
                          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                        >
                          {leadsBySource.map((_, index) => (
                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                          ))}
                        </Pie>
                        <Tooltip />
                      </PieChart>
                    </ResponsiveContainer>
                  ) : (
                    <div className="h-[250px] flex items-center justify-center text-muted-foreground">
                      No data available
                    </div>
                  )}
                </CardContent>
              </Card>
            ) : (
              <ModulePrompt 
                icon={Users} 
                title="Enable Leads" 
                description="Enable the Leads module to see source distribution" 
              />
            )}

            {/* Deals by Stage */}
            {dealsEnabled ? (
              <Card>
                <CardHeader>
                  <CardTitle>Deals by Stage</CardTitle>
                  <CardDescription>Pipeline distribution and value</CardDescription>
                </CardHeader>
                <CardContent>
                  {stageLoading ? (
                    <Skeleton className="h-[250px] w-full" />
                  ) : dealsByStage && dealsByStage.length > 0 ? (
                    <ResponsiveContainer width="100%" height={250}>
                      <BarChart
                        data={dealsByStage.map(item => ({
                          ...item,
                          name: STAGE_LABELS[item.stage] || item.stage,
                          valueFormatted: item.value / 100,
                        }))}
                        layout="vertical"
                      >
                        <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                        <XAxis type="number" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
                        <YAxis dataKey="name" type="category" width={100} tick={{ fill: 'hsl(var(--muted-foreground))' }} />
                        <Tooltip
                          formatter={(value: number, name: string) => [
                            name === 'count' ? value : formatCurrency(value * 100),
                            name === 'count' ? 'Count' : 'Value',
                          ]}
                          contentStyle={{
                            backgroundColor: 'hsl(var(--card))',
                            border: '1px solid hsl(var(--border))',
                            borderRadius: '8px',
                          }}
                        />
                        <Bar dataKey="count" name="Count" fill="hsl(var(--primary))" radius={[0, 4, 4, 0]} />
                      </BarChart>
                    </ResponsiveContainer>
                  ) : (
                    <div className="h-[250px] flex items-center justify-center text-muted-foreground">
                      No data available
                    </div>
                  )}
                </CardContent>
              </Card>
            ) : (
              <ModulePrompt 
                icon={Briefcase} 
                title="Enable Deals" 
                description="Enable the Deals module to see pipeline statistics" 
              />
            )}
          </div>
        )}

        {/* Bookings Stats - Only if bookings enabled */}
        {bookingsEnabled && (
          <Card>
            <CardHeader>
              <CardTitle>Bookings</CardTitle>
              <CardDescription>Overview for this month</CardDescription>
            </CardHeader>
            <CardContent>
              {bookingsLoading ? (
                <Skeleton className="h-24 w-full" />
              ) : (
                <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                  <div className="text-center p-4 rounded-lg bg-muted/50">
                    <p className="text-2xl font-bold">{bookingStats?.total || 0}</p>
                    <p className="text-xs text-muted-foreground">Total</p>
                  </div>
                  <div className="text-center p-4 rounded-lg bg-yellow-500/10">
                    <p className="text-2xl font-bold text-yellow-600">{bookingStats?.pending || 0}</p>
                    <p className="text-xs text-muted-foreground">Pending</p>
                  </div>
                  <div className="text-center p-4 rounded-lg bg-green-500/10">
                    <p className="text-2xl font-bold text-green-600">{bookingStats?.confirmed || 0}</p>
                    <p className="text-xs text-muted-foreground">Confirmed</p>
                  </div>
                  <div className="text-center p-4 rounded-lg bg-blue-500/10">
                    <p className="text-2xl font-bold text-blue-600">{bookingStats?.completed || 0}</p>
                    <p className="text-xs text-muted-foreground">Completed</p>
                  </div>
                  <div className="text-center p-4 rounded-lg bg-primary/10">
                    <p className="text-2xl font-bold text-primary">{bookingStats?.upcoming || 0}</p>
                    <p className="text-xs text-muted-foreground">Upcoming</p>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        )}

        {/* Newsletter Performance - Only if newsletter enabled */}
        {newsletterEnabled ? (
          <Card>
            <CardHeader>
              <CardTitle>Newsletter Performance</CardTitle>
              <CardDescription>Recent campaigns and their results</CardDescription>
            </CardHeader>
            <CardContent>
              {newsletterLoading ? (
                <div className="space-y-4">
                  {[1, 2, 3].map(i => (
                    <Skeleton key={i} className="h-16 w-full" />
                  ))}
                </div>
              ) : newsletters && newsletters.length > 0 ? (
                <div className="space-y-4">
                  {newsletters.map(newsletter => {
                    const openRate = newsletter.sent_count > 0
                      ? ((newsletter.unique_opens / newsletter.sent_count) * 100).toFixed(1)
                      : '0';
                    const clickRate = newsletter.sent_count > 0
                      ? ((newsletter.unique_clicks / newsletter.sent_count) * 100).toFixed(1)
                      : '0';

                    return (
                      <div
                        key={newsletter.id}
                        className="flex flex-col md:flex-row md:items-center justify-between p-4 border rounded-lg gap-4"
                      >
                        <div className="flex-1 min-w-0">
                          <p className="font-medium truncate">{newsletter.subject}</p>
                          <p className="text-sm text-muted-foreground">
                            {newsletter.sent_at
                              ? new Date(newsletter.sent_at).toLocaleDateString('en-US')
                              : 'Not sent'}
                          </p>
                        </div>
                        <div className="flex flex-wrap gap-2">
                          <Badge variant="secondary">
                            {newsletter.sent_count} sent
                          </Badge>
                          <Badge variant="outline" className="text-green-600 border-green-600/30">
                            {openRate}% opened
                          </Badge>
                          <Badge variant="outline" className="text-blue-600 border-blue-600/30">
                            {clickRate}% clicked
                          </Badge>
                        </div>
                      </div>
                    );
                  })}
                </div>
              ) : (
                <div className="py-8 text-center text-muted-foreground">
                  No newsletters sent yet
                </div>
              )}
            </CardContent>
          </Card>
        ) : null}

        {/* Lead Status Distribution - Only if leads enabled */}
        {leadsEnabled && leadsByStatus && leadsByStatus.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle>Lead status</CardTitle>
              <CardDescription>Distribution of leads in pipeline</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-4">
                {leadsByStatus.map(item => (
                  <div key={item.status} className="flex items-center gap-2">
                    <div
                      className="w-3 h-3 rounded-full"
                      style={{
                        backgroundColor: COLORS[
                          ['lead', 'opportunity', 'customer', 'lost'].indexOf(item.status) % COLORS.length
                        ],
                      }}
                    />
                    <span className="text-sm">
                      {STATUS_LABELS[item.status] || item.status}: <strong>{item.count}</strong>
                    </span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </AdminLayout>
  );
}
