"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Activity, Database, FileText, Key, Users, Image as ImageIcon, Megaphone, Layers, TrendingUp, PieChart, BarChart3, Calendar, Target, Send, CheckCircle2, XCircle } from "lucide-react";
import { useDashboardStats } from "@/modules/admin/hooks";
import { useCampaignAnalytics } from "@/modules/campaigns/hooks";
import { Badge } from "@/components/ui/badge";
import {
    LineChart,
    Line,
    BarChart,
    Bar,
    PieChart as RechartsPie,
    Pie,
    Cell,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Legend,
    ResponsiveContainer,
    Area,
    AreaChart,
} from "recharts";

const COLORS = ['#404040', '#606060', '#808080', '#a0a0a0', '#505050', '#707070', '#909090'];

export default function DashboardPage() {
    const { data, isLoading } = useDashboardStats();
    const { data: campaignAnalyticsData, isLoading: isCampaignLoading } = useCampaignAnalytics();
    const stats = data?.data?.summary;
    const charts = data?.data?.charts;
    const campaignAnalytics = campaignAnalyticsData?.data;

    if (isLoading || isCampaignLoading) {
        return (
            <div className="flex items-center justify-center h-screen">
                <div className="text-center space-y-4">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
                    <p className="text-muted-foreground">Loading dashboard...</p>
                </div>
            </div>
        );
    }

    const contentByTypeData = charts?.contentByType.labels.map((label: string, index: number) => ({
        name: label,
        value: charts.contentByType.data[index],
    })) || [];

    const contentByCorpData = charts?.contentByCorpType.labels.map((label: string, index: number) => ({
        name: label,
        value: charts.contentByCorpType.data[index],
    })) || [];

    const campaignStatusData = charts?.campaignStatus.labels.map((label: string, index: number) => ({
        name: label,
        value: charts.campaignStatus.data[index],
    })) || [];

    const userTrendData = charts?.userRegistrationTrend.labels.map((label: string, index: number) => ({
        date: label,
        users: charts.userRegistrationTrend.data[index],
    })) || [];

    const timelineData = Object.entries(charts?.contentCreationTimeline || {}).map(([date, types]) => {
        const typedTypes = types as Record<string, number>;
        return {
            date,
            ...typedTypes,
        };
    });

    return (
        <div className="space-y-6 pb-8">
            {/* Hero Header - Windows 10 Style */}
            <div className="relative overflow-hidden rounded-lg glass p-8 border">
                <div className="relative z-10">
                    <h1 className="text-3xl font-semibold tracking-tight mb-2">Admin CSA Dashboard</h1>
                    <p className="text-sm text-muted-foreground">
                        Enterprise Management & Analytics Platform
                    </p>
                    <div className="mt-4 flex items-center gap-3">
                        <div className="flex items-center gap-2 glass-dark px-3 py-1.5 rounded text-xs">
                            <div className="h-1.5 w-1.5 rounded-full bg-foreground"></div>
                            <span>System Online</span>
                        </div>
                        <div className="glass-dark px-3 py-1.5 rounded text-xs">
                            {new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
                        </div>
                    </div>
                </div>
                <div className="absolute right-8 top-1/2 -translate-y-1/2 opacity-5">
                    <BarChart3 className="h-24 w-24" />
                </div>
            </div>

            {/* Key Metrics - Clean Cards */}
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                <Card className="glass border hover:border-foreground/20 transition-colors">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Total Content</CardTitle>
                        <div className="p-2 bg-muted rounded">
                            <FileText className="h-4 w-4 text-muted-foreground" />
                        </div>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-semibold">{stats?.content.total || 0}</div>
                        <p className="text-xs text-muted-foreground mt-1">Across all platforms</p>
                    </CardContent>
                </Card>
                <Card className="glass border hover:border-foreground/20 transition-colors">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Active Users</CardTitle>
                        <div className="p-2 bg-muted rounded">
                            <Users className="h-4 w-4 text-muted-foreground" />
                        </div>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-semibold">{stats?.infra.users || 0}</div>
                        <p className="text-xs text-muted-foreground mt-1">Registered users</p>
                    </CardContent>
                </Card>
                <Card className="glass border hover:border-foreground/20 transition-colors">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Campaigns</CardTitle>
                        <div className="p-2 bg-muted rounded">
                            <Megaphone className="h-4 w-4 text-muted-foreground" />
                        </div>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-semibold">{stats?.campaigns || 0}</div>
                        <p className="text-xs text-muted-foreground mt-1">Active campaigns</p>
                    </CardContent>
                </Card>
                <Card className="glass border hover:border-foreground/20 transition-colors">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">API Keys</CardTitle>
                        <div className="p-2 bg-muted rounded">
                            <Key className="h-4 w-4 text-muted-foreground" />
                        </div>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-semibold">{stats?.infra.apiKeys || 0}</div>
                        <p className="text-xs text-muted-foreground mt-1">Active tokens</p>
                    </CardContent>
                </Card>
            </div>

            {/* Campaign Analytics Section */}
            {campaignAnalytics && (
                <>
                    <div className="flex items-center gap-2 mt-8">
                        <Megaphone className="h-5 w-5 text-muted-foreground" />
                        <h2 className="text-2xl font-semibold">Campaign Analytics</h2>
                    </div>

                    {/* Campaign Summary Cards */}
                    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                        <Card className="glass border hover:border-foreground/20 transition-colors">
                            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                <CardTitle className="text-sm font-medium">Total Campaigns</CardTitle>
                                <div className="p-2 bg-muted rounded">
                                    <Target className="h-4 w-4 text-muted-foreground" />
                                </div>
                            </CardHeader>
                            <CardContent>
                                <div className="text-2xl font-semibold">{campaignAnalytics.summary.campaigns.total}</div>
                                <p className="text-xs text-muted-foreground mt-1">
                                    {campaignAnalytics.summary.campaigns.upcomingCount} upcoming
                                </p>
                            </CardContent>
                        </Card>
                        <Card className="glass border hover:border-foreground/20 transition-colors">
                            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                <CardTitle className="text-sm font-medium">Target Users</CardTitle>
                                <div className="p-2 bg-muted rounded">
                                    <Users className="h-4 w-4 text-muted-foreground" />
                                </div>
                            </CardHeader>
                            <CardContent>
                                <div className="text-2xl font-semibold">{campaignAnalytics.summary.delivery.totalTargetUsers}</div>
                                <p className="text-xs text-muted-foreground mt-1">Total reached</p>
                            </CardContent>
                        </Card>
                        <Card className="glass border hover:border-foreground/20 transition-colors">
                            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                <CardTitle className="text-sm font-medium">Delivered</CardTitle>
                                <div className="p-2 bg-muted rounded">
                                    <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
                                </div>
                            </CardHeader>
                            <CardContent>
                                <div className="text-2xl font-semibold text-green-600">{campaignAnalytics.summary.delivery.totalDelivered}</div>
                                <p className="text-xs text-muted-foreground mt-1">
                                    {campaignAnalytics.summary.delivery.overallDeliveryRate} success rate
                                </p>
                            </CardContent>
                        </Card>
                        <Card className="glass border hover:border-foreground/20 transition-colors">
                            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                <CardTitle className="text-sm font-medium">Failed</CardTitle>
                                <div className="p-2 bg-muted rounded">
                                    <XCircle className="h-4 w-4 text-muted-foreground" />
                                </div>
                            </CardHeader>
                            <CardContent>
                                <div className="text-2xl font-semibold text-red-600">{campaignAnalytics.summary.delivery.totalFailed}</div>
                                <p className="text-xs text-muted-foreground mt-1">Failed deliveries</p>
                            </CardContent>
                        </Card>
                    </div>

                    {/* Campaign Charts */}
                    <div className="grid gap-4 md:grid-cols-2">
                        <Card className="glass border">
                            <CardHeader>
                                <div className="flex items-center gap-2">
                                    <PieChart className="h-5 w-5 text-muted-foreground" />
                                    <CardTitle className="text-base">Campaign Status</CardTitle>
                                </div>
                                <CardDescription>Distribution by status</CardDescription>
                            </CardHeader>
                            <CardContent>
                                <ResponsiveContainer width="100%" height={300}>
                                    <RechartsPie>
                                        <Pie
                                            data={campaignAnalytics.charts.statusDistribution.labels.map((label: string, index: number) => ({
                                                name: label,
                                                value: campaignAnalytics.charts.statusDistribution.data[index],
                                            }))}
                                            cx="50%"
                                            cy="50%"
                                            labelLine={false}
                                            label={({ name, value }: any) => `${name}: ${value}`}
                                            outerRadius={80}
                                            fill="#8884d8"
                                            dataKey="value"
                                        >
                                            {campaignAnalytics.charts.statusDistribution.labels.map((_: any, index: number) => (
                                                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                                            ))}
                                        </Pie>
                                        <Tooltip />
                                        <Legend />
                                    </RechartsPie>
                                </ResponsiveContainer>
                            </CardContent>
                        </Card>

                        <Card className="glass border">
                            <CardHeader>
                                <div className="flex items-center gap-2">
                                    <BarChart3 className="h-5 w-5 text-muted-foreground" />
                                    <CardTitle className="text-base">Delivery Status</CardTitle>
                                </div>
                                <CardDescription>Success vs failure rate</CardDescription>
                            </CardHeader>
                            <CardContent>
                                <ResponsiveContainer width="100%" height={300}>
                                    <BarChart
                                        data={campaignAnalytics.charts.deliveryStatusDistribution.labels.map((label: string, index: number) => ({
                                            name: label,
                                            value: campaignAnalytics.charts.deliveryStatusDistribution.data[index],
                                        }))}
                                    >
                                        <CartesianGrid strokeDasharray="3 3" opacity={0.1} />
                                        <XAxis dataKey="name" />
                                        <YAxis />
                                        <Tooltip />
                                        <Bar dataKey="value" fill="hsl(var(--foreground))" opacity={0.7} radius={[8, 8, 0, 0]} />
                                    </BarChart>
                                </ResponsiveContainer>
                            </CardContent>
                        </Card>

                        <Card className="glass border">
                            <CardHeader>
                                <div className="flex items-center gap-2">
                                    <TrendingUp className="h-5 w-5 text-muted-foreground" />
                                    <CardTitle className="text-base">Creation Trend</CardTitle>
                                </div>
                                <CardDescription>Campaigns created over time</CardDescription>
                            </CardHeader>
                            <CardContent>
                                <ResponsiveContainer width="100%" height={300}>
                                    <AreaChart
                                        data={campaignAnalytics.charts.creationTrend.labels.map((label: string, index: number) => ({
                                            date: label,
                                            count: campaignAnalytics.charts.creationTrend.data[index],
                                        }))}
                                    >
                                        <defs>
                                            <linearGradient id="colorCampaigns" x1="0" y1="0" x2="0" y2="1">
                                                <stop offset="5%" stopColor="hsl(var(--foreground))" stopOpacity={0.3}/>
                                                <stop offset="95%" stopColor="hsl(var(--foreground))" stopOpacity={0}/>
                                            </linearGradient>
                                        </defs>
                                        <CartesianGrid strokeDasharray="3 3" opacity={0.1} />
                                        <XAxis dataKey="date" />
                                        <YAxis />
                                        <Tooltip />
                                        <Area type="monotone" dataKey="count" stroke="hsl(var(--foreground))" strokeWidth={2} fillOpacity={1} fill="url(#colorCampaigns)" />
                                    </AreaChart>
                                </ResponsiveContainer>
                            </CardContent>
                        </Card>

                        {/* Top Performing Campaign */}
                        {campaignAnalytics.topPerforming.length > 0 && (
                            <Card className="glass border">
                                <CardHeader>
                                    <div className="flex items-center gap-2">
                                        <Target className="h-5 w-5 text-muted-foreground" />
                                        <CardTitle className="text-base">Top Performing</CardTitle>
                                    </div>
                                    <CardDescription>Best campaign by delivery rate</CardDescription>
                                </CardHeader>
                                <CardContent>
                                    <div className="space-y-4">
                                        {campaignAnalytics.topPerforming.map((campaign: any) => (
                                            <div key={campaign.id} className="border rounded-lg p-4 space-y-3">
                                                <div>
                                                    <h4 className="font-medium">{campaign.title}</h4>
                                                    <p className="text-xs text-muted-foreground mt-1">
                                                        {new Date(campaign.date).toLocaleDateString()}
                                                    </p>
                                                </div>
                                                <div className="grid grid-cols-3 gap-2 text-center">
                                                    <div>
                                                        <div className="text-lg font-semibold">{campaign.targetUsers}</div>
                                                        <div className="text-xs text-muted-foreground">Target</div>
                                                    </div>
                                                    <div>
                                                        <div className="text-lg font-semibold text-green-600">{campaign.successCount}</div>
                                                        <div className="text-xs text-muted-foreground">Success</div>
                                                    </div>
                                                    <div>
                                                        <div className="text-lg font-semibold text-red-600">{campaign.failureCount}</div>
                                                        <div className="text-xs text-muted-foreground">Failed</div>
                                                    </div>
                                                </div>
                                                <div className="flex items-center justify-between pt-2 border-t">
                                                    <span className="text-sm text-muted-foreground">Delivery Rate</span>
                                                    <span className={`text-lg font-bold ${
                                                        campaign.deliveryRate >= 90 ? 'text-green-600' : 
                                                        campaign.deliveryRate >= 70 ? 'text-yellow-600' : 
                                                        'text-red-600'
                                                    }`}>
                                                        {campaign.deliveryRate.toFixed(2)}%
                                                    </span>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </CardContent>
                            </Card>
                        )}
                    </div>
                </>
            )}

            {/* Content Management Section */}
            <div className="flex items-center gap-2 mt-8">
                <FileText className="h-5 w-5 text-muted-foreground" />
                <h2 className="text-2xl font-semibold">Content Management</h2>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
                <Card className="glass border">
                    <CardHeader>
                        <div className="flex items-center gap-2">
                            <PieChart className="h-4 w-4 text-muted-foreground" />
                            <CardTitle className="text-base">Content Distribution</CardTitle>
                        </div>
                        <CardDescription>Content breakdown by type</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <ResponsiveContainer width="100%" height={300}>
                            <RechartsPie>
                                <Pie
                                    data={contentByTypeData}
                                    cx="50%"
                                    cy="50%"
                                    labelLine={false}
                                    label={({ name, percent }: any) => `${name} ${((percent || 0) * 100).toFixed(0)}%`}
                                    outerRadius={80}
                                    fill="#8884d8"
                                    dataKey="value"
                                >
                                    {contentByTypeData.map((_entry: any, index: number) => (
                                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                                    ))}
                                </Pie>
                                <Tooltip />
                            </RechartsPie>
                        </ResponsiveContainer>
                    </CardContent>
                </Card>
   
                <Card className="glass border">
                    <CardHeader>
                        <div className="flex items-center gap-2">
                            <BarChart3 className="h-5 w-5 text-muted-foreground" />
                            <CardTitle className="text-base">Content by Corporation</CardTitle>
                        </div>
                        <CardDescription>Content distribution across corps</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <ResponsiveContainer width="100%" height={300}>
                            <BarChart data={contentByCorpData}>
                                <CartesianGrid strokeDasharray="3 3" opacity={0.1} />
                                <XAxis dataKey="name" />
                                <YAxis />
                                <Tooltip />
                                <Bar dataKey="value" fill="hsl(var(--foreground))" opacity={0.7} radius={[8, 8, 0, 0]} />
                            </BarChart>
                        </ResponsiveContainer>
                    </CardContent>
                </Card>

                <Card className="glass border">
                    <CardHeader>
                        <div className="flex items-center gap-2">
                            <TrendingUp className="h-5 w-5 text-muted-foreground" />
                            <CardTitle className="text-base">User Registration Trend</CardTitle>
                        </div>
                        <CardDescription>New user registrations over time</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <ResponsiveContainer width="100%" height={300}>
                            <AreaChart data={userTrendData}>
                                <defs>
                                    <linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
                                        <stop offset="5%" stopColor="hsl(var(--foreground))" stopOpacity={0.3}/>
                                        <stop offset="95%" stopColor="hsl(var(--foreground))" stopOpacity={0}/>
                                    </linearGradient>
                                </defs>
                                <CartesianGrid strokeDasharray="3 3" opacity={0.1} />
                                <XAxis dataKey="date" />
                                <YAxis />
                                <Tooltip />
                                <Area type="monotone" dataKey="users" stroke="hsl(var(--foreground))" strokeWidth={2} fillOpacity={1} fill="url(#colorUsers)" />
                            </AreaChart>
                        </ResponsiveContainer>
                    </CardContent>
                </Card>

                <Card className="glass border">
                    <CardHeader>
                        <div className="flex items-center gap-2">
                            <Megaphone className="h-5 w-5 text-muted-foreground" />
                            <CardTitle className="text-base">Campaign Status</CardTitle>
                        </div>
                        <CardDescription>Current campaign distribution</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <ResponsiveContainer width="100%" height={300}>
                            <RechartsPie>
                                <Pie
                                    data={campaignStatusData}
                                    cx="50%"
                                    cy="50%"
                                    labelLine={false}
                                    label={({ name, value }: any) => `${name}: ${value}`}
                                    outerRadius={80}
                                    fill="#8884d8"
                                    dataKey="value"
                                >
                                    {campaignStatusData.map((_entry: any, index: number) => (
                                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                                    ))}
                                </Pie>
                                <Tooltip />
                                <Legend />
                            </RechartsPie>
                        </ResponsiveContainer>
                    </CardContent>
                </Card>
            </div>

            {timelineData.length > 0 && (
                <Card className="glass border">
                    <CardHeader>
                        <div className="flex items-center gap-2">
                            <Calendar className="h-5 w-5 text-muted-foreground" />
                            <CardTitle className="text-base">Content Creation Timeline</CardTitle>
                        </div>
                        <CardDescription>Content created over time by type</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <ResponsiveContainer width="100%" height={350}>
                            <BarChart data={timelineData}>
                                <CartesianGrid strokeDasharray="3 3" opacity={0.1} />
                                <XAxis dataKey="date" />
                                <YAxis />
                                <Tooltip />
                                <Legend />
                                <Bar dataKey="article" stackId="a" fill="#404040" />
                                <Bar dataKey="splash" stackId="a" fill="#606060" />
                                <Bar dataKey="promo" stackId="a" fill="#808080" />
                                <Bar dataKey="banner" stackId="a" fill="#a0a0a0" />
                            </BarChart>
                        </ResponsiveContainer>
                    </CardContent>
                </Card>
            )}

            {charts?.contentMatrix && charts.contentMatrix.length > 0 && (
                <Card className="glass border">
                    <CardHeader>
                        <CardTitle className="text-base">Content Matrix</CardTitle>
                        <CardDescription>Content distribution by type and corporation</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="rounded-lg border border-border/50">
                            <table className="w-full">
                                <thead>
                                    <tr className="border-b bg-muted/30">
                                        <th className="p-3 text-left font-medium text-sm">Content Type</th>
                                        <th className="p-3 text-left font-medium text-sm">Corporation</th>
                                        <th className="p-3 text-right font-medium text-sm">Count</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {charts.contentMatrix.map((item: any, index: number) => (
                                        <tr key={index} className="border-b last:border-0 hover:bg-muted/20 transition-colors">
                                            <td className="p-3 capitalize text-sm">{item.type}</td>
                                            <td className="p-3">
                                                <Badge variant="outline" className="capitalize text-xs">{item.corp}</Badge>
                                            </td>
                                            <td className="p-3 text-right font-mono text-sm">{item.count}</td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    </CardContent>
                </Card>
            )}

            <Card className="glass border">
                <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-base">
                        <Database className="h-5 w-5 text-muted-foreground" />
                        Infrastructure Overview
                    </CardTitle>
                    <CardDescription>System resources and services</CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="grid gap-4 md:grid-cols-3">
                        <div className="flex items-center gap-4 rounded-lg border border-border/50 p-4 hover:border-foreground/20 transition-colors">
                            <div className="rounded bg-muted p-3">
                                <Key className="h-6 w-6 text-muted-foreground" />
                            </div>
                            <div>
                                <p className="text-2xl font-semibold">{stats?.infra.apiKeys || 0}</p>
                                <p className="text-sm text-muted-foreground">API Keys</p>
                            </div>
                        </div>
                        <div className="flex items-center gap-4 rounded-lg border border-border/50 p-4 hover:border-foreground/20 transition-colors">
                            <div className="rounded bg-muted p-3">
                                <Database className="h-6 w-6 text-muted-foreground" />
                            </div>
                            <div>
                                <p className="text-2xl font-semibold">{stats?.infra.buckets || 0}</p>
                                <p className="text-sm text-muted-foreground">Buckets</p>
                            </div>
                        </div>
                        <div className="flex items-center gap-4 rounded-lg border border-border/50 p-4 hover:border-foreground/20 transition-colors">
                            <div className="rounded bg-muted p-3">
                                <Users className="h-6 w-6 text-muted-foreground" />
                            </div>
                            <div>
                                <p className="text-2xl font-semibold">{stats?.infra.users || 0}</p>
                                <p className="text-sm text-muted-foreground">Users</p>
                            </div>
                        </div>
                    </div>
                </CardContent>
            </Card>

            <Card className="glass border">
                <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-base">
                        <FileText className="h-5 w-5 text-muted-foreground" />
                        Content Type Breakdown
                    </CardTitle>
                    <CardDescription>Distribution of content across different types</CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-5">
                        <div className="rounded-lg border border-border/50 bg-muted/30 p-4 hover:border-foreground/20 transition-colors">
                            <div className="flex items-center justify-between">
                                <ImageIcon className="h-5 w-5 text-muted-foreground" />
                                <span className="text-2xl font-semibold">{stats?.content.splash || 0}</span>
                            </div>
                            <p className="mt-2 text-sm font-medium">Splash</p>
                        </div>
                        <div className="rounded-lg border border-border/50 bg-muted/30 p-4 hover:border-foreground/20 transition-colors">
                            <div className="flex items-center justify-between">
                                <Megaphone className="h-5 w-5 text-muted-foreground" />
                                <span className="text-2xl font-semibold">{stats?.content.promo || 0}</span>
                            </div>
                            <p className="mt-2 text-sm font-medium">Promo</p>
                        </div>
                        <div className="rounded-lg border border-border/50 bg-muted/30 p-4 hover:border-foreground/20 transition-colors">
                            <div className="flex items-center justify-between">
                                <FileText className="h-5 w-5 text-muted-foreground" />
                                <span className="text-2xl font-semibold">{stats?.content.article || 0}</span>
                            </div>
                            <p className="mt-2 text-sm font-medium">Article</p>
                        </div>
                        <div className="rounded-lg border border-border/50 bg-muted/30 p-4 hover:border-foreground/20 transition-colors">
                            <div className="flex items-center justify-between">
                                <Layers className="h-5 w-5 text-muted-foreground" />
                                <span className="text-2xl font-semibold">{stats?.content.banner || 0}</span>
                            </div>
                            <p className="mt-2 text-sm font-medium">Banner</p>
                        </div>
                        <div className="rounded-lg border border-border/50 bg-muted/30 p-4 hover:border-foreground/20 transition-colors">
                            <div className="flex items-center justify-between">
                                <Activity className="h-5 w-5 text-muted-foreground" />
                                <span className="text-2xl font-semibold">{stats?.content.floatingWidget || 0}</span>
                            </div>
                            <p className="mt-2 text-sm font-medium">Widget</p>
                        </div>
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}