import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

function NavGroupSkeleton({ rows }: { rows: number }) {
    return (
        <div>
            <Skeleton className="mb-2 h-3 w-16" />
            <ul className="space-y-1">
                {Array.from({ length: rows }).map((_, i) => (
                    <li key={i} className="flex items-center gap-2 p-2">
                        <Skeleton className="h-4 w-4 shrink-0 rounded" />
                        <Skeleton className="h-4 w-24" />
                    </li>
                ))}
            </ul>
        </div>
    );
}

function FieldSkeleton() {
    return (
        <div className="space-y-2">
            <Skeleton className="h-4 w-24" />
            <Skeleton className="h-9 w-full" />
        </div>
    );
}

function ToggleRowSkeleton() {
    return (
        <div className="flex items-center justify-between rounded-lg border p-4">
            <div className="space-y-2">
                <Skeleton className="h-4 w-40" />
                <Skeleton className="h-3 w-64" />
            </div>
            <Skeleton className="h-5 w-9 rounded-full" />
        </div>
    );
}

export function SettingsSkeleton() {
    return (
        <div className="flex flex-col items-start gap-6 lg:flex-row">
            {/* Left nav card */}
            <div className="w-full flex-shrink-0 lg:w-64">
                <Card className="py-0 lg:sticky lg:top-20">
                    <CardContent className="p-0">
                        <div className="border-b px-4 py-3">
                            <Skeleton className="h-9 w-full" />
                        </div>
                        <nav className="space-y-4 px-4 py-4">
                            <NavGroupSkeleton rows={4} />
                            <NavGroupSkeleton rows={3} />
                        </nav>
                    </CardContent>
                </Card>
            </div>

            {/* Right content card */}
            <div className="min-w-0 flex-1">
                <Card>
                    <CardHeader className="space-y-2">
                        <Skeleton className="h-6 w-40" />
                        <Skeleton className="h-4 w-72" />
                    </CardHeader>
                    <CardContent className="space-y-6">
                        {/* Input field grid */}
                        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                            {Array.from({ length: 4 }).map((_, i) => (
                                <FieldSkeleton key={i} />
                            ))}
                        </div>

                        <Skeleton className="h-px w-full" />

                        {/* Toggle rows */}
                        <div className="space-y-3">
                            {Array.from({ length: 3 }).map((_, i) => (
                                <ToggleRowSkeleton key={i} />
                            ))}
                        </div>

                        {/* Save button */}
                        <Skeleton className="h-9 w-32 rounded-md" />
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}