import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import {
    SkeletonAvatar,
    SkeletonBadge,
    SkeletonIcon,
    SkeletonText,
} from '@/components/ui/skeleton-primitives';

function StatsCardSkeleton() {
    return (
        <div className="relative overflow-hidden rounded-xl border bg-card p-5 shadow-sm">
            <div className="flex flex-col gap-3">
                <div className="flex items-center justify-between">
                    <SkeletonText size="sm" width="w-24" />
                    <SkeletonIcon size="lg" shape="square" className="rounded-lg" />
                </div>
                <div className="space-y-2">
                    <SkeletonText size="xl" width="w-28" />
                    <div className="flex items-center gap-1.5">
                        <SkeletonBadge width="w-12" />
                        <SkeletonText size="sm" width="w-16" />
                    </div>
                </div>
            </div>
        </div>
    );
}

function LineChartSkeleton({ height = 260 }: { height?: number }) {
    return (
        <div className="w-full" style={{ height }}>
            <div className="flex h-full flex-col">
                <div className="flex flex-1">
                    <div className="flex w-10 flex-col justify-between py-3">
                        {Array.from({ length: 5 }).map((_, i) => (
                            <SkeletonText key={i} size="sm" width="w-6" />
                        ))}
                    </div>
                    <div className="relative flex-1">
                        <Skeleton className="absolute inset-0 opacity-40" />
                    </div>
                </div>
                <div className="flex h-6 justify-between px-12 pt-2">
                    {Array.from({ length: 6 }).map((_, i) => (
                        <SkeletonText key={i} size="sm" width="w-10" />
                    ))}
                </div>
            </div>
        </div>
    );
}

function HorizontalBarChartSkeleton({ height = 260 }: { height?: number }) {
    return (
        <div className="w-full" style={{ height }}>
            <div className="flex h-full flex-col gap-3 py-2">
                {[0.9, 0.65, 0.78, 0.4, 0.55, 0.3].map((w, i) => (
                    <div key={i} className="flex items-center gap-3">
                        <SkeletonText size="sm" width="w-24" />
                        <div className="min-w-0 flex-1">
                            <Skeleton className="h-6 rounded" style={{ width: `${w * 100}%` }} />
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

function ListRowSkeleton({ withAvatar = false, withBadge = false }: { withAvatar?: boolean; withBadge?: boolean }) {
    return (
        <li className="flex items-center gap-3 px-4 py-2.5">
            <Skeleton className="size-6 shrink-0 rounded-full" />
            {withAvatar && <SkeletonAvatar size="sm" />}
            <div className="min-w-0 flex-1 space-y-1">
                <SkeletonText size="base" width="w-32" />
                {withBadge ? <SkeletonBadge width="w-20" /> : <SkeletonText size="sm" width="w-28" />}
            </div>
            <SkeletonText size="sm" width="w-20" />
        </li>
    );
}

function CardListSkeleton({ rows = 6, withAvatar = false, withBadge = false }: { rows?: number; withAvatar?: boolean; withBadge?: boolean }) {
    return (
        <ul className="divide-y">
            {Array.from({ length: rows }).map((_, i) => (
                <ListRowSkeleton key={i} withAvatar={withAvatar} withBadge={withBadge} />
            ))}
        </ul>
    );
}

export function EconomyOverviewSkeleton() {
    return (
        <div className="animate-in fade-in duration-300">
            <div className="mb-6 flex flex-col gap-2">
                <SkeletonText size="xl" width="w-36" />
                <SkeletonText size="sm" width="w-80" />
            </div>

            <div className="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4">
                {Array.from({ length: 10 }).map((_, i) => (
                    <StatsCardSkeleton key={i} />
                ))}
            </div>

            <Card className="mb-6">
                <CardHeader className="border-b">
                    <SkeletonText size="base" width="w-32" />
                    <SkeletonText size="sm" width="w-56" />
                </CardHeader>
                <CardContent className="pt-4">
                    <LineChartSkeleton />
                </CardContent>
            </Card>

            <div className="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
                <Card>
                    <CardHeader className="border-b">
                        <div className="flex items-center gap-2">
                            <SkeletonIcon size="sm" />
                            <SkeletonText size="base" width="w-24" />
                        </div>
                        <SkeletonText size="sm" width="w-56" />
                    </CardHeader>
                    <CardContent className="pt-4">
                        <HorizontalBarChartSkeleton />
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="flex-row items-center justify-between border-b pb-3">
                        <div className="flex items-center gap-2">
                            <SkeletonIcon size="sm" />
                            <SkeletonText size="base" width="w-32" />
                        </div>
                        <SkeletonText size="sm" width="w-20" />
                    </CardHeader>
                    <CardContent className="p-0">
                        <CardListSkeleton rows={6} withAvatar />
                    </CardContent>
                </Card>
            </div>

            <div className="mb-6 grid grid-cols-1 gap-4 xl:grid-cols-3">
                <Card className="xl:col-span-2">
                    <CardHeader className="flex-row items-center justify-between border-b pb-3">
                        <div className="space-y-1">
                            <SkeletonText size="base" width="w-32" />
                            <SkeletonText size="sm" width="w-52" />
                        </div>
                        <SkeletonText size="sm" width="w-20" />
                    </CardHeader>
                    <CardContent className="p-0">
                        <CardListSkeleton rows={6} withAvatar withBadge />
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="border-b">
                        <div className="flex items-center gap-2">
                            <SkeletonIcon size="sm" />
                            <SkeletonText size="base" width="w-32" />
                        </div>
                    </CardHeader>
                    <CardContent className="p-0">
                        <CardListSkeleton rows={6} />
                    </CardContent>
                </Card>
            </div>

            <Card>
                <CardHeader className="flex-row items-center justify-between border-b pb-3">
                    <div className="flex items-center gap-2">
                        <SkeletonIcon size="sm" />
                        <SkeletonText size="base" width="w-40" />
                    </div>
                    <SkeletonText size="sm" width="w-24" />
                </CardHeader>
                <CardContent className="p-0">
                    <CardListSkeleton rows={4} />
                </CardContent>
            </Card>
        </div>
    );
}