import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import {
    SkeletonBadge,
    SkeletonButton,
    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 PieChartSkeleton() {
    return (
        <div className="flex flex-col gap-3">
            <div className="mx-auto flex aspect-square h-[200px] items-center justify-center">
                <Skeleton className="size-[160px] rounded-full" />
            </div>
            <ul className="grid grid-cols-2 gap-x-4 gap-y-1.5">
                {Array.from({ length: 4 }).map((_, i) => (
                    <li key={i} className="flex items-center gap-2">
                        <Skeleton className="size-2.5 rounded-full" />
                        <SkeletonText size="sm" width="w-20" />
                        <SkeletonText size="sm" width="w-8" className="ms-auto" />
                    </li>
                ))}
            </ul>
        </div>
    );
}

function ListRowSkeleton() {
    return (
        <li className="flex items-center gap-3 px-4 py-2.5">
            <Skeleton className="size-6 shrink-0 rounded-full" />
            <div className="min-w-0 flex-1 space-y-1">
                <SkeletonText size="base" width="w-32" />
            </div>
            <SkeletonText size="sm" width="w-16" />
        </li>
    );
}

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

function CommentRowSkeleton() {
    return (
        <li className="px-4 py-2.5 space-y-1.5">
            <SkeletonText size="base" width="w-full" />
            <SkeletonText size="sm" width="w-40" />
        </li>
    );
}

function SubmissionRowSkeleton() {
    return (
        <li className="flex items-center gap-3 py-3">
            <SkeletonText size="base" width="w-48" className="flex-1" />
            <SkeletonBadge width="w-16" />
        </li>
    );
}

export function AuthorOverviewSkeleton() {
    return (
        <div className="animate-in fade-in duration-300">
            {/* Page header */}
            <div className="mb-6 flex items-start justify-between gap-4">
                <div className="flex flex-col gap-2">
                    <SkeletonText size="xl" width="w-32" />
                    <SkeletonText size="sm" width="w-72" />
                </div>
                <SkeletonButton className="w-40" />
            </div>

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

            {/* 30-day trend chart */}
            <Card className="mb-6">
                <CardHeader className="border-b">
                    <SkeletonText size="base" width="w-44" />
                    <SkeletonText size="sm" width="w-64" />
                </CardHeader>
                <CardContent className="pt-4">
                    <LineChartSkeleton />
                </CardContent>
            </Card>

            {/* Pie + Top games */}
            <div className="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
                <Card>
                    <CardHeader className="border-b">
                        <SkeletonText size="base" width="w-36" />
                        <SkeletonText size="sm" width="w-52" />
                    </CardHeader>
                    <CardContent className="pt-4">
                        <PieChartSkeleton />
                    </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} />
                    </CardContent>
                </Card>
            </div>

            {/* Recent submissions + Recent comments */}
            <div className="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
                <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-16" />
                    </CardHeader>
                    <CardContent>
                        <ul className="divide-y">
                            {Array.from({ length: 5 }).map((_, i) => (
                                <SubmissionRowSkeleton key={i} />
                            ))}
                        </ul>
                    </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-56" />
                        </div>
                        <SkeletonText size="sm" width="w-20" />
                    </CardHeader>
                    <CardContent className="p-0">
                        <ul className="divide-y">
                            {Array.from({ length: 5 }).map((_, i) => (
                                <CommentRowSkeleton key={i} />
                            ))}
                        </ul>
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}