"use client";
import { motion } from "framer-motion";

export default function Box() {
    return (
        <motion.div
            initial={{
                y: 25,
                opacity: 0,
            }}
            whileInView={{
                y: 0,
                opacity: 1,
            }}
            viewport={{
                once: true,
            }}
            className="relative p-5 border border-white/5 bg-[#0E1618]/10 backdrop-blur-sm"
        >
            <h3 className="mb-1 font-medium uppercase text-[#0CE77E]">All Systems Operational</h3>

            <p className="mb-4 text-sm text-white/75">
                Last updated on{" "}
                {new Date(Date.now() - 3 * 60 * 1000)
                    .toLocaleString("en-US", {
                        month: "short",
                        day: "numeric",
                        hour: "numeric",
                        minute: "2-digit",
                        hour12: true,
                        timeZoneName: "short",
                    })
                    .replace(",", "")
                    .replace("AM", "am")
                    .replace("PM", "pm")}
            </p>

            <div className="py-4 border-t border-[#0CE77E]/25 items-center">
                <div className="flex items-center justify-between mb-2">
                    <h3 className="font-medium text-[#0CE77E]">GPU Instance</h3>
                    <h3 className="font-medium text-[#0CE77E]">99.960% uptime</h3>
                </div>

                {/* uptime status */}
                <div className="relative">
                    <div className="flex h-[28px] w-full overflow-visible relative">
                        {[
                            { status: "operational", width: "60%", details: "No incident reported" },
                            {
                                status: "degraded",
                                width: "0.5%",
                                details: "Resolved - Nvidia driver issue",
                            },
                            { status: "operational", width: "39.5%", details: "No incident reported" },
                        ].map((segment, index) => (
                            <div
                                key={index}
                                className={`h-full group cursor-help relative
                                    ${
                                        segment.status === "operational"
                                            ? "bg-[#0CE77E]"
                                            : segment.status === "degraded"
                                            ? "bg-yellow-500"
                                            : "bg-red-500"
                                    }`}
                                style={{ width: segment.width }}
                            >
                                <div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
                                    {segment.status === "operational"
                                        ? "Fully Operational"
                                        : segment.status === "degraded"
                                        ? "Degraded Performance"
                                        : "System Down"}
                                    <br />
                                    Status: {segment.details}
                                </div>
                            </div>
                        ))}
                    </div>
                    <div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
                </div>
            </div>

            <div className="py-4 border-t border-[#0CE77E]/25 items-center">
                <div className="flex items-center justify-between mb-2">
                    <h3 className="font-medium text-[#0CE77E]">Console</h3>
                    <h3 className="font-medium text-[#0CE77E]">99.890% uptime</h3>
                </div>

                {/* uptime status */}
                <div className="relative">
                    <div className="flex h-[28px] w-full overflow-visible relative">
                        {[
                            { status: "operational", width: "20%", details: "No incident reported" },
                            {
                                status: "downtime",
                                width: "0.5%",
                                details: "Service Unavailable",
                            },
                            { status: "operational", width: "28%", details: "No incident reported" },
                            { status: "degraded", width: "0.5%", details: "Updating SMTP" },
                            { status: "operational", width: "51%", details: "No incident reported" },
                        ].map((segment, index) => (
                            <div
                                key={index}
                                className={`h-full group cursor-help relative
                                    ${
                                        segment.status === "operational"
                                            ? "bg-[#0CE77E]"
                                            : segment.status === "degraded"
                                            ? "bg-yellow-500"
                                            : "bg-red-500"
                                    }`}
                                style={{ width: segment.width }}
                            >
                                <div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
                                    {segment.status === "operational"
                                        ? "Fully Operational"
                                        : segment.status === "degraded"
                                        ? "Degraded Performance"
                                        : "System Down"}
                                    <br />
                                    Status: {segment.details}
                                </div>
                            </div>
                        ))}
                    </div>
                    <div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
                </div>
            </div>

            <div className="py-4 border-t border-[#0CE77E]/25 items-center">
                <div className="flex items-center justify-between mb-2">
                    <h3 className="font-medium text-[#0CE77E]">Network</h3>
                    <h3 className="font-medium text-[#0CE77E]">99.940% uptime</h3>
                </div>

                {/* uptime status */}
                <div className="relative">
                    <div className="flex h-[28px] w-full overflow-visible relative">
                        {[
                            { status: "operational", width: "34%", details: "No incident reported" },
                            {
                                status: "degraded",
                                width: "0.5%",
                                details: "Resolved - Unusual high latency on some regions",
                            },
                            { status: "operational", width: "35%", details: "No incident reported" },
                            { status: "downtime", width: "0.5%", details: "Service Unavailable" },
                            { status: "operational", width: "30%", details: "No incident reported" },
                        ].map((segment, index) => (
                            <div
                                key={index}
                                className={`h-full group cursor-help relative
                                    ${
                                        segment.status === "operational"
                                            ? "bg-[#0CE77E]"
                                            : segment.status === "degraded"
                                            ? "bg-yellow-500"
                                            : "bg-red-500"
                                    }`}
                                style={{ width: segment.width }}
                            >
                                <div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
                                    {segment.status === "operational"
                                        ? "Fully Operational"
                                        : segment.status === "degraded"
                                        ? "Degraded Performance"
                                        : "System Down"}
                                    <br />
                                    Status: {segment.details}
                                </div>
                            </div>
                        ))}
                    </div>
                    <div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
                </div>
            </div>

            <div className="py-4 border-t border-[#0CE77E]/25 items-center">
                <div className="flex items-center justify-between mb-2">
                    <h3 className="font-medium text-[#0CE77E]">Proxy</h3>
                    <h3 className="font-medium text-[#0CE77E]">100% uptime</h3>
                </div>

                {/* uptime status */}
                <div className="relative">
                    <div className="flex h-[28px] w-full overflow-visible relative">
                        {[{ status: "operational", width: "100%", details: "No incident reported" }].map(
                            (segment, index) => (
                                <div
                                    key={index}
                                    className={`h-full group cursor-help relative
                                    ${
                                        segment.status === "operational"
                                            ? "bg-[#0CE77E]"
                                            : segment.status === "degraded"
                                            ? "bg-yellow-500"
                                            : "bg-red-500"
                                    }`}
                                    style={{ width: segment.width }}
                                >
                                    <div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
                                        {segment.status === "operational"
                                            ? "Fully Operational"
                                            : segment.status === "degraded"
                                            ? "Degraded Performance"
                                            : "System Down"}
                                        <br />
                                        Status: {segment.details}
                                    </div>
                                </div>
                            )
                        )}
                    </div>
                    <div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
                </div>
            </div>

            <div className="py-4 border-t border-[#0CE77E]/25 items-center">
                <div className="flex items-center justify-between mb-2">
                    <h3 className="font-medium text-[#0CE77E]">Database</h3>
                    <h3 className="font-medium text-[#0CE77E]">99.910% uptime</h3>
                </div>

                {/* uptime status */}
                <div className="relative">
                    <div className="flex h-[28px] w-full overflow-visible relative">
                        {[
                            { status: "operational", width: "80%", details: "No incident reported" },
                            {
                                status: "degraded",
                                width: "0.5%",
                                details: "Resolved - Deprecated DB API",
                            },
                            { status: "operational", width: "19%", details: "No incident reported" },
                        ].map((segment, index) => (
                            <div
                                key={index}
                                className={`h-full group cursor-help relative
                                    ${
                                        segment.status === "operational"
                                            ? "bg-[#0CE77E]"
                                            : segment.status === "degraded"
                                            ? "bg-yellow-500"
                                            : "bg-red-500"
                                    }`}
                                style={{ width: segment.width }}
                            >
                                <div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
                                    {segment.status === "operational"
                                        ? "Fully Operational"
                                        : segment.status === "degraded"
                                        ? "Degraded Performance"
                                        : "System Down"}
                                    <br />
                                    Status: {segment.details}
                                </div>
                            </div>
                        ))}
                    </div>
                    <div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
                </div>
            </div>

            <span className="absolute -top-px -left-px group-hover:opacity-0 duration-200">
                <svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 0V4.5" stroke="#0CE77E" />
                    <path d="M5.5 0.5L1 0.5" stroke="#0CE77E" />
                </svg>
            </span>

            <span className="absolute -bottom-px -left-px group-hover:opacity-0 duration-200">
                <svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 4.5V0" stroke="#0CE77E" />
                    <path d="M5.5 4L1 4" stroke="#0CE77E" />
                </svg>
            </span>

            <span className="absolute -top-px -right-px group-hover:opacity-0 duration-200">
                <svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 0V4.5" stroke="#0CE77E" />
                    <path d="M0.5 0.5L5 0.5" stroke="#0CE77E" />
                </svg>
            </span>

            <span className="absolute -bottom-px -right-px group-hover:opacity-0 duration-200">
                <svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 4.5V0" stroke="#0CE77E" />
                    <path d="M0.5 4L5 4" stroke="#0CE77E" />
                </svg>
            </span>
        </motion.div>
    );
}