ppc_amnet/aimenet-web/app/page.tsx

"use client";

import {z} from "zod";
import Link from "next/link";
import React, {useState} from "react";
import TimeAgo from "react-timeago";
import {useForm} from "react-hook-form";
import {useRouter} from "next/navigation";
import {AppRouterInstance} from "next/dist/shared/lib/app-router-context.shared-runtime";
import {
    ChevronRight,
    Earth,
    History,
    Plus,
    ShieldAlert,
    SquareArrowOutUpRight,
    Trash, WalletCards
} from "lucide-react";
import {useLiveQuery} from "dexie-react-hooks";
import {AimeServer, db} from "@/lib/database";
import {zodResolver} from "@hookform/resolvers/zod";
import {Card} from "@/components/ui/card";
import {Input} from "@/components/ui/input";
import {Button} from "@/components/ui/button";
import {Footer} from "@/components/footer";
import {Separator} from "@/components/ui/separator";
import {
    ContextMenu,
    ContextMenuContent,
    ContextMenuItem,
    ContextMenuSeparator,
    ContextMenuTrigger
} from "@/components/ui/context-menu";
import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";
import {Form, FormControl, FormField, FormItem, FormMessage} from "@/components/ui/form";
import {LoadingIndicator} from "@/components/loading-indicator";

const serverAdditionSchema = z.object({
    address: z.string().startsWith("http")
});

function redirectToServerPage(router: AppRouterInstance, server: AimeServer) {
    router.push(`/servers/${server.id}`);
}

function ServerList(props: { servers: AimeServer[] | undefined }) {
    const router = useRouter();

    if (!props.servers) {
        return (<LoadingIndicator/>);
    }

    if (!props.servers.length) {
        return (
            <>
                <div className="flex flex-col gap-2 items-center text-gray-500 pt-6 pb-5">
                    <Earth className="h-8 w-8"/>
                    <span className="text-center">No servers found. Add one below!</span>
                </div>
                <ServerAddForm/>
            </>
        );
    }

    return (<>
        {props.servers.map(s =>
            <ContextMenu key={s.id}>
                <ContextMenuTrigger>
                    <Card>
                        <div className="flex p-6 items-center gap-3">
                            <div className="flex-grow flex flex-col gap-4">
                                <h4 className="text-2xl font-semibold">{s.name}</h4>
                                <div className="text-md flex gap-3 flex-wrap">
                                    {s.lastConnected > 0 && (
                                        <div className="flex items-center gap-2 text-gray-500">
                                            <History className="h-5 w-5"/>
                                            <TimeAgo date={s.lastConnected}/>
                                        </div>
                                    )}
                                    <div className="flex items-center gap-2 text-gray-500">
                                        <Earth className="h-5 w-5"/>
                                        <code>{s.address}</code>
                                    </div>
                                </div>
                            </div>
                            <Button variant="ghost" size="icon" onClick={() => redirectToServerPage(router, s)}>
                                <ChevronRight className="h-4 w-4"/>
                            </Button>
                        </div>
                    </Card>
                </ContextMenuTrigger>
                <ContextMenuContent>
                    <ContextMenuItem inset onClick={() => redirectToServerPage(router, s)}>
                        Select Server
                    </ContextMenuItem>
                    <ContextMenuSeparator/>
                    <ContextMenuItem className="text-red-500" onClick={() => db.servers.delete(s.id)}>
                        <Trash className="mr-2 h-4 w-4"/> Remove Server
                    </ContextMenuItem>
                </ContextMenuContent>
            </ContextMenu>)}

        <ServerAddForm/>
    </>);
}

function ServerAddForm() {
    const router = useRouter();
    const form = useForm<z.infer<typeof serverAdditionSchema>>({
        resolver: zodResolver(serverAdditionSchema),
        defaultValues: {
            address: ''
        }
    });

    const [showHttpsWarning, setHttpsWarning] = useState(false);
    const [blockSubmit, setBlockSubmit] = useState(true);

    async function onSubmit(values: z.infer<typeof serverAdditionSchema>) {
        const existingServer = await db.servers
            .where("address")
            .equalsIgnoreCase(values.address)
            .limit(1)
            .first();

        // test for duplicate
        if (!existingServer) {
            const newId = await db.servers.add({
                name: "Server",
                lastConnected: 0,
                address: values.address
            });

            // set server name using id
            await db.servers.update(newId, {
                name: `Server #${newId}`
            });

            router.push(`/servers/${newId}`);
        } else {
            router.push(`/servers/${existingServer.id}`);
        }
    }

    function handleAddressChange(event: React.ChangeEvent<HTMLInputElement>, callback: (value: React.ChangeEvent<HTMLInputElement>) => void) {
        try {
            const address = new URL(event.target.value);

            setBlockSubmit(false);
            setHttpsWarning(address.protocol !== "http:");
        } catch {
            setBlockSubmit(true);
            setHttpsWarning(false);
        }

        callback(event);
    }

    return (
        <>
            {showHttpsWarning && (<>
                    <div></div>
                    <Alert variant="blank" className="text-yellow-500 border-yellow-500">
                        <ShieldAlert className="h-5 w-5 text-yellow-500"/>
                        <AlertTitle>HTTPS Warning</AlertTitle>
                        <AlertDescription>
                            AimeNet doesn&apos;t support HTTPS out-the-box.
                            If you&apos;re using HTTPS, ensure a reverse-proxy or <Link target="_blank"
                                                                                        className="underline"
                                                                                        href="https://learn.microsoft.com/en-us/aspnet/core/fundamentals/servers/httpsys">
                            HTTP.SYS <SquareArrowOutUpRight className="inline h-3 w-3"/>
                        </Link> has been configured and a valid, trusted SSL certificate has been configured.
                        </AlertDescription>
                    </Alert>
                </>
            )}

            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="flex gap-3 items-start">
                    <FormField
                        control={form.control}
                        name="address"
                        render={({field}) => (
                            <FormItem className="flex-grow">
                                <FormControl>
                                    <Input {...field}
                                           placeholder="Server Address (http://192.168.1.1:6070)"
                                           onChange={e => handleAddressChange(e, field.onChange)}/>
                                </FormControl>
                                <FormMessage/>
                            </FormItem>
                        )}
                    />
                    <Button type="submit" disabled={blockSubmit} variant="outline" size="icon"
                            className="flex-shrink-0">
                        <Plus className="h-4 w-4"/>
                    </Button>
                </form>
            </Form>
        </>
    );
}

export default function ServerListingPage() {
    const servers = useLiveQuery(() => db.servers.toArray());
    const router = useRouter();

    return (
        <main className="flex flex-col gap-5 container min-h-screen py-10">
            <div className="flex items-center gap-1">
                <h2 className="text-4xl font-bold select-none flex-grow">Servers</h2>
                <Button variant="ghost" size={"default"} onClick={() => router.push('/cards')}>
                    <WalletCards className="h-4 w-4 sm:mr-2"/>
                    <span className="hidden sm:block">Manage Cards</span>
                </Button>
            </div>
            <Separator/>

            <div className="flex flex-col gap-4 w-full flex-grow">
                <ServerList servers={servers}/>
            </div>

            <Footer/>
        </main>
    );
}