"use client";

import { AgentCard, AgentOverviewCard } from "@/components/AgentCard";
import { Header } from "@/components/Header";
import { UptimeMessage } from "@/services/types";
import { isAgentOnline } from "@/services/utils";
import { Box } from "lucide-react";
import { useEffect, useState } from "react";

export function HomePage() {
    const [agents, setAgents] = useState<UptimeMessage[]>([]);

    useEffect(() => {
        fetch("http://localhost:3000/agents")
            .then((res) => res.json())
            .then((data) => {
                setAgents(data);
            });
    }, []);

    const totalAgents = agents.length;
    const onlineAgents = agents.filter((agent) => isAgentOnline(agent)).length;
    const offlineAgents = totalAgents - onlineAgents;

    return (
        <div>
            <Header
                props={{
                    title: "Status Monitor",
                    subtitle: "Home",
                    hasBackButton: false,
                }}
            />
            <main className="max-w-7xl mx-auto py-8">
                <h2 className="text-xl font-semibold mb-4">Overview</h2>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                    <AgentOverviewCard
                        props={{
                            count: totalAgents,
                            title: "total agents",
                            icon: {
                                ref: <Box />,
                                color: "rgb(96, 165, 250)",
                                bgColor: "rgba(59, 130, 246, 0.2)",
                            },
                        }}
                    />
                    <AgentOverviewCard
                        props={{
                            count: onlineAgents,
                            title: "online",
                            icon: {
                                ref: (
                                    <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse-slow" />
                                ),
                                color: "rgb(34, 197, 94)",
                                bgColor: "rgba(34, 197, 94, 0.2)",
                            },
                        }}
                    />
                    <AgentOverviewCard
                        props={{
                            count: offlineAgents,
                            title: "offline",
                            icon: {
                                ref: (
                                    <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse-slow" />
                                ),
                                color: "rgb(239, 68, 68)",
                                bgColor: "rgba(239, 68, 68, 0.2)",
                            },
                        }}
                    />
                </div>

                <div className="mb-6">
                    <h2 className="text-xl font-semibold mb-4">Agents</h2>

                    <div className="space-y-6">
                        {agents.map((agent, index) => (
                            <AgentCard key={index} props={{ data: agent }} />
                        ))}
                    </div>
                </div>
            </main>
        </div>
    );
}