"use client";

import { Card, CardContent } from "@/components/ui/card";
import blogMan from "@/public/blog-man.webp";
import Image from "next/image";
import useSWR from "swr";
import { formatBytes, nezhaFetcher } from "@/lib/utils";
import { Loader } from "@/components/loading/Loader";

export default function ServerOverviewClient() {
    const { data } = useSWR('/api/server', nezhaFetcher, {
        refreshInterval: 30000
    });

    return (
        <section className="grid md:grid-cols-4 gap-4 grid-cols-2">
            <Card>
                <CardContent className="px-6 py-3" >
                    <section className="flex gap-1 flex-col">
                        <p className="text-md font-medium">Total servers</p>
                        <div className="flex items-center gap-2">
                            <span className="relative flex h-2 w-2">
                                <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span>
                            </span>
                            {data ? <p className="text-lg font-semibold">{data?.result.length}</p> : <div className="h-7 flex items-center"><Loader visible={true} /></div>}
                        </div>
                    </section>
                </CardContent>
            </Card>
            <Card>
                <CardContent className="px-6 py-3" >
                    <section className="flex gap-1 flex-col">
                        <p className="text-md font-medium">Online servers</p>
                        <div className="flex items-center gap-2">
                            <span className="relative flex h-2 w-2">
                                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
                                <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
                            </span>
                            {data ? <p className="text-lg font-semibold">{data?.live_servers}</p> : <div className="h-7 flex items-center"><Loader visible={true} /></div>}
                        </div>
                    </section>
                </CardContent>
            </Card>
            <Card>
                <CardContent className="px-6 py-3" >
                    <section className="flex gap-1 flex-col">
                        <p className="text-md font-medium">Offline servers</p>
                        <div className="flex items-center gap-2">
                            <span className="relative flex h-2 w-2">
                                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75"></span>
                                <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
                            </span>
                            {data ? <p className="text-lg font-semibold">{data?.offline_servers}</p> : <div className="h-7 flex items-center"><Loader visible={true} /></div>}
                        </div>


                    </section>
                </CardContent>
            </Card>
            <Card>
                <CardContent className="px-6 py-3 relative" >
                    <section className="flex gap-1 flex-col">
                        <p className="text-md font-medium">Total bandwidth</p>
                        {data ? <p className="text-lg font-semibold">{formatBytes(data?.total_bandwidth)}</p> : <div className="h-7 flex items-center"><Loader visible={true} /></div>}
                    </section>
                    <Image
                        className="pointer-events-none absolute right-3 top-[-85px] z-10 w-20"
                        alt={'Hamster1963'}
                        src={blogMan}
                        priority
                        placeholder="data:image/png;base64,[encoded data, 8580 characters]"
                    />
                </CardContent>
            </Card>
        </section>
    )
}